让低代码平台拥有“最强大脑”，VTJ.PRO 的AI智能体如何将你的想法一键变成代码？

在低代码开发中，我们一直追求效率与自由的平衡。VTJ.PRO 作为开源的 AI 低代码平台，不仅提供了可视化拖拽和源码双向编辑的能力，更通过深度集成的 AI智能体子系统，为开发者带来了智能化的全新体验。

今天，我们就来彻底拆解 VTJ.PRO 的 AI 底层架构——LLM 模型管理、提示词工程、ReAct 工作流以及从自然语言到 DSL 的完整转换链路。无论你是想接入自己的 API Key，还是好奇 AI 如何生成精准的 Vue 代码，这篇文章都能给你满满的干货！

---

 01  AI 子系统全景：三层架构，各司其职

VTJ.PRO 的 AI 基础设施分为两层：

• LLM 管理层：负责连接不同的模型提供商（OpenAI、DeepSeek、Ollama 等），管理 API Key、Base URL 和模型元数据，并内置缓存优化性能。
• 代理编排层：处理提示词模板、对话上下文、流式传输以及 DSL 的生成与验证。

下图清晰展示了 AI 子系统如何将自然语言需求“翻译”成最终的代码实体：

核心亮点：VTJ.PRO 的 AI 设计是提供商无关的，你可以自由切换模型，甚至接入本地部署的 Ollama，完全掌控数据和成本。

---

 02  LLM 模型管理：灵活配置 + 智能缓存

1.  数据模型：每个模型都是一个实体

在 VTJ.PRO 中，每一个 LLM 实例都由 LLMModelEntity 定义，关键字段包括：

• name：展示名称，如 GPT-4 Turbo

• value：API 调用标识，如 gpt-4-turbo

• provider：提供商（OpenAI、DeepSeek、Ollama、Moonshot、Zhipu、Groq、Anthropic）

• purpose：用途分类——Coder（代码/DSL生成）或Multimodal（图像识别）

• apiKey 和 baseUrl：连接凭证与自定义端点

2.  用途分类：让专业模型做专业事

• Coder 模型：专门用于生成 Vue 3 组件、DSL 结构和增量更新代码，保证输出符合 @vtj/coder 的规范。
• Multimodal 模型：支持图像输入，用于“截图→DSL”的神奇转换。

3.  缓存机制：毫秒级响应

LLMModelService对所有启用的模型列表进行了缓存（Redis/内存），并提供 getCoderModels()、getMultiModel()等专用检索方法，避免每次 AI 请求都查询数据库，大幅降低延迟。

4. 管理界面：可视化配置

在后台的llms.vue 页面，管理员可以：

• 添加/编辑模型，设置自定义 baseUrl（支持 OpenAI 兼容的代理）

• 安全存储 API Key

• 将模型标记为 Coder 或 Multimodal

• 一键启用/禁用

小贴士：想用 DeepSeek 或本地 Ollama？只需在后台填入对应的 baseUrl和apiKey，VTJ.PRO 会自动识别并调用。

---

 03  AI 服务工作流：从提示词到流式输出

1.  AIService：统一的 LLM 网关

AIService 是所有 AI 请求的入口，它负责：

• 根据模型实体动态创建 OpenAI 兼容客户端

• 实现 chatCompletionsStream 方法，支持 SSE 流式传输

• 通过 AbortController 允许用户取消长时间任务

• 记录 token 用量，便于监控和成本分析

2.  PromptService：系统提示词模板库

提示词是 AI 生成质量的灵魂。VTJ.PRO 将提示词以 Markdown 形式存储在 _docs/prompts/ 目录，目前包含三类：

模板文件	用途	核心要求
coder_v3.md	生成 Vue 3 代码	强制混合 API（Composition + Options），使用 SEARCH/REPLACE diff 格式进行增量更新
image.md	分析 UI 截图	输出布局、配色、组件结构的描述性 DSL
json.md	转换设计稿 JSON	将 Figma/MasterGo 导出数据转为可读的实现说明

PromptService 会读取这些模板，并自动注入上下文（如依赖项、平台类型），然后发送给 LLM。

3. 完整调用链路（自然语言 → 代码）

体验亮点：你在工作台中输入的每一句自然语言，背后都经历了这个完整流程，最终变成可编辑、可导出的 Vue 代码。

---

 04  ReAct 模式 + 增量更新：AI 如何“精准动刀”

1.  ReAct（推理 + 行动）五步循环

VTJ.PRO 的 coder_v3 工作流采用了经典的 ReAct 模式，让 AI 不仅会写代码，还会思考和使用工具：

1. T (思考)：分析需求，检查约束
2. P (规划)：拆解任务（创建页面、获取技能、修改组件）
3. A (行动)：输出一个 SEARCH/REPLACE diff 块或 JSON 工具调用
4. O (观察)：接收系统反馈（编译错误、工具结果）
5. F (完成)：总结已完成和待处理的任务

2.  SEARCH/REPLACE：精准的增量更新

传统 AI 经常重写整个文件，既浪费 token 又容易出错。VTJ.PRO 要求 AI 使用精确的 diff 格式：

• SEARCH：要修改的原代码片段（必须唯一匹配）
• REPLACE：修改后的新代码

增量更新工作流：

这种机制保证了 AI 修改的确定性和可回滚性，即使生成错误也不会破坏整个项目。

---

 05  支撑服务：让 AI 稳定落地

TopicService & ChatService

• TopicService：持久化聊天“主题”，每个主题与具体项目/应用关联，保留完整对话历史。
• ChatService：编排对话流程，自动拼接系统提示词、历史记录，调用 AIService 并将结果保存。

ConfigService & ValidationService

• ConfigService：读取全局 AI 配置（如不同用途的默认模型）。
• ValidationService：专门解析 AI 的输出 —— 提取代码块、验证 JSON 工具调用、确保 SEARCH/REPLACE 块能唯一匹配源代码。

模型缓存再提效

LLMModelService 的缓存机制不仅在管理后台生效，在每个 AI Agent 执行周期内同样发挥作用，保证模型列表的快速获取。

---

 06  总结与展望

VTJ.PRO 的 AI智能体子系统并不是简单调用一个 API，而是一套完整的企业级智能开发框架：

• ✅ 多模型自由切换：支持 OpenAI、DeepSeek、Ollama 等，数据不外泄。

• ✅ 提示词精细化管理：针对代码、图像、JSON 分别优化，输出质量可控。

• ✅ ReAct 工作流 + 增量更新：像资深开发者一样思考和修改代码。

• ✅ 开箱即用的管理界面：无需写代码即可配置模型、监控用量。

未来，我们将继续增强 AI 能力，比如接入更多多模态模型、支持自定义工具调用、提供更智能的代码纠错等。

VTJ.PRO 是真正的开源项目，所有代码都在 Gitee 上，并荣获“Gitee 2025 年度开源项目大前端赛道 Top 3”。欢迎你体验、贡献、提出建议！

---

 07  互动时间

你现在在使用哪些 LLM？希望 VTJ.PRO 优先接入哪个模型？
评论区告诉我们，点赞最高的建议我们会优先开发适配！

参考资料

• 官网文档：https://vtj.pro/
• 在线平台：https://app.vtj.pro/
• 开源仓库：https://gitee.com/newgateway/vtj