官网：猫拽低代码平台
一个基于 ReAct 模式 + MCP 协议的低代码智能体实现
猫拽低代码是一个「自带 AI 大脑」的可视化开发平台，而其最新的AI Agent 插件，则把低代码的智能化推向新高度——不只对话，更能自动执行页面搭建、工作流配置等真实开发任务。
📌 核心亮点速览
| 特性 | 说明 |
|---|---|
| 🧠ReAct 模式 | 思考（Reasoning）→ 调用工具（Acting）→ 观察结果（Observation），循环执行复杂任务 |
| 🔌MCP 协议 | 标准化的工具调用接口，Agent 可像调用本地函数一样操作设计器、工作流 |
| 🗂️任务规划器 | 输出结构化 JSON 计划，支持步骤依赖与状态流转 |
| 🛠️丰富工具集 | 页面操作、工作流操作、技能调用……且强制“先读后写”、批量修改 |
| 🎨设计技能库 | 内置 Apple Design、Linear Design 等多套风格指南，按需调用 |
| 🔧高扩展性 | 轻松添加新工具、新技能，插件化架构即插即用 |
🏗️ 整体架构：一个标准的 ReAct Agent
AI Agent 位于robot/插件中，核心模块包括：
robot/ ├── agent/ │ ├── AgentCore.ts # 状态机与协调器 │ ├── planner.ts # 任务规划器 │ ├── executor.ts # 任务执行器 │ └── prompts.ts # 提示词构建 ├── mcp/ # MCP 工具适配器 └── components/ # UI 聊天组件执行流程全景图：
用户输入 ↓ 加载提示词 & 意图判断 ├─ 普通问答 → 直接输出 Markdown └─ 需要操作 → 规划任务 → ReAct 循环执行 → 生成最终答案状态机在IDLE→PLANNING→EXECUTING→FINAL_ANSWER之间流转，清晰可控。
🔁 ReAct 循环：AI 如何“边想边做”
以“创建一个 Apple 风格的登录页面”为例，Agent 的真实执行逻辑：
思考（Reasoning）
“需要先获取 Apple 设计指南，再读取当前页面结构，最后修改页面。”调用工具（Acting）
get_skill_detail({ skillName: "apple-design" })观察结果（Observation）
“获得指南：极简主义、单一蓝色强调色、大留白……”继续循环
调用get_canvas_materials_page_schema→diff_update_page_dsl→ 完成。
每一次响应最多调用一个工具，天然避免 AI “一次性幻想多个操作” 导致的状态错乱。
📋 任务规划协议
Agent 会先输出一个结构化的 JSON 计划，再逐步执行：
{"type":"plan","plan_id":"plan_001","steps":[{"step_id":1,"type":"tool_call","name":"获取设计指南","tool":"get_skill_detail","args":{"skillName":"apple-design"},"depends_on":[]},{"step_id":2,"type":"tool_call","name":"修改页面","tool":"diff_update_page_dsl","args":{"operations":[...]},"depends_on":[1]}]}规划原则：
- 每个任务对应一个完整业务操作
- 任务数量控制在 2~5 个，复杂场景可扩展至 10~12 个
- 有依赖的任务自动排序
🛠️ 工具系统与技能库
工具分类（部分）
| 类别 | 工具名称 | 功能 |
|---|---|---|
| 页面操作 | get_canvas_materials_page_schema | 获取页面组件树 |
| 页面操作 | diff_update_page_dsl | 批量修改页面（原子化操作） |
| 工作流操作 | get_canvas_workflow_schema | 获取工作流定义 |
| 工作流操作 | add_canvas_workflow_node | 添加节点 |
| 技能调用 | get_skill_detail | 获取设计/开发技能文档 |
内置设计技能
| 技能名称 | 风格特点 |
|---|---|
| Apple Design | 极简黑白，单一蓝色强调色 |
| Airbnb Design | 温暖摄影优先，红色品牌色 |
| Linear Design | 暗色主题，靛蓝强调色 |
| Claude Design | 羊皮纸色调，陶土红品牌色 |
| Stripe Design | 蓝紫渐变，多层阴影 |
Agent 会根据用户需求自动调用对应技能，再生成符合该风格的页面——比纯大模型“自由发挥”稳定得多。
🧩 扩展开发：给 Agent 添加新能力
1. 添加新工具
在src/mcp/下新建文件，使用 Zod 定义参数，注册回调即可：
exportconstMyTool={name:'my_tool',description:'工具描述',inputSchema:z.object({param1:z.string().describe('参数1')}).shape,callback:async(args)=>{// 业务逻辑return{content:[{type:'text',text:{status:'success'}}]};}};2. 添加新技能
在server/src/agent/skills/templates/下创建文件夹，放入SKILL.md：
--- name: my-design description: 我的设计风格，触发词“我的风格” --- # 我的设计指南 - 主色调：#FF6B6B - 圆角：16px - 阴影：...Agent 会在匹配到描述时自动调用get_skill_detail读取该文件。tail 读取该文件。
