基于TinyEngine低代码引擎的AI Agent开发完整指南

TinyEngine在2026年4月30日通过PR #1800正式集成了画布节点级AI助手能力，提供了可扩展的AI Agent框架。本文将从架构原理、环境配置、基础开发、高级扩展四个维度，详细讲解如何基于TinyEngine构建自定义AI Agent，并提供可直接运行的代码示例。

一、TinyEngine AI Agent 整体架构

TinyEngine采用**“低代码画布+大语言模型+工具调用”**的混合架构，AI Agent直接与画布节点交互，实现"自然语言描述→节点自动修改/生成→实时预览"的闭环。

核心架构分层

┌─────────────────────────────────────────┐
│  用户交互层 (Canvas UI)                 │
│  - 节点右键AI助手入口                   │
│  - 对话面板与结果预览                   │
└───────────────────┬─────────────────────┘
                    │
┌───────────────────▼─────────────────────┐
│  AI Agent 核心层                        │
│  - 提示词模板系统 (Prompt Templates)    │
│  - 节点上下文提取器                     │
│  - JSON结果解析与验证器                 │
│  - 工具调用管理器                       │
└───────────────────┬─────────────────────┘
                    │
┌───────────────────▼─────────────────────┐
│  大模型适配层                           │
│  - OpenAI/GPT-4o                        │
│  - Claude 3 Opus                        │
│  - 本地开源模型 (Qwen/Llama)            │
└───────────────────┬─────────────────────┘
                    │
┌───────────────────▼─────────────────────┐
│  画布操作层 (Canvas API)                │
│  - 节点属性修改                         │
│  - 节点创建/删除/移动                   │
│  - 事件与逻辑绑定                       │
└─────────────────────────────────────────┘

关键设计特点

  1. 节点级上下文感知：AI Agent自动获取当前选中节点的完整DSL描述
  2. 结构化输出强制：通过提示词和JSON Schema强制大模型返回可直接执行的操作指令
  3. 可插拔工具系统：支持注册自定义工具扩展AI能力
  4. 安全沙箱：所有AI生成的代码和操作都经过验证后才会执行

二、环境准备与基础配置

1. 克隆并启动最新版TinyEngine

# 克隆主仓库
git clone https://atomgit.com/opentiny/tiny-engine.git
cd tiny-engine

# 安装依赖
pnpm install

# 启动本地开发服务器
pnpm dev

2. 配置大模型API密钥

TinyEngine默认支持OpenAI和Claude，在.env.local文件中添加以下配置：

# OpenAI 配置
VITE_OPENAI_API_KEY=your-openai-api-key
VITE_OPENAI_BASE_URL=https://api.openai.com/v1

# Claude 配置 (可选)
VITE_CLAUDE_API_KEY=your-claude-api-key
VITE_CLAUDE_BASE_URL=https://api.anthropic.com/v1

# 选择默认模型
VITE_DEFAULT_AI_MODEL=gpt-4o

3. 验证AI助手功能

启动项目后，访问http://localhost:8080，拖拽任意组件到画布，右键点击节点，会看到"AI助手"选项，点击即可打开对话面板。

三、基础AI Agent开发：扩展节点修改能力

1. 理解内置AI助手的工作流程

内置AI助手的核心逻辑位于packages/designer/src/composables/useAIHelper.ts，工作流程如下：

  1. 用户右键点击节点，选择"AI助手"
  2. 系统提取当前节点的完整DSL（包括属性、样式、事件）
  3. 将DSL和用户指令一起发送给大模型
  4. 大模型返回JSON格式的修改指令
  5. 系统验证JSON并应用到画布节点

2. 自定义提示词模板

创建packages/designer/src/ai/prompts/nodeModifyPrompt.ts：

