【学 AI，上 L 站】千问点奶茶是如何实现的？

问题描述：

长文预警，这个是一个手把手，step by step 教程，适合新手
文章太长，已经超过最大 6 万字，因此部分代码用图片展示，部分章节有删减
文章末尾有代码仓库及原文。原文有代码折叠和 diff，排版风味更佳
无广告，纯公益

喝完免费的奶茶，是时候整点干货了。

你有没有好奇过，和 AI 聊天过程中，给他说一句话，商品就发过来了，这是如何实现的？

有小伙伴说，“用 iframe“。显然，iframe 难以实现抽屉弹窗效果。

下面，我将用 5 分钟时间，300 行代码，从 0 开始，教你古法手写实现这个效果，见视频：

机器人页面

首先，我们先用 vite 搭一个机器人聊天页面。pnpm，启动！

控制台：执行

pnpm create vite qwen-free-tea --template react-ts --immediate --no-interactive

package.json 中，加入依赖项 antd、antd-icons、antd-x。
antd 是最常见的 B 端后台牛马，大家很熟了。antd-x 是同体系下，用于 AI 业务的组件。

image804×831 74 KB

React render 函数去掉严格模式。