VTJ.PRO的AI集成系统到底是怎么玩儿的？

先说实话，这玩意儿真不是普通的低代码。

它把AI、Vue3、可视化设计全塞进一个五层架构里。

别担心，我不会把你拉进技术白皮书的长篇大论，咱们就像喝咖啡聊天随意聊。

先来个总览，咱们把系统划分成UI层、编排层、工具层、代码转换层和后端服务层。

AIWidget、ChatInput、ImageInput、JsonInput……每个dou是独立的Vue组件。

用户Ke以直接拖拽Figma JSON进来或者截图上传，还Neng敲几行文字。

这些输入会被即时检测类型，然后走API。

useAI负责状态管理，像话筒一样捕捉每一次对话。

useOpenApi负责和后端打交道，SSE流式返回结果。

useAgent则负责把AI给的代码块拆解成Vue SFC、diff或JSON工具调用。

比如createPage创建页面setApi配置接口，或者cloneBlock复制块。

这些工具dou注册在ToolRegistry里LLM只要在提示词里说“帮我创建一个新页面”，系统就会自动触发对应handler。

这里有个增量geng新器，用SEARCH/REPLACE+模糊匹配确保改动精准。

Ru果精确匹配找不到，就算Levenshtein距离，也Neng容错处理。

Zui后把Vue SFC转成DSL，再喂给Designer引擎，实现双向同步。

后端用NestJS搭建，模块化设计让核心功Neng和业务功Neng分得清清楚楚。

启动一个npm脚本就Neng自动填充角色、管理员、字典等基础数据，省掉手工插SQL的烦恼。

// 文本输入
interface TextInput {
  prompt: string;
  model: string;
  project: ProjectSchema;
}
// 图像输入
interface ImageInput {
  file: File;
  model: string;
}
// JSON输入
type TopicDataType = 'sketch' | 'figma' | 'mastergo' | 'unknown';

sequenceDiagram
    participant User
    participant UI
    participant API
    User->UI: 拖入Figma JSON
    UI->UI: 检测数据类型
    UI->API: POST /api/open/topic/json
    API-->UI: 返回Topic + Chat
    UI->UI: 初始化对话上下文
    UI-->User: 准备就绪

这个问题经常被问到，我也给你说两句实话：

- 内容重复太多。搜索引擎喜欢独特、有价值的信息，Ru果你的页面和别处雷同，它们会直接跳过。

- 缺少关键Meta标签。title、description写得不明确，也不给爬虫指路，它们自然不爱来访。

- 页面加载慢。SPARu果首屏渲染时间过长，会被判定为用户体验差，同样被过滤掉。

interface AITopic {
  id: string;
  fileId: string;
  title: string;
  model: string;
  prompt: string;
  dsl: any;
  type?: TopicType;
  dataType?: TopicDataType;
}
interface AIChat {
  id: string;
  topicId: string;
  prompt: string;
  content: string;
  reasoning?: string;
  vue?: string;
  dsl?: any;
  status:
    | 'Pending'
    | 'Success'
    | 'Failed'
    | 'Error'
    | 'Canceled';
}

sequenceDiagram
    participant Frontend
    participant Backend
    participant LLM
    Frontend->Backend: POST /api/open/topic
    Backend-->Frontend: {topic, chat}
    Frontend->Backend: GET /api/open/completions 
    Backend->LLM: 请求LLM
    loop 流式传输
        LLM-->Backend: chunk
        Backend-->&ggt;Frontend: data:{...}
        Frontend->>t;;Frontend) 累积content并geng新UI
    end
    Backend-->t;;Frontend) 
    Frontend->t;;Backend) POST /api/open/chat/save

searchAndReplace{
   // 精准匹配优先
   if){
     return {success:true, updatedCode: code.replace};
   }
   // 模糊匹配 fallback，用 Levenshtein 距离容错
   const chunks = this.splitIntoChunks;
   for{
     const distance = this.levenshteinDistance;
     if{
       return {success:true,
               updatedCode: code.replace};
     }
   }
   return {success:false,error:'未找到匹配项'};
}

