Skip to main content

​
Prerequisites

Before setting up the MCP server, you’ll need a Ditto API token. You can generate one from your developer integrations settings. The Ditto MCP server uses Streamable HTTP transport. Any MCP client that supports Streamable HTTP or SSE can connect to it directly.

​
Figma Make

1

Open connector settings

From the chat box, select Add context, hover over Connectors, then choose Manage.
2

Create a new connector

Navigate to the Created by you tab and click Create. Enter “Ditto” as the connector name.
3

Set the MCP server URL

Enter the following URL and click Create:
https://api.dittowords.com/v2/mcp
4

Configure authentication

Click Advanced settings and add a custom request header:
  • Header name: Authorization
  • Header value: token <your-api-token>
5

Connect and enable tools

Click Connect on the connector. Review the available tools and enable the ones you’d like to use.

​
Claude Code

Claude Code supports remote MCP servers natively.

​
Local scope (default)

Adds the Ditto MCP server for your own use in the current project. This is private to you and won’t be visible to other team members. 
claude mcp add --transport http ditto https://api.dittowords.com/v2/mcp --header "Authorization: token <your-api-token>"

​
Project scope

Shares the Ditto MCP configuration with your entire team via version control. This creates a .mcp.json file at your project root that can be checked into source control. 
claude mcp add --scope project --transport http ditto https://api.dittowords.com/v2/mcp --header 'Authorization: token ${DITTO_API_TOKEN}'
Or manually add a .mcp.json file to your project root: 
{
  "mcpServers": {
    "ditto": {
      "type": "http",
      "url": "https://api.dittowords.com/v2/mcp",
      "headers": {
        "Authorization": "token ${DITTO_API_TOKEN}"
      }
    }
  }
}
Each team member will need to set the DITTO_API_TOKEN environment variable with their own API token. Claude Code will prompt for approval the first time a project-scoped server is used.

​
User scope

Adds the Ditto MCP server across all of your projects. This is private to you but available everywhere. 
claude mcp add --scope user --transport http ditto https://api.dittowords.com/v2/mcp --header "Authorization: token <your-api-token>"
After adding with any scope, restart any active instances of Claude Code. You should see the Ditto MCP tools available in your tool list.

​
Cursor, VS Code, Windsurf

These clients support remote MCP servers with Streamable HTTP natively.
1

Open MCP settings

  • Cursor: Go to Cursor Settings > Tools & MCP and click + Add new MCP server.
  • VS Code: Open your user or workspace mcp.json and add to servers.
  • Windsurf: Open your MCP configuration file.
2

Add the server configuration

Cursor (~/.cursor/mcp.json or workspace .cursor/mcp.json):
{
  "mcpServers": {
    "ditto": {
      "url": "https://api.dittowords.com/v2/mcp",
      "headers": {
        "Authorization": "token <your-api-token>"
      }
    }
  }
}
VS Code (~/.vscode/mcp.json or workspace .vscode/mcp.json):
{
  "servers": {
    "ditto": {
      "type": "http",
      "url": "https://api.dittowords.com/v2/mcp",
      "headers": {
        "Authorization": "token <your-api-token>"
      }
    }
  }
}
Windsurf (MCP configuration file):
{
  "mcpServers": {
    "ditto": {
      "serverUrl": "https://api.dittowords.com/v2/mcp",
      "headers": {
        "Authorization": "token <your-api-token>"
      }
    }
  }
}
3

Verify the connection

After saving, you should see a green status indicator next to the Ditto server in your MCP settings.

​
Other clients

If your MCP client doesn’t support Streamable HTTP or SSE natively, use the mcp-remote package as a bridge. This also applies if you’re on Cursor 2.6.x, which has a known bug where the V2 MCP handler doesn’t fall back from Streamable HTTP to SSE — it retries indefinitely instead of connecting. Use the mcp-remote config below as a workaround until the bug is fixed. 
{
  "mcpServers": {
    "ditto": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-remote",
        "https://api.dittowords.com/v2/mcp",
        "--header",
        "Authorization: token <your-api-token>"
      ]
    }
  }
}