按理说，

至于简介。这篇文章以智能导购助手场景为例，带大家实操生成式UI带来的全新交互方式。说起来，欢迎大家体验~ 可以下载示例工程源码，根据指导文档完成智能导购助手的开发~

• 至于demo工程，示例项目源码
• 从集成前分支来看，raw-e-commerce
• 再看集成后分支，main

OpenTiny 官网信息已隐藏 GenUI SDK 代码仓库信息已隐藏

. 集成目标

在电商前端中加入一个「AI 导购助手」，能力包含：

• 式 UI 内容
• 通过 MCP 工具实时搜索商品
• 渲染自定义商品卡片组件
• 支持 AI 触发交互动作：加购、跳转商品详情、跳转购物车

. 前置准备

环境要求

• Node.js +
• pnpm +

安装项目依赖

在仓库根目录执行：

pnpm install

启动 GenUI 后端服务

1. 进入 server 目录。复制环境变量文件：

cd server
cp .env.example .env

2. 编辑 server/.env至少配置：

• API_KEY: 你的模型服务 Key
• BASE_URL: 模型服务地址
• PORT: 服务端口

3. 回到仓库根目录开启服务：

pnpm dev:server

运行成功后会看到控制台输出类似：

大模型对话接口为 http://localhost:/chat/completions。

至此，后台服务就准备完成了下面来进行前端的改造。

. 前端安装 GenUI 相关依赖

在 packages/e-commerce 中需要这些依赖：

• @opentiny/genui-sdk-vue
• @modelcontextprotocol/sdk
• Zod @openai/openai

至于p>可执行，

pre> pn pm -F e- commerce add @ op en tiny / gen ui - sd k- vue @ mo del con tex tpr ot oc ol / sd k open ai zo d

code> pre>

h2> . 集 成 Gen ui Chat ： 生 成 式 UI 初体 验 h

p>先做最小可体验版本：只要能看到聊天框、发送消息后能接受到大模型返回就算成功。

h3>新建 AI 对话助手

p>创建 src / components / AIA ssistantDrawer.vue ,代码如下：

pre> code> pre> p>添加完成后还需要在 App.vue 中引入并使用。p>引入使用 AIAssistantDrawer pre> import AIAssistantDrawer from './components/AIAssistantDrawer.vue' import { ref } from 'vue' const assistantOpen = ref code> pre> p>加入悬浮球，用于控制助手的隐藏显示。pre> AI 导购助手 ">{{ totalCount }}}&nbs;p件待结算&nbs; p，&nbs;p，;&nbs;p，assistantOpen """ v-model=" assistantOpen """ />

 code>

p>给悬浮球配置一下样式 pre> .assistant-fab { position: fixed;说起来，right :18px;话说回来，bottom :20px;z-index :9999;老实说，border:none;border-radius :999px;老实说，background :linear-gradient;color:#fff，按理说，min-height :52px;padding :8px14px8px10px;display:inline-flex;align-items:center;gap :10px，box-shadow :0 10px24px rgba;cursor:pointer;} .assistant-fab__dot{ width :34px;height :34px;border-radius :50%;display:grid;place-items:center;font-size :12px;background rgba;} .assistant-fab__text{display:grid;text-align:left;gap :1px，font-size :13px;} .assistant-fab__text small{font-size :11px;opacity:.7，} code>