Blueprint MCP

🚀 Blueprint MCP

Blueprint MCP 藉助 Nano Banana Pro 實現代碼庫和系統架構的可視化圖表生成，幫助你更好地理解代碼和系統架構。它可以與 Arcade 的生態系統集成，與 HubSpot、Google Drive、GitHub 等工具結合，從你的系統中提取數據並將其可視化為圖表。

🚀 快速開始

✨ 主要特性

• 利用 Nano Banana Pro 生成圖表，助力理解代碼庫和系統架構。
• 與 Arcade 生態系統兼容，可結合多種工具提取數據並可視化。

📦 安裝指南

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 - 以 base64 格式下載 PNG 圖表

示例提示

可視化代碼架構：

Analyze the authentication module in src/auth/ and create an 
architecture diagram showing the components and their relationships.

記錄 API 流程：

Create a sequence diagram showing the OAuth login flow based on 
the code in src/auth/oauth.py

解釋流程：

Generate a flowchart explaining how our payment processing works,
showing the steps from checkout to confirmation.

理解數據管道：

Create a data flow diagram for our ETL pipeline showing sources,
transformations, and destinations based on the data/ directory.

與其他 Arcade 工具結合：

Pull the latest deal from HubSpot for "Acme Corp" and create an
architecture diagram of the proposed solution.

Read the system design doc from Google Drive and generate a 
visual architecture diagram from it.

🔧 技術細節

1. 調用 start_diagram_job 後會立即返回作業 ID。
2. 等待 30 秒（Nano Banana Pro 進行生成操作）。
3. 調用 check_job_status 檢查作業是否 “Complete”。
4. 調用 download_diagram 獲取 base64 格式的 PNG 圖表。
5. 代理會對圖表進行解碼並保存到工作區。

示例圖表

企業架構 - 銀行用例

Cursor 提示：

Can you understand Arcade deeply and create an architecture diagram for someone 
who's new and wants to understand Arcade in the broader AI, LLM, and agent landscape? 
I want this architecture to fit into a realistic enterprise scenario like a bank, 
showcasing how Arcade MCP Runtime fits into their broader architecture.

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

Blueprint MCP 工具接收到的提示：“Create enterprise architecture diagram with 5 layers: LAYER 1 End Users (Customer Service Agents, Loan Officers, Compliance Team, IT Ops), LAYER 2 Banking AI Assistant (Cursor IDE / Custom UI), LAYER 3 AI Layer showing GPT-4/Claude and LangChain/CrewAI (Model-Agnostic), LAYER 4 Arcade MCP Runtime (large box) containing Runtime Components (MCP Gateway, Tool Registry, OAuth 2.0 Auth, Secret Management, Session Manager) AND Hosted MCP Servers section with 6 MCP servers (Salesforce, Email/Gmail, Slack, Database, Document, Custom Banking) ALL INSIDE the Arcade box, LAYER 5 Bank's Existing Infrastructure (Core Banking System, CRM Salesforce, Compliance Database, Document Repository, Communication Systems, Legacy APIs). Show data flow arrows with labels (Tool Calls, Authenticated Requests, API Calls). Use technical whiteboard style, muted colors (gray, light blue, purple, orange), monospace fonts, 16:9.”

LangGraph 架構學習卡

Cursor 提示：

Help me understand the LangGraph architecture better. I have checked out the 
LangGraph codebase here:

/Users/guru/dev/nano/langgraph

Can you do a thorough analysis and help me understand the architecture? I would 
love to know details in a visual image: The key components involved, the flows, 
and can you create like one fully visual learning card sort of thing that helps 
me understand the architecture which I can print and give it to my fellow 
architects and help them learn?

Blueprint MCP 工具接收到的提示：“Create LangGraph architecture learning card with 6 sections: Core Components (State, Nodes, Edges with flow diagram), StateGraph Class workflow (Define → Build → Compile → Execute), Pregel-Inspired Execution showing super-steps with parallel/sequential execution examples, Checkpointing System (BaseCheckpointSaver, checkpoint-postgres/sqlite, state snapshots flow), Monorepo Structure (langgraph core, prebuilt, checkpoint libs, cli, sdk-py, sdk-js), and Capabilities (Durable execution, Human-in-the-loop, Memory, Streaming, Multi-agent, Sub-graphs). Use technical whiteboard style, muted colors (blue, gray, purple, green, orange), monospace fonts for code terms, information-dense layout, 16:9, printable quality.”