Next-chatbot-kit NPM

next-chatbot-kit

next-chatbot-kit is a starter template for building chatbots using Next.js 15 and Bun.js. This template provides a simple and flexible foundation for creating conversational AI applications with support for integrating third-party services, state management, and scalable chatbot components.

Features

Next.js 15 - Built with the latest features of Next.js.
Bun.js - Uses Bun as the JavaScript runtime for faster builds and executions.
Customizable UI - Easy to modify the chatbot UI according to your design requirements.
State Management - Efficient state management for chatbot responses.
API Integration - Seamlessly integrates with AI models or any custom backend for generating responses.
TypeScript Support - Fully typed with TypeScript to ensure better code quality and IntelliSense.
Responsive Design - Works well on all screen sizes with a mobile-first approach.

Pre-requisite

Install Node.js LTS version and Bun.js

Windows Powershell

powershell -c "irm bun.sh/install.ps1 | iex"

Linux or MacOS

curl -fsSL https://bun.sh/install | bash

Installation

To get started with next-chatbot-kit, follow these steps:

Install deps and make a folder :

npx create-next-chatbot-kit <projects-name>

change your directory:
```
cd <projects-name>
```
Add a .env File

You can create a .env file manually or by running the following command in your project directory:
```
touch .env
```
Next, add the following content to your .env file:
```
GROQ_API_KEY=YOUR_API_KEY_HERE
```

Replace YOUR_API_KEY_HERE with your actual GROQ API key, which you can obtain from the GROQ Console.

Run the development server:
```
bun dev
```
Open your browser and visit http://localhost:3000 to see the chatbot in action.

Usage

You can easily customize the template by editing the following:

Components: Modify the Chatbot component to fit your desired UI and functionality.
API Routes: Customize the backend logic in the pages/api folder to suit your needs, whether it’s an AI-powered bot or a rule-based chatbot.
State Management: The state management is already set up using React context; you can extend it as required for your app.