# Connect MCP to Cogniboom Canvas.

The hosted app runs in your browser. MCP needs a small local helper so agent clients can use stdio or a local HTTP endpoint without exposing your canvas to the network.

## Install

Install once globally, then add the MCP configuration for your agent client and restart it.

    npm install -g @cogniboom/canvas

### What the helper can access

- The current local Canvas document and selection.
- Canvas objects, annotations, and editable frame assets.
- Screenshots from an open local Canvas browser tab.

### Security

The helper binds to `127.0.0.1`, stores MCP documents in the workspace `.canvas/` directory, and does not provide arbitrary filesystem tools.

## Local URLs

Browser app

    http://127.0.0.1:3762

MCP HTTP endpoint

    http://127.0.0.1:3762/mcp

Verification prompt: Create a red rectangle in Cogniboom Canvas, then take a screenshot and tell me what you see.

## Client Setup

Claude Code

    claude mcp add cogniboom-canvas -- canvas serve

Claude Desktop

    {
      "mcpServers": {
        "cogniboom-canvas": {
          "command": "canvas",
          "args": ["serve"]
        }
      }
    }

Codex

    [mcp_servers.cogniboom_canvas]
    command = "canvas"
    args = ["serve"]
    startup_timeout_sec = 20
    tool_timeout_sec = 60

Cursor

    {
      "mcpServers": {
        "cogniboom-canvas": {
          "command": "canvas",
          "args": ["serve"]
        }
      }
    }

HTTP clients

    canvas http
    http://127.0.0.1:3762/mcp

## Troubleshooting

- Restart or reload the agent client after changing MCP config.
- Run `canvas doctor`.
- Check `http://127.0.0.1:3762/api/health`.
- Keep the local Canvas tab open for screenshot capture.
- Use `CANVAS_PORT` if port 3762 is occupied.

### Update

Updates install automatically on startup. To update manually:

    npm install -g @cogniboom/canvas@latest