React Chatbot SDK

Build your own React chatbot UI

Connect React components to ChattyBox with @openstaticfish/chattybox. Your team controls rendering and state while managed infrastructure handles source-grounded answers, citations, and conversation continuity.

Crawls published docs pages

Source-cited answers

Embeds with one script

No docs migration required

Build a React chatbot Read the SDK reference

No credit card requiredYour content stays yours

Ask ChattyBox

Where should I start if I need a reliable answer from this site?

Start by adding your website URL to ChattyBox. It crawls your content, answers from the pages it finds, and shows visitors the sources behind each response.

iSources3^

React guide

chattybox.ai

Analytics

chattybox.ai

Home

chattybox.ai

Ask a question...

Built for React product teams

Launch a source-cited chatbot without rebuilding your docs stack

ChattyBox crawls your existing documentation, indexes the content for retrieval, and embeds a chatbot that answers using your docs instead of generic model memory.

Create custom message, citation, loading, fallback, and error components.

Keep conversation IDs in visitor-scoped React state for follow-up questions.

Use public origin-restricted API keys safely in browser applications.

Avoid maintaining your own crawler, vector store, retrieval service, or generation pipeline.

Workflow step

Install the JavaScript SDK in your React application.

Workflow step

Create one Chattybox client outside the component render path.

Workflow step

Send messages from an event handler and update UI state with the response.

Workflow step

Render source links and handle structured ChattyboxError failures.

Three-step launch

Paste your React URL, test cited answers, then install the widget.

Build a React chatbot

React integration

Fit grounded chat into your existing component system

Use the state, accessibility, styling, and design-system patterns your application already follows instead of adapting to a fixed widget shell.

Decision path

Use these checkpoints to decide whether ChattyBox should sit beside your docs platform, replace a separate assistant, or stay isolated for testing.

Component ownership

Compose messages, citation cards, prompts, empty states, and controls from your own React components.

State on your terms

Use local state or your existing state layer while keeping conversations isolated between visitors.

Accessible responses

Control focus, live regions, keyboard behavior, and error announcements within your application.

Managed backend

Keep the browser integration small while ChattyBox handles content indexing, retrieval, and cited answers.

Install path

Connect a React component to ChattyBox

Create the client once, call it from an event handler, and keep each visitor conversation ID in component or application state.

1Add @openstaticfish/chattybox to the React application.
2Initialize the client with Vite or framework-provided public environment variables.
3Store the returned message, sources, and conversation ID in visitor-scoped state.

Build a React chatbot

Chat.tsx

tsx

import { useState } from 'react';
import { Chattybox } from '@openstaticfish/chattybox';

const chattybox = new Chattybox({
  apiKey: import.meta.env.VITE_CHATTYBOX_API_KEY,
  baseUrl: import.meta.env.VITE_CHATTYBOX_API_URL,
});

export function Chat() {
  const [answer, setAnswer] = useState('');

  async function ask(message: string) {
    const response = await chattybox.sendMessage({ message });
    setAnswer(response.message);
  }

  return <div aria-live="polite">{answer}</div>;
}

Explore next