https://github.com/seizeddev/gpt-wrapper
A minimal GPT-powered chat interface built with Next.js and TypeScript, showcasing OpenAI API integration.
https://github.com/seizeddev/gpt-wrapper
ai api chatbot chatgpt chatgpt-api gpt nextjs openai tailwindcss typescript vercel
Last synced: 4 months ago
JSON representation
A minimal GPT-powered chat interface built with Next.js and TypeScript, showcasing OpenAI API integration.
- Host: GitHub
- URL: https://github.com/seizeddev/gpt-wrapper
- Owner: seizeddev
- License: mit
- Created: 2025-05-19T19:52:24.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-09T17:57:53.000Z (about 1 year ago)
- Last Synced: 2025-06-09T18:46:36.562Z (about 1 year ago)
- Topics: ai, api, chatbot, chatgpt, chatgpt-api, gpt, nextjs, openai, tailwindcss, typescript, vercel
- Language: TypeScript
- Homepage: https://gpt-wrapper-beta.vercel.app
- Size: 157 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# GPT Wrapper 🧠💬
A simple yet powerful example of how to integrate the [OpenAI API](https://platform.openai.com/docs) into a **Next.js + TypeScript** application. This project serves as a lightweight wrapper for building GPT-based chat interfaces with modern web technologies.
## ✨ Features
- 🌐 Built with **Next.js** for server-side rendering
- 🛠️ Fully typed using **TypeScript**
- 🔌 Integrated with **OpenAI Chat API**
- 🛡️ Login & Register functionality using **Supabase Auth**
- 🎨 Styled using **TailwindCSS** and [shadcn/ui](https://ui.shadcn.com/)
- ⚙️ Clean project structure and best practices
- 💬 Minimalistic chat UI to demonstrate GPT integration
## 📂 Project Structure
```bash
├── app/ # Next.js app directory
├── public/ # Static assets
├── src/ # Source files including components and logic
├── components.json # UI component config
├── tsconfig.json # TypeScript config
├── next.config.ts # Next.js configuration
├── package.json # Project metadata and dependencies
└── ...
```
## 🚀 Getting Started
### Prerequisites
- Node.js (v18 or later)
- An OpenAI API key
- A Supabase project with email/password auth enabled
### Installation
```cmd
git clone https://github.com/seizeddev/gpt-wrapper.git
cd gpt-wrapper
npm install
```
### Environment Variables
Create a `.env.local` file in the root directory and add your OpenAI API key:
```env
OPENAI_API_KEY=your-openai-api-key
NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key
```
### Run the Dev Server
```cmd
npm run dev
```
Open [http://localhost:3000](http://localhost:3000) in your browser to view the app.
## 🔐 Auth System
This project includes a **Login/Register page** backed by [Supabase](https://supabase.com/) authentication. Users can sign up, log in, and access the chat interface securely.
## 🧠 How It Works
The app sends messages to the OpenAI API using the Chat Completion endpoint, displays the assistant's reply, and updates the conversation state dynamically using React components.
## 📸 Screenshots
## 📦 Tech Stack
- [Next.js](https://nextjs.org/)
- [TypeScript](https://www.typescriptlang.org/)
- [OpenAI API](https://platform.openai.com/docs/)
- [Supabase](https://supabase.com/)
- [Tailwind CSS](https://tailwindcss.com/)
- [shadcn/ui](https://ui.shadcn.com/)
## 🙌 Acknowledgments
- [OpenAI](https://openai.com/) for the powerful API
- [Supabase](https://supabase.com/) for effortless authentication
- [shadcn/ui](https://ui.shadcn.com/) for modern React components
## 📄 License
MIT License. See `LICENSE` for more information.
> Practice project by [@seizeddev](https://github.com/seizeddev) – Happy Hacking!