Next.js+LLM集成Zustand的状态管理！前端别再只会写外卖平台和后台管理系统了！

真的不想只会写后台管理系统做项目的人做朋友辣…

秋招尾声如何惊艳面试官拿到秋招offer，除了实习经历外，项目绝对是面试的加分点

市面上的教程，在B站也刷了特别多的，全是教你怎么做后台管理系统，外卖平台，医疗平台

这样面试你和别人都差不多，做着大差不差的项目，面试官也觉得审美疲劳了

在AI盛行，各大行业内卷的年代，面试官往往就会喜欢与时俱进的人，要求越来越高

如果你能做出一个大模型+前端的网站，不说过分亮眼，至少面试官看你简历的时候能多停留一会。

最典型的网站就是 AI+前端 的 web端的 chatgpt

本项目集成了AI大模型，为仿chatgpt的流式输出网站，引入了最新的技术栈 Next.js+Zustand状态管理和+Frame Motion过渡动画

项目实现要点：

• 1.流式动态输出
• 2.数据库保留上下文会话内容，持久化储存
• 3.即时聊天，AI保存聊天记录
• 4.输入打断暂停
• 5.支持Markdown输出，复制代码
• 6.支持配置token，无缝切入模型
  

技术栈

• Next.js 14
• React
• TypeScript
• Ant Design
• Framer Motion
• Highlight.js
• Zustand
  

功能特点

• 🚀 实时消息流
• 💻 代码语法高亮
• 📝 Markdown 支持
• 🎨 遮罩欢迎动画
• 🌐 多会话支持
• 🔒 安全的 API 密钥处理
  

项目全文地址:

https://github.com/GosuQuan/chatbox-next.js

欢迎pr和issue，如果觉得教程有帮助，欢迎点亮star！

如果你觉得本教程有用：献出你发财的小手，给项目点一个star吧，感谢！