MCP Server · 99 tools · No waitlist
The AI email builder MCP server your agents can use today.
Connect Claude Code, Cursor, OpenCode, any MCP-compatible client, or your own AI backend to Dragble's MCP server. Dragble provides the connection layer and 99 registered tools; you choose the AI orchestration while the live editor owns design execution.
How it works
From zero to AI-built email template in under two minutes.
MCP—the Model Context Protocol—is an open standard that lets AI agents safely call tools in any application that implements it. Dragble's MCP Server exposes 99 editor tools over a single Streamable HTTP endpoint. Dragble provides the tools connection layer, not a hosted AI backend; connect an MCP client or your own AI backend to build, brand, audit, and export templates.
1. Connect a client or backend
Add Dragble to Claude Code, Cursor, OpenCode, or any MCP client with a client pairing key, or call the MCP server from your own backend with a backend key. No custom editor API wrapper to maintain.
2. Your AI discovers 99 tools
Auto-discovery exposes every editor capability the moment your agent connects. Build from prompt, apply brand systems, run quality audits, rollback to checkpoints—your AI sees exactly what it can do with no prompt engineering required.
3. AI builds in the live editor
Tool calls mutate the canvas while your user watches in real time. Your own AI backend can run the LLM loop, but MCP routes every design action to the connected editor.
Two live editor paths
Same editor tools. Two ways to connect the agent.
Pair a developer AI client with a code and client key, or let your backend drive the live editor session directly with the backend key.
AI drives the canvas. Your user watches.
Open the Dragble editor, then pair from an MCP desktop or CLI client using a client pairing key. Tool calls apply in real time, making this ideal when the end user stays in the loop.
- Changes appear on the canvas instantly
- Pair from an MCP client with mcp_client_key
- User can take over and continue editing
Your backend drives the editor.
Your own AI backend connects with the backend MCP key, receives the live editor sessionId from your frontend, and routes every tool call to the connected canvas.
- No pairing code for end users
- Backend owns prompts, auth, and model keys
- Works with your own AI provider and auth
Connect in one line
Works with MCP clients and your backend.
Paste the config with your client pairing key into an MCP-compatible desktop or CLI client, or connect your own AI backend with the backend key to all 99 Dragble tools at https://mcp.dragble.com/mcp. Open the editor and pair from a client, or have your backend use the frontend-created sessionId so changes appear on the canvas in real time.
Run in your terminal
claude mcp add dragble --transport http \ --url https://mcp.dragble.com/mcp \ --header "X-API-Key: db_mcp_client_..."
Need help? See the MCP client setup docs
99 registered tools
From a single prompt to a shipped email template.
99 registered tools give MCP clients or your own AI backend live editor control. Tool calls update the canvas in front of a user, with every step one tool call away.
Build from prompt
Generate complete templates from a single prompt.
Design system control
Apply your palette and typography across an entire template.
Section presets
Pull from a library of hero, value-prop, CTA, and footer sections.
Smart editing
Replace text, swap images, restyle blocks in one tool call.
Built-in quality checks
Run audits for contrast, hierarchy, spacing, and accessibility.
History + rollback
Save checkpoints, undo, redo, diff between versions.
Forms and carousels available in web mode; email mode focuses on email-safe blocks for maximum client compatibility.
Customer-owned AI backend
Orchestrate MCP from your own AI backend.
Dragble provides the MCP server and 99 editor tools. Your own AI backend chooses the provider, prompts, auth, and workflow—then drives the user's live editor session through MCP.
- Your AI provider key—OpenAI, Anthropic, or Google. Never locked in.
- Your backend orchestrates a live editor session through MCP.
- Your backend owns auth, persistence, prompt flow, format, and delivery.
import { Client } from "@modelcontextprotocol/sdk/client/index.js";
import { StreamableHTTPClientTransport } from "@modelcontextprotocol/sdk/client/streamableHttp.js";
const client = new Client({ name: "my-app", version: "1.0.0" }, { capabilities: {} });
await client.connect(new StreamableHTTPClientTransport(
new URL("https://mcp.dragble.com/mcp"),
{ requestInit: { headers: { "X-API-Key": process.env.DRAGBLE_MCP_KEY } } },
));
const sessionId = process.env.DRAGBLE_SESSION_ID;
await client.callTool({ name: "add_row", arguments: { sessionId, cells: [50, 50] } });Customer-owned backend via Node or Python. Python example in the docs.
Real workflows
What your AI agent ships in minutes.
Three common workflows developers run the first day they connect Dragble to an MCP client or their own AI backend.
Prompt to production template
Type “a SaaS welcome email for a project management app, two-column layout, dark header”—your agent calls build, brand, and export tools in sequence and hands you production-ready HTML. What used to take an hour takes under a minute.
Rebrand a full template in one shot
Load an existing template, say “apply our brand—primary #1A56DB, font Inter, all CTAs rounded”. Your agent applies palette, typography, and button styles across every section. What used to be an hour of manual edits is one tool-call chain.
Backend-managed live campaigns
Let your own AI backend drive a connected editor session for campaigns, customers, or product lines. The backend owns prompts and model keys while users keep a live canvas they can review and edit.
START BUILDING WITH AI
Connect your AI agent in minutes.
Get your backend and client MCP keys, connect Claude Code, Cursor, any MCP client, or your own AI backend, then route tool calls to a live editor. Dragble provides the MCP tools layer; you control the AI.
Free plan available · 14-day trial on paid plans