{"id":27957837,"url":"https://github.com/tencentcloudbase/cloudbase-agent-ui","last_synced_at":"2025-05-07T18:14:52.325Z","repository":{"id":279062524,"uuid":"937165280","full_name":"TencentCloudBase/cloudbase-agent-ui","owner":"TencentCloudBase","description":"腾讯云开发 Agent UI ，微信小程序 AI 对话组件","archived":false,"fork":false,"pushed_at":"2025-05-07T12:36:16.000Z","size":37411,"stargazers_count":24,"open_issues_count":2,"forks_count":0,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-05-07T18:14:39.112Z","etag":null,"topics":["agent","compoents","llm","miniprogram","ui"],"latest_commit_sha":null,"homepage":"https://docs.cloudbase.net/ai/quickstart","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TencentCloudBase.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-02-22T13:49:09.000Z","updated_at":"2025-05-07T08:52:27.000Z","dependencies_parsed_at":"2025-04-22T11:38:42.331Z","dependency_job_id":null,"html_url":"https://github.com/TencentCloudBase/cloudbase-agent-ui","commit_stats":null,"previous_names":["tencentcloudbase/cloudbase-agent-ui"],"tags_count":30,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TencentCloudBase%2Fcloudbase-agent-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TencentCloudBase%2Fcloudbase-agent-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TencentCloudBase%2Fcloudbase-agent-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TencentCloudBase%2Fcloudbase-agent-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TencentCloudBase","download_url":"https://codeload.github.com/TencentCloudBase/cloudbase-agent-ui/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252931524,"owners_count":21827112,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["agent","compoents","llm","miniprogram","ui"],"created_at":"2025-05-07T18:14:51.617Z","updated_at":"2025-05-07T18:14:52.312Z","avatar_url":"https://github.com/TencentCloudBase.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# TencentCloudBase Agent UI 🤖\n\n[![WeChat MiniProgram](https://img.shields.io/badge/Platform-WeChat_MiniProgram-07C160?logo=wechat)](https://developers.weixin.qq.com/miniprogram/dev/framework/)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://makeapullrequest.com)\n[![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/TencentCloudBase/cloudbase-agent-ui/blob/main/LICENSE)\n[![GitHub Stars](https://img.shields.io/github/stars/TencentCloudBase/cloudbase-agent-ui?style=social)](https://github.com/TencentCloudBase/cloudbase-agent-ui)\n\ncloudbase-agent-ui 是由腾讯云开发团队推出的 AI 智能对话 UI 组件，配置简单开箱即用，助力微信小程序开发者快速集成大模型能力，打造企业级LLM应用。现已支持接入\n***DeepSeek 满血版（DeepSeek-R1-671B 与 DeepSeek-V3-671B）🔥🔥🔥, 腾讯混元大模型等***。\n\nAgent UI 演示效果图\n\n\u003cimg src=\"https://raw.githubusercontent.com/TencentCloudBase/cloudbase-agent-ui/luke--migrate-repo/docs/modelExample.gif\" width=\"375px\"\u003e   \u003cimg src=\"https://raw.githubusercontent.com/TencentCloudBase/cloudbase-agent-ui/luke--migrate-repo/docs/botExample.gif\" width=\"375px\"\u003e\n\n## 🌟 特性亮点\n\n- **双模式支持** `Agent模式` 与 `大模型直连` 自由选择对话策略\n- **企业级功能集成** 流式输出/联网搜索/深度思考/多轮会话 开箱即用\n- **多模型支持** 深度兼容 DeepSeek、Hunyuan 等主流大模型\n- **配置即开发** 通过配置快速接入组件能力，无需处理复杂通信逻辑\n- **支持 MCP Server 调用\u0026自定义工具卡片** 对接云开发MCP Server能力，支持开发者定制工具卡片展示\n\n## 📦 使用指南\n\n### 组件集成\n\n#### 1. 开通环境\n\nAgent UI 微信小程序组件依赖**微信云开发**服务，需先开通云开发环境\n\n##### 1.1 开通微信云开发\n\n开通方式，点击开发者工具顶部“云开发” 进行开通\n\n![](https://qcloudimg.tencent-cloud.cn/raw/f06ca4761f54ecc8ed8d9644229c92f9.png)\n\n如已开通微信云开发服务，请跳转至[云开发平台](https://tcb.cloud.tencent.com/dev)创建AI服务。\n\n##### 1.2、创建AI服务\n\n- 方式一：直接使用agent智能体服务\n  ![](https://qcloudimg.tencent-cloud.cn/raw/97786aaaa15aa1f23e9bbd39a7a6762f.png)\n- 方式二：接入大模型\n  ![](https://qcloudimg.tencent-cloud.cn/raw/876d2238b5331a7bdcbd91a1b38b8248.png)\n\n#### 2. 获取组件\n\n可通过以下两种方式获取组件包代码\n\n1. **克隆仓库到本地，提取其中components/agent-ui 目录使用**\n2. **下载GitHub Release 包 agent-ui.zip，直接使用**\n\n#### 3. 微信小程序项目引入组件\n\n1. **配置云开发环境ID**\n   打开 miniprogram/app.js 文件，配置云开发环境ID。\n\n```js\nApp({\n  onLaunch: function () {\n    if (!wx.cloud) {\n      console.error(\"请使用 2.2.3 或以上的基础库以使用云能力\");\n    } else {\n      wx.cloud.init({\n        env: \"your envId\",// 环境id\n        traceUser: true,\n      });\n    }\n\n    this.globalData = {};\n  },\n});\n```\n\n2. **拷贝源码组件，将 agent-ui 组件放入用户项目 components 目录中**\n3. **组件所属页面 .json配置文件中注册组件**\n\n```json\n{\n  \"usingComponents\": {\n    \"agent-ui\":\"/components/agent-ui/index\"\n  },\n}\n\n```\n\n4. **组件所属页面 .wxml 文件中引用组件**\n\n```wxml\n\u003cview\u003e\n  \u003cagent-ui agentConfig=\"{{agentConfig}}\" showBotAvatar=\"{{showBotAvatar}}\" chatMode=\"{{chatMode}}\" modelConfig=\"{{modelConfig}}\"\u003e\u003c/agent-ui\u003e\n\u003c/view\u003e\n```\n\n5. **组件所属页面 .js 文件中编写配置**\n\n```js\nPage({\n  // ...\n  data: {\n    chatMode: \"bot\", // bot 表示使用agent，model 表示使用大模型，两种选一种配置即可\n    showBotAvatar: true, // 是否在对话框左侧显示头像\n    agentConfig: {\n      botId: \"bot-e7d1e736\", // agent id,\n      allowWebSearch: true, // 允许客户端选择启用联网搜索\n      allowUploadFile: true, // 允许上传文件\n      allowPullRefresh: true, // 允许下拉刷新\n      allowUploadImage: true, // 允许上传图片\n      allowMultiConversation: true, // 允许客户端界面展示会话列表及新建会话按钮\n      showToolCallDetail: true, // 允许展示 mcp server toolcall 细节\n      allowVoice: true, // 允许展示语音按钮\n    },\n    modelConfig: {\n      modelProvider: \"hunyuan-open\", // 大模型服务厂商\n      quickResponseModel: \"hunyuan-lite\", // 大模型名称\n      logo: \"\", // model 头像\n      welcomeMsg: \"欢迎语\", // model 欢迎语\n    },\n  }\n  // ...\n})\n```\n\n### 自定义 MCP 工具卡片\n\n\u003e 以下示例流程以结合腾讯地图 MCP Server 开发自定义工具卡片举例说明\n\n#### 1. 开通 MCP 能力\n\n- 进入云开发平台 AI+ MCP 页面，点击创建MCP Server\n\n![](https://qcloudimg.tencent-cloud.cn/raw/bc2a7815b542b26f5931aa835514dc37.png)\n\n- 若未开通过云托管服务，需先开通云托管\n\n![](https://qcloudimg.tencent-cloud.cn/raw/084b50f265e0335201801c3fb741d04d.png)\n\n#### 2. 配置 MCP Server\n\n- 以腾讯地图 MCP Server 举例，选择模板进行安装（按照指引获取腾讯地图平台API KEY后，配置环境变量）\n\n![](https://qcloudimg.tencent-cloud.cn/raw/a5b15af9bfff83008257a0c99d252b83.png)\n\n#### 3. agent 绑定 MCP Server tools\n\n- 在 agent 配置页点击添加MCP 服务，选择对应的MCP Server tools 使用 （此处腾讯地图示例可勾选 geocoder,placeSearchNearby, directionDriving, weather等工具）\n\n![](https://qcloudimg.tencent-cloud.cn/raw/b45a95e06ec0df8dab5c9d9ec7707faa.png)\n\n\n#### 4. 开发自定义卡片组件\n\n- 参照本工程中 apps/miniprogram-agent-ui/miniprogram/components/toolCard 目录内自定义工具卡片组件实现\n\n![](https://qcloudimg.tencent-cloud.cn/raw/14a4a82810f0b45bde0c124cc8f3ed1c.png)\n\n#### 5. 卡片组件引用配置\n\n- 自定义卡片组件引用声明配置（可在用户小程序项目全局app.json中配置 或 agent-ui组件index.json中配置）\n\n![](https://qcloudimg.tencent-cloud.cn/raw/cd1dc376a1e238f3186a2209e5875698.png)\n\n- agent-ui 组件内 customCard/index.wxml 中添加自定义组件\n\n![](https://qcloudimg.tencent-cloud.cn/raw/b4cd35ccaa3e72189934ed59d35f7ae5.png)\n\n#### 6. 卡片效果\n\n\u003cimg src=\"https://qcloudimg.tencent-cloud.cn/raw/82adcd08eec9443f8b8a336342a4fa23.png\" width=\"375px\"\u003e \n\n\n## 🏗 项目结构\n\n```bash\n📦 cloudbase-agent-ui\n├── 📂 components       # 组件集合\n│   └── agent-ui        # 你要使用的小程序 Agent UI 组件（拷贝这个替换旧版本）\n├── 📂 docs             # 文档\n└── 📂 apps         # 应用列表\n│   └── miniprogram-agent-ui     # 集成 agent-ui 组件的示例应用，可直接导入微信开发者工具体验\n├── CHANGELOG.md           # 版本变更记录（语义化版本规范）\n├── LICENSE                # 开源协议\n├── package.json           # 版本管理\n└── .github/               # GitHub自动化配置\n    ├── workflows/\n    │   └── release-main.yml    # 自动打包发布\n    └── ISSUE_TEMPLATE/    # Issue模板\n\n```\n\n## ⚙️ 配置详解\n\n### 配置属性表\n\n| 参数              | 类型                     | 必填 | 说明                                                                                                   |\n| ----------------- | ------------------------ | ---- | ------------------------------------------------------------------------------------------------------ |\n| `chatMode`      | `String`               | 是   | 组件对接的AI类型，值为 'bot' 或者 'model'，为 'bot' 时，对接 agent 能力；为 'model' 时，对接大模型能力 |\n| `showBotAvatar` | `Boolean`              | 否   | 是否展示Bot的logo头像                                                                                  |\n| `agentConfig`   | [AgentConfig](#Agentconfig) | 是   | Agent 调用配置                                                                                         |\n| `modelConfig`   | [ModelConfig](#Modelconfig) | 是   | Model 调用配置                                                                                         |\n\n#### AgentConfig\n\n| 参数                       | 类型        | 必填 | 说明                                          |\n| -------------------------- | ----------- | ---- | --------------------------------------------- |\n| `botId`                  | `String`  | 否   | Agent的唯一标识ID，当 chatMode = 'bot' 时必填 |\n| `allowWebSearch`         | `Boolean` | 否   | 是否允许客户端界面展示联网搜索                |\n| `allowUploadFile`        | `Boolean` | 否   | 是否允许客户端界面展示文件上传                |\n| `allowPullRefresh`       | `Boolean` | 否   | 是否允许客户端界面展示下拉获取历史记录        |\n| `allowUploadImage`       | `Boolean` | 否   | 是否允许客户端界面展示图片上传及拍照上传      |\n| `allowMultiConversation` | `Boolean` | 否   | 是否允许客户端界面展示会话列表及新建会话按钮  |\n| `showToolCallDetail`     | `Boolean` | 否   | 是否允许展示 mcp server toolcall 细节         |\n| `allowVoice`     | `Boolean` | 否   | 是否允许客户端界面展示语音按钮         |\n\n#### ModelConfig\n\n| 参数                   | 类型       | 必填 | 说明                                                                                                                                                                                                                                                                                                                                                            |\n| ---------------------- | ---------- | ---- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `modelProvider`      | `String` | 是   | 大模型服务商，当 chatMode = 'model' 时，必填，值为 'hunyuan-open' 或 'deepseek'                                                                                                                                                                                                                                                                                 |\n| `quickResponseModel` | `String` | 是   | 具体使用的模型，当 chatMode = 'model' 时，必填； modelProvider 为 deepseek时，支持  deepseek-r1/deepseek-v3; modelProvider 为 hunyuan-exp （混元体验版）/ hunyuan-open（混元正式版,使用需先[配置API Key](https://tcb.cloud.tencent.com/dev?envId=luke-agent-dev-7g1nc8tqc2ab76af#/ai?tab=ai-model\u0026model=hunyuan-open)）时，quickResponseModel 可配置为hunyuan-lite |\n| `logo`               | `String` | 否   | 页面 logo，当 chatMode = 'model' 时生效，选填                                                                                                                                                                                                                                                                                                                   |\n| `welcomeMsg`         | `String` | 否   | 欢迎语，当 chatMode = 'model' 时生效，选填                                                                                                                                                                                                                                                                                                                      |\n\n\u003e **上传文件限制**\n\u003e 大小限制：单文件不超过10M\n\u003e 数量限制：单次最多支持 5 个文件\n\u003e 文件类型：pdf、txt、doc、docx、ppt、pptx、xls、xlsx、csv\n\n\u003e **上传图片限制**\n\u003e 大小限制：单文件不超过30M\n\u003e 数量限制：单次最多支持 1 个文件\n\n\u003e **request合法域名配置**：微信小程序 Agent-UI 组件支持 上传文件\u0026多会话 需要添加云开发域名到request合法域名列表，云开发域名为：https://{your-envid}.api.tcloudbasegateway.com, 可前往[微信公众平台](https://mp.weixin.qq.com)配置request合法域名\n\n\n\u003e **语音**\n\u003e 若未授予小程序使用麦克风权限，组件会进行权限申请，请同意授予\n\n\u003cimg src=\"https://qcloudimg.tencent-cloud.cn/raw/55ce1f6862922bb1997720a51a84caab.png\" width=\"375px\"\u003e\n\n配置示例\n\n- **对接 DeepSeek 大模型**\n\n1. 前往 miniprogram/app.js 文件配置云开发环境 ID\n\n```javascript\nwx.cloud.init({\n  env: \"你的环境ID\",\n  traceUser: true,\n});\n```\n\n2. 修改组件配置，在引用 agent-ui 组件的页面配置 (也可参考apps/miniprogram-agent-ui项目 chatBot 页面配置案例)\n\n```javascript\nPage({\n  //...\n  data: {\n    chatMode: 'model',\n    modelConfig: {\n      modelProvider: \"deepseek\",\n      quickResponseModel: \"deepseek-v3\" // or deepseek-r1\n      logo: \"\",\n      welcomeMsg: \"\"\n    }\n  }\n  //...\n})\n```\n\n- **对接 Hunyuan 大模型**\n\n1. 前往 miniprogram/app.js 文件配置云开发环境 ID\n\n```javascript\nwx.cloud.init({\n  env: \"你的环境ID\",\n  traceUser: true,\n});\n```\n\n2. 修改组件配置，在引用 agent-ui 组件的页面配置 (也可参考apps/miniprogram-agent-ui项目 chatBot 页面配置案例)\n\n```javascript\nPage({\n  //...\n  data:{\n    chatMode: 'model',\n    modelConfig: {\n      modelProvider: \"hunyuan-open\",\n      quickResponseModel: \"hunyuan-lite\"\n      logo: \"\",\n      welcomeMsg: \"\"\n    }\n  }\n  //...\n})\n```\n\n- **对接 腾讯云开发 Agent**\n\n1. 前往 miniprogram/app.js 文件配置云开发环境 ID\n\n```javascript\nwx.cloud.init({\n  env: \"你的环境ID\",\n  traceUser: true,\n});\n```\n\n2. 修改组件配置，在引用 agent-ui 组件的页面配置 (也可参考apps/miniprogram-agent-ui项目 chatBot 页面配置案例)\n\n```javascript\nPage({\n  //...\n  data: {\n    chatMode: \"bot\", // bot 表示使用agent，model 表示使用大模型\n    showBotAvatar: true, // 是否在对话框左侧显示头像\n    agentConfig: {\n      botId: \"bot-e7d1e736\", // agent id,\n      allowWebSearch: true, // 允许客户端选择启用联网搜索\n      allowUploadFile: true, // 允许上传文件\n      allowPullRefresh: true, // 允许下拉刷新\n      allowUploadImage: true, // 允许上传图片及拍照上传\n      allowMultiConversation: true, // 允许客户端界面展示会话列表及新建会话按钮\n      showToolCallDetail: true, // 允许展示 mcp server toolcall 细节\n      allowVoice: true // 允许展示语音按钮\n    }\n  }\n  //...\n})\n```\n\n## 🚀 开发路线\n\n### ✅ 已完成功能\n\n- ✅ 大模型调用配置化 （DeepSeek/Hunyuan）\n- ✅ Agent调用配置化 (云开发平台配置)\n- ✅ 流式输出\n- ✅ 联网搜索 （Agent模式）\n- ✅ 文档解析 （Agent模式）\n- ✅ 图片上传解析（拍照/图片）（Agent模式）\n- ✅ 支持环境共享下使用\n- ✅ 历史会话管理，多轮对话上下文记忆（Agent模式）\n- ✅ 支持 MCP 调用（Agent模式）\n- ✅ 支持文字转语音播放\n- ✅ 支持用户语音输入转文字\n- ✅ 支持语音音色配置\n\n### 🚧 进行中开发\n\n- 多模型（快速响应/深度推理）切换调用配置化\n- UI 双标题优化\n\n### 📅 未来计划\n\n- 支持会话清理\n- 支持 Artifact\n- UI 高度配置化，提供页面结构配置化控制，CSS变量配置，完美融入品牌风格\n- 文生图\n- 文生视频\n- 文生3D\n- 图生视频\n- 待补充...\n\n## 🌍 社区支持\n\n遇到问题？欢迎通过以下方式联系我们：\n\n- [Github Issues](https://github.com/TencentCloudBase/cloudbase-agent-ui/issues)\n- 微信开发者群 （扫码加小助手微信拉群）\n\n## 🤝 贡献指南\n\n我们欢迎所有形式的贡献！\n\n## 👥 贡献者墙\n\nhttps://contrib.rocks/image?repo=TencentCloudBase/cloudbase-agent-ui\n\n![Star History Chart](https://api.star-history.com/svg?repos=TencentCloudBase/cloudbase-agent-ui\u0026type=Date)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftencentcloudbase%2Fcloudbase-agent-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftencentcloudbase%2Fcloudbase-agent-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftencentcloudbase%2Fcloudbase-agent-ui/lists"}