Skip to main content

​
Quick Start

​
Prerequisites

  • Node.js 18+ installed
  • Tagada Studio open in your browser (CRM embedded or standalone)
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.

​
Setup for Cursor

Add this to .cursor/mcp.json in your project (or in your global Cursor settings):
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
Restart Claude Desktop after saving.

​
Setup for Claude Code

Add the MCP server with the SSE transport:
Then start the server manually (or in a separate terminal):

​
Setup for Windsurf

Add this to your Windsurf MCP config:

​
Manual start (any MCP client)

If your tool doesn’t auto-start MCP servers, run it manually:
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:
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:
Agent

​
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

​
Long-running tools and client timeouts

Most tools answer in milliseconds, but three genuinely take longer: fetch_url (a headless browser visits the page — up to 90s), generate_images (5-15s per image) and take_screenshot on a heavy page. The server allows a tool 120s. Most MCP client SDKs default to a 60s budget per call, which is shorter than that — so a client can give up on a call that is still working. Two things to do:
  • Raise the per-call timeout above 120s in your client. In the TypeScript SDK: client.callTool({ name, arguments }, undefined, { timeout: 180_000 }).
  • Pass a progress token if your client supports it. The server sends a progress notification every 10s while a long tool runs, and a client configured with resetTimeoutOnProgress keeps the call alive on its own.
If an extraction still times out, retry it cheaper — captureScreenshot: false and viewports: ["desktop"] skip the expensive part and still return the structure, studioTokens and nestedStructure.
Studio captures one screenshot at a time. A second take_screenshot while one is still running is refused rather than queued, so wait for the first to return.

​
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