Next.js AI Chatbot

A modern, responsive AI chatbot built with Next.js, featuring real-time responses and conversation history management.

Features

• 💬 Real-time AI chat interface
• 📱 Responsive design with collapsible sidebar
• 📝 Chat history management
• 🔄 Loading states and error handling
• 🎨 Sleek UI using Tailwind CSS and Shadcn UI components

Demo

Technologies Used

• Frontend: Next.js, React, TypeScript
• Styling: Tailwind CSS, Shadcn UI
• State Management: Custom hooks with React useState
• Icons: Lucide React

Getting Started

Prerequisites

• Node.js 18 or later
• npm or yarn

Installation

1. Clone the repository:

git clone https://github.com/phlearning/nextjs-chatbot.git
cd nextjs-chatbot

2. Install dependencies:

npm install
# or
yarn install

3. Create a .env file in the project root and add your API key (or modify the .env.example into .env and adjust with your key):

GEMINI_API_KEY=your_gemini_api_key_here

Running the Application

To start the development server, run:

npm run dev
# or
yarn dev

Open your browser and navigate to http://localhost:3000 to see the application in action.

Building for Production

To build the application for production, run:

npm run build
# or
yarn build

This will create an optimized production build in the .next directory.

To start the production server, run:

npm start
# or
yarn start

Make sure to set the necessary environment variables in your hosting environment.