前端如何实现 DeepSeek 深度思考效果

DeepSeek 春风吹满地，人人都怕起了个大早赶了个晚集。

各个大小厂纷纷上线满血版 DeepSeek R1，提供在线使用的也很多，除了 DeepSeek 官方，勇哥使用过的还有腾讯元宝、问小白、当贝 AI等，在此就不一一列举了。

大家都知道 DeepSeek R1 是推理模型，不同于其他的 chatbot ，推理模型在回答问题时，会先将模型的推理过程展示给用户，如下图所示：

DeepSeek 的春风还吹到了勇哥的公司，春节一上班，领导就要求接入 DeepSeek。

勇哥在做的 chatbot 项目大模型是基于阿里云百炼，AI 库用的是 Vercel 的 AI SDK，前端 UI 是基于Next.js AI Chatbot。在百炼平台开通 DeepSeek R1 配置应用后即可调用，返回结果多了思维链数据，前端需要增加思维链的展示。勇哥第一反应不是自己实现，而是到 Github 查看 Next.js AI chatbot 是否更新了对思维链展示的支持。

果然， Next.js AI chatbot 不久前增加了对 DeepSeek R1 这类推理模型的支持：

具体文件是：components/message-reasoning.tsx。

更新 AI SDK 到最新版本，同时在原来的内容渲染文件 message.tsx 中添加下面代码，微调下样式即可。

Copy
{message.reasoning && (
<MessageReasoning
isLoading={isLoading}
reasoning={message.reasoning}
/>
)}