跳到主要内容

Agent UI 小程序组件

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

Agent UI 提供以下功能:

  • 对接云开发大模型
  • 对接云开发 Agent(智能体)
提示

由于微信小程序基础库安全策略升级,文件上传功能解析流程可能受到影响,请开发者进行 agent ui 组件升级

  • 小程序源码组件,请更新替换至最新版本
  • 微搭低码组件,请新建页面然后重新拖动更新 agent-ui 区块,完成后发布应用

快速体验

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

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

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

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

image

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

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

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

<view>
<agent-ui agentConfig="{{agentConfig}}" showBotAvatar="{{showBotAvatar}}" chatMode="{{chatMode}}" modelConfig="{{modelConfig}}" envShareConfig="{{envShareConfig}}"></agent-ui>
</view>

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

  data: {
chatMode: "model", // bot 表示使用agent,model 表示使用大模型
showBotAvatar: true, // 是否在对话框左侧显示头像
agentConfig: {
botId: "bot-e7d1e736", // agent id,
allowWebSearch: true, // 允许客户端选择启用联网搜索
allowUploadFile: true, // 允许上传文件
allowPullRefresh: true, // 允许下拉刷新
allowUploadImage: true // 允许上传图片
showToolCallDetail: true, // 是否展示工具调用细节
allowMultiConversation: true, // 是否展示会话列表,创建会话按钮
allowVoice: true // 是否允许客户端界面展示语音按钮
},
modelConfig: {
modelProvider: "hunyuan-open", // 大模型服务厂商
quickResponseModel: "hunyuan-lite", // 大模型名称 (混元 turbo, gpt4 turbo版,deepseek v3等)
logo: "", // model 头像
welcomeMsg: "欢迎语", // model 欢迎语
},
}

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

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

组件参数和相关说明

组件参数

参数名称参数可选值说明
chatMode'bot' 或 'model'当 chatMode='bot'时,agentConfig.botId 必填;当 chatMode='model'时,modelConfig.modelProvider 和modelConfig.quickResponseModel必填
showBotAvatarboolean界面是否展示左侧头像
agentConfig.botIdstringagent id,当 chatMode = 'bot' 时,必填
agentConfig.allowUploadFileboolean界面是否展示文件上传
agentConfig.allowWebSearchboolean允许界面呈现联网配置开关
agentConfig.allowPullRefreshboolean允许下拉刷新
agentConfig.allowUploadImageboolean允许上传图片
agentConfig.allowMultiConversationboolean是否展示会话列表,创建会话按钮
agentConfig.showToolCallDetailboolean是否展示工具调用细节
agentConfig.allowVoiceboolean是否允许客户端界面展示语音按钮
modelConfig.modelProvider'hunyuan' 或 'deepseek'大模型服务商
modelConfig.quickResponseModelstring具体的模型版本, 参考大模型版本
envShareConfig.resourceAppidstring环境共享的资源方 AppID
envShareConfig.resourceEnvstring环境共享的资源方环境 ID

相关说明

1. 文件上传说明

  • 大小限制:单文件不超过 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 合法域名

2. 图片上传说明

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

3. 语音功能说明

若未授予小程序使用麦克风权限,组件会进行权限申请,请同意授予

示例

  • 使用 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 // 允许上传图片
showToolCallDetail: true, // 是否展示工具调用细节
allowMultiConversation: true, // 是否展示会话列表,创建会话按钮
allowVoice: true // 是否允许客户端界面展示语音按钮
}
}

获取 Agent ID

大模型版本

hunyuan

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

deepseek

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

通过环境共享调用其他环境的 AI 能力

假设 A 小程序开通了云开发环境,B 小程序想跨环境调用 A 小程序云开发环境下的 AI 能力,可参照以下指引。

开通环境共享

登录 A 小程序,开通环境共享,将 A 小程序的云开发环境共享给 B 小程序使用

A 小程序和 B 小程序必须是同一个主体才能环境共享

配置环境共享参数

在 B 小程序中使用 Agent-UI 时,将 A 小程序的 appid 和 envId 传给 Agent-UI 组件

参数如下:

  data: {
chatMode: "model", // bot 表示使用agent,model 表示使用大模型
showBotAvatar: true, // 是否在对话框左侧显示头像
modelConfig: {
modelProvider: "deepseek", // 大模型服务厂商
quickResponseModel: "deepseek-v3", // 快速响应模型 (混元 turbo, gpt4 turbo版,deepseek v3等)
logo: "", // model 头像
welcomeMsg: "欢迎语", // model 欢迎语
},
envShareConfig: {
// 不使用环境共享,请删除此配置或配置EnvShareConfig:null
// 资源方 AppID
resourceAppid: "wx7a******5f4f",
// 资源方环境 ID
resourceEnv: "chr**************46d2d",
},
},

自定义 MCP 工具卡片

以下示例流程以结合腾讯地图 MCP Server 开发自定义工具卡片举例说明

1. 开通 MCP 能力

  • 进入云开发平台 AI+ MCP 页面,点击创建MCP Server

  • 若未开通过云托管服务,需先开通云托管

2. 配置 MCP Server

  • 以腾讯地图 MCP Server 举例,选择模板进行安装(按照指引获取腾讯地图平台API KEY后,配置环境变量)

3. agent 绑定 MCP Server tools

  • 在 agent 配置页点击添加MCP 服务,选择对应的MCP Server tools 使用 (此处腾讯地图示例可勾选 geocoder,placeSearchNearby, directionDriving, weather等工具)

4. 开发自定义卡片组件

  • 参照本工程中 apps/miniprogram-agent-ui/miniprogram/components/toolCard 目录内自定义工具卡片组件实现

5. 卡片组件引用配置

  • 自定义卡片组件引用声明配置(可在用户小程序项目全局app.json中配置 或 agent-ui组件index.json中配置)

  • agent-ui 组件内 customCard/index.wxml 中添加自定义组件

6. 卡片效果