基本信息

来源摘要/节选

公开展示已截断至最多 800 个字符；请访问原始来源查看完整上下文。

大家好，我是印刻君。平时逛淘宝的时候，不知道大家有没有体验过平台的 AI 搜索功能。它能结合你的需求，做相对精准的商品推荐。 今天我想和大家分享一个 入门级别的 Demo ，用 Next.js 简单实现类似的推荐助手，内容偏基础。 我们最终实现的 Demo 视频如下，它主要就 3 项基础功能： 基础的 AI 聊天对话，支持流式消息回复； 简易的水果价格查询，支持价格升序、降序查询； 对话过程中嵌入商品卡片，引导用户购买。 视频链接： mp.weixin.qq.com/s/pousaUIg7… 一、先搭建基础的聊天机器人 在实现推荐功能之前，我们先搭建一个基础的 AI 聊天机器人。本次 Demo 以接入 DeepSeek 大模型为例，整体可以分为 4 个关键步骤： 1.1 设计聊天界面 一个聊天界面包括两大核心部分， **消息展示区：**是用户消息和 AI 消息的列表，常规布局是 AI 消息靠左展示，用户消息靠右展示； 下方的输入框 ：包括文本输入框和发送按钮，一直固定在页面底部。 UI 布局很常规，我们不详细展开介绍，重点分析一个 智能滚动 交互——当消息增多时，消息展示区应该会自动滚动到底部，确保用户能第一时间查看到最新的回复。 要实现这个效果，我们可以在聊天消息列表的底部放一个元素，借助 useRef 绑定它，并配合 useEffect 监听消息。当消息变化时，通过 scrollIntoView 方法，触发自动滚动。…

来源说明

当前只保存了公开页面节选，不代表原文全文。请以原始来源为准。

本页只呈现已做哈希绑定的来源证据，不包含基于旧正文或缺失原文的扩展推断。