howardwkim/nextjs-chatgpt-app

💬 Responsive chat application powered by OpenAI's GPT-4, with response streaming, code highlighting, various presets for developers. Using Next.js, React, Joy.

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! 😊

Or click fork & run on Vercel

Features ✨

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

• NEW 04.18 🎉 PWA install on mobile! 📱 looks like a native app (@harlanlewis)

  

• NEW 04.17 🎉 Language Selection Mic Language 🎙️, with auto-detect, and future app language! (@tbodyston)

  

• NEW 04.17 🎉 Text To Speech 🎙️ Settings for ElevenLabs, including Voice Selection and custom voices!

  

  

• NEW 04.16 🎉 Codepen/Replit for code execution 💻 (@harlanlewis)
• NEW 04.14 🎉 SVG Drawing 🖌️

  

• NEW 04.13 🎉 Token usage progress bars, CTRL+M to use the mic, edge runtime fixes for Cloudflare, awesome-agi.md
• NEW 04.11 🎉 AI-titling 🧠✍️
• NEW 04.10 🎉 Multiple chats 📝📝📝
• NEW 04.09 🎉 Microphone improvements 🎙️
• NEW 04.08 🎉 Precise Token counter 📊 extra-useful
• NEW 04.08 🎉 Organization ID for OpenAI users
• NEW 04.07 🎉 Pixel-perfect Markdown 🎨
• NEW 04.04 🎉 Download JSON to export/backup chats 📥
• NEW 04.03 🎉 PDF import 📄🔀🧠 (fredliubojin) <- "ask questions to a PDF!" 🤯
• NEW 04.03 🎉 Tokens utilization 📊 [Initial - just new messages, not full chat]

  

• NEW 04.02 🎉 Markdown rendering 🎨 (nilshulth) [WIP]
• 🎉 NEW 04.01 Typing Avatars

  

• 🎉 NEW 03.31 Publish & share chats to paste.gg 📥

  

• Chat with GPT-4 and 3.5 Turbo 🧠💨
• Private: user-owned API keys 🔑 and localStorage 🛡️
• System presets - including Code, Science, Corporate, and Chat 🎭

  

• Syntax highlighting - for multiple languages 🌈
• Context - Drag and drop files to add them to the prompt 📁

  

• Stop generation 🛑 (fredliubojin)
• Voice input 🎙️ (koganei)
• Real-time streaming of AI responses ⚡
• Switch API hosts to track quality, including Helicone 📈
• Dark mode 🌙 - Wide mode ⛶
• Code execution for TypeScript, JavaScript, and HTML 🖥️
• Add your own feature 🚀
• Send a PR 🙌

Roadmap 🛣️

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

Roadmap	RFC 📝	Status	Description
Editable Purposes 🎭	enricoros#35	💬	In-app customization of 'Purposes', as many forks are created for that reason.
Templates sharing 🌐	enricoros#35	💬	Community repository of Purposes/Systems - Vote with 👍 and usage. Where to store? Bring your own key? Moderate?
Reasoning Systems 🧩	enricoros#36	🤔	ReAct, DEPS, Reflexion - shall we?
Your epic idea		💡	Create RFC ❗

Why this? 💡

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

Integrations 🤝

Integration	Description	Docs
Helicone	LLM Observability Platform	Settings Menu > Advanced > API Host: 'oai.hconeai.com'
Paste.gg	Paste Sharing	Chat Menu > Share via paste.gg

Developing 🚀

Tech Stack 🛠️

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

git clone https://github.com/enricoros/nextjs-chatgpt-app.git
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.

---

Made with 💙