官网：猫拽低代码平台

一个基于 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 的真实执行逻辑：

1. 思考（Reasoning）
   “需要先获取 Apple 设计指南，再读取当前页面结构，最后修改页面。”

2. 调用工具（Acting）
   get_skill_detail({ skillName: "apple-design" })

3. 观察结果（Observation）
   “获得指南：极简主义、单一蓝色强调色、大留白……”

4. 继续循环
   调用 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 读取该文件。