export const nodeModifyPrompt = `
你是一个专业的低代码平台AI助手，负责根据用户的自然语言描述修改画布节点。

当前节点信息：
{{nodeDSL}}

请根据用户的指令，返回一个JSON对象，包含以下字段：
- action: 操作类型，只能是"modify"、"create"、"delete"
- target: 目标节点ID
- changes: 要修改的属性对象
- description: 对修改内容的简要说明

示例：
{
  "action": "modify",
  "target": "button-123",
  "changes": {
    "props": {
      "text": "提交订单",
      "type": "primary"
    },
    "style": {
      "width": "120px",
      "height": "40px"
    }
  },
  "description": "将按钮文字改为'提交订单'，设置为主按钮样式，调整尺寸为120x40px"
}

注意：
1. 只返回JSON，不要添加任何其他文字
2. 严格按照示例格式返回
3. 不要修改节点ID和类型
4. 如果用户指令不明确，返回description说明需要的信息
`;

3. 注册自定义提示词

修改packages/designer/src/ai/aiService.ts：

import { nodeModifyPrompt } from './prompts/nodeModifyPrompt';

class AIService {
  private async sendRequest(prompt: string, nodeDSL: any) {
    const fullPrompt = nodeModifyPrompt.replace('{{nodeDSL}}', JSON.stringify(nodeDSL, null, 2));
    
    const response = await fetch(`${import.meta.env.VITE_OPENAI_BASE_URL}/chat/completions`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${import.meta.env.VITE_OPENAI_API_KEY}`
      },
      body: JSON.stringify({
        model: import.meta.env.VITE_DEFAULT_AI_MODEL,
        messages: [
          { role: 'system', content: fullPrompt },
          { role: 'user', content: prompt }
        ],
        temperature: 0.1,
        response_format: { type: 'json_object' }
      })
    });

    const data = await response.json();
    return JSON.parse(data.choices[0].message.content);
  }

  async modifyNode(nodeId: string, prompt: string) {
    const nodeDSL = this.canvasService.getNodeDSL(nodeId);
    const result = await this.sendRequest(prompt, nodeDSL);
    
    // 验证结果
    if (result.action === 'modify' && result.target === nodeId) {
      this.canvasService.applyChanges(nodeId, result.changes);
      return result.description;
    }
    
    throw new Error('AI返回结果无效');
  }
}

export const aiService = new AIService();

四、高级AI Agent开发：添加工具调用能力

1. 实现工具调用框架

创建packages/designer/src/ai/tools/toolManager.ts：

interface Tool {
  name: string;
  description: string;
  parameters: any;
  execute: (args: any) => Promise<any>;
}

class ToolManager {
  private tools: Map<string, Tool> = new Map();

  registerTool(tool: Tool) {
    this.tools.set(tool.name, tool);
  }

  getTool(name: string): Tool | undefined {
    return this.tools.get(name);
  }

  getToolsDescription(): string {
    return Array.from(this.tools.values()).map(tool => `
- ${tool.name}: ${tool.description}
  参数: ${JSON.stringify(tool.parameters)}
`).join('\n');
  }

  async executeTool(name: string, args: any): Promise<any> {
    const tool = this.getTool(name);
    if (!tool) {
      throw new Error(`工具 ${name} 不存在`);
    }
    return await tool.execute(args);
  }
}

export const toolManager = new ToolManager();

2. 实现一个"接口数据生成"工具

创建packages/designer/src/ai/tools/generateMockDataTool.ts：

import { toolManager } from './toolManager';

const generateMockDataTool = {
  name: 'generate_mock_data',
  description: '根据用户描述生成模拟接口数据',
  parameters: {
    type: 'object',
    properties: {
      description: { type: 'string', description: '接口数据的描述' },
      count: { type: 'number', description: '生成的数据条数', default: 10 }
    },
    required: ['description']
  },
  execute: async (args: { description: string; count: number }) => {
    const response = await fetch(`${import.meta.env.VITE_OPENAI_BASE_URL}/chat/completions`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${import.meta.env.VITE_OPENAI_API_KEY}`
      },
      body: JSON.stringify({
        model: 'gpt-4o',
        messages: [
          { role: 'system', content: '你是一个模拟数据生成器，只返回JSON格式的模拟数据' },
          { role: 'user', content: `生成${args.count}条${args.description}的模拟数据` }
        ],
        response_format: { type: 'json_object' }
      })
    });

    const data = await response.json();
    return JSON.parse(data.choices[0].message.content);
  }
};

