如何将魔改 OneCode-RAD 转变为 LLM 编程，打造自然语言驱动的低代码助手？

谁懂啊家人们！搞低代码开发快两年了 最近被甲方爸爸追着问："能不能不用点鼠标拽组件？ 说句话就能出界面行不行？" 当时我就翻出压箱底的OneCode-RAD—— 这玩意儿开源、 够灵活，但原生AI功能跟摆设似的… 直到上周熬夜魔改加Spring AI之后 才发现：原来低代码真能变成"说话就能用"的神器！

先别急着骂"标题党" 听我唠唠这两周踩过的坑 以及怎 可不是吗！ 么把OneCode-RAD改成"能听懂人话"的弱智吧助手…

一、先吐个槽：为什么选OneCode-RAD？

这年头低代码平台多如牛毛 OutSystems要钱要命就算了 Mendix的AI助手只会生成 麻了... "Hello World"级别的表单 偏偏甲方爸爸又要"定制化界面""实时生效""不用懂编程"…

我服了。 直到刷到OneCode-RAD开源仓库那瞬间 我眼睛都亮了—— 这玩意儿是真·100%开源！基于OOD框架搞出来的 组件拖拽、注解配置这些基础能力拉满就算了 最关键是内核完全暴露！想加什么功能直接怼进去改

当然啦…后面才知道这叫"自由の代价" 改的时候差点没把电脑砸了…

二、疯了吗？给OneCode-RAD塞Spring AI？

要说最反常识的操作 就是决定用Spring AI接OpenAI/GPT-4 本来以为得重写后端Controller+前端Vue三件套 后来啊架不住同事一句话："Spring AI不是号称‘一行代码调用所有LLM’吗？试试？"，奥利给！

试就试！谁怕谁？

第一步：给后端灌娱乐

OneCode-RAD原生是Spring Boot项目对吧？ 那直接在pom.xml里塞这几行东西就完事儿了——，说起来...

xml org.springframework.ai spring-ai-core 0.8.1 org.springframewo 太坑了。 rk.ai spring-ai-openai 0.8.1 com.alibaba.fastjson2 fastjson2 2.0.32

何不... 哦对了！application.yml里还要配OpenAI密钥——

yaml spring: ai: openai: api-key: sk-xxxxxxxxxxxxxxxxxxxxxxxxxxx # 自己去OpenAI官网弄哈 chat: model: gpt-3.5-turbo # GPT-4太贵暂时用这个凑活 temperature: 0.3 # 这个参数很重要！ 没耳听。 越低生成的代码越蠢笨规矩 max-tokens: 1000 # 别问为什么设1000 #问就是之前生成个考勤表格只给了50行token直接GG

第二步：写个智障服务类——LLMCodeGenerator

切记... 当时我的想法很简单：让AI只干一件事——按OOD规范生孩子

于是吭哧吭哧写了个Service类——

