最佳实践：如何从零开发一个 AI 调酒的小组件？
更新时间：2025-08-04 17:00:57
需求详情
需求描述
- 调酒偏好选择
- 口味（单选）：随便、酸、甜、苦、辣
- 酒精浓度（单选）：随便、低、高
- 心情：点击输入，拉起键盘，最多 50 个字
- 快捷输入：「开心」「难过」「无感」「满足」，点击后自动填入输入框
- 偏好填写完成后，「生成酒单」由灰置为可点击态，点击后进入 loading
- 酒单页
- 酒名：emoji + name，每款鸡尾酒名称
- 说明：描述这款酒的意境构成
- 原材料：调制该酒所需的各类原材料和数量
- 调酒步骤：具体操作流程
- 将口味、酒精浓度、心情传入 LLM，并格式化返回输出结果
UI稿
开始之前
请确定本地已经下载 IDE （最低 v3.x.x 版本）或 已安装 云开发 cli 工具：
开发「AI 调酒智能体」
第一步：初始化项目功能，并安装依赖
使用 rcb 命令，新建智能体模板项目
ts
## 在指定的目录，创建 mix-wine-agent 仓库 rcb.js agent new -d ./workbase -p mix-wine-agent
文件写入后，安装项目依赖：
后续可参考使用 @vectorx/xhs-cloud-cli 工具开发智能体进行模板仓库的服务的启动
第二步：使用 IDE 或 vscode 等编辑器，打开项目代码
模板仓库使用 mock 数据，并通过标准 SSE 能力，返回对话数据：
模拟器会自动连接 agent 调试服务，实现自动对话：
第三步：结合 AI Agent 的产品需求，定义智能体角色
md
# 角色
你是一位专业的 AI 调酒大师，对各类酒品和调酒技巧有着深入的了解。根据用户提供的已有酒品以及口味偏好，你能够精心生成一份详细的酒单。
## 技能
### 技能 1: 生成酒单
1. 当用户输入已有酒品和口味偏好时，仔细分析这些信息。
2. 根据已有酒品和口味偏好，精心挑选合适的鸡尾酒。
3. 生成一份酒单即可，不允许生成多份，以 JSON 格式呈现，包含以下内容：
- 酒名：每款鸡尾酒的名称。
- 酒对应的 emoji：请选择一个 emoji 描述这款酒
- 酒的意境说明：用生动的语言描述这款酒所营造出的独特意境。
- 所需要调酒的类型和数量：详细列出调制该款酒所需的各类酒品以及准确数量。
- 调酒步骤：清晰地阐述调制这款酒的具体操作流程。
### 示例回复
{
"name": "莫吉托",
"emoji":"🍷"
"description": "仿佛置身于古巴的热带海滩，感受着海风的轻抚，清爽与活力四溢。",
"detail": "白朗姆酒 60ml、青柠汁 30ml、薄荷叶 6 - 8 片、糖浆 15ml、苏打水适量",
"step": "在长饮杯中放入薄荷叶和糖浆，用捣棒轻压出香气；加入冰块至八分满，倒入白朗姆酒和青柠汁；搅拌均匀后，缓缓倒入苏打水至满杯。"
}
## 限制
- 仅围绕调酒相关内容进行回复，拒绝回答与调酒无关的话题。
- 输出内容必须严格以 JSON 格式呈现，确保结构准确无误。
- 生成的酒单应切实基于用户提供的已有酒品和口味偏好。
关联提示词到到 agent 内：
调用 Agent 基座，创建模型，并完成对话:
使用模拟器结合需求，输入约定参数参数：{ user_mood: '开心'， user_taste: '随便'}：
第四步：结合 IDE 创建小组件代码
📢：推荐使用 ai developer agent 辅助代码生成，快速完成界面化开发，以下为交互式对自动流程自动生成： 关于 ai developer agent 更多使用，可参考：https://miniapp.xiaohongshu.com/doc/DC043078#anchorId-step1
第五步：在小程序逻辑层内，接入「开放平台 AI 智能体 」
ts
...
const messageToAgent = {
user_taste: selectedFlavor,
user_mood: selectedMood
}
// 与 agent 对话
xhs.cloud.AI.agent.sendMessage({
agentId: '{{123213}}',
msg: JSON.stringify(messageToAgent)
"
}).then((response) => {
let result = {}
try {
const a = response.data.choices[0].message.content;
result = JSON.parse(a);
} catch (error) {
console.error('解析失败，错误详情:', error);
}