This project is a chat application that uses various AI models to chat with users. The application is built with Next.js Pages Router and Tailwind CSS.
Tech Stack: Next.js (Pages Router) + React + TypeScript + Tailwind CSS + Clerk + Jotai + AI + Prisma + MySQL (Client side storage will be added in the future)
Online: https://ai-space.fly.dev
Video: https://www.bilibili.com/video/BV1C2421A7Nb
-
Frontend
- Website UI/UX accomplished with Tailwindcss, such as Home Page, Chat Page, etc
- Composed several UI components, such as Modal, Tabs, Tooltip components, etc
- Integrate clerk for login authentication
- Home page animation
- Dark mode and Light mode
- Mobile support
- I18n Internationalization
- Copy to clipboard
- Markdown converted to html string and code highlighted
- Integrate stackblitz for previewing code
- Speech synthesis and speech recognition
- Images uploaded to Cloudinary and previewed
- Maintain the token consumption of each chat
- Using Jotai for global state management
- SSR to prefetch data, and hydrate the prefetched data on the client side
- Create and save screenshot
- ChatItem list management based on the update time
- ChatItem group management based on the user created groups
-
Backend
- Integrate mysql database and save the chat data to the server
- Create database tables and restful api routes for data persistence
- Count all the tokens spent by a user on this website, and push an alert to the user for every $5 spent.
https://excalidraw.com/#json=vgp-id8HsxPn0Oy0LyNOQ,U6JMCGeAzL8D4MZPq88Kfg
This project aims to build a full stack application, so I decided to save data to the server.
Maybe I will add client side storage in the future.
- OpenAI
- Integrate OpenAI API and add GPT-3.5 GPT-4 GPT-vision models
- Integrate vercel ai sdk for requesting openai api and implement the stream response
- Maintain the messages' array state on my own instead of using vercel ai sdk useChat hook
- Add maxTokens and temperature parameters to openai backend api
- Maintain the max history size parameter for chat context management
- Add my copilots (system message) feature
- Add refresh the latest reply feature
- Add generate chat title feature
- Add generate follow-up questions feature
- Integrate dall-E model for generating images
- Integrate tts-1 and tts-1-hd model for text to speech
- Integrate function calling to build plugin systems
Code is licensed under Apache License 2.0