|
| 1 | +# @sqliteai/docs-chatbot |
| 2 | + |
| 3 | +Documentation search chatbot powered by SQLite and AI. |
| 4 | + |
| 5 | +## Prerequisites |
| 6 | + |
| 7 | +Before using this chatbot, you need to: |
| 8 | + |
| 9 | +1. **Index your documentation** - Use the [SQLite AI Search Action](https://github.com/sqliteai/sqlite-aisearch-action) to create embeddings from your documentation files |
| 10 | +2. **Create an edge function** - Follow the [setup guide](https://github.com/sqliteai/sqlite-aisearch-action#create-the-search-edge-function) to deploy the search edge function |
| 11 | + |
| 12 | +## Installation |
| 13 | + |
| 14 | +```bash |
| 15 | +npm install @sqliteai/docs-chatbot |
| 16 | +``` |
| 17 | + |
| 18 | +## Usage |
| 19 | + |
| 20 | +### React Application |
| 21 | + |
| 22 | +```tsx |
| 23 | +import { DocsChatbot } from "@sqliteai/docs-chatbot"; |
| 24 | +import "@sqliteai/docs-chatbot/style.css"; |
| 25 | + |
| 26 | +function App() { |
| 27 | + return ( |
| 28 | + <DocsChatbot |
| 29 | + searchUrl="your-edge-function-url" |
| 30 | + apiKey="your-api-key" |
| 31 | + title="Your Docs" |
| 32 | + /> |
| 33 | + ); |
| 34 | +} |
| 35 | +``` |
| 36 | + |
| 37 | +### Vanilla JavaScript / HTML |
| 38 | + |
| 39 | +```html |
| 40 | +<!DOCTYPE html> |
| 41 | +<html lang="en"> |
| 42 | + <head> |
| 43 | + <meta charset="UTF-8" /> |
| 44 | + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| 45 | + </head> |
| 46 | + <body> |
| 47 | + <div id="chatbot-container"></div> |
| 48 | + |
| 49 | + <script src="https://unpkg.com/@sqliteai/docs-chatbot/dist/umd/docs-chatbot.min.js"></script> |
| 50 | + |
| 51 | + <script> |
| 52 | + DocsChatbot.init({ |
| 53 | + containerId: "chatbot-container", |
| 54 | + searchUrl: "your-edge-function-url", |
| 55 | + apiKey: "your-api-key", |
| 56 | + title: "Your Docs", |
| 57 | + }); |
| 58 | + </script> |
| 59 | + </body> |
| 60 | +</html> |
| 61 | +``` |
| 62 | + |
| 63 | +## Props / Configuration |
| 64 | + |
| 65 | +| Property | Type | Required | Description | |
| 66 | +| ------------------------ | -------- | -------- | -------------------------------------------- | |
| 67 | +| `searchUrl` | `string` | Yes | Full URL of your deployed SQLite Cloud edge function (e.g., `https://yourproject.sqlite.cloud/v2/functions/aisearch-docs`) | |
| 68 | +| `apiKey` | `string` | Yes | SQLite Cloud API key with permissions to execute the edge function | |
| 69 | +| `title` | `string` | Yes | Title displayed in the chatbot header | |
| 70 | +| `emptyState` | `object` | No | Customizes the initial empty state of the chatbot | |
| 71 | +| `emptyState.title` | `string` | No | Main heading shown before the first message | |
| 72 | +| `emptyState.description` | `string` | No | Subtext shown below the empty state title | |
0 commit comments