{"id":45557659,"url":"https://github.com/next2d/next2d-development-mcp","last_synced_at":"2026-04-05T02:08:31.379Z","repository":{"id":339675986,"uuid":"1162587923","full_name":"Next2D/next2d-development-mcp","owner":"Next2D","description":"An MCP (Model Context Protocol) server for Next2D application development. Provides code generation, architecture validation, and API reference following MVVM + Clean Architecture + Atomic Design patterns used with the framework-typescript-template.","archived":false,"fork":false,"pushed_at":"2026-02-26T13:45:38.000Z","size":376,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"develop","last_synced_at":"2026-02-26T14:09:48.564Z","etag":null,"topics":["ai","ai-development","atomic-design","clean-architecture","game-development","mcp","mvvm-architecture","next2d"],"latest_commit_sha":null,"homepage":"https://next2d.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Next2D.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"github":["Next2D"],"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2026-02-20T12:57:39.000Z","updated_at":"2026-02-26T13:33:04.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/Next2D/next2d-development-mcp","commit_stats":null,"previous_names":["next2d/next2d-development-mcp"],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/Next2D/next2d-development-mcp","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Next2D%2Fnext2d-development-mcp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Next2D%2Fnext2d-development-mcp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Next2D%2Fnext2d-development-mcp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Next2D%2Fnext2d-development-mcp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Next2D","download_url":"https://codeload.github.com/Next2D/next2d-development-mcp/tar.gz/refs/heads/develop","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Next2D%2Fnext2d-development-mcp/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29892063,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-27T09:48:51.284Z","status":"ssl_error","status_checked_at":"2026-02-27T09:48:43.992Z","response_time":57,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ai","ai-development","atomic-design","clean-architecture","game-development","mcp","mvvm-architecture","next2d"],"created_at":"2026-02-23T06:12:56.587Z","updated_at":"2026-02-27T11:01:13.717Z","avatar_url":"https://github.com/Next2D.png","language":"TypeScript","funding_links":["https://github.com/sponsors/Next2D"],"categories":[],"sub_categories":[],"readme":"# next2d-development-mcp\n\n[![UnitTest](https://github.com/Next2D/next2d-development-mcp/actions/workflows/integration.yml/badge.svg?branch=main)](https://github.com/Next2D/next2d-development-mcp/actions/workflows/integration.yml)\n[![CodeQL](https://github.com/Next2D/next2d-development-mcp/actions/workflows/github-code-scanning/codeql/badge.svg?branch=main)](https://github.com/Next2D/next2d-development-mcp/actions/workflows/github-code-scanning/codeql)\n[![Lint](https://github.com/Next2D/next2d-development-mcp/actions/workflows/lint.yml/badge.svg?branch=main)](https://github.com/Next2D/next2d-development-mcp/actions/workflows/lint.yml)\n\n[![release](https://img.shields.io/github/v/release/Next2D/next2d-development-mcp)](https://github.com/Next2D/next2d-development-mcp/releases)\n\n[Next2D](https://next2d.app) アプリケーション開発を支援する **MCP (Model Context Protocol) サーバー**です。  \n[framework-typescript-template](https://github.com/Next2D/framework-typescript-template) を使った **MVVM + Clean Architecture + Atomic Design** パターンに従ったコード生成、アーキテクチャ検証、API リファレンスを提供します。\n\nAn **MCP (Model Context Protocol) server** for [Next2D](https://next2d.app) application development.  \nProvides code generation, architecture validation, and API reference following **MVVM + Clean Architecture + Atomic Design** patterns used with the [framework-typescript-template](https://github.com/Next2D/framework-typescript-template).\n\n---\n\n## 目次 / Table of Contents\n\n- [概要 / Overview](#概要--overview)\n- [必要な環境 / Requirements](#必要な環境--requirements)\n- [AI エージェントへの追加方法 / AI Agent Setup](#ai-エージェントへの追加方法--ai-agent-setup)\n- [Tools / ツール](#tools--ツール)\n- [Resources / リソース](#resources--リソース)\n- [Prompts / プロンプト](#prompts--プロンプト)\n- [サポートするアーキテクチャ / Supported Architecture](#サポートするアーキテクチャ--supported-architecture)\n- [関連リンク / Related Links](#関連リンク--related-links)\n- [License](#license)\n\n---\n\n## 概要 / Overview\n\nNext2D は **WebGL/WebGPU** ベースの 2D レンダリングエンジン ([Player](https://github.com/Next2D/player)) と MVVM フレームワーク ([Framework](https://github.com/Next2D/framework)) で構成される、マルチプラットフォーム対応の開発環境です。\n\nNext2D is a multi-platform development environment consisting of a **WebGL/WebGPU** based 2D rendering engine ([Player](https://github.com/Next2D/player)) and an MVVM framework ([Framework](https://github.com/Next2D/framework)).\n\nこの MCP サーバーは以下の機能を AI エージェントに提供します:\n\nThis MCP server provides the following capabilities to AI agents:\n\n| 機能 / Feature | 説明 / Description |\n|---|---|\n| **コード生成** | View/ViewModel, UseCase, Repository, UI コンポーネント, Interface, Animation, Domain Service のスキャフォールディング |\n| **ルーティング設定** | routing.json へのルートエントリ生成 |\n| **アーキテクチャ検証** | プロジェクト構造の Clean Architecture 準拠チェック |\n| **プロジェクト分析** | 実装済みファイルのスキャンと未実装箇所のレポート |\n| **画面インスペクション** | 特定画面の全関連ファイルの一覧と実装状況の確認 |\n| **実装計画生成** | 既存ファイルをスキップしつつ新規画面の順序付き実装ステップを生成 |\n| **API リファレンス** | Player API, Framework 仕様, 開発テンプレート仕様の提供 |\n| **開発ガイド** | 画面追加手順, コーディング規約, デバッグガイドの提供 |\n| **オーケストレーター** | 新規画面作成・既存画面修正をフェーズ別に自律実行 |\n\n---\n\n## 必要な環境 / Requirements\n\n| ツール / Tool | バージョン / Version |\n|---|---|\n| Node.js | 22.x 以上 / 22.x or higher |\n| npm | 10.x 以上 / 10.x or higher |\n\n---\n\n## AI エージェントへの追加方法 / AI Agent Setup\n\n### VS Code Marketplace（推奨 / Recommended）\n\nVS Code Marketplace からワンクリックでインストールできます。\nInstall with one click from the VS Code Marketplace:\n\n**[![Install in VS Code](https://img.shields.io/badge/Install%20in-VS%20Code-007ACC?logo=visual-studio-code)](https://marketplace.visualstudio.com/items?itemName=next2d.next2d-development-mcp)**\n\nインストール後、GitHub Copilot Chat で `@next2d` を入力すると MCP ツールが利用可能になります。\nAfter installation, MCP tools are available by typing `@next2d` in GitHub Copilot Chat.\n\n---\n\n### GitHub Copilot (VS Code / VS Code Insiders)\n\nプロジェクトルートに `.vscode/mcp.json` を作成します。  \nCreate `.vscode/mcp.json` at the project root:\n\n```json\n{\n  \"servers\": {\n    \"next2d\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"next2d-development-mcp\"]\n    }\n  }\n}\n```\n\nVS Code の設定 (`settings.json`) で MCP を有効化:  \nEnable MCP in VS Code settings (`settings.json`):\n\n```json\n{\n  \"github.copilot.chat.mcp.enabled\": true\n}\n```\n\n\u003e 💡 Copilot Chat で `@mcp` を入力すると、利用可能なツールが表示されます。  \n\u003e 💡 Type `@mcp` in Copilot Chat to see available tools.\n\n### Claude Desktop\n\n設定ファイルを編集します。  \nEdit the configuration file:\n\n- **macOS**: `~/Library/Application Support/Claude/claude_desktop_config.json`\n- **Windows**: `%APPDATA%\\Claude\\claude_desktop_config.json`\n\n```json\n{\n  \"mcpServers\": {\n    \"next2d-development-mcp\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"next2d-development-mcp\"]\n    }\n  }\n}\n```\n\n\u003e 💡 設定後、Claude Desktop を再起動してください。  \n\u003e 💡 Restart Claude Desktop after updating the configuration.\n\n### Claude Code (CLI)\n\nプロジェクトルートに `.mcp.json` を作成します。  \nCreate `.mcp.json` at the project root:\n\n```json\n{\n  \"mcpServers\": {\n    \"next2d-development-mcp\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"next2d-development-mcp\"]\n    }\n  }\n}\n```\n\nまたは、CLI で直接追加:  \nOr add directly via CLI:\n\n```bash\nclaude mcp add next2d -- npx -y next2d-development-mcp\n```\n\n### OpenAI Codex (ChatGPT CLI)\n\nプロジェクトルートに `.codex/mcp.json` を作成します。  \nCreate `.codex/mcp.json` at the project root:\n\n```json\n{\n  \"mcpServers\": {\n    \"next2d-development-mcp\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"next2d-development-mcp\"]\n    }\n  }\n}\n```\n\n\u003e `npm` キャッシュ権限エラー (`EPERM`, `~/.npm/_npx`) が出る場合はキャッシュ先を明示してください。  \n\u003e If npm cache permission errors occur, set a writable cache path:\n\u003e `\"args\": [\"-y\", \"--cache\", \"/tmp/next2d-mcp-npm-cache\", \"next2d-development-mcp\"]`\n\n### Gemini CLI\n\nプロジェクトルートに `.gemini/settings.json` を作成します。  \nCreate `.gemini/settings.json` at the project root:\n\n```json\n{\n  \"mcpServers\": {\n    \"next2d-development-mcp\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"next2d-development-mcp\"]\n    }\n  }\n}\n```\n\n### Cline (VS Code Extension)\n\nCline の設定画面から MCP サーバーを追加します。  \nAdd the MCP server from Cline settings:\n\n1. VS Code で Cline 拡張のサイドバーを開く / Open the Cline extension sidebar in VS Code\n2. **MCP Servers** セクションを開く / Open the **MCP Servers** section\n3. **Edit MCP Settings** をクリック / Click **Edit MCP Settings**\n4. 以下を追加 / Add the following:\n\n```json\n{\n  \"mcpServers\": {\n    \"next2d-development-mcp\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"next2d-development-mcp\"]\n    }\n  }\n}\n```\n\n### Cursor\n\nCursor の設定ファイルに追加します。  \nAdd to Cursor settings:\n\n- **プロジェクト単位 / Per-project**: `.cursor/mcp.json`\n- **グローバル / Global**: `~/.cursor/mcp.json`\n\n```json\n{\n  \"mcpServers\": {\n    \"next2d-development-mcp\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"next2d-development-mcp\"]\n    }\n  }\n}\n```\n\n### Windsurf\n\nWindsurf の MCP 設定ファイルに追加します。  \nAdd to Windsurf MCP configuration:\n\n`~/.codeium/windsurf/mcp_config.json`:\n\n```json\n{\n  \"mcpServers\": {\n    \"next2d-development-mcp\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"next2d-development-mcp\"]\n    }\n  }\n}\n```\n\n### その他の MCP 対応クライアント / Other MCP-compatible Clients\n\nMCP は **stdio** トランスポートの標準プロトコルです。MCP 対応の任意のクライアントで以下のコマンドを設定すれば利用可能です:\n\nMCP uses the standard **stdio** transport protocol. Configure the following command in any MCP-compatible client:\n\n```\ncommand: npx\nargs: -y next2d-development-mcp\n```\n\n---\n\n## Tools / ツール\n\n### オーケストレーション系 / Orchestration\n\n| Tool | Description |\n|---|---|\n| `analyze_project` | routing.json をスキャンし、View/ViewModel/UseCase/Repository の実装状況を一覧表示。新機能追加前の現状把握に使用 |\n| `inspect_screen` | 特定画面の全関連ファイル (View, ViewModel, Page, UseCase, Repository, Animation, Content) をファイル行数付きで一覧表示。既存画面修正前に使用 |\n| `plan_feature` | 新規画面の実装ステップを順序付きで生成。既存ファイルは ✅ としてスキップ。`analyze_project` 実行後に使用 |\n\n### コード生成系 / Code Generation\n\n| Tool | Description |\n|---|---|\n| `create_view` | View/ViewModel ペアを生成 (MVVM パターン)。`name` にルートパスを指定 (例: `home`, `quest/list`) |\n| `create_usecase` | UseCase クラスを生成 (Application 層)。1 アクション = 1 UseCase、`execute()` がエントリーポイント |\n| `create_repository` | Repository クラスを生成 (Infrastructure 層)。try-catch 必須、config からエンドポイント取得 |\n| `create_ui_component` | Atomic Design UI コンポーネント生成 (`atom` / `molecule` / `organism` / `page` / `content`) |\n| `create_animation` | UI トランジション用 Animation クラスを生成。`@next2d/ui` の Tween/Easing/Job を使用。`src/ui/animation/{screen}/` に配置 |\n| `create_domain_service` | Domain 層クラス (Service または Callback) を生成。Service はコアビジネスロジック、Callback は gotoView 完了後に実行 |\n| `create_loading` | ローディング画面クラスを生成。`start()` / `end()` メソッドを持ち、config.json の `loading.callback` で登録 |\n| `add_route` | routing.json へのルートエントリ生成。リクエスト設定 (`json` / `content` / `custom` / `cluster`) に対応 |\n| `create_interface` | TypeScript インターフェースファイル生成 (`I` プレフィックス規約に準拠) |\n\n### アーキテクチャ検証 / Architecture Validation\n\n| Tool | Description |\n|---|---|\n| `validate_architecture` | プロジェクト構造の検証。ディレクトリ構成、設定ファイル、routing.json ↔ View の整合性をチェック |\n\n### ツール使用例 / Tool Usage Example\n\nAI エージェントへの指示例:\n\n```\nNext2Dプロジェクトに「quest/list」画面を追加して。\nAPIからクエスト一覧を取得して表示するようにして。\n```\n\nオーケストレーターモードでは `analyze_project` → `plan_feature` → `add_route` → `create_view` → `create_usecase` → `create_repository` → `create_interface` → `create_ui_component` → `create_animation` → `validate_architecture` を自律的に実行し、必要なファイルをすべて生成します。\n\n---\n\n## Resources / リソース\n\n| Resource | URI | Description |\n|---|---|---|\n| Player API Specs | `next2d://specs/player` | DisplayObject, MovieClip, Sprite, Shape, TextField, Video, Sound, Tween, Events, Filters 等の API リファレンス |\n| Framework Specs | `next2d://specs/framework` | MVVM アーキテクチャ, ルーティング, config 設定, View/ViewModel ライフサイクル, gotoView フロー |\n| Development Specs | `next2d://specs/develop` | プロジェクト構造, CLI コマンド, Interface 定義, Model 層, UI 層 (Atomic Design), View/ViewModel パターン |\n| Architecture Overview | `next2d://architecture` | アーキテクチャ概要, レイヤー構成, 設定ファイル仕様, ライフサイクル, npm コマンド一覧 |\n\n---\n\n## Prompts / プロンプト\n\n| Prompt | Parameters | Description |\n|---|---|---|\n| `orchestrate` | `task`, `screenPath`, `mode` | オーケストレーターモードを起動。`mode: \"create\"` で新規画面作成、`mode: \"modify\"` で既存画面修正のフェーズ別ワークフローを実行 |\n| `new-screen` | `screenName`, `hasApi?`, `hasAnimation?` | 新しい画面追加のステップバイステップガイド |\n| `architecture-guide` | — | アーキテクチャルールとコーディング規約のリファレンス |\n| `debug-help` | `issue` | よくある問題のデバッグのヒントとトラブルシューティング |\n\n### orchestrate プロンプトの使用例 / Orchestrate Prompt Example\n\n```\n# 新規画面作成\norchestrate(task=\"クエスト一覧画面を追加\", screenPath=\"quest/list\", mode=\"create\")\n\n# 既存画面修正\norchestrate(task=\"ホーム画面に検索機能を追加\", screenPath=\"home\", mode=\"modify\")\n```\n\n`create` モードでは `analyze_project` → `plan_feature` → 実装 → `validate_architecture` の順に実行します。\n`modify` モードでは `inspect_screen` → 対象ファイル Read → 最小変更 → `validate_architecture` の順に実行します。\n\n---\n\n## サポートするアーキテクチャ / Supported Architecture\n\n```\nsrc/\n├── config/                    # 設定ファイル (stage.json, config.json, routing.json)\n├── interface/                 # インターフェース定義 (I プレフィックス)\n├── model/\n│   ├── application/           # UseCase (ビジネスロジック)\n│   ├── domain/\n│   │   └── callback/          # gotoView Callback / Loading クラス\n│   │       └── {name}/\n│   │           └── service/   # Domain Service (純粋ビジネスロジック)\n│   └── infrastructure/        # Repository (データアクセス)\n├── ui/\n│   ├── animation/             # UI トランジション Animation クラス\n│   │   └── {screen}/          # 画面別ディレクトリ\n│   ├── component/\n│   │   ├── atom/              # 最小コンポーネント\n│   │   ├── molecule/          # 複合コンポーネント\n│   │   ├── organism/          # 複雑なコンポーネント\n│   │   └── page/              # 画面レイアウト\n│   └── content/               # Animation Tool コンテンツ\n└── view/                      # View \u0026 ViewModel (MVVM)\n```\n\n### レイヤー依存関係 / Layer Dependencies\n\n```\nView Layer (view/, ui/)\n  └─ depends on ─→ Interface Layer (interface/)\n                     ↑\nApplication Layer (model/application/)\n  ├─ depends on ─→ Interface Layer\n  ├─ depends on ─→ Domain Layer (model/domain/)\n  └─ calls ──────→ Infrastructure Layer (model/infrastructure/)\n```\n\n### View ライフサイクル / View Lifecycle\n\n```\nViewModel.constructor\n  → ViewModel.initialize()\n    → View.constructor(vm)\n      → View.initialize()\n        → View.onEnter()\n          → (ユーザー操作 / User interaction)\n            → View.onExit()\n```\n\n---\n\n## 関連リンク / Related Links\n\n- [Next2D Player](https://github.com/Next2D/player) — WebGL/WebGPU 2D レンダリングエンジン\n- [Next2D Framework](https://github.com/Next2D/framework) — MVVM フレームワーク\n- [framework-typescript-template](https://github.com/Next2D/framework-typescript-template) — TypeScript テンプレート\n- [Create Next2D App](https://github.com/Next2D/create-next2d-app) — プロジェクト生成ツール\n- [Next2D Animation Tool](https://tool.next2d.app/) — アニメーション作成ツール\n- [MCP Specification](https://modelcontextprotocol.io/) — Model Context Protocol 仕様\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnext2d%2Fnext2d-development-mcp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnext2d%2Fnext2d-development-mcp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnext2d%2Fnext2d-development-mcp/lists"}