> ## 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.

# Quick Start

> Connect an AI agent to your live Studio editor in under 2 minutes

# Quick Start

## Prerequisites

* **Node.js 18+** installed
* **Tagada Studio** open in your browser (CRM embedded or standalone)

<Note>
  No API key or store ID is needed. The MCP server connects directly to your open Studio editor via WebSocket — it doesn't call any TagadaPay API.
</Note>

## Setup for Cursor

Add this to `.cursor/mcp.json` in your project (or in your global Cursor settings):

```json theme={null}
{
  "mcpServers": {
    "tagada-studio": {
      "command": "npx",
      "args": ["-y", "@tagadapay/studio-mcp", "--stdio"]
    }
  }
}
```

Cursor will start the MCP server automatically when you open the project.

## Setup for Claude Desktop

Add this to your Claude Desktop config:

* **macOS:** `~/Library/Application Support/Claude/claude_desktop_config.json`
* **Windows:** `%APPDATA%\Claude\claude_desktop_config.json`

```json theme={null}
{
  "mcpServers": {
    "tagada-studio": {
      "command": "npx",
      "args": ["-y", "@tagadapay/studio-mcp", "--stdio"]
    }
  }
}
```

Restart Claude Desktop after saving.

## Setup for Claude Code

Add the MCP server with the SSE transport:

```bash theme={null}
claude mcp add --transport sse tagada-studio http://localhost:14333/sse
```

Then start the server manually (or in a separate terminal):

```bash theme={null}
npx @tagadapay/studio-mcp
```

## Setup for Windsurf

Add this to your Windsurf MCP config:

```json theme={null}
{
  "mcpServers": {
    "tagada-studio": {
      "command": "npx",
      "args": ["-y", "@tagadapay/studio-mcp", "--stdio"]
    }
  }
}
```

## Manual start (any MCP client)

If your tool doesn't auto-start MCP servers, run it manually:

```bash theme={null}
npx @tagadapay/studio-mcp
```

The server starts on port `14333` by default with an SSE endpoint at `/sse`. Configure your MCP client to connect to `http://localhost:14333/sse`.

## Verify the connection

### 1. Check the MCP server

Visit the `/health` endpoint in your browser (e.g., `http://localhost:14333/health`). You should see:

```json theme={null}
{
  "status": "ok",
  "server": "tagada-studio-mcp",
  "studioConnected": true
}
```

If `studioConnected` is `false`, make sure Tagada Studio is open in your browser.

### 2. Check Studio

When connected, you'll see a green **Agent** badge in the Studio toolbar:

<Frame>
  <div style={{ display: 'flex', alignItems: 'center', gap: '6px', padding: '4px 8px', backgroundColor: '#ecfdf5', borderRadius: '6px', fontSize: '11px', fontWeight: 600, color: '#047857' }}>
    <div style={{ width: '6px', height: '6px', borderRadius: '50%', backgroundColor: '#10b981' }} />

    Agent
  </div>
</Frame>

## Your first edit

With both sides connected, ask the agent:

> "Show me the page structure"

The agent will call `view_tree` and display the node hierarchy. Then try:

> "Change the main heading to 'Hello World'"

You'll see the heading update **live** on the Studio canvas.

## Multi-client support

The MCP server supports **multiple Studio clients** connected at the same time. If you have Studio open both in the CRM (embedded) and standalone, both will receive changes and stay in sync.

## Options

| Option          | Default | Description                                                |
| --------------- | ------- | ---------------------------------------------------------- |
| `--stdio`       | —       | Use stdio transport (for Cursor, Claude Desktop, Windsurf) |
| `--port <port>` | `14333` | HTTP/WebSocket port                                        |
| `--help`        | —       | Show help                                                  |

## Custom WebSocket URL

By default, Studio connects to the MCP server running on your machine. To use a different URL (e.g., when using a tunnel), add `?agentWs=ws://your-url/ws` to the Studio URL.

## Next steps

* [Tools Reference](/developer-tools/studio-mcp/tools-reference) — All available tools and parameters
* [Examples](/developer-tools/studio-mcp/examples) — Real prompts and workflows to try