官网：猫拽低代码平台
一个基于 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 定义参数，注册回调即可：
export const MyTool = {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 读取该文件。