toolManager.registerTool(generateMockDataTool);

3. 修改AI服务支持工具调用

更新packages/designer/src/ai/aiService.ts：

import { toolManager } from './tools/toolManager';

class AIService {
  private async sendRequestWithTools(prompt: string, nodeDSL: any) {
    const systemPrompt = `
你是一个专业的低代码平台AI助手，可以使用以下工具来完成任务：
${toolManager.getToolsDescription()}

当需要使用工具时，返回以下格式的JSON：
{
  "type": "tool_call",
  "tool_name": "工具名称",
  "tool_args": { "参数名": "参数值" }
}

当不需要使用工具时，返回以下格式的JSON：
{
  "type": "final_response",
  "content": {
    "action": "modify",
    "target": "节点ID",
    "changes": {},
    "description": ""
  }
}

当前节点信息：
{{nodeDSL}}
`;

    let response = await this.sendRawRequest(systemPrompt.replace('{{nodeDSL}}', JSON.stringify(nodeDSL, null, 2)), prompt);
    
    // 处理工具调用
    while (response.type === 'tool_call') {
      const toolResult = await toolManager.executeTool(response.tool_name, response.tool_args);
      
      // 将工具结果返回给大模型
      response = await this.sendRawRequest(
        systemPrompt.replace('{{nodeDSL}}', JSON.stringify(nodeDSL, null, 2)),
        `工具执行结果：${JSON.stringify(toolResult)}\n请根据这个结果继续完成任务`
      );
    }
    
    return response.content;
  }

