# DocuBot integration reference
For AI agents and developers adding DocuBot to a product. Everything needed is
on this page.
DocuBot answers questions about a product from its documentation wiki. Users
ask in your product; DocuBot answers from that wiki, streaming the answer as
it's written.
## Choose an integration
| You're building | Use |
|---|---|
| A help chat in a React 19 app (e.g. Next.js 15+) | **The widget** ([Part A](#a-react-widget)): a chat launcher and panel, plus a one-line server route. No API code. |
| Your own chat UI in a React 19 app | **The widget's hook**, `useDocubotChat` ([A6](#a6-your-own-ui)), with the same server route. |
| Answers in a backend, a workflow, a bot, or a non-React frontend | **The Chat API** ([Part B](#b-chat-api)), called from your server. |
Prefer the widget whenever it fits: it already handles streaming, keeping the
conversation, research polling and errors.
## Common to both
- Base URL: `https://www.docubot.wiki`
- Credential: a **project API token**, `dbk_` followed by 40 letters and
digits. A project manager creates it in the DocuBot dashboard: **project →
API access → New token**. It's shown once.
- A token belongs to exactly **one project**, meaning one wiki. It can't reach
any other.
- **The token stays on the server**, e.g. in the env var `DOCUBOT_API_TOKEN`.
Never put it in a browser, mobile app or public repository. The widget's
server route holds it; the Chat API is called from your backend.
- Revoking a token takes effect immediately. To rotate, create the new token,
deploy it, then revoke the old one.
## A. React widget
Package: [`@synergy-shock/docubot-widget`](https://www.npmjs.com/package/@synergy-shock/docubot-widget)
(MIT). Two halves:
- ``: the chat launcher and panel, in the browser.
- `@synergy-shock/docubot-widget/server`: a route handler on your server that
holds the token and relays messages to DocuBot. The browser only ever talks
to this route.
```
browser ── ──► your /api/docubot ──► DocuBot
(holds the token)
```
### A1. Requirements
- React 19 and react-dom 19 (peer dependencies). Next.js 15 and 16 ship them.
- A server for the route: the Next.js App Router, or anything that runs
standard `Request` → `Response` handlers (A5).
### A2. Setup in a Next.js app
1. Install:
```bash
npm install @synergy-shock/docubot-widget
```
2. Set `DOCUBOT_API_TOKEN`. On Vercel: Project → Settings → Environment
Variables. Locally: `.env.local`.
3. Add the route. It handles `POST` (messages) and `GET` (research polling) at
the same path:
```ts
// app/api/docubot/route.ts
export { POST, GET } from "@synergy-shock/docubot-widget/server"
```
4. Render the widget once, in the root layout, inside `` after
`{children}`:
```tsx
// app/layout.tsx
import { DocuBotWidget } from "@synergy-shock/docubot-widget"
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{children}
)
}
```
No CSS to import, no props required, and no `"use client"`: the layout can stay
a Server Component. The widget renders only in the browser, inside its own
Shadow DOM, so the page's CSS can't break it.
Visitors get a launcher in a corner that they can drag anywhere, and a panel
with answers streamed as they're written, linking to the docs. The
conversation survives page loads. On phones the panel is full screen. Enter
sends and Escape closes.
### A3. Props
All optional.
| Prop | Default | Notes |
|---|---|---|
| `endpoint` | `"/api/docubot"` | Where the route is mounted. |
| `title` | `"Ask AI"` | Panel heading. |
| `subtitle` | `"Answers from our documentation"` | `""` hides it. |
| `avatarUrl` | a sparkle | Square logo in the header. |
| `showAvatar` | `true` | Show the header logo at all. |
| `headerSize` | `"small"` | `"small"`, `"medium"` or `"large"`. |
| `messageStyle` | `"bubbles"` | Answers in `"bubbles"` or as `"plain"` text. |
| `icons` | | `{ launcher, close, avatar, send, newConversation }`, each an `