docsbot

Add an AI help assistant to your site in under 5 minutes. A lightweight React widget powered by Claude that answers questions about your product using your own knowledge base.

Features

• Drop-in widget — floating chat panel with trigger button, zero config UI
• Knowledge-base driven — point it at your docs (markdown string) and it just works
• Typewriter animation — responses stream in character by character
• Suggested questions — configurable per-page or static
• Headless hook — useDocsBot() for custom UI
• Themeable — CSS custom properties for colors, sizing, radius
• Tiny footprint — one runtime dependency (react-markdown)
• BYOK — bring your own Anthropic API key

Quick Start (Next.js)

1. Install

npm install docsbot @anthropic-ai/sdk

2. Create your knowledge base

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

## Features

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

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

3. Add the API route

// app/api/docsbot/route.ts
import { createDocsBotHandler } from "docsbot/api";
import { readFileSync } from "fs";
import { resolve } from "path";

const knowledge = readFileSync(resolve(process.cwd(), "knowledge.md"), "utf-8");

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

export const POST = handler;

4. Add the widget

// app/page.tsx
"use client";

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

export default function Home() {
  return (
    <main>
      <h1>My App</h1>
      <DocsBot
        endpoint="/api/docsbot"
        suggestedQuestions={[
          "How do I get started?",
          "What features are available?",
        ]}
      />
    </main>
  );
}

That's it. A help button appears in the bottom-right corner.

Customization

Theming

Override CSS custom properties:

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

Widget props

<DocsBot
  endpoint="/api/docsbot"            // Required: your API route
  title="Support"                     // Header title (default: "Help")
  placeholder="Ask anything..."       // Input placeholder
  position="bottom-left"              // "bottom-right" (default) or "bottom-left"
  suggestedQuestions={["How do I...?"]} // Static array or () => string[]
  currentPage="/dashboard"            // Or () => window.location.pathname
  headers={{ Authorization: "Bearer xxx" }} // Extra headers for API calls
  onToggle={(open) => console.log(open)} // Open/close callback
/>

Headless mode

Build your own UI with the hook:

import { useDocsBot } from "docsbot";

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

  return (
    <div>
      {messages.map((msg) => (
        <div key={msg.id}>{msg.content}</div>
      ))}
      <button onClick={() => sendMessage("Hello!")}>Send</button>
    </div>
  );
}

Dynamic context

Add per-request context (user info, page data) to the system prompt:

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

API Reference

<DocsBot /> props

Prop	Type	Default	Description
endpoint	string	—	Required. Your API route URL
title	string	"Help"	Header title
placeholder	string	"Ask a question..."	Input placeholder
position	"bottom-right" | "bottom-left"	"bottom-right"	Widget position
suggestedQuestions	string[] | () => string[]	[]	Suggested questions
currentPage	string | () => string	—	Current page context
headers	Record | () => Record	—	Extra request headers
onToggle	(isOpen: boolean) => void	—	Open/close callback

useDocsBot(config) returns

Property	Type	Description
messages	DocsBotMessage[]	Conversation messages
loading	boolean	Whether a request is in flight
error	string | null	Last error message
sendMessage	(msg: string) => void	Send a message
clearMessages	() => void	Clear conversation

createDocsBotHandler(config)

Option	Type	Default	Description
apiKey	string	—	Required. Anthropic API key
knowledge	string	—	Markdown knowledge base
systemPrompt	string	—	Full system prompt override
model	string	claude-haiku-4-5-20251001	Claude model
maxTokens	number	512	Max response tokens
maxHistory	number	10	Conversation history limit
maxMessageLength	number	500	Max user message length
getContext	(req) => string | Promise<string>	—	Dynamic context builder

How it works

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

License

MIT