让AI写你自己封装的Vue组件库的代码（思维链实现版），超神了！

山东小木

已于 2025-03-02 17:24:54 修改

阅读量753

点赞数 6

文章标签： JBoltAI AIGS JavaAI SpringAI 人工智能

于 2025-03-02 17:24:12 首次发布

本文链接：https://blog.csdn.net/mumengmeng/article/details/145964408

版权

前几天，我用JBoltAI里最简单的智能体配置方式，实现了《让AI写你自己封装的Vue组件库的代码》的教程。

今天，我们换一种更精细控制、编码思维链定制的方式，去实现一个这个功能。

一、什么是JBoltAI 思维链

JBoltAI里的思维链，并不是传统AI大模型里谈的思维链。

JBoltAI里的思维链，是JBoltAI内置的流程编排框架-Java代码版。

也叫事件链，因为底层处理都是基于节点关系和事件总线驱动的机制运行的。

新版的JBoltAI_SpringBoot版里已经添加了可视化编排JBoltAI工作流的能力，底层也是基于事件链驱动的。

二、手写事件链实现：

package cn.jbolt.ai.common.cot;
import cn.jbolt.ai.admin.aiapp.AiAppKit;
import cn.jbolt.ai.common.model.AiApp;
import com.jboltai.capability.message.AIIntention;
import com.jboltai.capability.model.JBoltAI;
import com.jboltai.event.*;
import com.jboltai.event.chain.*;
import com.jboltai.util.share.AIEventThreadShareData;
/**
 * JBoltAI DtgForm组件代码生成专用思维链实现类
 */
public class JBoltAIDtgFormCot extends JBoltAICot{
    @Override
    public Chain execute(AiApp aiApp, Long aiAppSessionId, Long userId, String websocketToken, String websocketCommand, String systemMessage, String prompt, String userOriginMsg, StringBuilder content, Long userMsgId, Long aiMsgId, String aiMsgBoxId) {
        //1、switchCase 判断需求意图类型节点
        CaseChainNode checkNode = new CaseChainNode(chain -> {
            //声明意图
            AIIntention[] intentions = new AIIntention[]{
                    AIIntention.of("dtgForm", "表单生成", "需要生成Form表单", "请帮我设计一个客户信息表", "客户登记表", "表单", "xxx表"),
                    AIIntention.of("normalChat", "其它非表单生成类问题、打招呼、问候语,其他的语气词，普通聊天，短语等", "好吧", "谢谢","再见","bye","感谢","你真棒")};
            //进行意图识别
            AIIntention ret = JBoltAI.recognizeIntention(userOriginMsg, intentions).get();
            if(ret == null || "INNER_NO_MATCH".equals(ret.getKey())){
                return "normalChat";
            }
            //返回意图类型识别结果
            return ret.getKey();
        });
        //2、普通聊天节点
        EventChainNode normalChatNode = new EventChainNode(new EventSupplier() {
            @Override
            public Event supply(Chain chain) {
                return AiAppKit.callNormalChat(content, websocketToken, websocketCommand, userId, aiAppSessionId, userOriginMsg, aiApp, userMsgId, aiMsgId, aiMsgBoxId,false, AIEventThreadShareData::clear);
            }
        }).addPrevWhenCase(checkNode, "normalChat");
        //3、dtgForm代码生成节点
        EventChainNode dtgFormNode = new EventChainNode(chainx ->{
                aiApp.setSystemMessageTpl(SYSTEM_MSG);
                aiApp.setPromptTpl(String.format(PROMPT_TPL, userOriginMsg));
                return AiAppKit.callNormalChat(content, websocketToken, websocketCommand, userId, aiAppSessionId, userOriginMsg, aiApp, userMsgId, aiMsgId, aiMsgBoxId,false, AIEventThreadShareData::clear);
        }).addPrevWhenCase(checkNode, "dtgForm");
        //4、创建一个思维链
        Chain chain = new Chain();
        //5、链上加节点
        chain.addNodes(checkNode,normalChatNode,dtgFormNode);
        //6、返回整条链
        return chain;
    }

