勇哥

勇哥开发之路

I build things on web.

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

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

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

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

deepseek

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 这类推理模型的支持:

ai-chat-reasoning

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

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

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

最终实现效果如下:

reasoning

加载中...
此文章数据所有权由区块链加密技术和智能合约保障仅归创作者所有。