微信官方开源 AI Demo：小程序 SKILL 智能点单完整示例

微信官方开源了小程序 AI Demo 项目 ai-mode-demo，演示如何将小程序业务封装为 SKILL，实现 WeStoreCafe 智能点单场景。项目已获得 123 stars，使用 MIT 协议开源。

项目简介

wechat-miniprogram/ai-mode-demo 是微信小程序团队的官方 AI 示例项目，展示了微信 AI 模式下的 SKILL 封装方式。通过这个 Demo，开发者可以直观理解如何将现有小程序业务接入微信 AI 生态。

GitHub: https://github.com/wechat-miniprogram/ai-mode-demo
协议: MIT
Stars: 123
语言: JavaScript

核心功能

饮品推荐与搜索 — AI 对话式饮品发现
饮品详情查看 — 展示饮品卡片，含规格信息
规格选择 — 温度、糖度、杯型、加料
收货地址选择 — 调用系统地址选择器
订单确认与支付 — 完整下单流程
门店实时状态查询 — 实时动态组件示例

项目结构

text

├── app.js / app.json / app.wxss    # 小程序全局配置
├── pages/                           # 主包页面
│   └── home/                        # 首页
├── skills/                          # SKILL 独立分包
│   └── drink-skill/                 # WeStoreCafe 点单场景 SKILL
│       ├── SKILL.md                 # SKILL 业务说明
│       ├── mcp.json                 # 原子接口声明
│       ├── index.js                 # 原子接口注册
│       ├── apis/                    # 原子接口实现
│       └── components/              # 原子组件
├── packageDetail/                   # 半屏页面分包
│   └── pages/
│       ├── more-drinks              # 全部饮品浏览
│       ├── sku-picker               # 规格选择
│       └── address-edit             # 地址编辑（降级方案）
└── page-meta.json                   # 页面元数据（文字链）

业务流程

整个点单流程完全由 AI 对话驱动：

用户输入意图 → AI 推荐/搜索饮品 → 展示饮品卡片
用户点击选择 → 展示详情卡片
用户点击「直接下单」→ 生成订单确认卡片
用户补充地址（wx.chooseAddress）
用户点击「确认下单」→ 支付 → 完成

技术要点

SKILL 分包架构

项目将 AI SKILL 拆分为独立分包（skills/drink-skill/），这意味着 SKILL 代码与主包页面隔离，按需加载，不影响主包体积。

原子接口声明（mcp.json）

SKILL 通过 mcp.json 声明原子接口，AI Agent 根据这些声明决定调用哪些能力。这是微信 AI 模式的核心机制——开发者只需声明"我能做什么"，AI 框架负责决定"何时调用"。

半屏页面交互

规格选择、地址编辑等使用微信半屏页面方案（packageDetail/ 分包），提供原生级的交互体验。

如何体验

使用微信开发者工具导入项目
填写已申请 AI 开发模式内测权限的 AppID
编译运行，通过 AI 对话界面体验点单场景

⚠️ 需要注意的是，这个 Demo 需要微信 AI 开发模式的内测权限才能运行。6 月 8 日微信开放平台已发布《关于开发者接入微信 AI 生态的指引》，开发者可以申请接入。

项目链接

GitHub 仓库：https://github.com/wechat-miniprogram/ai-mode-demo