    private static final String SYSTEM_MSG = "# 角色\n" +
            "你是一个精通VUE、javascript、html、css、以及dtgForm这个vue组件库的高级前端开发专家\n" +
            "# 你的任务和能力\n" +
            "根据用户提出的表单设计需求，使用dtgForm这个组件库去写出表单实现的代码\n" +
            "# dtgForm组件库的详细使用说明如下\n" +
            "```html\n" +
            "<DtgForm v-bind=\"config\"\"></DtgForm>\n" +
            "```\n" +
            "\n" +
            "### 多选 - checkbox\n" +
            "用来设置多选框 <code>type='checkbox'</code>\n" +
            "\n" +
            "### 日期 - date\n" +
            "设置日期 <code>type='date'</code>\n" +
            "\n" +
            "### 日期范围 - dateRange\n" +
            "设置日期范围 <code>type='dateRange'</code>\n" +
            "\n" +
            "### 单选 - radio\n" +
            "设置单选 <code>type='radio'</code>\n" +
            "\n" +
            "### 下拉选择框 - select\n" +
            "设置下拉选择框 <code>type='select'</code>  \n" +
            "\n" +
            "### 单行文本框 - text\n" +
            "设置单行文本框 <code>type='text'</code>\n" +
            "\n" +
            "### 多行文本框 - textarea\n" +
            "设置多行文本框 <code>type='textarea'</code>\n" +
            "\n" +
            "## 表单项（列）formItem配置演示\n" +
            "> 数据结构为二维数组（与group组件的children属性的数据结构一致），如下：\n" +
            "```js\n" +
            "let config = {\n" +
            "    model: {\n" +
            "        a: '1',\n" +
            "        b: '2',\n" +
            "        c: '3',\n" +
            "        radio: '',\n" +
            "        checkbox: ''\n" +
            "\n" +
            "    },\n" +
            "    formItem: [\n" +
            "        [ // 行数\n" +
            "            { // 列数，对象的数量应该是可被24整除的数，除了以下属性配置，还可支持官方所有的属性和事件配置\n" +
            "                type: 'text', // 表单项类型 可设置的值参考上面列表\n" +
            "                id: 'a', // id的值必须与model对象中的属性值相同，并且rules里的属性也要和id相同\n" +
            "                label: '姓名', // label\n" +
            "                placeholder: '请输入内容', // 提示输入内容 默认''\n" +
            "                span: 4, // 手动设置表单项的网格宽度，当前行的所有列总和不能超过24；如果不设置，当前行所有列平分24\n" +
            "                required: false, // 是否是必填项 默认true；设为false以后，内置组件依然会进行验证只是el-form-item组件的红星会消失，如果要关闭验证可以设置validate: false\n" +
            "                validate: false, // 是否开启验证 默认true；如果设为false，required自动变为false\n" +
            "                attrs: { // 官方属性配置\n" +
            "                    label: '官方属性配置'\n" +
            "                },\n" +
            "            },\n" +
            "            {\n" +
            "                type: 'select',\n" +
            "                id: 'b',\n" +
            "                label: '职位',\n" +
            "                options: [{label: '选项1', value: '1'}, {label: '选项2', value: '2'}],\n" +
            "            },\n" +
            "            {\n" +
            "                type: 'textarea',\n" +
            "                id: 'c', // 支持多层id\n" +
            "                label: '多行文本框'\n" +
            "            },\n" +
            "            {\n" +
            "                type: 'radio',\n" +
            "                id: 'radio',\n" +
            "                label: '单选',\n" +
            "                options: [{label: '开', value: '1'}, {label: '不开', value: '0'}]\n" +
            "            },\n" +
            "            {\n" +
            "                type: 'checkbox',\n" +
            "                id: 'checkbox'\n" +
            "                label: '多选',\n" +
            "                show (model) { // 当id为radio的组件值为1时，该组件才显示；函数接受表单的model参数\n" +
            "                    return model.radio == 1\n" +
            "                },\n" +
            "                options: [{label: '抽烟', value: 1}, {label: '喝酒', value: 2}, {label: '烫头', value: 3}]\n" +
            "            }\n" +
            "        ]\n" +
            "    ]\n" +
            "}\n" +
            "```";
    private static final String PROMPT_TPL = "# 用户的表单设计需求如下\n" +
            "<表单设计需求>\n" +
            "%s\n" +
            "</表单设计需求>\n" +
            "\n" +
            "# 输出要求\n" +
            "你输出的代码要用```html ```包裹起来。\n" +
            "用dtgForm组件库去实现这个表单，只输出代码，不要其他解释内容。\n" +
            "\n" +
            "请一步一步思考后按照要求完成。";
}

