Skip to main content

Build an AI-Powered Mini Program from Scratch

Scenario​

Create a mini program from scratch that can understand and execute business features through AI — users say "Order a latte" or "Book an appointment for tomorrow afternoon" and the AI handles the rest.

You don't need existing mini program code — just an AppID.

Prerequisites​

  • WeChat DevTools Nightly build installed
  • Mini program AppID obtained (WeChat Official Platform → Development → Development Settings)
  • AI Development Mode enabled in WeChat Official Platform (Basic Features → AI Capabilities → select "Development Mode")
  • Node.js ≥ 18 (check with node -v)
  • npx mp-skills --version outputs a version number

Steps​

Step 1: Create the project​

npx mp-skills new my-ai-app

Expected output:

* 创建项目: my-ai-app
  ok  项目骨架已生成
  ok  git 仓库已初始化

[OK] 项目已创建: my-ai-app
cd my-ai-app

Step 2: Understand the project structure​

├── project.config.json       Mini program project config
├── README.md                 Project documentation
├── .mcp.json                 AI tool configuration
├── cloudfunctions/           Cloud function directory
│   └── getOpenId/            Built-in sample cloud function
└── miniprogram/              Mini program source root
    ├── app.json              Global config (pre-configured for AI mode)
    ├── app.js                App entry
    ├── app.wxss              Global styles
    ├── pages/index/          Sample home page
    └── skills/               SKILL subpackage directory
        ├── greet-skill/      Built-in welcome SKILL (ready to use)
        └── _shared/          Shared utilities

Key configuration in miniprogram/app.json:

{
  "lazyCodeLoading": "requiredComponents",
  "subPackages": [
    { "root": "skills", "name": "skills", "pages": [], "independent": true }
  ],
  "agent": {
    "skills": [
      { "name": "greet", "description": "...", "path": "skills/greet-skill" }
    ]
  }
}

Step 3: Configure AppID​

Edit project.config.json and add appid:

{
  "appid": "wxYourAppID",
  "description": "AI Mini Program — created by mp-skills",
  ...
}

Step 4: Search and install a business SKILL​

Browse available SKILLs:

npx mp-skills find

Install one (using order-skill as an example):

npx mp-skills add TencentCloudBase/awesome-miniprogram-skills -s order-skill

Expected output:

* 安装 Skill: order-skill
   * miniprogram/skills/order-skill/
   * 已记录版本

[OK] 安装完成！

The CLI automatically:

  • Copies SKILL files to miniprogram/skills/order-skill/
  • Updates app.json's agent.skills array
  • Updates project.config.json's packOptions.include
  • Writes skills-lock.json

Step 5: Environment setup​

If the installed SKILL depends on CloudBase services:

npx mp-skills setup

This creates cloud functions and database collections automatically after authorization.

Can be skipped — SKILLs have a preview mode that works with local mock data.

Step 6: Open in DevTools​

# macOS
/Applications/wechatwebdevtools.app/Contents/MacOS/cli open --project /your/path/to/my-ai-app

# Windows
"C:\Program Files (x86)\Tencent\微信web开发者工具\cli.bat" open --project "D:\...\my-ai-app"

In DevTools:

  1. Set base library to 3.16.1 or higher (switch to another version and back to trigger download)
  2. Switch compile mode to "Mini Program AI Compile"
  3. If not visible, re-login and retry

Step 7: Verify​

In "Mini Program AI Compile" mode:

  1. SKILL list shows greet and order
  2. Select order-skill to see its atomic APIs
  3. Click searchRestaurants, enter {"keyword": "Sichuan"}, and execute
  4. Or start a conversation and type "Find something good to eat"

Verification Checklist​

  • DevTools shows "Mini Program AI Compile" mode option
  • SKILL list includes greet and order
  • Atomic APIs can be called and return data
  • Conversation mode responds to trigger phrases

Common Issues​

"Mini Program AI Compile" option not visible

  • Confirm AI Development Mode is enabled
  • Re-login and reopen the project
  • Switch base library to another version and back to 3.16.1

mp-skills setup authorization fails

SKILL install fails with "not found"

  • Run npx mp-skills find first to verify the SKILL name

Reference​