https://github.com/aemal/chatgpt-assistant-api-ui
A simple, elegant UI for interacting with ChatGPT Assistant API. Built with Next.js and TypeScript, this project provides a clean interface for chatting with your custom ChatGPT Assistant.
https://github.com/aemal/chatgpt-assistant-api-ui
assistant-api chatgpt rag
Last synced: about 2 months ago
JSON representation
A simple, elegant UI for interacting with ChatGPT Assistant API. Built with Next.js and TypeScript, this project provides a clean interface for chatting with your custom ChatGPT Assistant.
- Host: GitHub
- URL: https://github.com/aemal/chatgpt-assistant-api-ui
- Owner: aemal
- License: mit
- Created: 2025-03-23T11:24:27.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-24T11:03:08.000Z (about 1 year ago)
- Last Synced: 2025-06-08T08:06:40.989Z (about 1 year ago)
- Topics: assistant-api, chatgpt, rag
- Language: TypeScript
- Homepage: https://aemalsayer.com
- Size: 83 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ChatGPT Assistant API UI
A simple, elegant UI for interacting with ChatGPT Assistant API. Built with Next.js and TypeScript, this project provides a clean interface for chatting with your custom ChatGPT Assistant.
## 🚀 Features
- Clean and modern UI design
- Real-time chat interface
- Loading states and animations
- Error handling
- Responsive design
- Easy setup with environment variables
## 🛠️ Tech Stack
- Next.js 15
- TypeScript
- Tailwind CSS
- OpenAI API
- HeroUI Components
- Lucide Icons
## 📋 Prerequisites
- Node.js 18+ or Bun
- OpenAI API Key
- ChatGPT Assistant ID
## 🔧 Installation
1. Clone the repository:
```bash
git clone https://github.com/yourusername/chatgpt-assistant-api-ui.git
cd chatgpt-assistant-api-ui
```
2. Install dependencies:
```bash
bun install
# or
npm install
```
3. Create a `.env` file in the root directory:
```bash
cp .env.example .env
```
4. Add your OpenAI API key and Assistant ID to the `.env` file:
```env
OPENAI_API_KEY=your_openai_api_key_here
OPENAI_ASSISTANT_ID=your_assistant_id_here
```
5. Start the development server:
```bash
bun dev
# or
npm run dev
```
6. Open [http://localhost:3000](http://localhost:3000) in your browser.
## 🎥 Demo
Watch the demo at the 1:54:04 / 2:08:57 of this live vibe coding session where this project was built:
[Watch on YouTube](https://youtu.be/U7K1F55bbs0?t=6844)
## 🤝 Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
## 📝 License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
## 👤 Author
**Aemal Sayer**
- Website: [AemalSayer.com](https://AemalSayer.com)
- GitHub: [@aemal](https://github.com/aemal)
- LinkedIn: [Connect Now](https://linkedin.com/in/aemal)
## 🙏 Acknowledgments
- OpenAI for the ChatGPT Assistant API
- The Next.js team for the amazing framework
- All contributors and supporters