Agent UI 小程序模版

Agent UI 小程序源码组件可以帮助开发者快速在微信小程序中搭建聊天界面。

Agent UI 提供以下功能：

• 对接云开发大模型
• 对接云开发 Agent（智能体）

快速体验

方式一：在微信开发者工具入口中通过模板创建项目，按照模板指引，快速体验 Agent-UI 小程序源码组件。

方式二：下载源码包 https://gitee.com/TencentCloudBase/Cloudbase-Examples/tree/master/miniprogram/tcb-agent-ui ，导入到微信开发者工具使用。

引入组件到已有微信小程序

1. 拷贝 miniprogram/components/agent-ui 组件到小程序中。

2. 在页面 .json 配置文件中注册组件。

{
  "usingComponents": {
    "agent-ui":"/components/agent-ui/index"
  },
}

3. 在页面 .wxml 文件中使用组件。

<view>
  <agent-ui agentConfig="{{agentConfig}}"></agent-ui>
</view>

4. 在页面 .js 文件中编写配置。

data: {
    agentConfig: {
      // 对接 Agent 时的参数
      type: "bot", // 值为'bot'或'model'。当type='bot'时，botId必填；当type='model'时，model必填
      botId: "bot-e7d1e736", // agent id

      // 直接对接大模型的参数
      // type: "model", // 值为'bot'或'model'。当type='bot'时，botId必填；当type='model'时，model必填
      // modelName: "deepseek", // 大模型服务商
      // model: "deepseek-r1", // 具体的模型版本
      // logo: "123",// 图标(只在model模式下生效)
      // welcomeMessage: "123"// 欢迎语(只在model模式下生效)
    }
  }

5. 在 app.js 中，onLauch 生命周期内，异步初始化 sdk。

   // app.js
   App({
     onLaunch: function () {
       wx.cloud.init({
         env: "<云开发环境ID>",
       });
     },
   });

其中 agentConfig 参数结构如下：

参数名称	参数可选值	说明
type	'bot' 或 'model'	当type='bot'时，botId必填；当type='model'时，model必填
botId	字符串	agent id
modelName	'hunyuan' 或 'deepseek'	大模型服务商
model	字符串	具体的模型版本, 参考大模型版本

示例:

• 使用deepseek-v3模型

{
    agentConfig: {
        type: "model",
        botId: "",
        modelName: "deepseek",
        model: "deepseek-v3",
    }
}

• 使用deepseek-r1模型

{
    agentConfig: {
        type: "model",
        botId: "",
        modelName: "deepseek",
        model: "deepseek-r1",
    }
}

• 使用Agent

{
    agentConfig: {
        type: "bot",
        botId: "bot-xxx", // bot-xxx 为 agent id
        modelName: "",
        model: "",
    }
}

获取Agent ID

大模型版本

hunyuan

模型版本	说明
hunyuan-lite	具备强大的中文创作能力，复杂语境下的逻辑推理能力，以及可靠的任务执行能力

deepseek

模型版本	说明
deepseek-v3	专注于自然语言处理、知识问答、内容创作等通用任务
deepseek-r1	推理模型，专为数学、代码生成和复杂逻辑推理任务设计