interface LLM{
   id?:string,
   label:string,
   baseURL:string,
   model:string,
   apiKey:string,
}
state.LLMs =  as LLM;
state.llm = '';
// 发请求时使用：
const dto = {
   model:selectedModel,
   prompt:userInput,
   llm:customLLM?JSON.stringify:'',
};

说实话，这套架构真的把“AI+低代码”落到了实处，不再是空洞口号。

从前端拖拽到后端模型调用，从增量geng新到历史回滚，每一步dou有明确职责分离，让项目既灵活又安全。

Ru果你还在手动敲代码，那真的该考虑搬砖到VTJ.PRO上去玩玩了——省时省力还Neng把脑洞直接变成产品，哈哈！

想了解geng多细节？欢迎访问 VTJ.PRO 技术文档

117:系统实现了双层认证系统:通过UsersGuard的后端路由保护和通过Access类的前端访问控制。.AI模型配置和集成:LLM模型管理.

Package Purpose Key Exports Dependencies @vtj/core 核心数据模型和事件系统,NodeModel, ProjectModel, BlockModel, HistoryModel, Emitter @vtj/base @vtj/renderer运行时渲染引擎 Provider,nodeRender,blockRender,Context,Services @vtj/base,@vtj/core @vtj/designer 可视化设计....VTJ.PRO A I驱动型 Vue3低代码平台 ,它在分离设计时和运行时环境关注点的同时保持可视化 DSL 与生产级 Vue 源码之间双向...

interface LLM {id?:string ;label:string ;baseURL:string ;model:string ;apiKey:string}

VTJ.PRO 的 AI 集成系统通过精心设计五层架构，实现从多模态输入到可运行代码完整闭环。核心亮点包括：

101 重磅发布 ：VTJ.PRO赋Neng若依「 AI +低代码」Neng力 ,企业级开发效率跃升300%614 国内领先 AI低代码平台 VTJ.PRO 今日宣布与开源企业级快速开发框架若依完成深度集成 ,通过双向代码穿梭 、 AI 智Neng引擎及多模态渲染三 ... . . .

前几天刷到个叫VTJ.PRO 的 ,抱着试试kan的心态翻了下他们技术说明 ,哦 对 ,他们后端是用NestJS搭的 ,模块化架构 ,拆得还挺清楚 ,核心模块和业务模块分开 ,后期维护起来也方便 . . . 初始数据填充也方便 ,跑个npm命令就Neng把角色 、管理员 、字典这些基础数据dou导进去 ,不用自己手动往数据库里插 ,也不用怕漏插什么导致系统 跑不起来 ,省好多麻烦 . . .

VTJ 构建在具有同步版本控制 monorepo 架构 之上 为可视化设计 、代码生成 和 多平台部署提供全面软件包生态系统 ,同时保持与现有 Vue   ​  ​  ​ ​​  ​ ​​​  ​​​​​兼容性 .188 AI 超级智Neng体全栈项目阶段一 ： AI 大模型概述 、选型 、 项目初始化以及基于阿里云灵积模型 Qwen‑Plus实现 522 简介 ： 项目地址：https://github.com/whltaoin/var‑ai‑agent 本文使用 AI 大模型均为阿 …​…​.

flowchart TD subgraph UI 层 AIWidget ChatInput ImageInput JsonInput end subgraph 编排 层 useAI useOpenApi useAgent end subgraph 工具 层 ToolRegistry +内置工具 end subgraph 转换 层 CodeIncrementalUpdater VueToDSL转换器 end subgraph 后端 层 API端点 LLM服务 SSE流 end UI 层 --> 编排 层 编排 层 --> 工具 层 编排 层 --> 转换 层 编排 层 --> 后端 层