docs: add MCP server section to README (preview feature)

.gitignore

@@ -2,6 +2,8 @@
 
 # dependencies
 /node_modules
+packages/*/node_modules
+packages/*/dist
 /.pnp
 .pnp.*
 .yarn/*
@@ -47,3 +49,4 @@ push-via-ec2.sh
 .open-next/
 .wrangler/
 .env*.local
+

README.md

@@ -30,6 +30,7 @@ https://github.com/user-attachments/assets/9d60a3e8-4a1c-4b5e-acbb-26af2d3eabd1
   - [Table of Contents](#table-of-contents)
   - [Examples](#examples)
   - [Features](#features)
+  - [MCP Server (Preview)](#mcp-server-preview)
   - [Getting Started](#getting-started)
     - [Try it Online](#try-it-online)
     - [Run with Docker (Recommended)](#run-with-docker-recommended)
@@ -92,6 +93,38 @@ Here are some example prompts and their generated diagrams:
 -   **Cloud Architecture Diagram Support**: Specialized support for generating cloud architecture diagrams (AWS, GCP, Azure)
 -   **Animated Connectors**: Create dynamic and animated connectors between diagram elements for better visualization
 
+## MCP Server (Preview)
+
+> **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).
+
+```bash
+npx -y @next-ai-drawio/mcp-server
+```
+
+### Claude Desktop Configuration
+
+Add to your Claude Desktop config (`~/Library/Application Support/Claude/claude_desktop_config.json` on macOS):
+
+```json
+{
+  "mcpServers": {
+    "drawio": {
+      "command": "npx",
+      "args": ["-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.
+
 ## Getting Started
 
 ### Try it Online

docs/README_CN.md

@@ -26,6 +26,7 @@ https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979
   - [目录](#目录)
   - [示例](#示例)
   - [功能特性](#功能特性)
+  - [MCP服务器（预览）](#mcp服务器预览)
   - [快速开始](#快速开始)
     - [在线试用](#在线试用)
     - [使用Docker运行（推荐）](#使用docker运行推荐)
@@ -88,6 +89,38 @@ https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979
 -   **云架构图支持**：专门支持生成云架构图（AWS、GCP、Azure）
 -   **动画连接器**：在图表元素之间创建动态动画连接器，实现更好的可视化效果
 
+## MCP服务器（预览）
+
+> **预览功能**：此功能为实验性功能，可能会有变化。
+
+通过MCP（模型上下文协议）在Claude Desktop和Cursor等AI代理中使用Next AI Draw.io。
+
+```bash
+npx -y @next-ai-drawio/mcp-server
+```
+
+### Claude Desktop配置
+
+添加到Claude Desktop配置文件（macOS上为`~/Library/Application Support/Claude/claude_desktop_config.json`）：
+
+```json
+{
+  "mcpServers": {
+    "drawio": {
+      "command": "npx",
+      "args": ["-y", "@next-ai-drawio/mcp-server"]
+    }
+  }
+}
+```
+
+然后让Claude创建图表：
+> "创建一个展示用户认证流程的流程图，包含登录、MFA和会话管理"
+
+图表会实时显示在浏览器中！
+
+详情请参阅[MCP服务器README](../packages/mcp-server/README.md)。
+
 ## 快速开始
 
 ### 在线试用

docs/README_JA.md

@@ -26,6 +26,7 @@ https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979
   - [目次](#目次)
   - [例](#例)
   - [機能](#機能)
+  - [MCPサーバー（プレビュー）](#mcpサーバープレビュー)
   - [はじめに](#はじめに)
     - [オンラインで試す](#オンラインで試す)
     - [Dockerで実行（推奨）](#dockerで実行推奨)
@@ -88,6 +89,38 @@ https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979
 -   **クラウドアーキテクチャダイアグラムサポート**：クラウドアーキテクチャダイアグラムの生成を専門的にサポート（AWS、GCP、Azure）
 -   **アニメーションコネクタ**：より良い可視化のためにダイアグラム要素間に動的でアニメーション化されたコネクタを作成
 
+## MCPサーバー（プレビュー）
+
+> **プレビュー機能**：この機能は実験的であり、変更される可能性があります。
+
+MCP（Model Context Protocol）を介して、Claude DesktopやCursorなどのAIエージェントでNext AI Draw.ioを使用できます。
+
+```bash
+npx -y @next-ai-drawio/mcp-server
+```
+
+### Claude Desktop設定
+
+Claude Desktopの設定ファイル（macOSでは`~/Library/Application Support/Claude/claude_desktop_config.json`）に追加：
+
+```json
+{
+  "mcpServers": {
+    "drawio": {
+      "command": "npx",
+      "args": ["-y", "@next-ai-drawio/mcp-server"]
+    }
+  }
+}
+```
+
+Claudeにダイアグラムの作成を依頼：
+> 「ログイン、MFA、セッション管理を含むユーザー認証のフローチャートを作成してください」
+
+ダイアグラムがリアルタイムでブラウザに表示されます！
+
+詳細は[MCPサーバーREADME](../packages/mcp-server/README.md)をご覧ください。
+
 ## はじめに
 
 ### オンラインで試す