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:

git clone https://github.com/yourusername/chatgpt-assistant-api-ui.git
cd chatgpt-assistant-api-ui

2. Install dependencies:

bun install
# or
npm install

3. Create a .env file in the root directory:

cp .env.example .env

4. Add your OpenAI API key and Assistant ID to the .env file:

OPENAI_API_KEY=your_openai_api_key_here
OPENAI_ASSISTANT_ID=your_assistant_id_here

5. Start the development server:

bun dev
# or
npm run dev

6. Open 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

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

👤 Author

Aemal Sayer

• Website: AemalSayer.com
• GitHub: @aemal
• LinkedIn: Connect Now

🙏 Acknowledgments

• OpenAI for the ChatGPT Assistant API
• The Next.js team for the amazing framework
• All contributors and supporters