NextJS Chat OpenAI

Requirements

• Node.js 14+ and npm

Getting started

Run the following command on your local environment:

git clone https://github.com/hadi-16/nextjs-chat-openai.git your-project-name
cd your-project-name
npm install

How to run app

1. Get api key from OpenAI https://beta.openai.com.
2. Edit env.example to .env
3. Enter api key to .env
4. Run the development server :

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the app.

structure folder app

├── components                      # Components folder
├── pages                           # Next JS Pages
├── public                          # Public assets folder
├── store                           # Store folder
├── styles                          # Next JS Style
├── README.md                       # README file
├── tailwind.config.js              # Tailwind CSS configuration
├── .env                            # Next JS environment variables

Features

• ⚡ Next.js for Fullstack Framework Javascript
• 🤖 Integrate Chatbot API with OpenAI
• 💎 Integrate Styling with Tailwind CSS
• ⚙️ State Management with Zustand
• 🔦 Animation Chats with AutoAnimate

Demo app

Open https://chat.hadi.pw the url in your browser for the demo application.

Screenshoot app

Screenshot Chat	Screenshot Chats