AI help widget
for any site.

Add a floating chat assistant powered by Claude to your site in under 5 minutes. Point it at your docs, drop in the component, done. One dependency, fully themeable.

Get Started Setup Guide

Try it now ↓

Click the chat button in the bottom-right corner.
It knows everything about docsbot.

What You Get

Drop-in widget

A floating chat panel with a trigger button. Import the component, pass your API endpoint, and you're done. The widget handles the conversation UI, typewriter animation, suggested questions, and mobile layout.

Floating panel with trigger button
Typewriter animation for responses
Configurable suggested questions
Themeable via CSS custom properties
Position: bottom-right or bottom-left

Headless hook

Need full control? Use the useDocsBot() hook to build your own UI. You get messages, loading state, error handling, and send/clear functions.

Full conversation state management
Loading and error states
Send and clear functions
Build any UI you want
Same backend handler

How It Works

Three pieces

The widget (React component), the hook (headless alternative), and the backend handler. The handler takes your knowledge base as a markdown string, builds a system prompt, and calls Claude Haiku. Cheap and fast.

Dynamic context lets you inject per-request data — current page, user role, account info — so answers are always relevant.

// The architecture

User clicks help → DocsBot widget opens
                    →
User types question → POST /api/docsbot
                       →
              createDocsBotHandler:
              - Builds system prompt
                (knowledge + context + page)
              - Sends to Claude Haiku
              - Returns answer
                       →
              Widget shows typewriter animation
        

Setup Guide

Install

Two packages: the widget itself and the Anthropic SDK for the backend handler.

npm install docsbot @anthropic-ai/sdk

Create your knowledge base

Write your docs as markdown. The handler injects this into the system prompt so Claude can answer questions about your product.

<!-- knowledge.md -->
# My Product

## Dashboard
The dashboard shows an overview
of your account...

## Settings
Configure your account from the
Settings page...
        

Add the API route

A single file. The handler reads your knowledge base, manages conversation history, and calls Claude. Works with Next.js, Express, or any Node server.

// app/api/docsbot/route.ts
import { createDocsBotHandler }
  from "docsbot/api";

const handler = createDocsBotHandler({
  apiKey: process.env.ANTHROPIC_API_KEY,
  knowledge,
});

export const POST = handler;
        

Add the widget

Import the component, import the styles, pass the endpoint. A help button appears in the bottom-right corner. That's it.

import { DocsBot } from "docsbot";
import "docsbot/styles.css";

<DocsBot
  endpoint="/api/docsbot"
  suggestedQuestions={[
    "How do I get started?",
    "What features are available?",
  ]}
/>
        

Customization

Theming

Override CSS custom properties to match your brand. Colors, sizing, border radius, widget dimensions — all configurable.

:root {
  --docsbot-primary: #8b5cf6;
  --docsbot-user-bg: #8b5cf6;
  --docsbot-radius: 16px;
  --docsbot-width: 420px;
  --docsbot-height: 600px;
}
        

Widget props

Prop	Description
`endpoint`	Your API route URL (required)
`title`	Header title (default: "Help")
`placeholder`	Input placeholder text
`position`	"bottom-right" or "bottom-left"
`suggestedQuestions`	Array or function returning questions
`currentPage`	Page context for smarter answers
`headers`	Extra headers for authenticated APIs
`onToggle`	Callback when widget opens/closes

Backend Configuration

Handler options

The backend handler is configurable: swap models, set token limits, add dynamic context per request. The getContext function lets you inject user-specific or page-specific data into every request.

Option	Description
`apiKey`	Anthropic API key (required)
`knowledge`	Markdown knowledge base
`model`	Claude model (default: Haiku)
`maxTokens`	Max response tokens (default: 512)
`maxHistory`	Conversation history limit (default: 10)
`getContext`	Dynamic per-request context builder

Dynamic context

Add per-request context so answers reflect the user's current state. The function receives the request and can return any string to append to the system prompt.

const handler = createDocsBotHandler({
  apiKey: process.env.ANTHROPIC_API_KEY,
  knowledge,
  getContext: async ({ currentPage }) => {
    return `User is on the
      ${currentPage} page.`;
  },
});
        

Headless mode

import { useDocsBot } from "docsbot";

const {
  messages,
  loading,
  error,
  sendMessage,
  clearMessages,
} = useDocsBot({
  endpoint: "/api/docsbot",
});
        

AI help widgetfor any site.