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

# Installation

> Install and configure the Ditto MCP server for Claude Code, Cursor, VS Code, Windsurf, Figma Make, and other MCP clients

## Prerequisites

Before setting up the MCP server, you'll need a Ditto API token. You can generate one from your [developer integrations settings](https://app.dittowords.com/developers/api-keys).

The Ditto MCP server uses Streamable HTTP transport. Any MCP client that supports Streamable HTTP or SSE can connect to it directly.

## Figma Make

<Steps>
  <Step title="Open connector settings">
    From the chat box, select **Add context**, hover over **Connectors**, then choose **Manage**.
  </Step>

  <Step title="Create a new connector">
    Navigate to the **Created by you** tab and click **Create**. Enter "Ditto" as the connector name.
  </Step>

  <Step title="Set the MCP server URL">
    Enter the following URL and click **Create**:

    ```
    https://api.dittowords.com/v2/mcp
    ```
  </Step>

  <Step title="Configure authentication">
    Click **Advanced settings** and add a custom request header:

    * **Header name**: `Authorization`
    * **Header value**: `token <your-api-token>`
  </Step>

  <Step title="Connect and enable tools">
    Click **Connect** on the connector. Review the available tools and enable the ones you'd like to use.
  </Step>
</Steps>

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

```bash theme={null}
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.

```bash theme={null}
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:

```json theme={null}
{
  "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.

```bash theme={null}
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.

<Steps>
  <Step title="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.
  </Step>

  <Step title="Add the server configuration">
    **Cursor** (`~/.cursor/mcp.json` or workspace `.cursor/mcp.json`):

    ```json theme={null}
    {
      "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`):

    ```json theme={null}
    {
      "servers": {
        "ditto": {
          "type": "http",
          "url": "https://api.dittowords.com/v2/mcp",
          "headers": {
            "Authorization": "token <your-api-token>"
          }
        }
      }
    }
    ```

    **Windsurf** (MCP configuration file):

    ```json theme={null}
    {
      "mcpServers": {
        "ditto": {
          "serverUrl": "https://api.dittowords.com/v2/mcp",
          "headers": {
            "Authorization": "token <your-api-token>"
          }
        }
      }
    }
    ```
  </Step>

  <Step title="Verify the connection">
    After saving, you should see a green status indicator next to the Ditto server in your MCP settings.
  </Step>
</Steps>

## Other clients

If your MCP client doesn't support Streamable HTTP or SSE natively, use the [`mcp-remote`](https://github.com/geelen/mcp-remote) package as a bridge.

This also applies if you're on **Cursor 2.6.x**, which has a [known bug](https://forum.cursor.com/t/cursor-fails-to-fall-back-from-streamable-http-to-sse-transport-for-remote-mcp-servers/154390) 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.

<Accordion title="Configuration using mcp-remote">
  ```json theme={null}
  {
    "mcpServers": {
      "ditto": {
        "command": "npx",
        "args": [
          "-y",
          "mcp-remote",
          "https://api.dittowords.com/v2/mcp",
          "--header",
          "Authorization: token <your-api-token>"
        ]
      }
    }
  }
  ```
</Accordion>