decoupled.io

AI App Builder Integration

Connect Lovable, Bolt.new, Base44, and other AI-powered app builders to a production-ready Drupal CMS — without writing backend code or learning PHP.

Why Use Decoupled with AI Builders?

AI app builders like Lovable and Bolt.new are excellent at generating frontend code. But they produce static, hardcoded data. The moment you need dynamic content — a menu that changes, blog posts that update, images managed by a team — you need a CMS backend.

Decoupled.io solves this with:

  • Zero backend setup — Drupal spaces are provisioned automatically
  • One-command integration — the integrate_frontend MCP tool generates everything you need
  • No new dependencies — works with React Query (already in Lovable/Bolt projects)
  • Real credentials — returns actual OAuth tokens and API URLs, not placeholders

How It Works

Step 1: Configure MCP

Add the Decoupled MCP server to your AI tool. In Lovable, Bolt.new, or any MCP-compatible client, configure:

  • URL: https://mcp.decoupled.io
  • Transport: HTTP
  • Header: Authorization: Bearer dc_tok_YOUR_TOKEN

Get your token at dashboard.decoupled.io → Settings → API Tokens.

Step 2: Ask the AI

Tell your AI assistant what content you need:

"Create a Drupal space called 'My Restaurant' and import a menu with categories, prices, descriptions, and photos. Then use integrate_frontend with react-vite to connect it to this project."

Step 3: The AI Does the Rest

Behind the scenes, the AI calls three MCP tools:

  1. create_space — provisions a Drupal instance (~30 seconds)
  2. import_content — creates content types and imports sample data
  3. integrate_frontend — generates framework-specific integration code

The integrate_frontend tool returns:

File What It Does
src/lib/drupal.ts OAuth token caching + JSON:API client
src/lib/drupal-types.ts TypeScript interfaces from your content model
src/hooks/useDrupalContent.ts React Query hooks for each content type
src/components/ExampleList.tsx Example component showing the pattern
.env.local Real credentials (not placeholders)

Step 4: Replace Hardcoded Data

Swap static arrays in your components with the generated hooks:

// Before (hardcoded)
const menuItems = [
  { name: "Espresso", price: "$3.50" },
  { name: "Latte", price: "$5.00" },
];

// After (from Drupal)
import { useMenuItemList } from '../hooks/useDrupalContent';

function Menu() {
  const { data, isLoading } = useMenuItemList({ limit: 20 });

  if (isLoading) return <div>Loading...</div>;

  return data?.items.map(item => (
    <div key={item.id}>
      <h3>{item.title}</h3>
      <p>{item.fieldPrice}</p>
    </div>
  ));
}

Supported Frameworks

Builder Framework Integration Method
Lovable React + Vite react-vite — JSON:API + React Query
Bolt.new React + Vite react-vite — JSON:API + React Query
Base44 React + Vite react-vite — JSON:API + React Query
V0.dev Next.js nextjs — GraphQL + Apollo Client
Custom Next.js Next.js nextjs — GraphQL + Apollo Client
Remix Remix remix — JSON:API + loaders

Managing Content After Launch

Once integrated, you manage content through the Drupal admin panel:

  • Login link: Ask your AI for get_login_link or visit your space URL
  • Add content: Use the Drupal admin to create, edit, and publish
  • Import more: Use import_content to add new content types or bulk data
  • API updates: Content changes are available via the API immediately

Example: Coffee Shop App

Here's a complete workflow for connecting a Lovable coffee shop template to Drupal:

"Create a space called 'Cafe Bliss'. Import a content model with menu_item (category, price, description, image) and page (body, hero_image, subtitle) types. Add 8 sample menu items across Espresso, Brewed Coffee, and Food categories, plus an About Us page. Then use integrate_frontend with react-vite."

This single prompt creates a full CMS backend with structured content and returns production-ready code for your frontend.

Next Steps