AI Chatbot

This plugin allows you to create a chatbot for your app. Users can interact with the chatbot to get information about your app.

The chatbot will index your app's content and provide answers to user queries.

Installation

Install the chatbot plugin from your main app:

npx @makerkit/cli plugins install chatbot

Now, install the plugin from your main app by adding the following to your package.json file:

{
  "dependencies": {
    "@kit/chatbot": "workspace:*"
  }
}

And then run pnpm install to install the plugin.

Import the Chatbot component

You can now import the Chatbot component in your app:

import { Chatbot } from '@kit/chatbot';
 
<Chatbot sitename={'Makerkit'} />

Create the API route handler

You can add this anywhere since it's configurable, but my suggestion is to add it to the api/chat directory. Create a new file called route.ts at apps/web/app/api/chat/route.ts:

import { handleChatBotRequest } from '@kit/chatbot/server';
 
export const POST = handleChatBotRequest;

If you use a different path, please set the NEXT_PUBLIC_CHATBOT_API_URL environment variable:

NEXT_PUBLIC_CHATBOT_API_URL=/api/some-other-path

Add the Migration file

Copy the migration file at packages/plugins/chatbot/migrations into your apps migration directory at apps/web/supabase/migrations.

Make sure to reset the database after copying the migration file and make sure to push this to your remote instance.

Configuration

The Chatbot component accepts the following props:

interface ChatBotProps {
    siteName: string;
 
    conversationId?: string;
    defaultPrompts?: string[];
    isOpen?: boolean;
    isDisabled?: boolean;
    settings?: ChatbotSettings;
    storageKey?: string;
 
    onClear?: () => void;
    onMessage?: (message: string) => void;
}

Customizing the Chatbot

You can customize the chatbot by providing a settings object:

type Position = `bottom-left` | `bottom-right`;
 
interface Branding {
    primaryColor: string;
    accentColor: string;
    textColor: string;
}
 
export interface ChatbotSettings {
    title: string;
    position: Position;
    branding: Branding;
}

For example:

<Chatbot
    settings={{
        title: 'Chat with us',
        position: 'bottom-right',
        branding: {
            primaryColor: '#000',
            accentColor: '#000',
            textColor: '#fff',
        },
    }}
/>

Indexing Content

At this time - the Chatbot will crawl your app's content and index it - by reading the sitemap.xml file.

The crawler will infer the sitemap.xml from the website's robots.txt file. Otherwise, you can provide the sitemap.xml URL using the CHATBOT_WEBSITE_SITEMAP_URL environment variable.

CHATBOT_WEBSITE_SITEMAP_URL=https://example.com/sitemap.xml

To index your website's content, the chatbot will read the sitemap.xml file.

To launch the chatbot crawler, run the command:

pnpm --filter chatbot indexer -- --url=<url> --include=<include-paths> --exclude=<excluded-paths>

For example:

pnpm --filter chatbot indexer -- --url=https://example.com --include=/docs,/blog --exclude=/blog/secret

The --url flag is required and should point to the website's root URL. The --include and --exclude flags are optional and should be comma-separated paths.

It's highly recommended to include the --exclude flag to prevent the chatbot from indexing way too many pages or stuff you don't want to be indexed.

Environment Variables

You can customize the chatbot model by providing the following environment variables:

LLM_MODEL_NAME=gpt-3.5-turbo
LLM_BASE_URL=
LLM_API_KEY=

The model needs to be compatible with the OpenAI API.