diff --git a/README.md b/README.md index b6499fb..befb245 100644 --- a/README.md +++ b/README.md @@ -97,13 +97,13 @@ Here are some example prompts and their generated diagrams: > **Preview Feature**: This feature is experimental and may change. -Use Next AI Draw.io with AI agents like Claude Desktop and Cursor via MCP (Model Context Protocol). +Use Next AI Draw.io with AI agents like Claude Desktop, Cursor, and VS Code via MCP (Model Context Protocol). ```bash npx -y @next-ai-drawio/mcp-server ``` -### Claude Desktop Configuration +### Claude Desktop Add to your Claude Desktop config (`~/Library/Application Support/Claude/claude_desktop_config.json` on macOS): @@ -118,12 +118,18 @@ Add to your Claude Desktop config (`~/Library/Application Support/Claude/claude_ } ``` +### Claude Code CLI + +```bash +claude mcp add drawio -- npx -y @next-ai-drawio/mcp-server +``` + Then ask Claude to create diagrams: > "Create a flowchart showing user authentication with login, MFA, and session management" The diagram appears in your browser in real-time! -See the [MCP Server README](./packages/mcp-server/README.md) for more details. +See the [MCP Server README](./packages/mcp-server/README.md) for VS Code, Cursor, and other client configurations. ## Getting Started diff --git a/docs/README_CN.md b/docs/README_CN.md index a925f9b..7856616 100644 --- a/docs/README_CN.md +++ b/docs/README_CN.md @@ -93,7 +93,7 @@ https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979 > **预览功能**：此功能为实验性功能，可能会有变化。 -通过MCP（模型上下文协议）在Claude Desktop和Cursor等AI代理中使用Next AI Draw.io。 +通过MCP（模型上下文协议）在Claude Desktop、Cursor和VS Code等AI代理中使用Next AI Draw.io。 ```bash npx -y @next-ai-drawio/mcp-server @@ -114,12 +114,18 @@ npx -y @next-ai-drawio/mcp-server } ``` +### Claude Code CLI + +```bash +claude mcp add drawio -- npx -y @next-ai-drawio/mcp-server +``` + 然后让Claude创建图表： > "创建一个展示用户认证流程的流程图，包含登录、MFA和会话管理" 图表会实时显示在浏览器中！ -详情请参阅[MCP服务器README](../packages/mcp-server/README.md)。 +详情请参阅[MCP服务器README](../packages/mcp-server/README.md)，了解VS Code、Cursor等客户端配置。 ## 快速开始 diff --git a/docs/README_JA.md b/docs/README_JA.md index d425f9d..05a0045 100644 --- a/docs/README_JA.md +++ b/docs/README_JA.md @@ -93,7 +93,7 @@ https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979 > **プレビュー機能**：この機能は実験的であり、変更される可能性があります。 -MCP（Model Context Protocol）を介して、Claude DesktopやCursorなどのAIエージェントでNext AI Draw.ioを使用できます。 +MCP（Model Context Protocol）を介して、Claude Desktop、Cursor、VS CodeなどのAIエージェントでNext AI Draw.ioを使用できます。 ```bash npx -y @next-ai-drawio/mcp-server @@ -114,12 +114,18 @@ Claude Desktopの設定ファイル（macOSでは`~/Library/Application Support/ } ``` +### Claude Code CLI + +```bash +claude mcp add drawio -- npx -y @next-ai-drawio/mcp-server +``` + Claudeにダイアグラムの作成を依頼： > 「ログイン、MFA、セッション管理を含むユーザー認証のフローチャートを作成してください」 ダイアグラムがリアルタイムでブラウザに表示されます！ -詳細は[MCPサーバーREADME](../packages/mcp-server/README.md)をご覧ください。 +詳細は[MCPサーバーREADME](../packages/mcp-server/README.md)をご覧ください（VS Code、Cursorなどのクライアント設定も含む）。 ## はじめに diff --git a/packages/mcp-server/README.md b/packages/mcp-server/README.md index a8be1bc..82cd486 100644 --- a/packages/mcp-server/README.md +++ b/packages/mcp-server/README.md @@ -4,17 +4,15 @@ MCP (Model Context Protocol) server that enables AI agents like Claude Desktop a **Self-contained** - includes an embedded HTTP server, no external dependencies required. -## Features - -- **Real-time Preview**: Diagrams appear and update in your browser as the AI creates them -- **Natural Language**: Describe diagrams in plain text - flowcharts, architecture diagrams, etc. -- **Edit Support**: Modify existing diagrams with natural language instructions -- **Export**: Save diagrams as `.drawio` files -- **Self-contained**: Embedded server, works offline (except draw.io UI which loads from embed.diagrams.net) - ## Quick Start -### Claude Desktop Configuration +```bash +npx -y @next-ai-drawio/mcp-server +``` + +## Installation + +### Claude Desktop Add to your Claude Desktop config (`~/Library/Application Support/Claude/claude_desktop_config.json` on macOS): @@ -29,37 +27,62 @@ Add to your Claude Desktop config (`~/Library/Application Support/Claude/claude_ } ``` -That's it! The MCP server runs its own embedded HTTP server. +### VS Code -### Use with Claude +Add to your VS Code settings (`.vscode/mcp.json` in workspace or user settings): -1. Restart Claude Desktop after updating config -2. Ask Claude to create a diagram: +```json +{ + "mcpServers": { + "drawio": { + "command": "npx", + "args": ["-y", "@next-ai-drawio/mcp-server"] + } + } +} +``` + +### Cursor + +Add to Cursor MCP config (`~/.cursor/mcp.json`): + +```json +{ + "mcpServers": { + "drawio": { + "command": "npx", + "args": ["-y", "@next-ai-drawio/mcp-server"] + } + } +} +``` + +### Claude Code CLI + +```bash +claude mcp add drawio -- npx -y @next-ai-drawio/mcp-server +``` + +### Other MCP Clients + +Use the standard MCP configuration with: +- **Command**: `npx` +- **Args**: `["-y", "@next-ai-drawio/mcp-server"]` + +## Usage + +1. Restart your MCP client after updating config +2. Ask the AI to create a diagram: > "Create a flowchart showing user authentication with login, MFA, and session management" 3. The diagram appears in your browser in real-time! -## How It Works +## Features -``` -┌─────────────────┐ stdio ┌─────────────────┐ -│ Claude Desktop │ <───────────> │ MCP Server │ -│ (AI Agent) │ │ (this package) │ -└─────────────────┘ └────────┬────────┘ - │ - ┌────────▼────────┐ - │ Embedded HTTP │ - │ Server (:6002) │ - └────────┬────────┘ - │ - ┌────────▼────────┐ - │ User's Browser │ - │ (draw.io embed) │ - └─────────────────┘ -``` - -1. **MCP Server** receives tool calls from Claude via stdio -2. **Embedded HTTP Server** serves the draw.io UI and handles state -3. **Browser** shows real-time diagram updates via polling +- **Real-time Preview**: Diagrams appear and update in your browser as the AI creates them +- **Natural Language**: Describe diagrams in plain text - flowcharts, architecture diagrams, etc. +- **Edit Support**: Modify existing diagrams with natural language instructions +- **Export**: Save diagrams as `.drawio` files +- **Self-contained**: Embedded server, works offline (except draw.io UI which loads from embed.diagrams.net) ## Available Tools @@ -71,7 +94,30 @@ That's it! The MCP server runs its own embedded HTTP server. | `get_diagram` | Get the current diagram XML | | `export_diagram` | Save diagram to a `.drawio` file | -## Environment Variables +## How It Works + +``` +┌─────────────────┐ stdio ┌─────────────────┐ +│ Claude Desktop │ <───────────> │ MCP Server │ +│ (AI Agent) │ │ (this package) │ +└─────────────────┘ └────────┬────────┘ + │ + ┌────────▼────────┐ + │ Embedded HTTP │ + │ Server (:6002) │ + └────────┬────────┘ + │ + ┌────────▼────────┐ + │ User's Browser │ + │ (draw.io embed) │ + └─────────────────┘ +``` + +1. **MCP Server** receives tool calls from Claude via stdio +2. **Embedded HTTP Server** serves the draw.io UI and handles state +3. **Browser** shows real-time diagram updates via polling + +## Configuration | Variable | Default | Description | |----------|---------|-------------| @@ -81,7 +127,7 @@ That's it! The MCP server runs its own embedded HTTP server. ### Port already in use -If port 6002 is in use, the server will automatically try the next available port. +If port 6002 is in use, the server will automatically try the next available port (up to 6020). Or set a custom port: ```json