mcpField
M
Miro

Miro

リモート
github.com/miroappメディア・デザイン1646 週間前に更新
ドキュメントリポジトリ

Miro について

Miro AI Developer Tools は、MCP サーバー、プラグイン、エージェントスキルを通じて AI コーディングアシスタントを Miro ボードに接続するツールです。会話を通じて図の作成、設計情報の抽出、タスク管理を行いたい開発者を対象としています。

主な機能

  1. 01MCP サーバー経由での Miro ボードへのアクセス
  2. 02フローチャート、シーケンス図、ERD の生成
  3. 03ボード上の設計やワイヤーフレームからコードへの変換
  4. 04AI チャートと Miro テーブル間のタスク同期
  5. 05Claude Code、Gemini CLI、Codex 向けプラグイン

活用シーン

  1. 01ボード上のワイヤーフレームからのコード生成
  2. 02コードベースのアーキテクチャ図のボード上での作成
  3. 03PR やブランチの変更に対するビジュアルなコードレビュー

MCP 対応

本プロジェクトは Miro のホスト型 MCP サーバーを提供し、AI クライアントは OAuth 認証後に接続できます。Cursor や VSCode などのクライアント向け設定手順も含まれます。

設定

リモートサーバーはインストール不要です。クライアントを選んで設定をコピーするか、ワンクリックで導入できます。

エンドポイントhttps://mcp.miro.com/
インストールコマンドをコピー
Claude CodeTerminal
Cursor.cursor/mcp.json
VS Code.vscode/mcp.json
Claude Desktopclaude_desktop_config.json
Windsurf~/.codeium/windsurf/mcp_config.json

コマンドはターミナルで実行し、JSON は各クライアントの MCP 設定に貼り付けて再起動します。認可が必要なサーバーは初回接続時にログインを求めます。

ツール

詳細

Miro AI Developer Tools

ドキュメント

AI コーディングアシスタントを Miro ボードに接続できます。自然な会話を通じて、図の作成、コンテキストの抽出、デザインからのコード生成、タスクの追跡を行えます。

Gemini CLI のドキュメント、図、テーブルのデモ

フィードバックをお寄せください。

このリポジトリの内容

このリポジトリには、AI ツールを Miro に接続するために必要なすべてが含まれています。

コンポーネント内容
Miro MCP サーバーAI エージェントが Miro ボードにアクセスできるようにする API
プラグインと拡張機能人気の AI ツール向けに事前構築された連携機能
ドキュメント連携機能の使用と開発に関するガイド
対応する AI ツール
AI ツール連携機能
Claude Codeプラグイン
Gemini CLI拡張機能
Codexローカルプラグイン
KiroPower
Agent Skillsスキル
Cursor、VSCode、Windsurf などMCP 設定

クイックスタート

ステップ 1：AI ツールを選択する

以下から AI ツールを選び、インストール手順に従ってください。

ステップ 2：インストールする
Claude Code（推奨） 
/plugin marketplace add miroapp/miro-ai
/plugin install miro@miro-ai

miro プラグインには、すべてのスキル（browse、code-review、code-spec、code-explain-on-board、diagram、doc、format、table）と Miro MCP サーバーが含まれています。

インストール後、Claude Code を再起動してください。以前に Miro MCP を手動で設定していた場合は、競合を避けるために重複した設定を削除してください。プラグインが MCP 接続をすでに管理しています。

詳細はClaude Code Pluginsをご覧ください。

Gemini CLI 
gemini extensions install https://github.com/miroapp/miro-ai

Gemini CLI はこのリポジトリを拡張機能としてインストールし、gemini-extension.json から Miro MCP サーバーを登録して、skills/ に含まれる 8 つのスキルを自動検出します。Gemini CLI を再起動し、プロンプトが表示されたら認証してください。

Gemini CLI Extension | 公式ドキュメント

Kiro
  1. Kiro の Powers パネルを開きます
  2. Add power from GitHub をクリックします
  3. miroapp/miro-ai を入力し、powers/code-gen を選択します

ローカル開発については、CONTRIBUTING.mdをご覧ください。

Kiro Powers | 公式ドキュメント

Agent Skills（agentskills.io）

AI コーディングツール（Claude Code、Cursor、VS Code + Copilot、Codex など）で使える、ポータブルなナレッジスキルです。

npx skills add miroapp/miro-ai                       # Interactive install
npx skills add miroapp/miro-ai --list                # List available skills
npx skills add miroapp/miro-ai --skill=miro-code-review   # Install specific skill

利用可能なスキル：miro-code-explain-on-board、miro-code-review、miro-code-spec

Agent Skills の概要 | agentskills.io

その他の MCP クライアント（Cursor、VSCode + Copilot、Windsurf、Lovable、Replit など）

MCP クライアントの設定ファイルに追加してください。

{
  "mcpServers": {
    "miro": {
      "url": "https://mcp.miro.com/"
    }
  }
}

