Blueprint MCP

🚀 Blueprint MCP

Blueprint MCPは、Nano Banana Proを使用してコードベースやシステムアーキテクチャを理解するためのダイアグラム生成ツールです。Arcadeのエコシステムと連携し、HubSpot、Google Drive、GitHubなどのツールからデータを抽出し、ダイアグラムとして視覚化することができます。

この画像は、Blueprint MCP、Nano Banana Pro、およびArcade MCPサーバーを使用して生成されました。

🚀 クイックスタート

✨ セットアップ

1. Arcadeにサインアップする

https://arcade.dev

2. 依存関係をインストールする

# 仮想環境を作成する
python3 -m venv venv
source venv/bin/activate  # Windowsの場合: venv\Scripts\activate

# Arcade CLIをインストールする
pip install arcade-mcp

3. Arcadeにログインする

arcade-mcp login

4. Google AI Studio APIキーを取得する

https://aistudio.google.com/ → APIキーを作成する

5. Arcadeにシークレットを保存する

arcade-mcp secret set GOOGLE_API_KEY="your_api_key_here"

6. サーバーをデプロイする

cd architect_mcp
arcade-mcp deploy

7. ゲートウェイを作成する

1. https://api.arcade.dev/dashboard にアクセスする
2. 「Gateways」→「Create Gateway」をクリックする
3. デプロイした architect_mcp サーバーをゲートウェイに追加する

8. Cursorを設定する

1. Cursorで: Settings → MCP
2. ArcadeゲートウェイURLを追加する
3. Cursorを再起動する

💻 使用例

基本的な使用法

• start_diagram_job - 生成を開始し、ジョブIDを返します
• check_job_status - 完了したかどうかを確認します
• download_diagram - PNGをbase64形式でダウンロードします

具体的なプロンプト例

コードアーキテクチャを視覚化する:

src/auth/ の認証モジュールを分析し、コンポーネントとその関係を示すアーキテクチャダイアグラムを作成してください。

APIフローを文書化する:

src/auth/oauth.py のコードに基づいて、OAuthログインフローを示すシーケンス図を作成してください。

プロセスを説明する:

チェックアウトから確認までの手順を示し、支払い処理がどのように機能するかを説明するフローチャートを生成してください。

データパイプラインを理解する:

data/ ディレクトリに基づいて、ソース、変換、および宛先を示すETLパイプラインのデータフロー図を作成してください。

他のArcadeツールと組み合わせる:

HubSpotから「Acme Corp」の最新の取引を取得し、提案されたソリューションのアーキテクチャダイアグラムを作成してください。

Google Driveからシステム設計ドキュメントを読み取り、それから視覚的なアーキテクチャダイアグラムを生成してください。

🔧 仕組みの説明

1. start_diagram_job → すぐにジョブIDを返します
2. 30秒待つ (Nano Banana Proが生成します)
3. check_job_status → 「Complete」かどうかを確認します
4. download_diagram → base64形式のPNGを取得します
5. エージェントがデコードし、ワークスペースに保存します

📚 ダイアグラムの例

エンタープライズアーキテクチャ - 銀行のユースケース

Cursorのプロンプト:

Arcadeを深く理解し、AI、LLM、およびエージェントの広いシーンでArcadeを理解したい初心者向けにアーキテクチャダイアグラムを作成できますか？ このアーキテクチャが銀行のような現実的なエンタープライズシナリオに適合し、Arcade MCP Runtimeがその広いアーキテクチャにどのように適合するかを示してほしいです。

https://docs.arcade.dev/llms.txt

Blueprint MCPツールが受け取ったプロンプト: "5つのレイヤーを持つエンタープライズアーキテクチャダイアグラムを作成します: レイヤー1 エンドユーザー (カスタマーサービスエージェント、ローン担当者、コンプライアンスチーム、ITオペレーション)、レイヤー2 銀行AIアシスタント (Cursor IDE / カスタムUI)、レイヤー3 AIレイヤー (GPT - 4/ClaudeおよびLangChain/CrewAIを示す、モデル非依存)、レイヤー4 Arcade MCP Runtime (大きなボックス) で、ランタイムコンポーネント (MCPゲートウェイ、ツールレジストリ、OAuth 2.0認証、シークレット管理、セッションマネージャー) を含み、ホストされたMCPサーバーセクションに6つのMCPサーバー (Salesforce、Email/Gmail、Slack、データベース、ドキュメント、カスタム銀行) がすべてArcadeのボックス内にあります、レイヤー5 銀行の既存のインフラストラクチャ (コア銀行システム、CRM Salesforce、コンプライアンスデータベース、ドキュメントリポジトリ、通信システム、レガシーAPI)。 ラベル付きのデータフロー矢印 (ツール呼び出し、認証済みリクエスト、API呼び出し) を表示します。 技術的なホワイトボードスタイル、淡い色 (灰色、薄い青色、紫色、オレンジ色)、等幅フォント、16:9を使用します。"

LangGraphアーキテクチャ学習カード

Cursorのプロンプト:

LangGraphアーキテクチャをもっと理解したいです。 ここでLangGraphのコードベースをチェックアウトしました:

/Users/guru/dev/nano/langgraph

徹底的な分析を行い、アーキテクチャを理解するのに役立てていただけますか？ キーコンポーネント、フローを視覚的な画像で知りたいです。 印刷して同僚のアーキテクトに渡し、学習に役立てることができる完全に視覚的な学習カードのようなものを作成できますか？

Blueprint MCPツールが受け取ったプロンプト: "6つのセクションを持つLangGraphアーキテクチャ学習カードを作成します: コアコンポーネント (状態、ノード、エッジとフローダイアグラム)、StateGraphクラスのワークフロー (定義 → 構築 → コンパイル → 実行)、Pregelにインスパイアされた実行 (並列/逐次実行の例を示すスーパーステップ)、チェックポイントシステム (BaseCheckpointSaver、checkpoint - postgres/sqlite、状態スナップショットのフロー)、モノレポ構造 (langgraphコア、プリビルト、チェックポイントライブラリ、cli、sdk - py、sdk - js)、および機能 (永続的な実行、人間の介入、メモリ、ストリーミング、マルチエージェント、サブグラフ)。 技術的なホワイトボードスタイル、淡い色 (青色、灰色、紫色、緑色、オレンジ色)、コード用語に等幅フォント、情報密度の高いレイアウト、16:9、印刷品質を使用します。"