This repository contains a small project that demonstrates how to create a real-time chatbot using the OpenAI API. The project is built with Next.js and deployed on Vercel.
- Real-time communication with the OpenAI API to generate responses
- Built with Next.js for server-side rendering and efficient API routes
- Deployed using Vercel for seamless, scalable deployment
- Simple, clean UI for interacting with the chatbot
- OpenAI API: Powers the chatbot's responses
- Next.js: Framework for building the web app
- Vercel: Platform for deployment
Before you begin, ensure you have the following installed:
- Node.js (v16+)
- npm or yarn
- OpenAI API key (you can sign up for an API key here)
git clone https://github.com/your-username/your-repo-name.git
cd your-repo-name
npm install
# or
yarn install
Create a .env.local
file in the root of your project and add your OpenAI API key:
OPENAI_API_KEY=your-openai-api-key
npm run dev
# or
yarn dev
This will start the Next.js development server on http://localhost:3000.
- Push your code to a GitHub repository.
- Go to Vercel and create a new project.
- Connect your GitHub repository to Vercel.
- In the Vercel dashboard, add your
OPENAI_API_KEY
as an environment variable. - Deploy the project, and Vercel will automatically build and deploy your Next.js app.
├── components
│ └── ChatBox.js # Chatbox component
├── pages
│ ├── api
│ │ └── chatbot.js # API route for OpenAI interaction
│ └── index.js # Main page for the chatbot UI
├── public
├── styles
│ └── Home.module.css # Styles for the project
└── .env.local # Environment variables
Once the project is running, you can start chatting with the bot through the interface. Simply type in your message, and the bot will respond in real time using the OpenAI API.
This project is open source and available under the MIT License.