August 11, 2023

A Responsive chat application with ChatGPT and Next.Js

Next.js ChatGPT πŸ€–πŸ’¬

Welcome to nextjs-chatgpt-app! πŸŽ‰πŸš€ Responsive chat application powered by OpenAI's GPT-4, with chat streaming, code highlighting, code execution, development presets, and more. The app is built using Next.js and TypeScript, and it's designed to be easy to use, customize, and extend. We encourage you to contribute and help improve this project! 😊

Official Website

Or click fork & run on Vercel

Deploy with Vercel

Roadmap πŸ›£οΈ

🚨 ** April 2023 - Attention! We look for your input!** 🚨

| Roadmap | RFC πŸ“ | Status | Description | |:---------------------|-----------------------------------------------------------|:------:|:-----------------------------------------------------------------------------------------------------------------| | Editable Purposes 🎭 | | πŸ’¬ | In-app customization of 'Purposes', as many forks are created for that reason. | | Templates sharing 🌐 | | πŸ’¬ | Community repository of Purposes/Systems - Vote with πŸ‘ and usage. Where to store? Bring your own key? Moderate? | | Reasoning Systems 🧩 | | πŸ€” | ReAct, DEPS, Reflexion - shall we? | | Your epic idea | | πŸ’‘ | Create RFC ❗ |

Features ✨

🚨 We added cool new features to the app! (bare-bones was 466a36)

  • [x] NEW 04.14 πŸŽ‰ SVG Drawing πŸ–ŒοΈ

Token Counters

  • [x] NEW 04.13 πŸŽ‰ Token usage progress bars, CTRL+M to use the mic, edge runtime fixes for Cloudflare,
  • [x] NEW 04.11 πŸŽ‰ AI-titling 🧠✍️
  • [x] NEW 04.10 πŸŽ‰ Multiple chats πŸ“πŸ“πŸ“
  • [x] NEW 04.09 πŸŽ‰ Microphone improvements πŸŽ™οΈ
  • [x] NEW 04.08 πŸŽ‰ Precise Token counter πŸ“Š extra-useful
  • [x] NEW 04.08 πŸŽ‰ Organization ID for OpenAI users
  • [x] NEW 04.07 πŸŽ‰ Pixel-perfect Markdown 🎨
  • [x] NEW 04.04 πŸŽ‰ Download JSON to export/backup chats πŸ“₯
  • [x] NEW 04.03 πŸŽ‰ PDF import πŸ“„πŸ”€πŸ§  (fredliubojin) <- "ask questions to a PDF!" 🀯
  • [x] NEW 04.03 πŸŽ‰ Tokens utilization πŸ“Š [Initial - just new messages, not full chat]

Token Counters

  • [x] NEW 04.02 πŸŽ‰ Markdown rendering 🎨 (nilshulth) [WIP]
  • [x] πŸŽ‰ NEW 04.01 Typing Avatars

New Typing Avatars

  • [x] πŸŽ‰ NEW 03.31 Publish & share chats to πŸ“₯

Export chats

  • [x] Chat with GPT-4 and 3.5 Turbo πŸ§ πŸ’¨
  • [x] Private: user-owned API keys πŸ”‘ and localStorage πŸ›‘οΈ
  • [x] System presets - including Code, Science, Corporate, and Chat 🎭

System presets

  • [x] Syntax highlighting - for multiple languages 🌈
  • [x] Context - Drag and drop files to add them to the prompt πŸ“

Drag and drop

  • [x] Stop generation πŸ›‘ (fredliubojin)
  • [x] Voice input πŸŽ™οΈ (koganei)
  • [x] Real-time streaming of AI responses ⚑
  • [x] Switch API hosts to track quality, including Helicone πŸ“ˆ
  • [x] Dark mode πŸŒ™ - Wide mode β›Ά
  • [ ] ~~Code execution for TypeScript, JavaScript, and HTML~~ πŸ–₯️
  • [ ] Add your own feature πŸš€
  • [ ] Send a PR πŸ™Œ

Why this? πŸ’‘

Because the official Chat is slower than the API, and the Playground UI doesn't even highlight code.

Ask away, paste a ton, copy the gems

Integrations 🀝

| Integration | Description | Docs | |:-------------------------------------|:---------------------------|:-------------------------------------------------------| | Helicone | LLM Observability Platform | Settings Menu > Advanced > API Host: '' | | | Paste Sharing | Chat Menu > Share via |

Developing πŸš€

Tech Stack πŸ› οΈ

TypeScript React Next.js

Simply clone the repository, install the dependencies, and run the development server:

git clone
cd nextjs-chatgpt-app
npm install
npm run dev

Now the app should be running on http://localhost:3000.

Contributing πŸ™Œ

The source code is Very Simpleβ„’ πŸ˜€. We'd love to have you contribute to this project! Feel free to fork the repository, make changes, and submit a pull request. If you have any questions or need help, feel free to reach out to us.

This project is licensed under the MIT License.

GitHub stars GitHub forks GitHub issues GitHub pull requests GitHub license Twitter Follow

Made with πŸ’™