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.

​
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 don’t yet support remote MCP servers natively. Use the mcp-remote package as a bridge.
1

Open MCP settings

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

Add the server configuration

Add the following configuration:
{
  "mcpServers": {
    "ditto": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-remote",
        "https://api.dittowords.com/v2/mcp",
        "--header",
        "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.