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:

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:

{
  "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.

Merging with existing servers

{
  "mcpServers": {
    "some-other-server": {
      "command": "npx",
      "args": ["-y", "some-other-mcp"]
    },
    "designjs": {
      "command": "npx",
      "args": ["-y", "@designjs/mcp-server"]
    }
  }
}

Verifying the connection

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

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

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

Troubleshooting

Server appears but shows disconnected

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.

designjs not listed in the MCP panel

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.

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.