https://github.com/phlearning/nextjs-chatbot
A modern, responsive AI chatbot built with Next.js, featuring real-time responses and conversation history management.
https://github.com/phlearning/nextjs-chatbot
chatbot gemini nextjs
Last synced: about 2 months ago
JSON representation
A modern, responsive AI chatbot built with Next.js, featuring real-time responses and conversation history management.
- Host: GitHub
- URL: https://github.com/phlearning/nextjs-chatbot
- Owner: phlearning
- Created: 2025-03-14T11:36:01.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2025-03-14T12:16:22.000Z (over 1 year ago)
- Last Synced: 2025-07-24T14:03:08.128Z (12 months ago)
- Topics: chatbot, gemini, nextjs
- Language: TypeScript
- Homepage: https://nextjs-chatbot-phi-three.vercel.app/
- Size: 3.96 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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:
```bash
git clone https://github.com/phlearning/nextjs-chatbot.git
cd nextjs-chatbot
```
2. Install dependencies:
```bash
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):
```env
GEMINI_API_KEY=your_gemini_api_key_here
```
### Running the Application
To start the development server, run:
```bash
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:
```bash
npm run build
# or
yarn build
```
This will create an optimized production build in the `.next` directory.
To start the production server, run:
```bash
npm start
# or
yarn start
```
Make sure to set the necessary environment variables in your hosting environment.