跳到主要内容

Agent UI 小程序模版

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

Agent UI 提供以下功能：

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

快速体验​

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

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

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

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

image

  1. 在页面 .json 配置文件中注册组件。
{
  "usingComponents": {
    "agent-ui":"/components/agent-ui/index"
  },
}
  1. 在页面 .wxml 文件中使用组件。
<view>
  <agent-ui agentConfig="{{agentConfig}}" showBotAvatar="{{showBotAvatar}}" chatMode="{{chatMode}}" modelConfig="{{modelConfig}}"></agent-ui>
</view>
  1. 在页面 .js 文件中编写配置。
  data: {
    chatMode: "model", // bot 表示使用agent，model 表示使用大模型
    showBotAvatar: true, // 是否在对话框左侧显示头像
    agentConfig: {
      botId: "bot-e7d1e736", // agent id,
      allowWebSearch: true, // 允许客户端选择启用联网搜索
      allowUploadFile: true, // 允许上传文件
      allowPullRefresh: true, // 允许下拉刷新
      allowUploadImage: true // 允许上传图片
    },
    modelConfig: {
      modelProvider: "hunyuan-open", // 大模型服务厂商
      quickResponseModel: "hunyuan-lite", // 大模型名称 （混元 turbo, gpt4 turbo版，deepseek v3等）
      logo: "", // model 头像
      welcomeMsg: "欢迎语", // model 欢迎语
    },
  }
  1. 在 app.js 中，onLauch 生命周期内，异步初始化 sdk。
   // app.js
   App({
     onLaunch: function () {
       wx.cloud.init({
         env: "<云开发环境ID>",
       });
     },
   });

其中 agentConfig 参数结构如下：

参数名称参数可选值说明
chatMode'bot' 或 'model'当 chatMode='bot'时，agentConfig.botId 必填；当 chatMode='model'时，modelConfig.modelProvider 和modelConfig.quickResponseModel必填
showBotAvatarboolean界面是否展示左侧头像
agentConfig.botId字符串agent id，当 chatMode = 'bot' 时，必填
agentConfig.allowUploadFileboolean界面是否展示文件上传
agentConfig.allowWebSearchboolean允许界面呈现联网配置开关
agentConfig.allowPullRefreshboolean允许下拉刷新
agentConfig.allowUploadImageboolean允许上传图片
modelConfig.modelProvider'hunyuan' 或 'deepseek'大模型服务商
modelConfig.quickResponseModel字符串具体的模型版本, 参考大模型版本

文件上传说明

  • 大小限制：单文件不超过10M
  • 数量限制：单次最多支持 5 个文件
  • 文件类型：pdf、txt、doc、docx、ppt、pptx、xls、xlsx、csv
  • request合法域名配置：微信小程序上传文件需要添加“文件上传接口”到request合法域名列表，文件上传域名为：https://{envid}.api.tcloudbasegateway.com，替换envid为真实的环境ID， 前往微信公众平台https://mp.weixin.qq.com配置request合法域名

图片上传说明

每次仅支持上传单张图片，最大不超过30MB

示例:

  • 使用deepseek-v3模型
{
  chatMode: "model", // bot 表示使用agent，model 表示使用大模型
  showBotAvatar: true, // 是否在对话框左侧显示头像
  modelConfig: {
    modelProvider: "deepseek", // 大模型服务厂商
    quickResponseModel: "deepseek-v3", //大模型名称
    logo: "", // model 头像
    welcomeMsg: "欢迎语", // model 欢迎语
  },
}
  • 使用deepseek-r1模型
data: {
  chatMode: "model", // bot 表示使用agent，model 表示使用大模型
  showBotAvatar: true, // 是否在对话框左侧显示头像
  modelConfig: {
    modelProvider: "deepseek", // 大模型服务厂商
    quickResponseModel: "deepseek-r1", //大模型名称
    logo: "", // model 头像
    welcomeMsg: "欢迎语", // model 欢迎语
  },
}
  • 使用Agent
{
  chatMode: "bot", // bot 表示使用agent，model 表示使用大模型
  showBotAvatar: true, // 是否在对话框左侧显示头像
  agentConfig: {
    botId: "bot-e7d1e736", // agent id,
    allowWebSearch: true, // 允许客户端选择启用联网搜索
    allowUploadFile: true, // 允许上传文件
    allowPullRefresh: true, // 允许下拉刷新
    allowUploadImage: true // 允许上传图片
  }
}

获取Agent ID​

大模型版本​

hunyuan​

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

deepseek​

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