  private async sendRawRequest(systemPrompt: string, userPrompt: string) {
    const response = await fetch(`${import.meta.env.VITE_OPENAI_BASE_URL}/chat/completions`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${import.meta.env.VITE_OPENAI_API_KEY}`
      },
      body: JSON.stringify({
        model: import.meta.env.VITE_DEFAULT_AI_MODEL,
        messages: [
          { role: 'system', content: systemPrompt },
          { role: 'user', content: userPrompt }
        ],
        temperature: 0.1,
        response_format: { type: 'json_object' }
      })
    });

    const data = await response.json();
    return JSON.parse(data.choices[0].message.content);
  }

  async modifyNodeWithTools(nodeId: string, prompt: string) {
    const nodeDSL = this.canvasService.getNodeDSL(nodeId);
    const result = await this.sendRequestWithTools(prompt, nodeDSL);
    
    if (result.action === 'modify' && result.target === nodeId) {
      this.canvasService.applyChanges(nodeId, result.changes);
      return result.description;
    }
    
    throw new Error('AI返回结果无效');
  }
}

五、实战案例：实现一个"智能表单生成"AI Agent

1. 需求分析

用户输入"生成一个用户注册表单，包含姓名、邮箱、手机号、密码和确认密码"，AI Agent自动：

  1. 创建表单组件
  2. 添加对应的表单项
  3. 设置表单验证规则
  4. 绑定提交事件

2. 实现代码

创建packages/designer/src/ai/agents/formGeneratorAgent.ts：

import { aiService } from '../aiService';
import { canvasService } from '../../services/canvasService';

class FormGeneratorAgent {
  async generateForm(description: string) {
    // 1. 创建表单容器
    const formId = canvasService.createNode('Form', {
      props: {
        labelWidth: '100px',
        labelPosition: 'left'
      },
      style: {
        width: '500px',
        margin: '20px auto'
      }
    });

    // 2. 让AI生成表单项
    const prompt = `
根据以下描述生成一个表单的表单项配置：
${description}

返回JSON格式，包含以下字段：
{
  "items": [
    {
      "type": "Input",
      "label": "字段标签",
      "name": "字段名",
      "required": true/false,
      "placeholder": "占位符",
      "rules": [
        { "type": "email", "message": "请输入正确的邮箱格式" }
      ]
    }
  ]
}
`;

    const result = await aiService.sendRawRequest(
      '你是一个专业的表单设计器，只返回JSON格式的表单项配置',
      prompt
    );

    // 3. 应用表单项到表单
    for (const item of result.items) {
      const itemId = canvasService.createNode(item.type, {
        props: {
          label: item.label,
          name: item.name,
          placeholder: item.placeholder,
          rules: item.rules
        },
        parentId: formId
      });
    }

    // 4. 添加提交按钮
    canvasService.createNode('Button', {
      props: {
        text: '提交',
        type: 'primary',
        onClick: 'handleSubmit'
      },
      style: {
        marginTop: '20px'
      },
      parentId: formId
    });

    return `已成功生成表单，包含${result.items.length}个表单项`;
  }
}

export const formGeneratorAgent = new FormGeneratorAgent();

3. 注册到AI助手入口

修改packages/designer/src/components/NodeContextMenu.vue：

<template>
  <el-dropdown-menu>
    <el-dropdown-item @click="openAIHelper">AI助手</el-dropdown-item>
    <el-dropdown-item @click="generateForm">智能生成表单</el-dropdown-item>
  </el-dropdown-menu>
</template>

<script setup lang="ts">
import { formGeneratorAgent } from '../ai/agents/formGeneratorAgent';

const generateForm = async () => {
  const description = await ElInput.prompt('请描述您需要的表单：');
  if (description) {
    const result = await formGeneratorAgent.generateForm(description);
    ElMessage.success(result);
  }
};
</script>

六、部署与集成

1. 构建包含AI Agent的低代码平台

pnpm build:prod

2. 部署到Nginx

将dist目录上传到服务器，配置Nginx：

server {
  listen 80;
  server_name shturl.cc/dZc3q;
  
  location / {
    root /path/to/dist;
    index index.html;
    try_files $uri $uri/ /index.html;
  }
  
  # 代理大模型API请求（避免跨域）
  location /v1/ {
    proxy_pass https://api.openai.com/v1/;
    proxy_set_header Authorization $http_authorization;
  }
}

七、最佳实践与注意事项

  1. 提示词工程：使用明确的指令和示例，强制JSON输出格式，降低大模型幻觉
  2. 结果验证：始终验证AI返回的结果，避免执行恶意代码
  3. 错误处理：添加完善的错误处理和用户提示
  4. 性能优化：缓存常用的AI响应，减少API调用次数
  5. 安全考虑：在生产环境中，不要将API密钥暴露在前端，应该通过后端代理

结语

WebMCP 的出现，彻底改变了 AI 与 Web 应用的交互方式，让 AI 从 “能聊天” 变成了 “能做事”。而 TinyEngine 低代码引擎则进一步降低了 WebMCP 的落地门槛，让普通开发者也能快速构建出强大的 AI 驱动应用。

OpenTiny 作为前端智能化的先行者，不仅提供了 TinyEngine、TinyVue 等优秀的开源产品，还通过系列直播和社区分享，将前沿技术毫无保留地分享给开发者。如果你也对前端智能化感兴趣，不妨访问 https://atomgit.com/opentiny/tiny-engine ，参与到 OpenTiny 开源生态中来，一起探索 AI 时代前端开发的无限可能。

# 低代码 # 人工智能 # 人机交互
Logo
AI Agent技术社区

Agent 垂直技术社区，欢迎活跃、内容共建。

更多推荐

cover

AI Agent 记忆系统设计：从短期上下文到长期知识持久化的工程实践

avatar AI Agent技术社区
cover

数以轻舟Agent：做表AI智能体与普通大模型直接处理数据的区别

avatar AI Agent技术社区
cover

DeerFlow Subagent 实现解析：基于 Tool 抽象的多智能体编排架构

avatar AI Agent技术社区