### Initialize Cloudbase Environment (JavaScript) Source: https://github.com/tencentcloudbase/cloudbase-agent-ui/blob/main/README.md Example of initializing the Cloudbase environment in the `app.js` file of a WeChat Mini Program. This is a prerequisite for using Cloudbase services. ```javascript wx.cloud.init({ env: "Your Environment ID", traceUser: true }); ``` -------------------------------- ### Integrating React-Specific ESLint Plugins Source: https://github.com/tencentcloudbase/cloudbase-agent-ui/blob/main/apps/react-agent-ui/README.md This code example shows how to integrate `eslint-plugin-react-x` and `eslint-plugin-react-dom` into an ESLint configuration. It covers adding the plugins and enabling their recommended TypeScript and DOM-specific rules for enhanced React linting. ```javascript // eslint.config.js import reactX from 'eslint-plugin-react-x'; import reactDom from 'eslint-plugin-react-dom'; export default tseslint.config({ plugins: { // Add the react-x and react-dom plugins 'react-x': reactX, 'react-dom': reactDom, }, rules: { // other rules... // Enable its recommended typescript rules ...reactX.configs['recommended-typescript'].rules, ...reactDom.configs.recommended.rules, }, }); ``` -------------------------------- ### Agent UI Component Configuration Source: https://github.com/tencentcloudbase/cloudbase-agent-ui/blob/main/README.md Provides example configurations for the Agent UI component, including settings for agent mode (botId, allowWebSearch, etc.) and direct large model connection (modelProvider, quickResponseModel, etc.). ```javascript Page({ // ... data: { chatMode: "bot", // bot 表示使用agent，model 表示使用大模型，两种选一种配置即可 showBotAvatar: true, // 是否在对话框左侧显示头像 agentConfig: { botId: "bot-e7d1e736", // agent id, allowWebSearch: true, // 允许客户端选择启用联网搜索 allowUploadFile: true, // 允许上传文件 allowPullRefresh: true, // 允许下拉刷新 allowUploadImage: true, // 允许上传图片 allowMultiConversation: true, // 允许客户端界面展示会话列表及新建会话按钮 showToolCallDetail: true, // 允许展示 mcp server toolcall 细节 allowVoice: true, // 允许展示语音按钮 }, modelConfig: { modelProvider: "hunyuan-open", // 大模型服务厂商 quickResponseModel: "hunyuan-lite", // 大模型名称 logo: "", // model 头像 welcomeMsg: "欢迎语", // model 欢迎语 }, } // ... }) ``` -------------------------------- ### Expanding ESLint with Type-Checked Rules Source: https://github.com/tencentcloudbase/cloudbase-agent-ui/blob/main/apps/react-agent-ui/README.md This snippet demonstrates how to configure ESLint to include type-aware linting rules for a TypeScript project. It shows how to extend ESLint with recommended, stricter, and stylistic type-checked configurations, along with specifying project configurations for parsing. ```javascript export default tseslint.config({ extends: [ // Remove ...tseslint.configs.recommended and replace with this ...tseslint.configs.recommendedTypeChecked, // Alternatively, use this for stricter rules ...tseslint.configs.strictTypeChecked, // Optionally, add this for stylistic rules ...tseslint.configs.stylisticTypeChecked, ], languageOptions: { // other options... parserOptions: { project: ['./tsconfig.node.json', './tsconfig.app.json'], tsconfigRootDir: import.meta.dirname, }, }, }); ``` -------------------------------- ### Configure Agent UI for DeepSeek Model (JavaScript) Source: https://github.com/tencentcloudbase/cloudbase-agent-ui/blob/main/README.md Example of configuring the Agent UI component in a WeChat Mini Program page to use the DeepSeek large language model. This involves setting `chatMode` and `modelConfig`. ```javascript Page({ //... data: { chatMode: 'model', modelConfig: { modelProvider: "deepseek", quickResponseModel: "deepseek-v3" // or deepseek-r1 logo: "", welcomeMsg: "" } } //... }) ``` -------------------------------- ### Configure Agent UI for Tencent Cloud Agent (JavaScript) Source: https://github.com/tencentcloudbase/cloudbase-agent-ui/blob/main/README.md Example of configuring the Agent UI component in a WeChat Mini Program page to use the Tencent Cloud Agent. This involves setting `chatMode` and `agentConfig` with various feature flags. ```javascript Page({ //... data: { chatMode: "bot", // bot indicates using Agent, model indicates using large model showBotAvatar: true, // Whether to display the avatar on the left side of the chat dialog agentConfig: { botId: "bot-e7d1e736", // agent id allowWebSearch: true, // Allow client to choose to enable web search allowUploadFile: true, // Allow file uploads allowPullRefresh: true, // Allow pull-to-refresh allowUploadImage: true, // Allow image uploads and camera uploads allowMultiConversation: true, // Allow the client interface to display the conversation list and create new conversation button showToolCallDetail: true, // Allow display of mcp server toolcall details allowVoice: true // Allow display of voice button } } //... }) ``` -------------------------------- ### Configure Agent UI for Hunyuan Model (JavaScript) Source: https://github.com/tencentcloudbase/cloudbase-agent-ui/blob/main/README.md Example of configuring the Agent UI component in a WeChat Mini Program page to use the Hunyuan large language model. This involves setting `chatMode` and `modelConfig`. ```javascript Page({ //... data:{ chatMode: 'model', modelConfig: { modelProvider: "hunyuan-open", quickResponseModel: "hunyuan-lite" logo: "", welcomeMsg: "" } } //... }) ``` -------------------------------- ### Project Structure Source: https://github.com/tencentcloudbase/cloudbase-agent-ui/blob/main/README.md Provides an overview of the directory structure for the cloudbase-agent-ui project, highlighting key directories like 'components', 'docs', and 'apps', as well as important files such as 'package.json' and 'CHANGELOG.md'. ```bash 📦 cloudbase-agent-ui ├── 📂 components # 组件集合 │ └── agent-ui # 你要使用的小程序 Agent UI 组件（拷贝这个替换旧版本） ├── 📂 docs # 文档 └── 📂 apps # 应用列表 │ └── miniprogram-agent-ui # 集成 agent-ui 组件的示例应用，可直接导入微信开发者工具体验 ├── CHANGELOG.md # 版本变更记录（语义化版本规范） ├── LICENSE # 开源协议 ├── package.json # 版本管理 └── .github/ # GitHub自动化配置 ├── workflows/ │ │ └── release-main.yml # 自动打包发布 └── ISSUE_TEMPLATE/ # Issue模板 ``` -------------------------------- ### Register and Use Agent UI Component Source: https://github.com/tencentcloudbase/cloudbase-agent-ui/blob/main/README.md Demonstrates how to register the Agent UI component in a page's JSON configuration and then use it in the WXML file, passing various configuration objects. ```json { "usingComponents": { "agent-ui":"/components/agent-ui/index" } } ``` -------------------------------- ### Initialize CloudBase Environment Source: https://github.com/tencentcloudbase/cloudbase-agent-ui/blob/main/README.md Configures the WeChat CloudBase environment ID for the application. This is a prerequisite for using CloudBase services, including the Agent UI component. ```javascript App({ onLaunch: function () { if (!wx.cloud) { console.error("请使用 2.2.3 或以上的基础库以使用云能力"); } else { wx.cloud.init({ env: "your envId",// 环境id traceUser: true, }); } this.globalData = {}; }, }); ``` -------------------------------- ### Component Configuration Source: https://github.com/tencentcloudbase/cloudbase-agent-ui/blob/main/README.md Details the configuration properties for the Agent UI component, including data types, required fields, and descriptions for each parameter. It covers general chat settings and specific configurations for Agent and Model interactions. ```APIDOC Component Configuration Properties: `chatMode` - Type: `String` - Required: Yes - Description: The type of AI the component connects to. Use 'bot' for agent capabilities or 'model' for large model capabilities. `showBotAvatar` - Type: `Boolean` - Required: No - Description: Whether to display the Bot's logo avatar. `agentConfig` - Type: `[AgentConfig](#Agentconfig)` - Required: Yes - Description: Configuration for Agent calls. `modelConfig` - Type: `[ModelConfig](#Modelconfig)` - Required: Yes - Description: Configuration for Model calls. AgentConfig: `botId` - Type: `String` - Required: No (Required when `chatMode` is 'bot') - Description: The unique identifier for the Agent. `allowWebSearch` - Type: `Boolean` - Required: No - Description: Whether to allow the client interface to display web search functionality. `allowUploadFile` - Type: `Boolean` - Required: No - Description: Whether to allow the client interface to display file upload functionality. `allowPullRefresh` - Type: `Boolean` - Required: No - Description: Whether to allow the client interface to display pull-to-refresh for historical records. `allowUploadImage` - Type: `Boolean` - Required: No - Description: Whether to allow the client interface to display image upload and camera upload functionality. `allowMultiConversation` - Type: `Boolean` - Required: No - Description: Whether to allow the client interface to display conversation lists and a button to create new conversations. `showToolCallDetail` - Type: `Boolean` - Required: No - Description: Whether to allow the display of mcp server tool call details. `allowVoice` - Type: `Boolean` - Required: No - Description: Whether to allow the client interface to display a voice input button. `showBotName` - Type: `Boolean` - Required: No - Description: Whether to allow the client interface to display the Bot name. If set to false, the user can manually set the navigationBarTitleText in the page where the component is used to the Bot name. ``` -------------------------------- ### ModelConfig Parameters Source: https://github.com/tencentcloudbase/cloudbase-agent-ui/blob/main/README.md Defines the parameters for configuring large language models within the Agent UI. This includes specifying the model provider, the specific model to use, and optional UI elements like logo and welcome messages. ```APIDOC ModelConfig: modelProvider (String, required): The large model service provider. Required when chatMode = 'model'. Supported values: 'hunyuan-open', 'deepseek'. quickResponseModel (String, required): The specific model to use. Required when chatMode = 'model'. - If modelProvider is 'deepseek', supported values: 'deepseek-r1', 'deepseek-v3'. - If modelProvider is 'hunyuan-exp' or 'hunyuan-open', supported value: 'hunyuan-lite'. For 'hunyuan-open', API Key configuration is required. logo (String, optional): The page logo. Effective when chatMode = 'model'. welcomeMsg (String, optional): The welcome message. Effective when chatMode = 'model'. ``` -------------------------------- ### Custom MCP Tool Card Implementation Source: https://github.com/tencentcloudbase/cloudbase-agent-ui/blob/main/README.md Illustrates the process of implementing custom tool cards for the Agent UI by integrating with Tencent Map MCP Server. This involves configuring MCP Server, binding tools, and developing custom WXML components. ```APIDOC MCP Server Integration for Custom Tool Cards: 1. Enable MCP Capability: - Navigate to the AI+ MCP page on the Cloud Development Platform. - Click to create an MCP Server. - If Cloud Hosting is not enabled, enable it first. 2. Configure MCP Server: - Example: Tencent Map MCP Server. - Select and install a template. - Configure environment variables, including obtaining the Tencent Map platform API KEY. 3. Bind MCP Server Tools to Agent: - In the agent configuration page, click 'Add MCP Service'. - Select the desired MCP Server tools (e.g., geocoder, placeSearchNearby, directionDriving, weather for Tencent Map). 4. Implement Agent UI customCard Component: - Add custom logic within the `agent-ui/customCard/index.wxml` component. - Render different custom components based on the tool type. - Example: Include a Tencent Map custom card component. 5. Develop Custom Card Component: - Refer to the custom Tencent Map card component implementation in `apps/miniprogram-agent-ui/miniprogram/components/toolCard`. 6. Configure Custom Card Component Reference: - Declare the custom card component reference in `app.json` (global) or `agent-ui/index.json`. ``` -------------------------------- ### Agent UI Component Usage in WXML Source: https://github.com/tencentcloudbase/cloudbase-agent-ui/blob/main/README.md Shows how to include the Agent UI component in a WeChat Mini Program's WXML file, binding it to data properties like agentConfig, showBotAvatar, chatMode, and modelConfig. ```wxml ``` -------------------------------- ### Request Legitimate Domain Configuration Source: https://github.com/tencentcloudbase/cloudbase-agent-ui/blob/main/README.md Instructions for configuring the request legitimate domain list in WeChat Mini Programs to support file uploads and multi-session features. The required domain format is provided. ```APIDOC RequestDomainConfig: description: WeChat Mini Program Agent-UI component requires adding the CloudBase domain to the request legitimate domain list for file upload & multi-session features. domainFormat: https://{your-envid}.api.tcloudbasegateway.com configuration: Refer to the WeChat Official Accounts Platform for configuration. ``` -------------------------------- ### File Upload Limits Source: https://github.com/tencentcloudbase/cloudbase-agent-ui/blob/main/README.md Specifies the limitations for uploading files to the Agent UI. This includes size, quantity, and allowed file types. ```APIDOC FileUploadLimits: size: Maximum 10MB per file. quantity: Maximum 5 files per upload. types: pdf, txt, doc, docx, ppt, pptx, xls, xlsx, csv ``` -------------------------------- ### Image Upload Limits Source: https://github.com/tencentcloudbase/cloudbase-agent-ui/blob/main/README.md Specifies the limitations for uploading images to the Agent UI, including size and quantity. ```APIDOC ImageUploadLimits: size: Maximum 30MB per file. quantity: Maximum 1 file per upload. ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.