Agent UI Mini Program Component

Agent UI Mini Program source code component helps developers quickly build chat interfaces in WeChat Mini Programs.

Agent UI provides the following features:

Integrate with CloudBase large model
Integrate with CloudBase Agent

tip

Due to the security policy upgrade in the WeChat Mini Program basic library, the file upload feature parsing process may be affected. Please upgrade the agent ui component.

Mini Program source code component, please update to the latest version.
For WeDa low-code components, create a new page and re-drag to update the agent-ui block, then publish the application after completion.

Quick Trial

Method 1: In the WeChat Developer Tools entry, create a project via template and follow the template instructions to quickly experience the Agent-UI Mini Program source code component.

Method 2: Download the project sample source code package and import it into WeChat Developer Tools for use.

Note: In the project sample package, you need to manually modify the env configuration in app.json to your environment ID, and set the botId configuration in pages/chatBot/chatBot.js to your agent ID.

How to Integrate the Component into an Existing WeChat Mini Program

1. Copy the miniprogram/components/agent-ui component to the Mini Program

2. Register the component in the page .json configuration file

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

3. Use the component in the page .wxml file

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

4. Configure in the page .js file

  data: {
    chatMode: "model", // bot indicates using agent, model indicates using large model
    showBotAvatar: true, // Whether to display the avatar on the left side of the dialog box
    agentConfig: {
      botId: "bot-e7d1e736", // agent id,
      allowWebSearch: true, // Allow the client to enable web search
      allowUploadFile: true, // Allow file upload
      allowPullRefresh: true, // Allow pull-to-refresh
      allowUploadImage: true // Allow image upload
      showToolCallDetail: true, // Whether to display tool call details
      allowMultiConversation: true, // whether to display the conversation list and the create conversation button
      allowVoice: true // Whether to display the voice button on the client interface
    },
    modelConfig: {
      modelProvider: "hunyuan-open", // large model service provider
      quickResponseModel: "hunyuan-lite", // large model name (Hunyuan Turbo, gpt4 Turbo version, deepseek v3, etc.)
      logo: "", // model avatar
      welcomeMsg: "welcome message", // model welcome message
    },
  }

5. In app.js, within the onLaunch lifecycle, initialize the sdk asynchronously

// app.js
App({
  onLaunch: function () {
    wx.cloud.init({
      env: "<CloudBase environment ID>",
    });
  },
});

Component Parameters

Parameter Name	Allowed Values	Description
chatMode	'bot' or 'model'	When chatMode='bot', agentConfig.botId is required; when chatMode='model', modelConfig.modelProvider and modelConfig.quickResponseModel are required
showBotAvatar	boolean	Whether to display the avatar on the left side of the UI
agentConfig.botId	string	agent id, required when chatMode = 'bot'
agentConfig.allowUploadFile	boolean	Whether to display file upload in the interface
agentConfig.allowWebSearch	boolean	Allow the UI to display the web search configuration switch
agentConfig.allowPullRefresh	boolean	Allow pull-to-refresh
agentConfig.allowUploadImage	boolean	Allow image upload
agentConfig.allowMultiConversation	boolean	whether to display the conversation list and the create conversation button
agentConfig.showToolCallDetail	boolean	Whether to display tool call details
agentConfig.allowVoice	boolean	Whether to display the voice button on the client interface
modelConfig.modelProvider	'hunyuan' or 'deepseek'	large model service provider
modelConfig.quickResponseModel	string	specific model version, refer to large model versions
envShareConfig.resourceAppid	string	Resource provider AppID for environment sharing
envShareConfig.resourceEnv	string	Resource provider environment ID for environment sharing

1. File Upload Instructions

Size Limit: Maximum 10M per file
Quantity Limit: Maximum 5 files per request
File Type: pdf, txt, doc, docx, ppt, pptx, xls, xlsx, csv
Request Valid Domain Configuration: To upload files in a WeChat Mini Program, you need to add the "file upload interface" to the request valid domain list. The file upload domain is: https://{envid}.api.tcloudbasegateway.com. Replace {envid} with the actual environment ID. Configure the request valid domain at the WeChat Official Account Platform https://mp.weixin.qq.com.

2. Image Upload Instructions

