Этот проект интегрирует tldraw с Claude AI с использованием протокола Model Context Protocol (MCP). Это позволяет Клоду создавать и манипулировать диаграммами на основе инструкций естественного языка.

Начало работы

Предпосылки

• Node.js 18+ установлен Клод Десктоп установлен Visual Studio Code (рекомендуется)

###Установка и настройка

1. **Клонирование и установка зависимостей: **

2. ** Создайте код сервера: **

3 **Настройка Claude Desktop: **

Создайте или отредактируйте файл конфигурации Claude Desktop по адресу %AppData%\Claude\claude_desktop_config.json:

Замените путь абсолютным путем на скомпилированный файл сервера.

Запуск приложения

Вам нужно запустить три компонента в следующем порядке:

1. ** Запустите HTTP-сервер: **

2. ** Начать Next.js Frontend: **

3. ** Запустите Claude Desktop и включите MCP-сервер: **

Скачать Claude Desktop

• Открытые настройки (gear icon)
• Перейдите на вкладку “Передовые”
• В разделе “MCP-серверы” включить “tldrawserver”
• Нажмите “Применить”

###Проверка настройки

1.Откройте браузер http://localhost:3000 2 Вы должны увидеть холст Tldraw 3. В Claude Desktop попробуйте команду:

Тестирование системы

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