用 AI Agent 让购物更便捷：LumiGlow 电商网站实践

最近在学习agent相关的落地，思考来源："如何通过自然语言帮我们在传统电商网站下单？"，基于这个问题延展出了如下的落地设计思路：

传统电商靠「找分类 → 搜关键词 → 点详情 → 加购 → 结账」一步步完成购买。LumiGlow 在此基础上接入 AI Agent，让用户用一句话就能查商品、加购物车、看订单------购物，本该这么轻松。

---

效果图预览

首页

个人中心（订单页）

Agent（微光助手）交互页

为什么需要 Agent？

电商商品不多时，浏览还算轻松；一旦 SKU 增多、分类变复杂，用户的操作成本就会快速上升：

• 记不清商品名，只能反复搜索、切换分类
• 想快速加购，却要在列表和详情页之间来回跳转
• 查订单状态，得先找到账户入口，再翻历史记录

Agent 的价值，在于把「操作界面」变成「对话意图」。 用户不必熟悉网站结构，只需说出需求，Agent 代为调用后端能力、返回结果。

LumiGlow 的 微光助手 正是这一思路的前端落地：右下角常驻的聊天入口，登录后即可用自然语言完成购物流程中的高频动作。

---

一句话购物，怎么实现的？

用户侧：说就行

打开微光助手，你可以直接问：

• 「月光小夜灯还有货吗？」
• 「帮我把扩香石加入购物袋」
• 「我最近的订单到哪了？」

助手会理解意图、调用工具、给出回复。你不需要记住商品 slug，也不需要点进购物车抽屉确认------Agent 处理完，前端自动同步最新状态。

系统侧：Agent + 电商 API 双通道

LumiGlow 前端同时连接两条后端通道：

用户输入
   │
   ▼
ChatAssistant ──► POST /agents-lumi-glow/run  ──► Agent 理解意图、执行工具
   │                                                    │
   │                                                    ▼
   │                                              查商品 / 加购 / 查订单 ...
   │                                                    │
   ▼                                                    ▼
refreshCart() ◄────────────────────────────────── 操作完成
   │
   ▼
CartDrawer / Header 购物车角标即时更新

• Agent 通道 （/agents-lumi-glow）：接收自然语言，多轮推理后执行购物相关动作
• REST 通道 （/lumi-glow）：提供商品、购物车、订单等标准 API，供页面点击操作和 Agent 工具共用

两条通道共享同一套用户身份（Bearer Token）和购物车会话，因此 对话加购与手动加购完全互通，不会出现「Agent 加了但界面没更新」的割裂感。

---

微光助手：前端核心组件

ChatAssistant 是 Agent 能力在前端的唯一入口，嵌入于全局 Layout，任意页面均可唤起。

交互设计

能力	说明
浮动入口	右下角 FAB，不遮挡主内容，随时可用
对话面板	消息气泡、输入框、Enter 发送、Esc 关闭
登录引导	未登录用户可浏览助手，发送消息时引导至登录页
状态同步	Agent 响应后自动 refreshCart()，购物车即时刷新
加载反馈	「思考中...」打字动画，最长等待 120 秒

欢迎语已明确助手能力边界：

你好！我是 LumiGlow 微光助手 ✨ 可以帮你查询商品、加入购物袋、查看订单或协助下单。有什么想了解的吗？

关键代码路径

src/components/ChatAssistant.tsx   # 对话 UI 与发送逻辑
src/api/agent.ts                   # Agent API 封装
vite.config.ts                     # /agents-lumi-glow 开发代理

agent.ts 独立 Axios 实例，自动携带登录 Token：

export async function runAgent(userMessage: string): Promise<AgentRunResponse> {
  const response = await agentHttp.post('/run', { userMessage })
  // 归一化 answer 格式，兼容 string / array 响应
  return { ...payload, answer: normalizeAnswer(payload.answer) }
}

发送成功后，ChatAssistant 将回复追加到消息列表，并触发购物车刷新------这是 Agent 与 UI 联动的关键一步。

---

Agent 加持下的购物路径对比

传统路径（仍然保留）

首页浏览 → 分类筛选 → 商品详情 → 加入购物袋 → 打开抽屉确认 → 结账

适合喜欢「慢慢逛」的用户，视觉陈列和品牌氛围依然是 LumiGlow 的主体验。

Agent 路径（新增）

打开微光助手 → 「帮我把夜灯和蜡烛各加一件」→ 确认购物车 → 结账

适合目标明确、想省步骤的用户。两种路径终点相同，起点更自由。

场景	传统方式	Agent 方式
查库存	搜索 → 进详情页看 stock	「XX 还有货吗？」
加购	列表/详情页点按钮	「帮我把 XX 加入购物袋」
查订单	账户 → 订单列表	「我最近的订单状态？」
凑单包邮	心算差额、手动挑选	「还差多少包邮？推荐一件礼物」

