{"id":40958027,"url":"https://github.com/sqliteai/docs-chatbot","last_synced_at":"2026-01-22T05:39:33.845Z","repository":{"id":320587194,"uuid":"1061667006","full_name":"sqliteai/docs-chatbot","owner":"sqliteai","description":"Embeddable AI chatbot for documentation, powered by SQLite Cloud.","archived":false,"fork":false,"pushed_at":"2026-01-02T11:09:35.000Z","size":333,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-01-08T12:36:15.223Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sqliteai.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-09-22T08:19:08.000Z","updated_at":"2026-01-02T11:09:38.000Z","dependencies_parsed_at":"2025-10-24T17:38:33.291Z","dependency_job_id":null,"html_url":"https://github.com/sqliteai/docs-chatbot","commit_stats":null,"previous_names":["sqliteai/docs-chatbot","sqliteai/chatbot"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/sqliteai/docs-chatbot","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sqliteai%2Fdocs-chatbot","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sqliteai%2Fdocs-chatbot/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sqliteai%2Fdocs-chatbot/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sqliteai%2Fdocs-chatbot/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sqliteai","download_url":"https://codeload.github.com/sqliteai/docs-chatbot/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sqliteai%2Fdocs-chatbot/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28656439,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-22T01:17:37.254Z","status":"online","status_checked_at":"2026-01-22T02:00:07.137Z","response_time":144,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-01-22T05:39:33.785Z","updated_at":"2026-01-22T05:39:33.839Z","avatar_url":"https://github.com/sqliteai.png","language":"TypeScript","readme":"# @sqliteai/docs-chatbot\n\n[![Status](https://img.shields.io/badge/status-in%20development-yellow)](https://github.com/sqliteai/docs-chatbot)\n\nEmbeddable AI chatbot for documentation, powered by SQLite Cloud.\n\n## Quick Start\n\n### Prerequisites\n\nBefore using this chatbot, you need to:\n\n1. **Index your documentation** - Use the [SQLite AI Search Action](https://github.com/sqliteai/sqlite-aisearch-action) to create embeddings from your documentation files\n2. **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\n\n### React\n\n```bash\nnpm install @sqliteai/docs-chatbot\n```\n\n```tsx\nimport { DocsChatbot } from \"@sqliteai/docs-chatbot\";\nimport \"@sqliteai/docs-chatbot/style.css\";\n\nfunction App() {\n  return (\n    \u003cDocsChatbot\n      searchUrl=\"https://yourproject.sqlite.cloud/v2/functions/aisearch-docs\"\n      apiKey=\"your-api-key\"\n      title=\"Help Center\"\n    /\u003e\n  );\n}\n```\n\n### Vanilla JavaScript\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"UTF-8\" /\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" /\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cscript src=\"https://unpkg.com/@sqliteai/docs-chatbot/dist/umd/docs-chatbot.min.js\"\u003e\u003c/script\u003e\n\n    \u003cdocs-chatbot\n      search-url=\"https://yourproject.sqlite.cloud/v2/functions/aisearch-docs\"\n      api-key=\"your-api-key\"\n      title=\"Help Center\"\n    \u003e\n    \u003c/docs-chatbot\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n## Trigger Modes\n\n### Default Trigger\n\n\u003cimg width=\"1887\" height=\"829\" alt=\"Screen Shot 2025-10-24 at 14 39 33 PM\" src=\"https://github.com/user-attachments/assets/dfb3b8c0-ba8b-4c7d-bf0d-a4022982d45f\" /\u003e\n\nAdds a floating button in the bottom-right corner that opens the chatbot when clicked.\n\n```tsx\n\u003cDocsChatbot\n  searchUrl=\"your-edge-function-url\"\n  apiKey=\"your-api-key\"\n  title=\"Help Center\"\n/\u003e\n```\n\n### Custom Trigger\n\n\u003cimg width=\"1898\" height=\"830\" alt=\"Screen Shot 2025-10-24 at 14 42 16 PM\" src=\"https://github.com/user-attachments/assets/a2efaa07-f441-4281-bf8c-818b98a8c8b1\" /\u003e\n\nUse your own button or trigger element to control when the chatbot opens. This mode is useful when you want the chatbot to integrate seamlessly with your existing UI design or place the trigger in a specific location (like a navigation bar or help menu).\n  \n**React:**\n\n```tsx\nimport { DocsChatbot } from \"@sqliteai/docs-chatbot\";\nimport \"@sqliteai/docs-chatbot/style.css\";\nimport { useState } from \"react\";\n\nfunction App() {\n  const [open, setOpen] = useState(false);\n\n  return (\n    \u003c\u003e\n      {/* Your custom button anywhere in your app */}\n      \u003cbutton onClick={() =\u003e setOpen(true)}\u003eHelp \u0026 Support\u003c/button\u003e\n\n      {/* Chatbot with custom trigger mode */}\n      \u003cDocsChatbot\n        searchUrl=\"your-edge-function-url\"\n        apiKey=\"your-api-key\"\n        title=\"Help Center\"\n        trigger=\"custom\"\n        open={open}\n        onOpenChange={setOpen}\n      /\u003e\n    \u003c/\u003e\n  );\n}\n```\n\n**Vanilla JavaScript:**\n\n```html\n\u003cscript src=\"https://unpkg.com/@sqliteai/docs-chatbot/dist/umd/docs-chatbot.min.js\"\u003e\u003c/script\u003e\n\n\u003c!-- Your custom button --\u003e\n\u003cbutton id=\"help-btn\"\u003eHelp \u0026 Support\u003c/button\u003e\n\n\u003c!-- Chatbot with custom trigger mode --\u003e\n\u003cdocs-chatbot\n  search-url=\"your-edge-function-url\"\n  api-key=\"your-api-key\"\n  title=\"Help Center\"\n  trigger=\"custom\"\n\u003e\n\u003c/docs-chatbot\u003e\n\n\u003cscript\u003e\n  const chatbot = document.querySelector(\"docs-chatbot\");\n  const button = document.getElementById(\"help-btn\");\n\n  // Open chatbot when button is clicked\n  button.addEventListener(\"click\", () =\u003e {\n    chatbot.open = true;\n  });\n\n  // Listen to state changes (optional)\n  chatbot.addEventListener(\"openchange\", (e) =\u003e {\n    console.log(\"Chatbot open:\", e.detail.open);\n  });\n\u003c/script\u003e\n```\n\n## API Reference\n\n### React Component Props\n\n| Property                 | Type                      | Required                    | Description                                                                                                                |\n| ------------------------ | ------------------------- | --------------------------- | -------------------------------------------------------------------------------------------------------------------------- |\n| `searchUrl`              | `string`                  | Yes                         | Full URL of your deployed SQLite Cloud edge function (e.g., `https://yourproject.sqlite.cloud/v2/functions/aisearch-docs`) |\n| `apiKey`                 | `string`                  | Yes                         | SQLite Cloud API key with permissions to execute the edge function                                                         |\n| `title`                  | `string`                  | Yes                         | Title displayed in the chatbot header                                                                                      |\n| `emptyState`             | `object`                  | No                          | Customizes the initial empty state of the chatbot                                                                          |\n| `emptyState.title`       | `string`                  | No                          | Main heading shown before the first message                                                                                |\n| `emptyState.description` | `string`                  | No                          | Subtext shown below the empty state title                                                                                  |\n| `trigger`                | `\"default\" \\| \"custom\"`   | No                          | Trigger mode: `\"default\"` uses floating button, `\"custom\"` requires you to control `open` state (default: `\"default\"`)     |\n| `open`                   | `boolean`                 | Yes when `trigger=\"custom\"` | Control the chatbot open state (only used with `trigger=\"custom\"`)                                                         |\n| `onOpenChange`           | `(open: boolean) =\u003e void` | Yes when `trigger=\"custom\"` | Callback fired when the open state changes (only used with `trigger=\"custom\"`)                                             |\n\n### Web Component\n\n#### Attributes\n\n| Attribute                 | Required | Description                                                                                                                |\n| ------------------------- | -------- | -------------------------------------------------------------------------------------------------------------------------- |\n| `search-url`              | Yes      | Full URL of your deployed SQLite Cloud edge function (e.g., `https://yourproject.sqlite.cloud/v2/functions/aisearch-docs`) |\n| `api-key`                 | Yes      | SQLite Cloud API key with permissions to execute the edge function                                                         |\n| `title`                   | Yes      | Title displayed in the chatbot header                                                                                      |\n| `empty-state-title`       | No       | Main heading shown before the first message                                                                                |\n| `empty-state-description` | No       | Subtext shown below the empty state title                                                                                  |\n| `trigger`                 | No       | Trigger mode: `\"default\"` uses floating button, `\"custom\"` requires controlling `open` property (default: `\"default\"`)     |\n\n#### Properties\n\n| Property | Type      | Description                                                     |\n| -------- | --------- | --------------------------------------------------------------- |\n| `open`   | `boolean` | Get or set the chatbot open state (property-only, no attribute) |\n\n#### Events\n\n| Event        | Detail              | Description                               |\n| ------------ | ------------------- | ----------------------------------------- |\n| `openchange` | `{ open: boolean }` | Fired when the chatbot open state changes |\n\n## Theming\n\nCustomize the chatbot's appearance using CSS variables.\n\n### CSS Variables\n\n| Variable                              | Description              |\n| ------------------------------------- | ------------------------ |\n| `--docs-chatbot-radius`               | Border radius            |\n| `--docs-chatbot-background`           | Background color         |\n| `--docs-chatbot-foreground`           | Text color               |\n| `--docs-chatbot-primary`              | Primary color            |\n| `--docs-chatbot-primary-foreground`   | Primary text color       |\n| `--docs-chatbot-secondary`            | Secondary color          |\n| `--docs-chatbot-secondary-foreground` | Secondary text color     |\n| `--docs-chatbot-muted`                | Muted color              |\n| `--docs-chatbot-muted-foreground`     | Muted text color         |\n| `--docs-chatbot-accent`               | Accent color             |\n| `--docs-chatbot-accent-foreground`    | Accent text color        |\n| `--docs-chatbot-border`               | Border color             |\n| `--docs-chatbot-input`                | Input background color   |\n| `--docs-chatbot-ring`                 | Focus ring color         |\n| `--docs-chatbot-card`                 | Card background color    |\n| `--docs-chatbot-card-foreground`      | Card text color          |\n| `--docs-chatbot-popover`              | Popover background color |\n| `--docs-chatbot-popover-foreground`   | Popover text color       |\n| `--docs-chatbot-destructive`          | Destructive/error color  |\n\n### Examples\n\n**React:**\n\n```css\n/* In your main CSS file, import the chatbot styles first */\n@import \"@sqliteai/docs-chatbot/style.css\";\n\n/* Then override the variables */\n:root {\n  --docs-chatbot-primary: oklch(0.6 0.2 0);\n  --docs-chatbot-primary-foreground: oklch(1 0 0);\n  --docs-chatbot-border: oklch(0.85 0 0);\n  --docs-chatbot-radius: 8px;\n}\n```\n\n```tsx\nimport { DocsChatbot } from \"@sqliteai/docs-chatbot\";\nimport \"./styles.css\"; // Your CSS file with overrides\n\nfunction App() {\n  return (\n    \u003cDocsChatbot\n      searchUrl=\"your-edge-function-url\"\n      apiKey=\"your-api-key\"\n      title=\"Help Center\"\n    /\u003e\n  );\n}\n```\n\n**Vanilla JavaScript:**\n\n```html\n\u003cstyle\u003e\n  docs-chatbot {\n    --docs-chatbot-primary: oklch(0.6 0.2 0);\n    --docs-chatbot-primary-foreground: oklch(1 0 0);\n    --docs-chatbot-border: oklch(0.85 0 0);\n    --docs-chatbot-radius: 8px;\n  }\n\u003c/style\u003e\n\n\u003cdocs-chatbot\n  search-url=\"your-edge-function-url\"\n  api-key=\"your-api-key\"\n  title=\"Help Center\"\n\u003e\n\u003c/docs-chatbot\u003e\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsqliteai%2Fdocs-chatbot","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsqliteai%2Fdocs-chatbot","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsqliteai%2Fdocs-chatbot/lists"}