java @Servicepublic class LLMCodeGenerator { private final ChatClient chatClient; // Spring AI会自动注入ChatClientBuilder对吧？ public LLMCodeGenerator { this.chatClient = chatClientBuilder.build; } /** * 用户说句话->转成OOD组件码 * @param userInput "创建个考勤删除按钮""整一个带日期筛选的数据表"这种话 * @return 返回AI回复+能直接跑的OOD code */ public LLMResponse generateOodCode { // 必填！告诉AI只能按OneCode-RAD规矩来 String systemPrompt = """ 你是OneCode-RAD专属舔狗助手，请严格遵守以下规则： 1. **只准用OOD语法**：这种格式 2. **组件类型死磕原生**：Button/Form/Table/Layout这几个老东西不准自创 3. **配置项必须全**：parent/caption/onClick一个不能少 4. **少他妈扯淡**：注释少于5行 code变更多用//开头标出来 5. **输出格式死定了**：{"aiResponse":"短到爆炸","code":"能跑就行"} """; // 调用LLM API开始发疯... String llmOutput = this.chatClient.prompt .system .user .call .content; // FastJSON转对象快得一批别逼逼 return JSON.parseObject; } // DTO类懒得写getter setter用@Data就行 @Data public static class LLMResponse { private String aiResponse; // "已生成考勤删除按钮"这种鬼话 private String code; // OOD组件核心码 }}，是个狼人。

写完这个类我整个人都傻了—— 原来让AI听话这么简单？只要把规则刻进systemPrompt里就行，层次低了。？

三、前端篇：搞个破弹窗让用户说话

后端搞好了前端还得跟上啊喂！

本来想参考OneCode-RAD原生弹窗写法抄一遍算了 后来啊手贱点进ocstudio-web/src/plugins目录看了眼…，哈基米！

我的天呐这目录结构比我家鞋柜还乱！

算了算了直接在plugins下建个llm-assistant文件夹吧——

创建LLM对话窗口组件

javascript // 文件路径：ocstudio-web/src/plugins/llm-assistant/OodAICreator.js/** * OneCode-RAD LLM智障助手 * 使用方法：在设计器点工具栏「AI编程」按钮就能弹出来 */ { // 创建根容器 var aiDialog = Ood.create { this.createUI; //建界面 this.bindEvents; //绑事件 }, createUI: function { var dialogContent = Ood.create, style: { padding: '15px', backgroundColor: '#f8f9fa' } }); // 用户输入框+发送按钮 var inputPanel = Ood.create; this.userInput = Ood.create; this.sendBtn = Ood.create; this.chatArea = Ood.create'} }); }, bindEvents:function{ this.sendBtn.onClick = =>{this.sendRequest;}; }, sendRequest:function{ var userText=this.userInput.getValue.trim; if{alert;return;} // 在聊天区域添加用户输入 this.addMessage; // AJAX调后端接口 $.ajax=>{ if{ var result=res.data; this.addMessage; this.addMessage; try{ //施行生成出来code! eval; this.addMessage; }catch{ this.addMessage; } }else{ alert; } }, error:=>{this.addMessage;} }); }, addMessage:function{ var msgType=type||'system'; var msgItem=Ood.create,style:{margin:'8px;padding:"8px;border-radius:"4px;color:"#fff", backgroundColor :msgType==='user'?'#4非足联5':'msgType==='ai'?'#2196F3':'#9E9E9E'} ); Ood.create; }} }}); });});

《震惊！某程序员竟用Excel对比低代码平台LLM能力》

说真的... 别急着划走！这里必须插个表—— 毕竟甲方爸爸最喜欢看这种「货比三家」的数据不是吗👇

维度	OutSystems	Mendix	Our OneCode-RAD魔改版
自然语言理解能力	❌仅支持简单指令 ✅支持复杂需求 ✅完全听懂「」
:-----------------------	:------------------------	:------------------------	:-------------------------
**	自定义自由度**	🔒高度封闭	🔓部分开放	🚀完全自由
:响应速度	⏱️慢	⏱️一般	⏱️极快
:适配性	❌仅支持自身组件库✅部分支持第三方✅完美适配OOD原生组件

四实战案例之「考勤系统十分钟搞定」

别光吹牛B咱们来点实际 的 —— 就拿甲方天天催 的「考勤管理系统」开刀

用户输入第①句:"创建一个带确认对话框 的 删除考勤数据按钮 "

看看AI生成 的 code ↓

研究研究。 javascript var delAttendanceBtn=Ood.create("Button","delBtn",{ parent:"attendanceToolbar", caption:"删除考勤", type:"danger", icon:"fa-trash", style:{backgroundColor:"#dc3545",borderColor:"#dc3545"}, onClick:function{ art.dialog({ title:"⚠️确认删除?", content:"删完可就找不回来了哦!", buttons: });}});

用户输入第②句 :"再整个带日期筛选和部门下拉框 的 查询面板 "

醉了... 这次更绝 —— AI直接把布局+事件全搞好 ↓

javascript

卷不动了。 var queryPanel=Ood.create;

嚯... var dateRange=Ood.creat.getFullYear,new Date.getMonth,1),endDate :new Date});

var deptSelect=Ood.creat;

var searchBtn=Oed.creat{，也是醉了...

var params={startDate dateRange.getStartDate,endDate dateRange.getEndDate,dept deptSelect.getValue)};

翻车了。 iffetchAttendanceList.n);

else art.dialog.tips)}}});

看到没?!从输入指令到组件渲染只用三分钟! 来一波... ! 甲方爸爸看了得当场跪下唱《征服》吧…

五那些让我想撕头发 的 Bug 和坑

奉劝各位看官一句 —— 魔改前先拜关公求平安!!，与君共勉。

Bug① : OOD框架 的 parent容器到底是啥?

泰酷辣！ 刚开始总报「找不到父容器」错误 翻遍文档才发现 —— OneCod e - RAD 的 parent不是DIV ID也不是页面名称而是「设计器中的逻辑容器名」!! 像什么formContainer toolbar contentContainer这些鬼东西得提前在设计器里建好了才能用!!!

Bug② : Spring AI 的 temperature参数调错当场GG!!

一开始手贱设成temperature=1.0 后来啊AI生成 code跟屎一样 —— Button写成Buttion onClick写成onclicke… 后来降到temperature=Q.l后果然乖多丁!!!

Bug③ : eval函数凶险吗?平安吗?靠谱吗?

必须承认eval确实有平安风险但 —— 这他妈是内部开发工具啊喂!!又不上线给陌生人用怕啥?! 再说丁 OneCod e - RAD本身就允许施行JS脚本好不好!!!

六再说说想说...

其实改完这个项目之后才明白 —— 所谓「低代蚂 + LLM」不是什么高大上黑科技 本质上就是「把开发者从重复劳动中解放出来」而已 以前要花一天拽控件调事件写JS 现在说句话就能搞定大半工作...

对丁对丁!如果你也想玩这个魔改版 —— 记得去GitHub搜OcStudio仓库fork一份 然后按本文步骤瞎jb捣鼓就行~ 要是遇到问题欢迎来喷 me，太扎心了。