小程序开放平台

文档中心
平台概述

最佳实践:如何从零开发一个 AI 调酒的小组件?

更新时间:2025-09-11 16:41:49

需求详情

需求描述

  • 调酒偏好选择
    • 口味(单选):随便、酸、甜、苦、辣
    • 酒精浓度(单选):随便、低、高
    • 心情:点击输入,拉起键盘,最多 50 个字
    • 快捷输入:「开心」「难过」「无感」「满足」,点击后自动填入输入框
  • 偏好填写完成后,「生成酒单」由灰置为可点击态,点击后进入 loading
  • 酒单页
    • 酒名:emoji + name,每款鸡尾酒名称
    • 说明:描述这款酒的意境构成
    • 原材料:调制该酒所需的各类原材料和数量
    • 调酒步骤:具体操作流程
    • 将口味、酒精浓度、心情传入 LLM,并格式化返回输出结果

UI稿

描述

开始之前

请确定本地已经下载 IDE (最低 v3.x.x 版本)或 已安装 云开发 cli 工具:

开发「AI 调酒智能体」

第一步:初始化项目功能,并安装依赖

使用 rcb 命令,新建智能体模板项目

## 在指定的目录,创建 mix-wine-agent 仓库
rcb.js agent new -d ./workbase -p mix-wine-agent

文件写入后,安装项目依赖:

描述

后续可参考使用 @vectorx/xhs-cloud-cli 工具开发智能体进行模板仓库的服务的启动

第二步:使用 IDE 或 vscode 等编辑器,打开项目代码

模板仓库使用 mock 数据,并通过标准 SSE 能力,返回对话数据: 描述

模拟器会自动连接 agent 调试服务,实现自动对话: 描述

第三步:结合 AI Agent 的产品需求,定义智能体角色

# 角色
你是一位专业的 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 智能体 」

  async sendMessage() {
    const agent = this.getAgent();
    if (!agent) return;
 
    // 重置状态
    this.setData({
      thinkingText: "",
      streamText: "",
      isThinkingCollapsed: false,
      thinkingScrollIntoView: "",
      replyScrollIntoView: "",
    });
 
    // 显示加载中
    xhs.showLoading({
      title: "正在调酒中...",
    });
 
    const content = '{"user_taste": "酸", "user_mood": "开心"}';
    console.log("准备调用 Agent AI API,参数:", content);
 
    let thinkingText = "";
    let result = "";
 
    // 使用回调方式发送消息
    const { message, onMessage, onSuccess, onError } = agent.sendMessage({
      msg: content,
      history: [],
    });
 
    onSuccess((result) => {
      console.log("请求成功:", result);
      console.log("API调用成功,返回结果:", result);
      xhs.hideLoading();
 
      // 检查是否需要自动折叠思考卡片
      this.checkAutoCollapse();
    });
 
    // 监听流式消息
    onMessage((chunkStr) => {
      console.log("收到消息块:", chunkStr, "api-message", message);
      xhs.hideLoading();
 
      if (chunkStr === "[DONE]") {
        return;
      }
 
      let chunk = "";
      try {
        chunk = JSON.parse(chunkStr);
      } catch (error) {
        console.error("解析消息块失败:", error);
        return;
      }
 
      // 解析消息块
      if (chunk.choices && chunk.choices[0] && chunk.choices[0].message) {
        const message = chunk.choices[0].message;
 
        // 处理思考内容
        if (message.reasoning_content) {
          thinkingText += message.reasoning_content;
          this.setData({
            thinkingText: thinkingText,
          });
          this.scrollThinkingToBottom();
        }
 
        // 处理回复内容
        if (message.content) {
          result += message.content;
          this.setData({
            streamText: result,
          });
          this.scrollReplyToBottom();
        }
      }
    });
 
    // 监听错误回调
    onError((error) => {
      console.error("请求失败:", error);
      xhs.hideLoading();
      xhs.showToast({
        title: "生成失败,请重试",
        icon: "none",
      });
    });
  },

Agent实例方法以及出入参,可以参考文档:使用 xhs.cloud.AI.agent 在小程序/小组件内访问智能体


描述