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

# Connect DesignJS to Cursor

> Register DesignJS as an MCP server in Cursor using designjs init auto-detection or a manual .cursor/mcp.json edit, then verify in Cursor's MCP panel.

Cursor supports MCP servers through a `.cursor/mcp.json` configuration file in your project. Once DesignJS is registered, Cursor's AI can call all DesignJS tools — reading the component tree and screenshots, inserting components, updating styles — directly from Cursor's chat and Composer interfaces.

## Prerequisites

Make sure DesignJS is running before you try to connect:

```bash theme={null}
pnpm dev
```

The canvas opens at `http://localhost:3000`. The WebSocket bridge listens on `127.0.0.1:29170` and must be reachable for MCP tool calls to succeed.

## Configure `.cursor/mcp.json`

Create or edit `.cursor/mcp.json` in your project root:

```json theme={null}
{
  "mcpServers": {
    "designjs": {
      "command": "npx",
      "args": ["-y", "@designjs/mcp-server"]
    }
  }
}
```

If `.cursor/mcp.json` already exists with other MCP server entries, add the `"designjs"` key inside the existing `"mcpServers"` object — do not replace the entire file.

<CodeGroup>
  ```json Merging with existing servers theme={null}
  {
    "mcpServers": {
      "some-other-server": {
        "command": "npx",
        "args": ["-y", "some-other-mcp"]
      },
      "designjs": {
        "command": "npx",
        "args": ["-y", "@designjs/mcp-server"]
      }
    }
  }
  ```
</CodeGroup>

## Verifying the connection

<Steps>
  <Step title="Open the MCP panel in Cursor">
    In Cursor, navigate to **Settings → MCP** (or use the command palette: `MCP: Show MCP Servers`). The panel lists all registered MCP servers and their connection status.
  </Step>

  <Step title="Check that designjs appears and is active">
    You should see `designjs` in the list with a green connected indicator. If it shows as disconnected or errored, make sure `pnpm dev` is running and the canvas bridge is up.
  </Step>

  <Step title="Test a tool call in Cursor chat">
    Open a Cursor chat window and ask: "Use the designjs ping tool to check if the canvas is connected." A successful response contains `{ pong: true }`. The bridge status dot in the DesignJS topbar also turns green to confirm the connection.
  </Step>
</Steps>

## Troubleshooting

<CardGroup cols={2}>
  <Card title="Server appears but shows disconnected" icon="triangle-alert">
    The MCP server process launched but could not reach the WebSocket bridge. Ensure the DesignJS dev server is running (`pnpm dev`) and that nothing is blocking `127.0.0.1:29170`.
  </Card>

  <Card title="designjs not listed in the MCP panel" icon="circle-x">
    Cursor has not loaded the config. Verify `.cursor/mcp.json` exists at the project root (not in a subdirectory) and click the reload button in the MCP settings panel.
  </Card>
</CardGroup>

<Tip>
  **Scaffolding a brand-new project?** `npm create designjs@latest my-app` drops `.mcp.json` (Claude Code's convention) in the new directory. Move its contents into `.cursor/mcp.json` to use it with Cursor instead.
</Tip>