/chatterbot2

This repo is a small project related to use of OPENAI API keys to create a real time chatbot. Here I used the NEXT.js to build it and VERCEL to deploy it.

Primary LanguageTypeScript

Real-time Chatbot with OpenAI API using Next.js

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.

Features

  • 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

Technologies Used

  • OpenAI API: Powers the chatbot's responses
  • Next.js: Framework for building the web app
  • Vercel: Platform for deployment

Prerequisites

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)

Getting Started

1. Clone the Repository

git clone https://github.com/your-username/your-repo-name.git
cd your-repo-name

2. Install Dependencies

npm install
# or
yarn install

3. Set Up Environment Variables

Create a .env.local file in the root of your project and add your OpenAI API key:

OPENAI_API_KEY=your-openai-api-key

4. Running the Application Locally

npm run dev
# or
yarn dev

This will start the Next.js development server on http://localhost:3000.

5. Deploying on Vercel

  1. Push your code to a GitHub repository.
  2. Go to Vercel and create a new project.
  3. Connect your GitHub repository to Vercel.
  4. In the Vercel dashboard, add your OPENAI_API_KEY as an environment variable.
  5. Deploy the project, and Vercel will automatically build and deploy your Next.js app.

Project Structure

├── 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

Usage

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.

License

This project is open source and available under the MIT License.

Acknowledgements