基于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) │ │ - 节点属性修改 │ │ - 节点创建/删除/移动 │ │ - 事件与逻辑绑定 │ └─────────────────────────────────────────┘关键设计特点节点级上下文感知AI Agent自动获取当前选中节点的完整DSL描述结构化输出强制通过提示词和JSON Schema强制大模型返回可直接执行的操作指令可插拔工具系统支持注册自定义工具扩展AI能力安全沙箱所有AI生成的代码和操作都经过验证后才会执行二、环境准备与基础配置1. 克隆并启动最新版TinyEngine# 克隆主仓库gitclone https://atomgit.com/opentiny/tiny-engine.gitcdtiny-engine# 安装依赖pnpminstall# 启动本地开发服务器pnpmdev2. 配置大模型API密钥TinyEngine默认支持OpenAI和Claude在.env.local文件中添加以下配置# OpenAI 配置 VITE_OPENAI_API_KEYyour-openai-api-key VITE_OPENAI_BASE_URLhttps://api.openai.com/v1 # Claude 配置 (可选) VITE_CLAUDE_API_KEYyour-claude-api-key VITE_CLAUDE_BASE_URLhttps://api.anthropic.com/v1 # 选择默认模型 VITE_DEFAULT_AI_MODELgpt-4o3. 验证AI助手功能启动项目后访问http://localhost:8080拖拽任意组件到画布右键点击节点会看到AI助手选项点击即可打开对话面板。三、基础AI Agent开发扩展节点修改能力1. 理解内置AI助手的工作流程内置AI助手的核心逻辑位于packages/designer/src/composables/useAIHelper.ts工作流程如下用户右键点击节点选择AI助手系统提取当前节点的完整DSL包括属性、样式、事件将DSL和用户指令一起发送给大模型大模型返回JSON格式的修改指令系统验证JSON并应用到画布节点2. 自定义提示词模板创建packages/designer/src/ai/prompts/nodeModifyPrompt.tsexportconstnodeModifyPrompt你是一个专业的低代码平台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.tsimport{nodeModifyPrompt}from./prompts/nodeModifyPrompt;classAIService{privateasyncsendRequest(prompt:string,nodeDSL:any){constfullPromptnodeModifyPrompt.replace({{nodeDSL}},JSON.stringify(nodeDSL,null,2));constresponseawaitfetch(${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}})});constdataawaitresponse.json();returnJSON.parse(data.choices[0].message.content);}asyncmodifyNode(nodeId:string,prompt:string){constnodeDSLthis.canvasService.getNodeDSL(nodeId);constresultawaitthis.sendRequest(prompt,nodeDSL);// 验证结果if(result.actionmodifyresult.targetnodeId){this.canvasService.applyChanges(nodeId,result.changes);returnresult.description;}thrownewError(AI返回结果无效);}}exportconstaiServicenewAIService();四、高级AI Agent开发添加工具调用能力1. 实现工具调用框架创建packages/designer/src/ai/tools/toolManager.tsinterfaceTool{name:string;description:string;parameters:any;execute:(args:any)Promiseany;}classToolManager{privatetools:Mapstring,ToolnewMap();registerTool(tool:Tool){this.tools.set(tool.name,tool);}getTool(name:string):Tool|undefined{returnthis.tools.get(name);}getToolsDescription():string{returnArray.from(this.tools.values()).map(tool-${tool.name}:${tool.description}参数:${JSON.stringify(tool.parameters)}).join(\n);}asyncexecuteTool(name:string,args:any):Promiseany{consttoolthis.getTool(name);if(!tool){thrownewError(工具${name}不存在);}returnawaittool.execute(args);}}exportconsttoolManagernewToolManager();2. 实现一个接口数据生成工具创建packages/designer/src/ai/tools/generateMockDataTool.tsimport{toolManager}from./toolManager;constgenerateMockDataTool{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}){constresponseawaitfetch(${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}})});constdataawaitresponse.json();returnJSON.parse(data.choices[0].message.content);}};toolManager.registerTool(generateMockDataTool);3. 修改AI服务支持工具调用更新packages/designer/src/ai/aiService.tsimport{toolManager}from./tools/toolManager;classAIService{privateasyncsendRequestWithTools(prompt:string,nodeDSL:any){constsystemPrompt你是一个专业的低代码平台AI助手可以使用以下工具来完成任务${toolManager.getToolsDescription()}当需要使用工具时返回以下格式的JSON { type: tool_call, tool_name: 工具名称, tool_args: { 参数名: 参数值 } } 当不需要使用工具时返回以下格式的JSON { type: final_response, content: { action: modify, target: 节点ID, changes: {}, description: } } 当前节点信息 {{nodeDSL}};letresponseawaitthis.sendRawRequest(systemPrompt.replace({{nodeDSL}},JSON.stringify(nodeDSL,null,2)),prompt);// 处理工具调用while(response.typetool_call){consttoolResultawaittoolManager.executeTool(response.tool_name,response.tool_args);// 将工具结果返回给大模型responseawaitthis.sendRawRequest(systemPrompt.replace({{nodeDSL}},JSON.stringify(nodeDSL,null,2)),工具执行结果${JSON.stringify(toolResult)}\n请根据这个结果继续完成任务);}returnresponse.content;}privateasyncsendRawRequest(systemPrompt:string,userPrompt:string){constresponseawaitfetch(${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}})});constdataawaitresponse.json();returnJSON.parse(data.choices[0].message.content);}asyncmodifyNodeWithTools(nodeId:string,prompt:string){constnodeDSLthis.canvasService.getNodeDSL(nodeId);constresultawaitthis.sendRequestWithTools(prompt,nodeDSL);if(result.actionmodifyresult.targetnodeId){this.canvasService.applyChanges(nodeId,result.changes);returnresult.description;}thrownewError(AI返回结果无效);}}五、实战案例实现一个智能表单生成AI Agent1. 需求分析用户输入生成一个用户注册表单包含姓名、邮箱、手机号、密码和确认密码AI Agent自动创建表单组件添加对应的表单项设置表单验证规则绑定提交事件2. 实现代码创建packages/designer/src/ai/agents/formGeneratorAgent.tsimport{aiService}from../aiService;import{canvasService}from../../services/canvasService;classFormGeneratorAgent{asyncgenerateForm(description:string){// 1. 创建表单容器constformIdcanvasService.createNode(Form,{props:{labelWidth:100px,labelPosition:left},style:{width:500px,margin:20px auto}});// 2. 让AI生成表单项constprompt根据以下描述生成一个表单的表单项配置${description}返回JSON格式包含以下字段 { items: [ { type: Input, label: 字段标签, name: 字段名, required: true/false, placeholder: 占位符, rules: [ { type: email, message: 请输入正确的邮箱格式 } ] } ] };constresultawaitaiService.sendRawRequest(你是一个专业的表单设计器只返回JSON格式的表单项配置,prompt);// 3. 应用表单项到表单for(constitemofresult.items){constitemIdcanvasService.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}个表单项;}}exportconstformGeneratorAgentnewFormGeneratorAgent();3. 注册到AI助手入口修改packages/designer/src/components/NodeContextMenu.vuetemplate el-dropdown-menu el-dropdown-item clickopenAIHelperAI助手/el-dropdown-item el-dropdown-item clickgenerateForm智能生成表单/el-dropdown-item /el-dropdown-menu /template script setup langts 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的低代码平台pnpmbuild:prod2. 部署到Nginx将dist目录上传到服务器配置Nginxserver { 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; } }七、最佳实践与注意事项提示词工程使用明确的指令和示例强制JSON输出格式降低大模型幻觉结果验证始终验证AI返回的结果避免执行恶意代码错误处理添加完善的错误处理和用户提示性能优化缓存常用的AI响应减少API调用次数安全考虑在生产环境中不要将API密钥暴露在前端应该通过后端代理
