MCP蓝图
*使用Blueprint MCP、Nano Banana Pro和Arcade MCP服务器生成的图像。*
使用Nano Banana Pro生成用于理解代码库和系统架构的图表。
与Arcade的生态系统协同工作： 结合HubSpot、Google Drive、GitHub和其他Arcade工具，从您的系统中提取数据并将其可视化为图表。
设置
1.注册Arcade
https://arcade.dev
2.安装依赖项
# Create virtual environment
python3 -m venv venv
source venv/bin/activate # On Windows: venv\Scripts\activate
# Install Arcade CLI
pip install arcade-mcp3.登录Arcade
arcade-mcp login4.获取Google AI Studio API密钥
https://aistudio.google.com/ → 创建API密钥
5.商场秘方
arcade-mcp secret set GOOGLE_API_KEY="your_api_key_here"6.部署服务器
克隆此仓库，然后：
cd blueprint-mcp
arcade-mcp deploy7.创建网关
- 首选https://api.arcade.dev/dashboard
- 点击“网关”→ “创建网关”
- 添加您已部署的
architect_mcp服务器到网关
8.配置光标
- 在光标中：设置→ MCP
- 添加您的Arcade网关URL
- 重新启动游标
用法
工具
start_diagram_job-开始生成，返回作业IDcheck_job_status-检查是否完成download_diagram-将PNG下载为base64格式
示例提示
可视化代码架构：
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.运作原理
start_diagram_job→ 立即返回作业ID- 等待30秒（Nano Banana Pro生成）
check_job_status→ 检查是否“完成”download_diagram→ 获取base64 PNG- 代理解码并保存到工作区
______________________________________________________________________
示例图表
企业架构-银行用例
光标提示：
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工具收到的提示：“创建具有5层的企业架构图：第1层最终用户（客户服务代理、贷款专员、合规团队、IT运营）、第2层银行AI助手（Cursor IDE/Custom UI）、第3层显示GPT-4/Claude和LangChain/CrewAI的AI层（Model-Agnostic）、第4层Arcade MCP运行时（大框），其中包含运行时组件（MCP网关、工具注册表、OAuth 2.0 Auth、机密管理、会话管理器）和托管MCP服务器部分，其中包括6台MCP服务器（Salesforce、电子邮件/GGmail、Slack、数据库、文档、定制银行）所有位于Arcade框内，第5层银行的现有基础设施（核心银行系统，CRM Salesforce、合规性数据库、文档存储库、通信系统、旧版API）。显示带标签的数据流箭头（工具调用、身份验证请求、API调用）。使用技术白板样式、静音颜色（灰色、浅蓝色、紫色、橙色）、单空间字体，16:9。”*
LangGraph架构学习卡
光标提示：
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?*蓝图MCP工具收到提示：“创建包含6个部分的LangGraph架构学习卡：核心组件（状态、节点、带流程图的边）、StateGraph类工作流（定义→ 构建→ 编译→ Execute）、Pregel Inspired Execution（显示并行/顺序执行示例的超级步骤）、检查点系统（BaseCheckpointSaver、检查点postgres/sqlite、状态快照流）、Monrepo结构（langgraph核心、预构建、检查点库、cli、sdk-py、sdk-js）和功能（持久执行、循环中的人、内存、流媒体、多代理、子图）。使用技术白板风格，柔和的颜色（蓝色、灰色、紫色、绿色、橙色），代码术语的单空间字体，信息密集的布局，16:9，可打印质量。"*