▶_MiniApp Toolkit

cloudbase-agent-ui

工具

腾讯云开发团队出品的微信小程序 AI Agent UI 组件，开箱即用的流式输出、多轮会话、工具调用能力，支持 DeepSeek/混元等主流大模型，助力小程序快速集成 LLM 能力

官网文档
AIAgentLLMChatGPTDeepSeekHunyuan微信云开发对话组件流式输出小程序

详细文档

资源概述#

cloudbase-agent-ui 是由腾讯云开发团队推出的微信小程序 AI 智能对话 UI 组件。它让小程序开发者无需处理复杂的流式通信、消息状态管理和 UI 渲染逻辑，只需简单配置即可在小程序中集成大模型对话能力。

核心特性#

  • 双模式支持：Agent 模式（智能体 + 工具调用）与大模型直连模式自由切换
  • 流式输出：打字机效果实时展示 AI 回复，体验流畅
  • 多轮会话：内置会话上下文管理，支持连贯的多轮对话
  • 工具调用（Function Calling）：Agent 模式下支持自定义工具，实现天气查询、数据检索等扩展能力
  • 多模型支持：深度兼容 DeepSeek、腾讯混元等主流大模型，支持自定义模型接入
  • 配置即开发：通过 agentConfig / modelConfig 配置对象快速接入，无需处理复杂通信逻辑
  • 开箱即用的 UI：预设聊天气泡、头像、输入框、加载动画，支持自定义欢迎语

项目数据#

指标数值
GitHub Stars91⭐
Forks12
npm 包@cloudbase/agent-ui-miniprogram
npm 版本数24+
最后发布2026-08-08
许可证MIT
创建年份2024
维护方腾讯云开发团队

设计规范#

组件架构#

cloudbase-agent-ui 采用微信小程序自定义组件方案，核心目录结构：

code
components/agent-ui/
├── index.js          # 组件逻辑（会话管理、流式通信）
├── index.wxml        # 组件模板（聊天气泡、输入框、头像）
├── index.wxss        # 组件样式（暗黑模式适配）
└── index.json        # 组件配置

依赖要求#

  • 微信开发者工具 1.06.2401020 或以上
  • 基础库 2.2.3 或以上（需要云开发能力）
  • 微信云开发环境：必须开通并创建 AI 服务

支持的大模型#

模型提供商modelProvider 值支持的模型
腾讯混元hunyuan-openhunyuan-lite, hunyuan-standard, hunyuan-pro
DeepSeekdeepseekdeepseek-chat, deepseek-reasoner
自定义custom通过自定义 API 接入任意模型

审核规范#

作为微信小程序组件，使用 cloudbase-agent-ui 的应用需遵守：

  • 内容安全：大模型生成的内容需符合微信平台内容安全规范
  • 用户隐私：对话数据通过微信云开发处理，不经过第三方服务器
  • AI 标识：根据监管要求，AI 生成内容应适当标注
  • 云开发配额：免费额度内可用，超量需升级云开发套餐

开发指南#

快速上手#

1. 配置云开发环境

code
// app.js
App({
  onLaunch() {
    if (!wx.cloud) {
      console.error('请使用 2.2.3 或以上的基础库')
      return
    }
    wx.cloud.init({
      env: 'your-env-id',  // 替换为你的云开发环境 ID
      traceUser: true
    })
  }
})

2. 注册组件

code
// pages/chat/chat.json
{
  "usingComponents": {
    "agent-ui": "/components/agent-ui/index"
  }
}

3. Agent 模式（推荐）

code
<!-- pages/chat/chat.wxml -->
<view class="chat-container">
  <agent-ui
    chatMode="{{chatMode}}"
    agentConfig="{{agentConfig}}"
    showBotAvatar="{{true}}"
  />
</view>
code
// pages/chat/chat.js
Page({
  data: {
    chatMode: 'bot',
    agentConfig: {
      botId: 'bot-e7d1e736',  // 替换为你的 Agent ID
      tools: [
        {
          name: 'get_weather',
          description: '获取指定城市的天气',
          parameters: {
            type: 'object',
            properties: {
              city: { type: 'string' }
            },
            required: ['city']
          },
          handler: async (params) => {
            const { city } = params
            // 实际项目中调用天气 API
            return `${city}今天晴，气温 25°C`
          }
        }
      ]
    }
  }
})

4. 大模型直连模式

code
Page({
  data: {
    chatMode: 'model',
    modelConfig: {
      modelProvider: 'deepseek',
      quickResponseModel: 'deepseek-chat',
      logo: '/assets/bot-avatar.png',
      welcomeMsg: '你好！我是 AI 助手，有什么可以帮你的？'
    }
  }
})

常见陷阱#

  1. 云开发环境未初始化：必须在 app.js 的 onLaunch 中调用 wx.cloud.init()，否则组件无法正常工作
  2. 基础库版本过低：需要基础库 ≥ 2.2.3，低版本不支持云开发能力
  3. Agent ID 错误：botId 需要在云开发控制台创建 Agent 后获取，不是模型名称
  4. 工具函数返回值：自定义工具的 handler 必须返回字符串或 Promise，不能返回对象
  5. 包体积：agent-ui 组件源码约 200KB，建议放入主包或使用分包异步加载

生态资源#

推荐搭配#

  • 微信云开发：cloudbase-agent-ui 的底层基础设施，提供 AI 服务调用能力
  • CloudBase AI Toolkit：腾讯云开发 AI 编码助手，可辅助开发 Agent 逻辑
  • TDesign Mini：搭配使用可获得更完整的小程序 UI 体验

相关资源#

版本更新#

  • 2026-08：npm 包 @cloudbase/agent-ui-miniprogram v0.0.24 发布
  • 2026-01：初始 GitHub 开源发布
  • 2025：在腾讯云开发内部迭代，支持混元/DeepSeek 模型