The ultimate AI Chat Bot
component for Next.js

Next AI Bot is the simplest way to integrate
AI into your Next.js application - completely free.

Get started

Vercel AI SDK
For Next.js
Open Source
Free to Edit

Next AI Bot:

Hello, I'm Next AI Bot's artificial intelligence, I'm here to answer your questions. Feel free to ask anything.

Get started

It's very simple to use Next AI Bot in your application.
Just follow these steps:

Download

First, you'll need to download the source code from GitHub:

Download the code

Copy and paste

Next, copy the ai-bot folder into the ./src/app
folder of your Next.js application.

Run the script

In this step, you only need to run the following script from the root of your application:

sh ./src/app/ai-bot/install.sh

Configure Environment Variables

Edit your .env file and set these variables bellow:

OPENAI_API_KEY
Generate this key by clicking clicking here. Next AI Bot Next AI Bot is configured by default to use the OpenAI API. If you want to use another provider, you can check the Vercel AI Docs.
OPENAI_API_KEY=YOUR_KEY
CRYPTO_JS_KEY
This is a random key that is used to encrypt Next AI Bot's localStorage data. You can input any value.
CRYPTO_JS_KEY=RANDOM_KEY
Don't know which value to set here? Click the button below, and we'll generate a random key for you.
Generate random key

Requirements

Next.js 14 or higher.
Your project should be configured
to use Tailwind CSS.
Your project should be configured
to use Typescript
Your operating system must be able to run shell scripts (.sh).
If you are using Windows, I recommend run your project on WSL.

Config and Docs

You are free to edit everything as you like. All components are built with Tailwind CSS, so you can open the "ai-bot" folder (./src/app/ai-bot) and modify any component.

However, if you don't want to spend time editing individual files, you can simply edit the Next AI Bot configuration file located at: ./src/app/ai-bot/config.ts. Here, you can easily customize colors, sizes, and text.

View AI Bot Config Docs

AI Bot Config Documentation

Property

Type

Required

Description

Config

object

Yes

Main AI Bot configuration.

yourName

string

Yes

Set your name do display on AI Bot first message.

model

LanguageModelV1

Yes

Select the AI Provider. Check all available models
on Vercel AI

questionsLimit

number

Yes

Limit questions by user.

floatButton

object

Yes

Set options for float button.

show

boolean

Yes

Show or hide float button.

showAfterScroll

number

Will show the floating button only after the user scrolls the number of pixels set here. This will only works if the show option is true.

colors

object

Yes

Set color for your AI Bot component.

dark

object

Yes

Theme

next-ai-bot-color-01

string

Yes

Used as submit form button background, float button as gradient background color, chat message AI avatar as gradient background color.

next-ai-bot-color-02

string

Yes

Used as input text background and float button AI label as background

next-ai-bot-color-03

string

Yes

Used as chat background w/ 60% opacity and suggestions box as background w/ 100% opacity.

next-ai-bot-color-04

string

Yes

Used as input text message color, input text support label, float button text, float button icon color, suggestions title, suggestions nav arrows and suggestions button text color, close button color, chat messages text color, AI avatar icon color

next-ai-bot-color-05

string

Yes

Used as color icon on submit button, submit button as background color when mouse over, suggestion buttons as text hover color, user avatar icon color

next-ai-bot-color-06

string

Yes

Used on close button icon color when mouse over, AI avatar as gradient background color, float button as gradient background color.

next-ai-bot-color-07

string

Yes

Used as input text error message color, AI avatar as gradient background color, float button as gradient background color.

width

object

Yes

Set chat width.

next-ai-bot-init

string

Yes

Set default width.

next-ai-bot-sm

string

Set width for sm breakpoint.

next-ai-bot-md

string

Set width for md breakpoint.

next-ai-bot-lg

string

Set width for lg breakpoint.

next-ai-bot-xl

string

Set width for xl breakpoint.

next-ai-bot-2xl

string

Yes

Set width for 2xl breakpoint.

height

object

Yes

Set chat height.

next-ai-bot-init

string

Yes

Set default height.

next-ai-bot-sm

string

Set height for sm breakpoint.

next-ai-bot-md

string

Set height for md breakpoint.

next-ai-bot-lg

string

Set height for lg breakpoint.

next-ai-bot-xl

string

Set height for xl breakpoint.

next-ai-bot-2xl

string

Yes

Set height for 2xl breakpoint.

top

object

Set chat top position.

next-ai-bot-top-init

string

Yes

Set default top position.

next-ai-bot-top-sm

string

Set top position for sm breakpoint.

next-ai-bot-top-md

string

Set top position for md breakpoint.

next-ai-bot-top-lg

string

Set top position for lg breakpoint.

next-ai-bot-top-xl

string

Set top position for xl breakpoint.

