> ## Documentation Index
> Fetch the complete documentation index at: https://docs.tagada.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Studio MCP Server

> Let AI agents edit your Tagada Studio templates in real-time

# Studio MCP Server

The **Tagada Studio MCP Server** (`@tagadapay/studio-mcp`) is a [Model Context Protocol](https://modelcontextprotocol.io) server that connects AI agents — Claude, Cursor, Windsurf, or any MCP-compatible tool — to your **live Tagada Studio editor** via WebSocket.

You open Studio in your browser, the agent connects through the MCP server, and you **see changes happen on the canvas in real-time** as the agent works. No deployment, no API keys — just a direct bridge between the AI and your editor.

## How it works

```
AI Agent  →  MCP Server (local)  →  WebSocket  →  Studio Editor (browser)
                                                       ↓
                                                  Live canvas update
```

<Steps>
  <Step title="Start the MCP server">
    Run the server locally (or let Cursor start it automatically).
  </Step>

  <Step title="Open Tagada Studio">
    Open your template in Studio — embedded in the CRM or standalone. It auto-connects to the MCP server.
  </Step>

  <Step title="Talk to the agent">
    Ask the AI to change colors, add sections, update text. You see every change live on the canvas.
  </Step>

  <Step title="Save when you're happy">
    Hit Save in Studio when you're done. The agent never deploys — you're always in control.
  </Step>
</Steps>

## What can agents do?

* **Read the live template** — browse pages, inspect nodes, view the tree structure
* **Edit nodes in real-time** — update props, colors, text, layout — canvas updates instantly
* **Add & remove components** — insert headings, buttons, sections, forms
* **Move & reorder** — rearrange the layout by moving nodes between slots
* **Manage tokens** — update translations, design tokens, copy text
* **Discover schema** — query all 49+ available component types and their props

## What agents can't do

* **Deploy** — you save from Studio when ready
* **Edit funnel routing** — only template/page content, not the funnel graph
* **Access other stores** — the bridge connects to whichever Studio instance is open

## Works everywhere

The MCP server works with Studio in **both modes** — and supports **multiple clients simultaneously**:

| Mode           | Description                                           |
| -------------- | ----------------------------------------------------- |
| **Embedded**   | Studio loaded inside the TagadaPay dashboard (iframe) |
| **Standalone** | Studio running on `studio.tagadapay.com`              |

Studio auto-connects to the MCP server on load. No configuration needed. If you have both modes open at the same time, changes are broadcast to all connected clients.

## Compatible with any MCP client

Supports both **stdio** transport (Cursor, Claude Desktop, Windsurf) and **SSE** transport (Claude Code, custom clients). See the [Quick Start](/developer-tools/studio-mcp/quick-start) for setup instructions for each client.

## Next steps

<CardGroup cols={2}>
  <Card title="Quick Start" icon="rocket" href="/developer-tools/studio-mcp/quick-start">
    Up and running in under 2 minutes
  </Card>

  <Card title="Tools Reference" icon="wrench" href="/developer-tools/studio-mcp/tools-reference">
    Full list of available tools
  </Card>

  <Card title="Examples" icon="lightbulb" href="/developer-tools/studio-mcp/examples">
    Example prompts and workflows
  </Card>
</CardGroup>