I. Preface

AI-generated code is no longer a novelty, but AI-generated WeChat Mini Programs seem to be less common.

The reason is probably that there are fewer open-source projects for Mini Programs, and model training is not easy.

Last week, I met with colleagues from Tencent and learned that "Tencent Cloud Development" recently had a major version update, significantly enhancing the AI capabilities of Mini Programs. I'm quite looking forward to it—Tencent handling Mini Program AI is more suitable than anyone else.

Later, I tried the AI features of this update and had a strong feeling that WeChat Mini Programs might soon become the primary carrier for domestic AI applications (also known as "intelligent agents").

Because after this update, calling AI models and generating intelligent agents in mini-programs have become very convenient. Moreover, mini-programs have integrated AI from API to development tools, with AI assistance throughout the entire development process, not only improving development efficiency but also generating a large amount of code through AI.

Below is an introduction and record of my trial process. These features are all public, most of them have been launched, and the rest are about to be released. Everyone can now follow along to experience AI-generated mini-programs.

II. Cloud Development Assistant: Access Method

My first step was to try the mini-program's "Cloud Development Assistant" (also known as Cloud Development Copilot). Its function is to accelerate mini-program development through AI .

Its full-featured version is currently accessible via the " Tencent Cloud Development Platform " website.

Additionally, there is also a tourist version of the applet, which allows you to experience some of the features. If you only have a phone on hand, you can try the tourist version first.

On your phone, click "Explore Cloud Development from AI" to enter.

For the mobile version, a look is sufficient. Official development still requires the use of the website. The content below this article is all based on the full-featured version of the website.

First, log in to "Cloud Development Platform"Then, a small assistant icon will appear in the lower right corner of the page."

Click it to open "Cloud Development Assistant".

It has a "Full Screen" icon in the upper right corner (see below).

Click to enter the full interface.

III. Cloud Development Assistant: Document Function

The main functions of Cloud Development Assistant are shown in the figure below.

These features can be divided into two major categories: one is document-related features, and the other is code generation.

Let's first look at the document features.

(1) Copilot

This feature is an AI Q&A engine, and any questions about mini programs can be directed to it.

This significantly reduces the need for document searches. For some simple functions, it can generate them, and it can also teach you how to develop mini programs.

(2) AI Image Recognition

This feature generates requirement documents by uploading a screenshot of a page (or a design draft).

I uploaded a screenshot of a lucky draw wheel.

It generated the following requirement document, detailing the interface layout, design details, functional requirements, and other aspects of the page.

Programmers in large companies usually develop based on the product requirement document (PRD), so this feature can simplify the work of product managers, and the requirement document can also be saved as a text record for AI code generation.

The generated requirement document can be passed to the "Cloud Development Assistant" next to generate page code, so it is also an intermediate step for AI to generate mini-programs.

(3) Write requirements experts

This function serves the same purpose as "AI Image Recognition," both generating requirement documents, with the difference being that it takes text descriptions as input.

Since screenshots are not required, it is suitable for scenarios that only have functional requirements and no design drafts, where AI can design the page.

IV. Cloud Development Assistant: Generate Mini Program Frontend Code

Next, let's try letting the "Cloud Development Assistant" generate the front-end code for a mini-program.

Choose the menu on the left"AI Generated Visualization Applications", this feature directly generates an application (Web or mini-program) based on screenshots or text descriptions.

Upload a screenshot of a WeChat page.

It will automatically generate the page code of the screenshot, allowing you to preview the effect (below).

You can see that the generated page retains the original layout, but there are many detailed differences.

At the current stage, it seems unable to achieve 100% restoration, making it more suitable as a code foundation, with manual adjustments for details on top of it.

In addition to uploading screenshots, you can also input text descriptions (or the requirements document from the previous section) to generate an application.

Let it generate a personal mini-program for a programmer, and the result is still quite good.

After previewing the initial effect, you can directly edit the code online on the cloud development platform.

After editing this page, you can repeat the process to add more pages to the mini-program (as shown in the image below).

With multiple pages, you can set transitions between them, making it basically a usable mini-program.

When adjusting the style of a mini-program, the Cloud Development Assistant also provides a thoughtful feature "AI editing component styles", which means automatically modifying the style according to instructions.

