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

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

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

<CodeGroup>
  ```json Adding to existing mcp.json theme={null}
  {
    "mcpServers": {
      "existing-server": {
        "command": "npx",
        "args": ["-y", "existing-mcp"]
      },
      "designjs": {
        "command": "npx",
        "args": ["-y", "@designjs/mcp-server"]
      }
    }
  }
  ```
</CodeGroup>

<Note>
  `.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.
</Note>

## Verifying the connection

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

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

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

## Troubleshooting

<CardGroup cols={2}>
  <Card title="DesignJS tools not visible in Copilot Chat" icon="circle-x">
    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.
  </Card>

  <Card title="Tool calls return connection errors" icon="triangle-alert">
    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.
  </Card>

  <Card title="mcp.json exists but servers don't load" icon="file-x">
    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.
  </Card>

  <Card title=".vscode/ doesn't exist yet" icon="folder-plus">
    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.
  </Card>
</CardGroup>

<Tip>
  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.
</Tip>