Agent UI Large Model Template

Currently, the low-code components in cloud development provide frontend components that can be directly connected to and used with AI large models or Agents. You can quickly introduce these components into WeDa applications or mini-program pages and configure the connections to complete the integration with large models or Agents.

Download Template

1. Go to CloudBase AI+

2. Select the corresponding Application Type, Development Method, Access Type, and AI Instance, then click Download Template.

3. Extract to any location, open WeChat Developer Tools, and click New Project.

4. Navigate to the extracted location, enter the corresponding AppID, and click the Create button.

5. Click Trust and Run.

6. At this point, the page will be automatically compiled and rendered. The compressed package includes dependencies, so no build is required.

7. Modify the env parameter in the app.js file to the environment Id of your current cloud development environment.

8. Modify agentConfig in pages/index/index.js

Here the parameter structure of agentConfig is as follows:

Parameter Name	Parameter Optional 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 the avatar on the left side is displayed in the interface
agentConfig.botId	string	agent id, required when chatMode = 'bot'
agentConfig.allowUploadFile	boolean	Whether the file upload is displayed in the interface
agentConfig.allowWebSearch	string	Whether the web search configuration switch is displayed in the interface
agentConfig.allowPullRefresh	boolean	Allow pull-to-refresh
agentConfig.allowUploadImage	boolean	Allow image upload
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

File Upload Instructions

• Size Limit: Single file not exceeding 10M
• Quantity Limit: Up to 5 files per upload
• File Types: pdf, txt, doc, docx, ppt, pptx, xls, xlsx, csv
• Request Valid Domain Configuration: For file uploads in WeChat Mini Program, add the "file upload interface" to the request valid domain list. The file upload domain is: https://{envid}.api.tcloudbasegateway.com. Replace envid with your actual environment ID. Configure the request valid domain at WeChat Official Platform https://mp.weixin.qq.com.

Image Upload Instructions

Supports uploading only a single image at a time, with a maximum size of 30MB.

Example:

• Use the deepseek-v3 model

{
  chatMode: "model", // "bot" indicates using an agent, "model" indicates using a 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 an agent, "model" indicates using a 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 an agent, "model" indicates using a 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
  }
}

Get Agent ID

Large Model Version

hunyuan

Model Version	Description
hunyuan-lite	Possesses powerful Chinese text 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-based question answering, and content creation
deepseek-r1	Reasoning model designed specifically for mathematics, code generation, and complex logical reasoning tasks

Related Links

• Agent UI Block Component Detailed Reference Documentation

Invoking AI Capabilities of Other Environments Through Environment Sharing

Suppose Mini Program A has enabled a CloudBase environment, and Mini Program B needs to invoke the AI capabilities across environments from Mini Program A's CloudBase environment. Refer to the following instructions.

Enable Environment Sharing

Log in to Mini Program A, enable environment sharing, and share the CloudBase environment of Mini Program A with Mini Program B

Mini Program A and Mini Program B must belong to the same entity to enable environment sharing

Configure Environment Sharing Parameters

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

Parameters are as follows:

  data: {
    chatMode: "model", // "bot" indicates using an agent, "model" indicates using a 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, DeepSeek-V3, etc.)
      logo: "", // model avatar
      welcomeMsg: "Welcome message", // model welcome message
    },
    envShareConfig: {
      // Do not use environment sharing; please delete this configuration or set EnvShareConfig:null
      // Resource Provider AppID
      resourceAppid: "wx7a******5f4f",
      // Resource provider environment ID
      resourceEnv: "chr**************46d2d",
    },
  },