Agent 不是替代浏览，而是 为已知意图提供捷径。

---

安全与身份：Agent 为何要求登录？

Agent 能代用户操作购物车与订单，必须绑定真实身份。因此：

• 未登录用户可打开助手、阅读欢迎语
• 发送消息时提示「请先登录后再使用智能助手」
• 登录页文案强调：「登录后可使用查商品、加购、查订单等功能」

登录成功后，AuthProvider 还会自动合并匿名购物车（mergeCart），确保 Agent 操作的是用户完整的购物上下文。

---

完整站点能力：Agent 的底座

Agent 能「便捷」，是因为底下有一套完整的电商基础设施。LumiGlow Web 前端在此基础上构建：

购物车：匿名与登录无缝切换

场景	机制
匿名浏览	X-Cart-Session 头标识会话，Token 持久化 localStorage
登录后	自动 mergeCart，匿名加购不丢失
Agent 加购后	refreshCart() 同步 UI

结账与账户

/checkout/login → /checkout → /checkout/success
/account/profile · /orders · /addresses

Agent 可引导用户至结账，但支付确认仍走标准表单------关键操作保留在用户可控界面。

多语言：9 种语言全球可达

中文、English、日本語、한국어、العربية（RTL）、فارسی（RTL）、Türkçe、עברית（RTL）、Kurdî。

UI 文案走 i18next；商品名、分类走 API 多语言字段。Agent 回复语言可随用户输入自适应（由后端 Agent 配置决定）。

---

技术架构一览

┌──────────────────────────────────────────────────────────┐
│  Layout：Header · 商品页 · Footer · ChatAssistant ★      │
├──────────────────────────────────────────────────────────┤
│  CartContext ←── refreshCart ←── ChatAssistant           │
│  AuthContext（Token · 登录 · mergeCart）                  │
├──────────────────────────────────────────────────────────┤
│  api/agent.ts ★          api/cart · products · orders ...  │
├──────────────────────────────────────────────────────────┤
│  /agents-lumi-glow ★     /lumi-glow                      │
└──────────────────────────────────────────────────────────┘

技术栈： React 19 · TypeScript · Vite 8 · React Router 7 · i18next · Axios

Agent 相关文件在目录中一目了然：

web/src/
├── components/ChatAssistant.tsx   ★ Agent 对话 UI
├── api/agent.ts                     ★ Agent HTTP 封装
└── api/request.ts                   电商 REST 封装（Token + Session 拦截器）

开发代理（vite.config.ts）：

proxy: {
  '/lumi-glow': { target: 'http://localhost:3000' },
  '/agents-lumi-glow': { target: 'http://localhost:3000' },
}

---

本地体验 Agent

# 1. 启动后端（含 Agent 服务）
cd intellectFlow-project/service && npm run start:dev

# 2. 启动前端
cd web && pnpm install && pnpm run dev

打开 http://localhost:5173 → 登录 → 点击右下角微光助手 → 试试：

帮我把氛围夜灯加入购物袋

观察购物车角标是否即时更新。

可选环境变量（.env）：

VITE_AGENT_API_BASE_URL=/agents-lumi-glow
VITE_API_BASE_URL=/lumi-glow

---

设计思考

Agent 是增强，不是替代

LumiGlow 仍保留精美的 Hero 动效、商品网格、品牌故事------这些是「逛」的体验。Agent 解决的是「买」的效率问题。两者互补，而非互斥。

前端只做「桥」，不做「脑」

意图理解、工具调用、多轮推理都在后端 Agent 完成。前端职责清晰：

1. 采集用户输入
2. 调用 /run 接口
3. 展示回复
4. 同步受影响的 UI 状态（购物车等）

这种分层让 Agent 能力可以独立迭代，前端改动最小。

状态同步是体验的关键

Agent 加购后若购物车不刷新，用户会立刻失去信任。refreshCart() 这一行调用，是对话式 commerce 里最容易被忽略、却最重要的一环。

---

总结

LumiGlow 的核心理念是：借助 AI Agent，让购物更便捷。

• 用户用自然语言代替多次点击
• Agent 与 REST API 共用身份与购物车，操作结果即时可见
• 传统浏览路径完整保留，Agent 为明确意图提供捷径
• 前端轻量接入：一个组件、一个 API 模块、一次购物车刷新

如果你也在做电商或 D2C 品牌，不妨把 Agent 当作「第七个导航入口」------不是放在菜单里，而是放在用户随时够得着的地方。购物的摩擦，往往藏在那些「其实可以更简单」的步骤里。

---

特别说明：网站内使用的图片均来自于网络，如有侵权联系删除，感谢理解～