The Missing CMS for Your Windsurf App

You're building fast with Windsurf. The AI writes your components, handles your logic, and ships features in minutes. But your app still has hardcoded content — and your team needs a way to manage it without touching code.

The Content Problem

Windsurf by Codeium is an AI-powered IDE that accelerates every part of development. But no matter how fast the AI writes code, apps still need a content backend:

• Content lives in source code — Headlines, descriptions, and copy are scattered across components
• No editing interface — Content updates require a developer to change code and deploy
• No media pipeline — Images are static files, not an optimized asset management system
• No content modeling — Structured content with relationships requires custom database work
• No publishing workflow — No drafts, no revisions, no approval chains
• No localization — Multi-language support means duplicating strings manually

Windsurf + Decoupled.io MCP Tools

Decoupled.io's MCP tools work inside Windsurf. Your AI agent doesn't just write frontend code — it manages your entire CMS backend too.

MCP Integration in Your IDE

With our MCP tools configured in Windsurf, the AI agent can create content types, import content, generate your typed client, and query your CMS — all without leaving the editor:

You: "Set up a blog with title, body, author, category, and featured image.
     Import 5 sample posts and give me a typed client to fetch them."

Windsurf: Created blog_post content type with 5 fields. Imported 5 sample
          posts. Synced schema — your typed client is ready at ./schema/client.ts
          with full autocomplete for BlogPost entries.

Typed Client for Type Safety

The decoupled-client gives you full TypeScript types generated from your actual Drupal schema. Every field, every relationship, every content type — fully typed with autocomplete in Windsurf:

import { createClient } from 'decoupled-client'
import { createTypedClient } from './schema/client'

const base = createClient({
  baseUrl: process.env.NEXT_PUBLIC_DRUPAL_BASE_URL!,
  clientId: process.env.DRUPAL_CLIENT_ID!,
  clientSecret: process.env.DRUPAL_CLIENT_SECRET!,
})

const client = createTypedClient(base)

// Full autocomplete in Windsurf — types match your Drupal schema
const posts = await client.getEntries('NodeBlogPost', { first: 10 })
const page = await client.getEntryByPath('/about')

Visual Page Builder

Your marketing team gets a drag-and-drop page builder. They create and update landing pages visually while you focus on application logic. No code changes, no deploys, no tickets.

Quick Start

Install the client and sync your schema from within Windsurf:

npm install decoupled-client
npx decoupled-cli schema sync

The schema sync generates TypeScript types, queries, and a createTypedClient() factory from your Drupal content model. Re-run it after any content model change.

import { createClient } from 'decoupled-client'
import { createTypedClient } from './schema/client'

const base = createClient({
  baseUrl: process.env.NEXT_PUBLIC_DRUPAL_BASE_URL!,
  clientId: process.env.DRUPAL_CLIENT_ID!,
  clientSecret: process.env.DRUPAL_CLIENT_SECRET!,
})

const client = createTypedClient(base)

// Fetch a specific content entry by path
const landing = await client.getEntryByPath('/services')

Key Features

Get Started

Create your Drupal space in seconds. Free tier included — no credit card required.

Get Started Free → | View Pricing →