注： お使いのクライアントで後から Miro プラグインまたは拡張機能が利用可能になった場合は、 重複サーバーを避けるため、そちらに切り替えて手動の設定を削除してください。

クライアントごとの設定ファイルの場所については、MCP セットアップガイドをご覧ください。

ステップ 3：認証する

初めて Miro コマンドを使用するときに、認証を求められます。

  1. Miro OAuth のブラウザーウィンドウが開きます
  2. Miro アカウントにログインします
  3. 要求されたボードへのアクセスを許可します
  4. AI ツールに戻れば、接続完了です！
ステップ 4：試してみる

以下のプロンプト例で設定をテストしてください。

"What's on my Miro board https://miro.com/app/board/..."

"Create a flowchart on Miro showing a user login flow"

"Summarize the architecture diagram on my Miro board"
開発者モード

プラグインを変更したり、変更をローカルでテストしたり、独自のものを構築したりしたいですか？開発環境のセットアップ手順については、CONTRIBUTING.mdをご覧ください。

Codex プラグインは、リポジトリのマーケットプレイスである .agents/plugins/marketplace.json とともに、ローカルの codex-plugins/*/ に生成されます。生成される構造についてはCodex Pluginsをご覧ください。再生成とローカルテストについてはCONTRIBUTING.mdをご覧ください。

サーバーの重複を避ける

クライアントに Miro プラグインまたは拡張機能がある場合は、それだけを使用してください。https://mcp.miro.com/ を手動で追加しないでください。インストール方法ごとに独立した MCP 接続と個別の OAuth セッションが作成されるため、複数を実行するとツールが重複し、認証に関する混乱が生じます。

診断とクリーンアップの手順については、Miro の開発者向けドキュメントにある重複した MCP サーバーガイドをご覧ください。

エンタープライズユーザー

管理者による承認が必要です：組織が Miro Enterprise プランを利用している場合、接続する前に管理者が MCP サーバーを有効にする必要があります。

セットアップ手順については、エンタープライズガイドをご覧ください。

何ができますか？

スキル（Claude Code）

やりたいことを自然な言葉で説明すると、スキルが自動的に有効になります。スラッシュコマンドは必要ありません。Miro ボードの URL を含めるだけです。

スキル起動するフレーズ
miro-code-explain-on-board「…のコードベースを説明して」「…のアーキテクチャを可視化して」
miro-code-review「…の PR 123 をレビューして」「…のブランチを視覚的にレビューして」
miro-code-spec「…から仕様を抽出して」「…にある設計ドキュメントを取得して」

ボード上でコンテンツ（図、ドキュメント、テーブル、付箋、単独形式）を作成する場合、スキルは必要ありません。直接依頼してください。Miro MCP サーバー独自のツールで対応でき、必要に応じて作成ガイダンスが読み込まれます。

機能（すべてのプラットフォーム）
機能説明
図を生成コードや説明からフローチャート、シーケンス図、ER 図を作成します
コードを生成ボードのデザインやワイヤーフレームを動作するコードに変換します
タスクを追跡AI との会話と Miro テーブル間でタスクを同期します
コンテキストを抽出ボードのコンテンツを読み取り、AI ワークフローに役立てます

利用可能なプラグイン

Claude Code
プラグイン説明
miro3 つのスキル（code-explain-on-board、code-review、code-spec）をバンドルしたコア MCP 統合
Gemini CLI
拡張機能説明
miroスキルをバンドルしたコア MCP 統合
Codex
プラグイン説明
miroネイティブの $miro:<skill> 起動と MCP アクセスに対応したコア MCP 統合
Agent Skills
スキル説明
miro-code-explain-on-board最小限で記法が正確な図のセットと補足ドキュメントを使って、ボード上でコードベースを説明します
miro-code-reviewPR、ローカルの変更、ブランチの比較を対象にした視覚的なコードレビュー
miro-code-specMiro の仕様（ドキュメント、図、プロトタイプ、テーブル、画像）を .miro/specs/ に抽出します
Kiro
Power説明
code-genデザインからコードを作成するワークフロー

セキュリティ

  • OAuth 2.1 による安全な認可
  • エンタープライズコンプライアンス基準
  • Miro アカウントを介した権限ベースのアクセス
  • レート制限による API 保護

ドキュメント

はじめに
プラットフォームガイド
リファレンス
開発
外部

対応している MCP クライアント

Claude Code、Cursor、VSCode + GitHub Copilot、Gemini CLI、Lovable、Replit、Windsurf、Kiro、Glean、Devin、OpenAI Codex

フィードバックとサポート

ライセンス

MIT — LICENSEを参照してください

Miroが心を込めて開発しました

コメント

Markdown 対応

MCP は初めてですか？

プロトコルの概要から最初のサーバーの導入まで、よくある疑問にまとめて答えます。

AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。