decoupled.io
← All Articles
Tutorials

How to Connect Lovable or Bolt.new to Drupal in 5 Minutes

Jay Callicott··5 min read

How to Connect Lovable or Bolt.new to Drupal in 5 Minutes

You've built a great-looking app with Lovable or Bolt.new. The design is polished, the animations are smooth, and it looks like a real product. There's just one problem: all your content is stuck in code.

Want to change a menu price? Open the IDE. Need a client to update their own bio? That's a code change. Want to swap out a hero image? Hope you know where it lives in the codebase.

This guide shows you how to add a real content management system so that anyone — you, a client, a marketing team — can update content from a simple admin panel, without ever touching code.

What You'll Need

  1. A Decoupled.io account (currently in beta)
  2. Your API token (grab it from Settings → API Tokens in the dashboard)
  3. MCP configured on your AI tool

The Big Picture

Here's what we're doing: connecting your AI-built frontend to a Drupal CMS backend. After setup, your app pulls content from the CMS instead of hardcoded arrays. When someone updates content in the admin panel, it shows up in the app automatically.

Your Lovable/Bolt App          Drupal CMS (managed by Decoupled.io)
┌──────────────────┐           ┌──────────────────┐
│  React frontend  │ ◄──API──► │  Content admin    │
│  (your code)     │           │  (no code needed) │
└──────────────────┘           └──────────────────┘
  You keep your UI               Anyone can edit content

Step 1: Add the MCP Connection

In your AI tool's MCP settings, add the Decoupled server. In Lovable, this is in the MCP configuration panel. You'll need the server URL and your token:

  • URL: https://mcp.decoupled.io
  • Authorization: Bearer dc_tok_YOUR_TOKEN_HERE

That's it — your AI assistant now has access to 25+ tools for managing your CMS.

Step 2: Tell the AI What Content You Need

This is the fun part. Just describe your content in plain English:

"Create a Drupal space called 'My Coffee Shop'. I need a menu with categories, prices, descriptions, and photos. Also create a few pages for About Us and Contact. Add some sample menu items so I can see how it works."

The AI will:

  • Spin up a new Drupal CMS instance for you (~30 seconds)
  • Create the content structure (menu items, pages, etc.)
  • Populate it with sample data

You don't need to know anything about databases, content types, or field definitions. The AI handles all of that.

Step 3: Connect It to Your Project

Now ask the AI to wire it up:

"Connect this Drupal space to my project using integrate_frontend with react-vite."

The AI generates all the code your app needs to talk to the CMS — API client, data hooks, TypeScript types, credentials — and drops the files into your project. The generated code handles all the authentication and data fetching behind the scenes.

What you get:

File What It Does
src/lib/drupal.ts Talks to the CMS API (you don't need to touch this)
src/lib/drupal-types.ts TypeScript types matching your content structure
src/hooks/useDrupalContent.ts Simple hooks like useMenuItemList() to fetch data
.env.local Your credentials (already filled in)

Step 4: Swap Out Hardcoded Data

The AI can help with this part too. Ask it to replace your static data with the generated hooks. For example, a component that used to have menu items hardcoded in an array will now pull them from the CMS:

// Before: data stuck in code
const menuItems = [
  { name: "Espresso", price: "$3.50" },
  { name: "Latte", price: "$5.00" },
];

// After: data from the CMS
const { data, isLoading } = useMenuItemList();

The hook handles loading states, caching, and errors automatically. And since Lovable and Bolt.new projects already include the data-fetching library (React Query), there's nothing new to install.

Step 5: Manage Your Content

Now the magic: you and anyone on your team can manage content without code.

Ask the AI:

"Give me a login link for my Coffee Shop space"

You'll get a link that opens the Drupal admin panel — a visual interface where you can:

  • Add, edit, and delete content
  • Upload images and manage media
  • Preview changes before publishing
  • Set up multiple users with different permissions

Every change shows up in your app automatically. No redeployment needed.

What You Can Do From Here

  • Hand off content management — give clients or team members access to the admin panel
  • Add new content types — just tell the AI "I need a team members section with photos and bios"
  • Set up staging environments — test content changes before they go live
  • Add a visual page builder — enable drag-and-drop editing with the Puck editor
  • Scale your app — the CMS handles caching, CDN, and API performance

You've gone from "prototype with hardcoded data" to "production app with a real CMS" — without writing any backend code.

Get started at decoupled.io/docs/getting-started. Decoupled.io is currently in beta — sign up to try it out.