Blueprint MCP

使用Blueprint MCP、Nano Banana Pro和Arcade MCP服务器生成的图像。

使用Nano Banana Pro理解代码库和系统架构的图表生成。

与Arcade生态系统兼容： 结合HubSpot、Google Drive、GitHub和其他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. 点击“网关”→“创建网关”
3. 将已部署的architect_m_服务器添加到网关

8. 配置Cursor

1. 在Cursor中：设置→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/目录，创建一个展示源、转换和目的地的数据流图。

与其他Arcade工具结合：

从HubSpot拉取最新的“Acme Corp”交易，并创建一个提议解决方案的架构图。

从Google Drive读取系统设计文档，并从中生成视觉架构图。

工作原理

1. start_diagram_job → 立即返回作业ID
2. 等待30秒（Nano Banana Pro生成）
3. check_job_status → 检查是否“完成”
4. download_diagram → 获取base64 PNG
5. 代理解码并保存到工作区

---

示例图表

企业架构 - 银行业务案例

Cursor提示：

你能深入理解Arcade，并为初学者创建一个架构图，让他们了解Arcade在更广泛的AI、LLM和代理领域的地位吗？我希望这个架构能够适应现实的企业场景，如银行，展示Arcade MCP运行时如何融入他们的整体架构。

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运行时（大框）包含运行时组件（MCP网关、工具注册表、OAuth 2.0认证、密钥管理、会话管理）以及托管MCP服务器部分，包含6个MCP服务器（Salesforce、电子邮件/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，可打印质量。”

</中文翻译>