A customizable React chatbot component that can be easily integrated into any React application
npm install react-llm-chatbotbash
npm install react-llm-chatbot
or
yarn add react-llm-chatbot
`
Quick Start
`jsx
import React from 'react';
import Chatbot from 'react-llm-chatbot';
const App = () => {
// You need to obtain this token from your backend service
const token = "your-api-access-token";
return (
token={token}
theme="light"
onError={(error) => console.error('Chatbot error:', error)}
/>
);
};
export default App;
`
Configuration Options
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| apiBaseURL | string | - | Base URL for the chatbot API |
| token | string | - | Required Authentication token for API access |
| theme | string | 'light' | Theme ('light' or 'dark') |
| position | string | 'bottom-right' | Position of the chatbot ('bottom-right', 'bottom-left', 'top-right', 'top-left') |
| width | number/string | 350 | Width of the chat window |
| height | number/string | 500 | Height of the chat window |
| title | string | 'Chat Assistant' | Title shown in the chat header |
| placeholder | string | 'Type a message...' | Placeholder for the input field |
| showHeader | boolean | true | Whether to show the chat header |
| showFooter | boolean | true | Whether to show the chat footer |
| customStyles | object | {} | Custom CSS variables to override default styles |
| onError | function | () => {} | Callback when an error occurs |
API Integration
This chatbot component is designed to work with a backend API that provides the following endpoints:
$3
- Method: POST
- Description: Sends a message to the chatbot
- Headers: Authorization: Bearer
- Request Body:
`json
{
"message": "user_message"
}
`
- Response:
`json
{
"status": "success",
"response": "chatbot_response"
}
`
$3
- Method: GET
- Description: Tests the API connection
- Response:
`json
{
"status": "ok",
"message": "API is working!",
"active_tokens": [number_of_active_tokens]
}
`
Advanced Usage
$3
For more control, you can use the ChatbotProvider to manage the chatbot state in your application:
`jsx
import React from 'react';
import { ChatbotProvider } from 'react-llm-chatbot';
const App = () => {
return (
token="your-api-token"
>
{/ Your components can now use the useChatbot hook /}
);
};
`
$3
`jsx
import React from 'react';
import { useChatbot } from 'react-llm-chatbot';
const YourCustomChat = () => {
const {
messages,
sendMessage,
isLoading,
clearMessages
} = useChatbot();
// Custom chat UI implementation
return (
{/ Your custom UI /}
);
};
``