MCP Server

Introduction

The Dragble MCP Server allows you to connect your AI agents and clients with the Dragble editor SDK. It makes key functionality of the Dragble editor — the visual builder, templates, and export APIs — accessible to AI agents, opening up new ways to bring agentic design directly into your application.

The MCP server uses the open Model Context Protocol standard, which means it works with any LLM provider that supports MCP — including Claude, GPT, Gemini, and open-source models.

:::note Important

• MCP design tools require a live Dragble editor session. Tool calls route to that editor over the MCP WebSocket bridge.
• Configuring MCP connects the AI client to Dragble tools with mcp_client_key. For third-party clients, open the editor, call startMCPPairing, then type a prompt like Connect with Dragble MCP using pairing code 47289153 in the AI chat. Backend-managed live flows use joinMCP and the frontend-created sessionId directly with your backend mcp_key.
• The MCP server exposes Dragble editor tools to AI agents. Providing the agent itself (the AI client or your own AI backend) is the responsibility of your application.

:::

What can you do with the Dragble MCP Server?

The Dragble MCP server empowers your product team to seamlessly and quickly integrate AI-driven design processes into your Dragble-powered application. This lets your end users leverage AI in creating, editing, and optimizing their email designs — reducing friction between idea and execution.

By replacing expensive custom integrations with a universal standard for AI connectivity, the Dragble MCP server delivers:

1. Drastic reduction in time-to-market — Deploy AI-powered features in hours instead of weeks or months for your embedded email builder.
2. A future-proof AI strategy — MCP decouples your application and data from the specific AI model you are using, so you can swap AI providers without rebuilding infrastructure.
3. Magic end-user experience — Deep integration supercharges AI capabilities, with your users achieving professional results in seconds with zero learning curve.

Use Cases

Prompt to design

Create complete, high-quality email designs from scratch with a single natural-language prompt. The AI agent uses the MCP server's tools to lay out sections, add content blocks, apply styling, and produce a production-ready template.

Start or join an MCP session from the live editor first, then pass that sessionId to your AI client or backend. Every design tool call uses that sessionId and applies directly to the editor canvas.

Instant rebranding

Edit existing email designs by applying a different brand identity or color palette via AI. Pass a brand guide or color scheme to the agent and let it update every element in the template automatically.

Content iteration

Generate content variations — different headlines, body copy, CTAs — while maintaining your core brand elements. The AI agent can swap text, adjust tone, and create A/B test variants without touching the layout.

MCP Server & AI Agent Responsibilities

In the MCP architecture, responsibilities are split to ensure that AI models can access tools and data without needing custom code for every single integration.

The Dragble MCP Server acts as the "Hands" — it exposes tools that create and edit emails in the Dragble editor. The AI Agent acts as the "Brain" — it knows what the user wants and which tools to call to achieve that goal.

	MCP Server	AI Agent
Primary role	The connector that exposes tools, resources, and prompts from the Dragble editor	The host application (your AI agent) that manages the user session and the LLM
Initiation	Waits for requests. Responds with a list of available tools, resources, and prompts	Starts the connection. Discovers what the server is capable of via a handshake
Logic execution	Executes the work — performs the actual editor operation, export, or template manipulation	Orchestrates the workflow — decides when to call a tool based on the model's intent
Capabilities	Provides Tools (actions) and Resources (data) for the Dragble editor	Provides Sampling (allows server to use the host's LLM) and Roots (defines scope boundaries)
Security	Defines scope — implements access logic and data filtering for editor operations	Enforces permissions — asks the user for consent before a tool runs or data is accessed
Model awareness	Model-agnostic — works with any LLM that supports MCP (Claude, GPT, Gemini, etc.)	Knows which LLM is being used and formats data for its context window

---

Next steps

• Read the MCP Overview for the full feature reference
• Use the backend-managed live editor architecture for product AI copilots
• Set up the MCP credentials you need for backend orchestration and AI-client pairing
• Walk through the AI client setup for Claude Code, OpenCode, Cursor, Codex, and more
• Browse the template library for example designs

Questions? Reach out to hello@dragble.com.