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.