A customizable React Chatbot Widget SDK, supporting normal REST API and Streaming responses.
npm install sdk-chatbotA customizable React Chatbot Widget SDK, supporting normal REST API and Streaming responses.
- 🎨 Customizable Design: Primary color, bot avatar, name, description, and more.
- 🚀 Easy Integration: Works with Vite, Next.js, and other React frameworks.
- 📡 Streaming Support: Real-time streaming response support (Server-Sent Events).
- 📁 File Upload: Built-in support for file attachments (images, PDFs).
- 💾 Persistence: Auto-saves chat history to localStorage.
- 📍 Flexible Positioning: Bottom-right, bottom-left, top-right, etc.
``bash`
npm install sdk-chatbotor
yarn add sdk-chatbotor
pnpm add sdk-chatbot
To build the package for production/publishing:
1. Install dependencies:
`bash`
npm install
`
2. Run the build command:
bash`
npm run build
dist
This will generate the folder containing:index.js
* (CommonJS)index.mjs
* (ES Module)index.d.ts
* (TypeScript Definitions)index.css
* (Styles)
3. (Optional) Pack for local testing:
`bash`
npm pack
In a standard Vite project, you can use the widget in your main App.tsx.
src/App.tsx
`tsx
import { SmartTaxChat } from 'sdk-chatbot';
import 'sdk-chatbot/dist/index.css'; // Don't forget to import CSS!
function App() {
return (
export default App;
`
Since the chatbot uses React hooks (useState, useEffect, etc.), it must be a Client Component.
#### Option A: Global Widget (in layout.tsx)
To make the chatbot available on every page, create a client wrapper component and import it in your root layout.
components/ChatWrapper.tsx
`tsx
'use client'; // Essential for Next.js App Router
import { SmartTaxChat } from 'sdk-chatbot';
import 'sdk-chatbot/dist/index.css';
export default function ChatWrapper() {
return (
primaryColor="#000000"
endpoint="/api/chat" // Example internal API route
useStreaming={true}
/>
);
}
`
app/layout.tsx
`tsx
import ChatWrapper from '@/components/ChatWrapper';
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
#### Option B: Page Specific (in
page.tsx)If you want the chatbot only on a specific page.
app/dashboard/page.tsx`tsx
'use client';import { SmartTaxChat } from 'sdk-chatbot';
import 'sdk-chatbot/dist/index.css';
export default function Dashboard() {
return (
Dashboard
botName="Dashboard Helper"
welcomeMessage="Need help with the dashboard?"
/>
);
}
`Configuration (Props)
| Prop | Type | Default | Description |
|------|------|---------|-------------|
|
botName | string | 'Support Bot' | Name displayed in the header. |
| botDescription | string | 'Online' | Subtitle under the bot name. |
| primaryColor | string | '#2563EB' | Main theme color (header, user bubbles, button). |
| welcomeMessage | string | 'สวัสดีครับ...' | First message sent by the bot. |
| endpoint | string | - | API URL for chat requests. |
| apiKey | string | - | Authorization key for API calls. |
| useStreaming | boolean | false | Enable streaming responses (requires compatible endpoint). |
| allowFileUpload| boolean | false | Enable file upload button. |
| chatbotId | string | - | ID to identify the specific chatbot instance (if needed). |
| persistenceKey | string | 'chat_widget_history' | Key for localStorage history. |Development
1. Clone the repository.
2. Install dependencies:
npm install
3. Start development with watch mode:
`bash
npm run dev
`
4. In another terminal, run the example app:
`bash
npm run example
``