Brainstorm Canvas

A live brainstorming canvas you share with your AI agent. Map out features, user flows, open questions, decisions and risks as cards, connect them, group them, and keep a running list of notes. You edit in the browser; your agent edits through MCP tools. Every change shows up live on the other side, with the cards the agent touched briefly highlighted.

It ships as a Claude Code plugin: an MCP server, a companion skill that teaches the agent how to brainstorm on the board, and a /brainstorm-canvas:canvas command. The MCP server also works on its own in any MCP client.

• No dependencies. No build step. Node 18 or newer.

• Boards are plain JSON files in your project (.canvas/), so they live in git next to your code.

• Light and dark themes, works at phone width.

What's on a board

In the browser: double-click to add a card, drag from the dot on a card's edge to connect, click anything to edit it in the side panel. Scroll to pan, Cmd/Ctrl + scroll to zoom, F to fit, M for notes, Cmd/Ctrl + Z to undo.

Related MCP server: cnvs-whiteboard

Install in Claude Code

/plugin marketplace add maulikatwork/brainstorm-canvas
/plugin install brainstorm-canvas@brainstorm-canvas

Or from a terminal:

claude plugin marketplace add maulikatwork/brainstorm-canvas
claude plugin install brainstorm-canvas@brainstorm-canvas

Start a new session, then try:

• "Sketch our onboarding flow on the canvas."

• "Add a question card about pricing tiers and link it to the checkout feature."

• "We decided to ship CSV import first. Record that on the board."

• /brainstorm-canvas:canvas to open the board and get its link.

Use with other MCP clients

Point any stdio MCP client (Claude Desktop, Cursor, and others) at bin/mcp.mjs:

{
  "mcpServers": {
    "canvas": {
      "command": "node",
      "args": ["/absolute/path/to/brainstorm-canvas/bin/mcp.mjs"],
      "env": { "CANVAS_DIR": "/absolute/path/to/your/project/.canvas" }
    }
  }
}

Set CANVAS_DIR when the client doesn't start servers from inside your project folder.

MCP tools

Cards added without x/y are placed automatically: inside their group, or next to the card they connect from.

Try the demo board

node bin/cli.mjs serve --dir examples

Open http://localhost:4317/?board=demo to see a small habit-tracker plan with every card type, groups and notes.

Command line

The CLI has the same operations as the MCP tools, for scripts or agents without MCP.

node bin/cli.mjs serve                                  # web UI at http://localhost:4317
node bin/cli.mjs show                                   # read the board
node bin/cli.mjs add --title "CSV import" --type feature --value Priority=P1 --from sign-up
node bin/cli.mjs connect csv-import check-in --kind depends
node bin/cli.mjs note add "Decided: CSV first." --node csv-import --pin
node bin/cli.mjs help                                   # everything else

Where boards live

<project>/.canvas/<board>.json. Commit them: they're your planning docs. The format is documented in the skill and validated by public/schema.js. Editing a board file by hand also works; open browsers pick up the change.

How it works

 agent ──MCP tools──▶ bin/mcp.mjs ──┐
                                    ├──▶ .canvas/<board>.json ◀── fs.watch ──▶ lib/web.mjs ──SSE──▶ browser
 you   ──CLI───────▶ bin/cli.mjs ───┘                                              ▲
 you   ──browser edits─────────────────────────────── PUT /api/boards/<name> ──────┘

• lib/ops.mjs holds every board operation, shared by the MCP server and the CLI.

• lib/store.mjs reads and writes boards atomically (temp file + rename).

• lib/web.mjs serves the UI on 127.0.0.1 and pushes changes to browsers with server-sent events.

• public/ is the canvas itself: plain HTML, CSS and ES modules.

Development

npm test          # drives the MCP server over stdio against a copy of the demo board
claude plugin validate .

License

MIT