AI导哈

AI驱动画布操作服务

tldraw-mcp是一个为AI驱动的画布操作提供最小化MCP服务的工具，支持通过WebSocket与tldraw画布交互，适用于AI客户端（如Claude）与画布部件的实时协作。

  • by dpunj
  • TypeScript
  • 本地部署
  • 2 星标
  • 更新于
在 GitHub 查看 dpunj/tldraw-mcp

使用说明

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 dev

Claude桌面配置

增添 ~/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

许可证

麻省理工学院

相关 MCP