tldraw mcp
用于AI驱动画布操作的最小MCP服务器 tldraw.
建筑
┌─────────────┐ stdio ┌─────────────┐ WebSocket ┌─────────────┐
│ AI Client │◄──────────────►│ tldraw-mcp │◄───────────────►│ Widget │
│ (Claude,etc)│ │ (server) │ :4000 │ (tldraw) │
└─────────────┘ └─────────────┘ └─────────────┘
:3000工具
| 工具 | 说明 |
|---|---|
create_shape | 创建形状（矩形、椭圆形、星形、云形、菱形等） |
update_shape | 更新形状属性（位置、大小、颜色、填充） |
delete_shapes | 按ID删除形状 |
connect_shapes | 用箭头连接两个形状 |
create_frame | 创建一个框架，将形状组合在一起 |
create_flowchart | 创建包含节点和边的流程图（自动布局） |
get_snapshot | 获取当前画布状态 |
zoom_to_fit | 缩放画布以适应所有形状 |
clear_canvas | 清除所有形状 |
快速开始
# 1. Clone and install
git clone https://github.com/dpunj/tldraw-mcp
cd tldraw-mcp
bun install
# 2. Start the widget (tldraw canvas + WebSocket server)
cd widget
bun install
bun run dev
# Opens http://localhost:3000 (canvas) + ws://localhost:4000 (relay)
# 3. In another terminal, test the MCP server
cd ..
bun run devClaude桌面配置
增添 ~/Library/Application Support/Claude/claude_desktop_config.json:
{
"mcpServers": {
"tldraw": {
"command": "bun",
"args": ["run", "/path/to/tldraw-mcp/src/index.ts"]
}
}
}环境变量
| 变量 | 默认值 | 描述 |
|---|---|---|
TLDRAW_WS_URL | ws://localhost:4000 | 小部件websocket URL |
WS_PORT | 4000 | 小部件WS服务器端口 |
发展
# MCP server
bun run dev # Run server
bun run build # Build for distribution
bun run check # TypeScript check
# Widget
cd widget
bun run dev # Start vite + WS server许可证
麻省理工学院