The system only supports uploading a single image per operation, with a maximum size of 30MB.

3. Voice Feature Instructions

If the Mini Program has not been granted microphone permission, the component will request permission; please grant it.

Example

Use the deepseek-v3 model

{
  "chatMode": "model", // bot indicates using agent, model indicates using large model
  "showBotAvatar": true, // Whether to display the avatar on the left side of the dialog box
  "modelConfig": {
    "modelProvider": "deepseek", // large model service provider
    "quickResponseModel": "deepseek-v3", // large model name
    "logo": "", // model avatar
    "welcomeMsg": "welcome message" // model welcome message
  }
}

Use the deepseek-r1 model

data: {
  chatMode: "model", // bot indicates using agent, model indicates using large model
  showBotAvatar: true, // Whether to display the avatar on the left side of the dialog box
  modelConfig: {
    modelProvider: "deepseek", // large model service provider
    quickResponseModel: "deepseek-r1", // large model name
    logo: "", // model avatar
    welcomeMsg: "welcome message", // model welcome message
  },
}

Use Agent

{
  chatMode: "bot", // bot indicates using agent, model indicates using large model
  showBotAvatar: true, // Whether to display the avatar on the left side of the dialog box
  agentConfig: {
    botId: "bot-e7d1e736", // agent id,
    allowWebSearch: true, // Allow the client to enable web search
    allowUploadFile: true, // Allow file upload
    allowPullRefresh: true, // Allow pull-to-refresh
    allowUploadImage: true // Allow image upload 
    showToolCallDetail: true, // Whether to display tool call details
    allowMultiConversation: true, // whether to display the conversation list and the create conversation button
    allowVoice: true // Whether to display the voice button on the client interface
  }
}

Get Agent ID

Large Model Version

hunyuan

Model Version	Description
hunyuan-lite	Possesses powerful Chinese content generation capabilities, logical reasoning abilities in complex contexts, and reliable task execution capabilities

deepseek

Model Version	Description
deepseek-v3	Focuses on general tasks such as natural language processing, knowledge question answering, and content creation
deepseek-r1	Reasoning model designed specifically for mathematics, code generation, and complex logical reasoning tasks

Suppose Mini Program A has activated a CloudBase environment, and Mini Program B wants to invoke the AI capabilities in Mini Program A's CloudBase environment across environments. Please refer to the following guide.

Log in to Mini Program A, enable environment sharing, and share Mini Program A's CloudBase environment with Mini Program B for use.

Mini Program A and Mini Program B must be under the same entity to share environments

When using Agent-UI in Mini Program B, pass the appid and envId of Mini Program A to the Agent-UI component.

Parameters:

  data: {
    chatMode: "model", // bot indicates using agent, model indicates using large model
    showBotAvatar: true, // Whether to display the avatar on the left side of the dialog box
    modelConfig: {
      modelProvider: "deepseek", // large model service provider
      quickResponseModel: "deepseek-v3", // quick response model (Hunyuan Turbo, GPT-4 Turbo version, deepseek v3, etc.)
      logo: "", // model avatar
      welcomeMsg: "welcome message", // model welcome message
    },
    envShareConfig: {
      // To disable environment sharing, please delete this configuration or set EnvShareConfig:null
      // Resource provider AppID
      resourceAppid: "wx7a******5f4f",
      // Resource provider environment ID
      resourceEnv: "chr**************46d2d",
    },
  },

Custom MCP Tool Cards

Refer to ToolCard Development Guide

Agent UI Mini Program Component

Quick Trial​

How to Integrate the Component into an Existing WeChat Mini Program​

1. Copy the miniprogram/components/agent-ui component to the Mini Program​

2. Register the component in the page .json configuration file​

3. Use the component in the page .wxml file​

4. Configure in the page .js file​

5. In app.js, within the onLaunch lifecycle, initialize the sdk asynchronously​

Component Parameters and Related Instructions​

Component Parameters​

Related Notes​

Example​

Get Agent ID​

Large Model Version​

hunyuan​

deepseek​

Invoke AI capabilities from other environments through environment sharing​

Enable Environment Sharing​

Configure Environment Sharing Parameters​

Custom MCP Tool Cards​