这个项目利用"模式背景协议"(MCP)将tldraw与克洛德·AI整合. 它允许克洛德根据自然语言指令来创建和操纵图表.

∮开始∮

· 先决条件

• 已安装18+节点
• 安装了克洛德桌面
• 视觉工作室代码(建议)

QQ 安装和设置

1. ** 单位和安装依赖性:**

2. ** 构建服务器代码:**

3. ** 配置克洛德桌面:**

在 [[T0] 创建或编辑 Claude 桌面配置文件 :

将路径替换为编译的服务器文件的绝对路径 。

QQ 启动应用程序

您需要按以下顺序启动三个组件:

1. 启动HTTP服务器:

2. ** 开始下一个.js前端:**

3. 启动克洛德桌面并启用MCP服务器:

• 启动克洛德桌面
• 打开设置(工具图标)
• 去"高级"标签
• 在“ MCP 服务器” 下, 启用“ 焊德劳服务器 ”
• 点击"Apply"

校验设置

1. 打开浏览器到http://localhost:3000
2. 你应该看看画布
3. 在克洛德桌面中,尝试以下命令:

测试系统

Tldraw MCP Server

This project integrates tldraw with Claude AI using the Model Context Protocol (MCP). It allows Claude to create and manipulate diagrams based on natural language instructions.

Getting Started

Prerequisites

• Node.js 18+ installed
• Claude Desktop installed
• Visual Studio Code (recommended)

Installation and Setup

1. Clone and install dependencies:

   cd tldraw-mcp
   npm install
   cd server
   npm install
   

2. Build the server code:

   cd server
   npm run build
   

3. Configure Claude Desktop:

   Create or edit the Claude Desktop configuration file at %AppData%\Claude\claude_desktop_config.json:

   {
     "mcpServers": {
       "tldrawserver": {
         "command": "node",
         "args": ["D:\\tldraw-mcp\\server\\dist\\index.js"]
       }
     }
   }
   

   Replace the path with the absolute path to the compiled server file.

Starting the Application

You need to start three components in the following order:

1. Start the HTTP Server:

   # In the server directory
   npm run start:http
   

2. Start the Next.js Frontend:

   # In the root directory
   npm run dev
   

3. Start Claude Desktop and enable the MCP Server:

   • Launch Claude Desktop
   • Open settings (gear icon)
   • Go to the “Advanced” tab
   • Under “MCP Servers”, enable “tldrawserver”
   • Click “Apply”

Verifying the Setup

1. Open your browser to http://localhost:3000
2. You should see the tldraw canvas
3. In Claude Desktop, try a command like:

   Create a flowchart with two steps: "Start" and "Process Data"
   

Testing the System

To fully test the integration, try the following Claude commands:

1. Create a simple diagram:

   Create a rectangle labeled "Database" at position (200, 300) with width 150 and height 100
   

2. Create and connect shapes:

   Create an ellipse labeled "User" at position (100, 100) with width 120 and height 80,
   and a rectangle labeled "API" at position (300, 100) with width 150 and height 80.
   Then connect the "User" shape to the "API" shape.
   

3. Create a flowchart:

   Create a flowchart with the following steps:
   1. "Start Process"
   2. "Collect Data"
   3. "Analyze Results"
   4. "Generate Report"
   

4. Add standalone text:

   Add text "CONFIDENTIAL" at position (400, 50) with font size 24
   

5. Get a snapshot of the current diagram:

   Take a snapshot of the current diagram
   

Verifying Event Flow

To verify that events are flowing correctly through the system:

1. Open your browser’s developer tools (F12 or Ctrl+Shift+I)
2. Go to the Console tab
3. Look for log messages with prefixes:
   • [EventBus] - Events being broadcast internally
   • [HTTP Server] - Messages from the HTTP server