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吧,感谢!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值