このプロジェクトは、モデルコンテキストプロトコル(MCP)を使用してClaude AIとtldrawを統合します。 Claudeは、自然言語の指示に基づいて図を作成および操作することができます。

はじめる

前提条件

• Node.js 18+ をインストール
• クロード デスクトップ インストール
• ビジュアルスタジオコード(推奨)

インストールとセットアップ

1.** 依存関係のクローンとインストール:**

2.サーバーコードの構築:

3。Claudeデスクトップの設定:

[[%AppData%\Claude\claude_desktop_config.json]でClaudeデスクトップ設定ファイルを作成または編集します。

コンパイルされたサーバーファイルへの絶対パスでパスを置換します。

アプリケーションの起動

次の順序で3つの部品を始める必要があります。

1.HTTPサーバーの起動:

2.Next.jsのフロントエンドの起動:

3。Claudeデスクトップを起動し、MCPサーバーを有効にします。

• Claudeデスクトップを起動
• 設定を開く(歯車アイコン)
• 「高度」タブに移動
• “MCP Servers” で、“tldrawserver” を有効にします。
• 「適用」をクリックします。

セットアップの確認

1. ブラウザを[http://localhost:3000に開く 2。 tldrawキャンバスを見る必要があります 3。 Claudeデスクトップでは、以下のようなコマンドを実行します。

システムのテスト

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