next-ai-bot-top-2xl

string

Yes

Set top position for 2xl breakpoint.

left

object

Set chat left position.

next-ai-bot-left-init

string

Yes

Set default left position.

next-ai-bot-left-sm

string

Set left position for sm breakpoint.

next-ai-bot-left-md

string

Set left position for md breakpoint.

next-ai-bot-left-lg

string

Set left position for lg breakpoint.

next-ai-bot-left-xl

string

Set left position for xl breakpoint.

next-ai-bot-left-2xl

string

Yes

Set left position for 2xl breakpoint.

bottom

object

Set chat bottom position.

next-ai-bot-bottom-init

string

Yes

Set default bottom position.

next-ai-bot-bottom-sm

string

Set bottom position for sm breakpoint.

next-ai-bot-bottom-md

string

Set bottom position for md breakpoint.

next-ai-bot-bottom-lg

string

Set bottom position for lg breakpoint.

next-ai-bot-bottom-xl

string

Set bottom position for xl breakpoint.

next-ai-bot-bottom-2xl

string

Yes

Set bottom position for 2xl breakpoint.

right

object

Set chat right position.

next-ai-bot-right-init

string

Yes

Set default right position.

next-ai-bot-right-sm

string

Set right position for sm breakpoint.

next-ai-bot-right-md

string

Set right position for md breakpoint.

next-ai-bot-right-lg

string

Set right position for lg breakpoint.

next-ai-bot-right-xl

string

Set right position for xl breakpoint.

next-ai-bot-right-2xl

string

Yes

Set right position for 2xl breakpoint.

Messages

object

Yes

Default messages for chat component.

chat

object

Yes

welcomeMessage

string

Yes

First AI Robot message when user opens the chat.

askYourQuestion

string

Yes

Input text placeholder.

inputSupportLabel

() => string

Yes

Input text support message.

inputSupportLabelError

string

Yes

Input text error message.

messages

object

Yes

Texts for chat messages.

user

string

Yes

How user is asked by on chat messages.

string

Yes

How AI is asked by on chat messages.

suggestions

object

Suggestions texts.

title

string

Title on suggestions container.

questions

string[]

Default questions on suggestions container.

aiButton

object

Yes

AI float button texts.

label

string

Yes

Text label showed under AI float button.

Methods

setQuestion

Use this to send any question to the Next AI Bot.
See the example below:

1import { setQuestion } from '@next-ai-bot'
2
3<button onClick={() => setQuestion('What is AI?')} />

setStatus

Change the status of the Next AI Bot modal. It accepts the following values: opened | closed.
See the example bellow:

1import { setStatus } from '@next-ai-bot'
2
3<button onClick={() => setStatus('opened')} />

updateLimit

This function is used for internal control. It is called to update the question limit when the Next AI Bot provides an answer to the user.

1import { updateLimit } from '@next-ai-bot'
2
3<button onClick={() => updateLimit()} />

currentLimit

Returns the current question limit.

1import { currentLimit } from '@next-ai-bot'
2
3<span>{currentLimit}</span> //return a number

data

When a user sends a message to the Next AI Bot, it returns an object containing the question and the modal status.

1import { data } from '@next-ai-bot'
2
3<span>{data.question}</span>
4<span>{data.status}</span> //return 'opened' | 'closed'

Usage

By default, running the install script will wrap your entire application with a context that provides a floating button to call the Next AI Bot. However, if you want to use the Next AI Botanywhere in your application, you can import just the chat bot component. See the example below:

1import AIBot from '@next-ai-bot/components/chat'
2
3<AiBot />

Why not a package?

No! Next AI Bot is not available on npm, bun, or any other package manager!

You might be wondering why. Let me explain.

How many times have you installed a library or component through a package manager, only to find that you needed to modify something later?

If this has happened to you, you're aware of the challenges and potential issues. When I started developing Next AI Bot, the goal was to give users the flexibility to edit anything they want while still providing an easy-to-install and use solution. That’s why it’s not available on any package manager.

Support this project

Did you like Next AI Bot?
I've worked hard on this project and you can help me with any value.

PIX

If you are brazilian, you can give me PIX.

Buy me a coffee

Or you can buy me a coffee.

Buy me a coffee☕

The ultimate AI Chat Botcomponent for Next.js

Vercel AI SDK

For Next.js

Open Source

Free to Edit

Get started

Download

Copy and paste

Run the script

Configure Environment Variables

OPENAI_API_KEY

CRYPTO_JS_KEY

Requirements

Config and Docs

AI Bot Config Documentation

Methods

setQuestion

setStatus

updateLimit

currentLimit

data

Usage

Why not a package?

Support this project

PIX

Buy me a coffee

The ultimate AI Chat Bot
component for Next.js