AIDraw VSCode Extension

AI-powered whiteboard in VSCode with an MCP (Model Context Protocol) server so AI agents can see what you draw.

Features

• tldraw canvas in VSCode: Fast diagramming/drawing with autosave
• Save for AI button (Cmd+S): One-click snapshot for assistants
• MCP server (stdio): Exposes the canvas to MCP-compatible clients
• Image + text extraction: Assistants get a PNG snapshot and extracted text

MCP tools (current)

• get_canvas – Return current page analysis plus PNG image (if available)
• list_pages – List all pages and basic stats
• get_canvas_text – Extract text content (all pages or a specific page)
• test_connection – Quick connectivity check

Install & Build

1. Install dependencies:

   npm install

2. Build extension and webview:

   npm run build

Run in VSCode

1. Open this folder in VSCode
2. Press F5 to launch the Extension Development Host
3. In the dev host:
   • Use the status bar button “AIDraw” or
   • Run the command: “AIDraw: Open Canvas”
4. Draw something and click “Save for AI” (or press Cmd+S) once to generate the first snapshot

Connect an AI client (MCP)

The server runs over stdio. You can get a ready-to-copy config via the command “AIDraw: Show MCP Connection Info”.

Claude Desktop

Add to ~/Library/Application Support/Claude/claude_desktop_config.json:

{
  "mcpServers": {
    "aidraw": {
      "command": "node",
      "args": ["/absolute/path/to/vscode-aidraw/dist/mcp-server.js"]
    }
  }
}

TypeScript example

import { Client } from "@modelcontextprotocol/sdk/client/index.js";
import { StdioClientTransport } from "@modelcontextprotocol/sdk/client/stdio.js";

const client = new Client({ name: "my-agent", version: "1.0.0" });
await client.connect(
  new StdioClientTransport({
    command: "node",
    args: ["/absolute/path/to/vscode-aidraw/dist/mcp-server.js"],
  })
);

const res = await client.callTool("get_canvas", {});
console.log(res);

VSCode settings (extension)

• aidraw.autoSaveInterval (ms, default 5000)
• aidraw.imageCaptureDelay (ms, default 2000)
• aidraw.imageQuality (scale 0.5–2, default 1)

NPM scripts

• npm run build – Clean, compile extension, bundle webview
• npm run compile – Bundle extension + MCP server
• npm run build-webview – Bundle webview
• npm run watch / npm run watch-webview – Dev watch modes
• npm run lint – Lint TypeScript

Project structure

vscode-aidraw/
├─ src/
│  ├─ extension/
│  │  ├─ index.ts            # Activation, commands, status bar
│  │  └─ CanvasPanel.ts      # Webview panel and messaging
│  ├─ mcp/
│  │  └─ server.ts           # MCP server (stdio)
│  ├─ services/
│  │  └─ StateManager.ts     # Disk state, images, snapshot extraction
│  ├─ types/
│  │  └─ index.d.ts          # Shared types
│  └─ webview/
│     ├─ index.tsx           # Entrypoint
│     └─ CanvasApp.tsx       # tldraw UI, capture + save
├─ dist/
│  ├─ extension.js
│  ├─ mcp-server.js
│  └─ webview/canvas.js
└─ media/                     # Icons, styles

How it works

1. You draw on the tldraw canvas in a VSCode webview
2. The webview periodically captures a PNG of the current page and extracts text
3. StateManager persists a JSON state to .tldraw/canvas-state.json and PNGs to .tldraw/images
4. The MCP server serves that state and images to tools like Claude

Troubleshooting

• No pages returned by list_pages: Open the canvas and click “Save for AI” once
• Image missing in get_canvas: Ensure you drew on the page and saved; image is generated per-page
• Path issues: Use absolute path to dist/mcp-server.js in your client config

Security & licensing

• Runs locally via stdio; no data is sent externally by default
• tldraw’s production use without watermark requires a commercial license

Contributing

PRs and issues are welcome.

Extras

• blog-website/ contains a simple Node/Express + SQLite demo app used for examples. To run:

  cd blog-website
  npm install
  npm run dev
  # http://localhost:5173

License

Licensed under the Apache License, Version 2.0. You may not use this file except in compliance with the License. You may obtain a copy of the License at https://www.apache.org/licenses/LICENSE-2.0.

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the LICENSE file for the specific language governing permissions and limitations under the License.