效率翻倍！AI智能体深度解析：自然语言 → DSL → Vue组件

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

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

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

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

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

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

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

graph TD
    subgraph Natural Language Space
        User["用户输入 / 图片"]
        TopicService[TopicService 聊天历史]
    end

    subgraph Agent Orchestration Layer
        AgentService[AgentService]
        AIService[AIService OpenAI客户端]
        PromptService[PromptService 提示词模板]
    end

    subgraph LLM Infrastructure
        LLMModelService[LLMModelService]
        LLMModelEntity[LLMModelEntity 数据库]
        CacheService[CacheService Redis/内存]
    end

    subgraph Code Entity Space
        DslService[DslService 低代码DSL]
        Coder["@vtj/coder Vue代码生成"]
    end

    User --> AgentService
    AgentService --> PromptService
    AgentService --> AIService
    AgentService --> DslService
    AIService --> LLMModelService
    LLMModelService --> LLMModelEntity
    LLMModelService --> CacheService
    DslService --> Coder

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

⚙️ 二、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 请求都查询数据库，大幅降低延迟。

模型解析流程：

sequenceDiagram
    participant AgentModule as AgentModule / AIService
    participant Service as LLMModelService
    participant Cache as CacheModule
    participant DB as MySQL

    AgentModule->>Service: getCoderModels()
    Service->>Cache: get("LLM_MODELS_CACHE")
    alt 命中缓存
        Cache-->>Service: 模型列表
    else 未命中
        Service->>DB: 查询启用的模型
        DB-->>Service: 数据
        Service->>Cache: 写入缓存
    end
    Service->>Service: 按 purpose 过滤
    Service-->>AgentModule: 返回 Coder 模型列表

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

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

• 添加/编辑模型，设置自定义 baseUrl（支持 OpenAI 兼容的代理）
• 安全存储 API Key
• 将模型标记为 Coder 或 Multimodal
• 一键启用/禁用

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

🔁 三、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. 完整调用链路（自然语言 → 代码）

sequenceDiagram
    participant U as 用户 (IDE/工作台)
    participant A as AgentService
    participant P as PromptService
    participant AI as AIService
    participant L as LLM Provider

    U->>A: "创建一个登录表单"
    A->>P: getPrompt('coder')
    P-->>A: 系统提示词 + 上下文
    A->>AI: streamChat(消息, 模型)
    AI->>L: POST /v1/chat/completions
    L-->>AI: 流式返回 JSON/DSL
    AI-->>A: 解析后的内容
    A-->>U: 更新 DSL / 实时预览 UI

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

🧩 四、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：修改后的新代码

增量更新工作流：

sequenceDiagram
    participant AI as AI Agent (coder_v3)
    participant Chat as ChatService
    participant Val as ValidationService
    participant DSL as DslService

    AI->>Chat: 输出 SEARCH/REPLACE 块
    Chat->>Val: 校验 diff 语法
    Val->>DSL: 获取当前 DSL / 文件内容
    DSL-->>Val: 返回现有代码
    Val->>Val: 执行正则匹配与替换
    Val-->>Chat: 成功 / 匹配错误
    Chat-->>AI: 观察结果 (O:)

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

🔧 五、支撑服务：让 AI 稳定落地

TopicService & ChatService

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

ConfigService & ValidationService

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

模型缓存再提效

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

🎯 六、总结与展望

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

• ✅ 多模型自由切换：支持 OpenAI、DeepSeek、Ollama 等，数据不外泄。
• ✅ 提示词精细化管理：针对代码、图像、JSON 分别优化，输出质量可控。
• ✅ ReAct 工作流 + 增量更新：像资深开发者一样思考和修改代码。
• ✅ 开箱即用的管理界面：无需写代码即可配置模型、监控用量。

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

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

📢 互动时间

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

参考资料

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

---

本文基于 VTJ.PRO 官方技术文档整理，架构图及流程均来自实际代码实现。