이 프로젝트는 모델 Context Protocol (MCP)을 사용하여 Claude AI로 Tldraw을 통합합니다. 자연적인 언어 지시에 근거를 둔 Claude를 창조하고 조작하기 위하여 허용합니다.

시작하기

# 필수품

• Node.js 18+ 설치
• Claude 데스크톱 설치
• Visual Studio Code (추천)

설치 및 설치

1. ** 복제 및 의존성 설치 : **

2. ** 서버 코드 구축:**

3. ** Claude 데스크톱 구성: **

%AppData%\Claude\claude_desktop_config.json]에서 Claude 데스크탑 구성 파일을 만들거나 편집합니다:

컴파일된 서버 파일에 절대 경로로 경로를 바꾸십시오.

신청 시작

당신은 뒤에 오는 순서에 있는 3개의 성분을 시작할 필요가 있습니다:

1. HTTP 서버 시작:

2. Next.js 프론트엔드 시작:

3. ** 시작 Claude 데스크탑 및 MCP 서버 활성화:**

• Claude 데스크톱 출시
• 설정 열기 (gear icon)
• "Advanced"탭으로 이동
• "MCP Servers"에서 "tldrawserver"를 활성화
• "Apply"을 클릭하십시오

설정 확인

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