按照上图和代码里的6个步骤，写出三个节点，把事件串联起来。

然后在JBoltAI的智能体开发工具箱里绑定思维链即可。

智能体完成发布后，我们体验测试一下：

1、输入一个问候语：你好

思维链走的是普通聊天的节点：

2、输入一个通识问答

JFinal官网地址？

3、输入一个表单设计需求

客户信息登记表：

意图识别到了表单生成需求，就调用了表单生成的节点，输出准确代码。

<template>
  <div class="customer-registration-form">
    <h2>客户信息登记表</h2>
    <DtgForm v-bind="config"></DtgForm>
  </div>
</template>

<script>
export default {
  data() {
    return {
      config: {
        model: {
          name: '',
          gender: '',
          phone: '',
          email: '',
          birthDate: '',
          address: '',
          occupation: '',
          company: '',
          contactPreference: [],
          customerType: '',
          remarks: ''
        },
        formItem: [
          [
            {
              type: 'text',
              id: 'name',
              label: '姓名',
              placeholder: '请输入客户姓名',
              required: true,
              span: 12
            },
            {
              type: 'radio',
              id: 'gender',
              label: '性别',
              required: true,
              span: 12,
              options: [
                { label: '男', value: 'male' },
                { label: '女', value: 'female' }
              ]
            }
          ],
          [
            {
              type: 'text',
              id: 'phone',
              label: '联系电话',
              placeholder: '请输入联系电话',
              required: true,
              span: 12
            },
            {
              type: 'text',
              id: 'email',
              label: '电子邮箱',
              placeholder: '请输入电子邮箱',
              span: 12
            }
          ],
          [
            {
              type: 'date',
              id: 'birthDate',
              label: '出生日期',
              placeholder: '请选择出生日期',
              span: 12
            },
            {
              type: 'text',
              id: 'address',
              label: '联系地址',
              placeholder: '请输入联系地址',
              span: 12
            }
          ],
          [
            {
              type: 'text',
              id: 'occupation',
              label: '职业',
              placeholder: '请输入职业',
              span: 12
            },
            {
              type: 'text',
              id: 'company',
              label: '公司/单位',
              placeholder: '请输入公司或单位名称',
              span: 12
            }
          ],
          [
            {
              type: 'checkbox',
              id: 'contactPreference',
              label: '联系方式偏好',
              span: 12,
              options: [
                { label: '电话', value: 'phone' },
                { label: '短信', value: 'sms' },
                { label: '邮件', value: 'email' },
                { label: '微信', value: 'wechat' }
              ]
            },
            {
              type: 'select',
              id: 'customerType',
              label: '客户类型',
              placeholder: '请选择客户类型',
              span: 12,
              options: [
                { label: '个人客户', value: 'personal' },
                { label: '企业客户', value: 'business' },
                { label: 'VIP客户', value: 'vip' },
                { label: '潜在客户', value: 'potential' }
              ]
            }
          ],
          [
            {
              type: 'textarea',
              id: 'remarks',
              label: '备注信息',
              placeholder: '请输入其他需要说明的信息',
              span: 24
            }
          ]
        ]
      }
    };
  }
};
</script>

<style scoped>
.customer-registration-form {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
}

h2 {
  text-align: center;
  margin-bottom: 20px;
}
</style>