The image above shows how to add a gradient background to a page using AI, which makes modifying the style much easier.

You might have noticed that there is also a "AI Generated Components" feature in the left menu bar. This feature is used to generate components for pages and is suitable for adding functionality to existing pages. However, it currently only supports web applications and does not support mini programs, so it is not introduced here.

After completing front-end development, you can directly publish mini programs on the cloud development platform. Of course, you can also copy or download the code and publish it through the WeChat development tool.

5. Cloud Development Assistant: Generating Mini Program Backend Code

In addition to front-end UI code, mini programs also require backend business logic and database read/write operations. The "Cloud Development Assistant" can also generate backend code, mainly using the two functions below.

（1）AI-Generated Cloud Functions

Cloud functions are functions executed on the cloud platform, which can be used to access various backend capabilities.

The "Cloud Development Assistant" can help generate cloud functions. The following image shows an AI-generated cloud function to retrieve the mini program OPENID.

While providing sample code, AI also demonstrates how to write each file (as shown in the image below).

If you find it acceptable, click the "Create Cloud Function" button, and the code will be loaded into a newly opened cloud IDE environment for editing and debugging.

After editing is complete, click the "Deploy" button to deploy the cloud function to the production environment.

(2) AI Data Generation Model

This model is used to generate database data models (i.e., "table structures").

For example, generating a blog data model, including articles, authors, and comments.

Click "View" to display a JSON array representing the data structure.

Click "Confirm Generation" to present the data structure in table form. Once confirmed to be correct, it can be saved.

VI. Integration of AI Large Models

The above covers the "Cloud Development Assistant," which is AI-assisted mini-program development. Below, we introduce another key aspect of AI development: How to create AI-powered mini-programs that give the mini-program itself AI capabilities.

Still within the "Cloud Development Platform," select AI+ from the left-hand menu.

At this point, the page will prompt you to choose between integrating a large model or developing an AI agent (as shown in the image below).

(1) Develop AI Agent (AI Agent)

Here, you can simply think of an "AI agent" as an AI-driven conversational application where the user inputs a request, and the AI provides a response.

Tencent Cloud Development Platform will default to setting the backend large model for the "AI agent" as Tencent's Hybrid Model.

You need to customize the opening line, prompts, and knowledge base (your own training materials).

Then, customize the frontend interface (dialog component).

The basic process is complete: the user inputs their request on the frontend interface based on the opening line prompt, the system receives it, sends it to the backend model, and then displays the response to the user.

Isn't it simple? An AI agent is created like this.

(2) AI Large Model Access

If you choose to integrate a large model yourself, the page will provide integration guidance based on the development type (Web/Mini Program/Cloud Function).

The mini-program API has been adapted for large models. Following the instructions, it can be integrated with just a few lines of code.

Specifically, starting from Mini Program Base Library 3.7.1, new features were added.wx.cloud.extend.AIObject, specifically for AI.

• wx.cloud.extend.AI.createModel(): Used to connect to large models
• wx.cloud.extend.AI.bot: Used to call the AI agent

With this API, there's no need for any SDK or backend server; the system directly handles AI connectivity, managing authentication, encryption, and streaming transmission without user intervention.

Here is an example code, see details belowOfficial Documentation.

7. Summary

That's all I've tried. Overall, I feel that these pre-built components provide significant assistance for mini-program development. If you're developing a mini-program, you must try these features.

The AI capabilities of mini-programs will continue to expand. Tencent aims to integratecloud infrastructure, WeChat mini-programs, and AI large modelsto lower the barrier and improve efficiency for mini-program development.

I heard from Tencent colleagues that there are several development focuses in the next phase.

(1) Use AI to generate complete front-end and back-end mini-programs, further integrating with WeChat development environment.

(2) Enhance AI's code generation capabilities, paired with mini-program templates and low-code editors, to quickly generate mini-programs.

(3) With the help of AI, painless database access and cloud function invocation.

(4) Standardization and unified interface for data interaction among clients, servers, and large models.

Every point mentioned above can address the current pain points in mini-program development. Looking forward to seeing breakthroughs soon.

(End)