Connect DesignJS to VS Code Copilot

Add DesignJS as an MCP server in VS Code Copilot Chat — auto-configure with designjs init or write .vscode/mcp.json manually, then verify tools appear.

VS Code Copilot Chat supports MCP servers through a .vscode/mcp.json file in your project workspace. Once DesignJS is registered, Copilot Chat can call DesignJS tools to read your canvas structure, take screenshots, insert components, and update styles without leaving the editor.

Prerequisites

Start DesignJS before attempting to connect:

pnpm dev

The canvas runs at http://localhost:3000 and the WebSocket bridge listens on 127.0.0.1:29170. Both must be running for Copilot to communicate with the canvas.

Configure .vscode/mcp.json

Create .vscode/ at your project root if it doesn’t already exist (mkdir .vscode), then create or edit .vscode/mcp.json:

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

If .vscode/mcp.json already exists with other servers, merge the "designjs" entry into the existing "mcpServers" object:

Adding to existing mcp.json

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

.vscode/mcp.json is separate from settings.json. Do not add MCP server configuration to settings.json — VS Code Copilot reads MCP servers from mcp.json only.

Verifying the connection

1. Open GitHub Copilot Chat

   In VS Code, open the Copilot Chat panel (Ctrl+Shift+I / Cmd+Shift+I, or click the Copilot icon in the activity bar).

2. Check that DesignJS tools are available

   Click the tools icon (the wrench or plug icon) in the Copilot Chat panel. You should see DesignJS tools listed — including ping, get_tree, get_screenshot, add_components, and others.

3. Test the connection

   Type in Copilot Chat: “Call the designjs ping tool.” A successful call returns { pong: true, at: <timestamp> }. The bridge status indicator in the DesignJS topbar turns green to confirm the end-to-end connection.

Troubleshooting

DesignJS tools not visible in Copilot Chat

VS Code has not loaded the MCP config. Verify .vscode/mcp.json is at the workspace root, not inside a subdirectory. Then run MCP: Restart Server from the command palette.

Tool calls return connection errors

The MCP server process started but the canvas bridge is unreachable. Ensure pnpm dev is running and the WebSocket bridge is listening on 127.0.0.1:29170. Check the bridge dot in the DesignJS topbar — grey means the bridge is down.

mcp.json exists but servers don't load

Confirm the JSON is valid (no trailing commas, proper nesting). VS Code silently ignores malformed JSON. Paste the file contents into a JSON validator if you are unsure.

.vscode/ doesn't exist yet

Create it yourself — mkdir .vscode && touch .vscode/mcp.json — then paste the JSON above. VS Code reads .vscode/mcp.json lazily and doesn’t need to have touched the folder first.

Commit .vscode/mcp.json to your repository so that everyone on your team gets the DesignJS MCP server automatically when they open the project in VS Code. The npx -y @designjs/mcp-server command will pull the latest published server on first use.