Skip to main content
ChattyBox Logo
ChattyBoxStart free
Open JavaScript SDK

Build a custom chatbot with our JavaScript SDK

Use @openstaticfish/chattybox to own the interface while ChattyBox runs retrieval, source citations, conversations, and scaling. The browser-safe API key identifies your project and can be restricted to approved origins.

Crawls published docs pagesSource-cited answersEmbeds with one scriptNo docs migration requiredNo credit card requiredYour content stays yours
Start building with the SDKRead the SDK reference
Ask ChattyBox
Where should I start if I need a reliable answer from this site?
Start by adding your public website URL to ChattyBox. It retrieves indexed content to guide answers and can show source-page links for visitors to inspect. Test answers and fallbacks before launch.
iSources3^
JavaScript SDK guide
chattybox.ai
Analytics
chattybox.ai
Home
chattybox.ai

Illustrative conversation — not a live chat.

Powered by ChattyBox

Launch a source-cited chatbot without rebuilding your site stack

ChattyBox crawls your existing website, documentation, help center, CMS, or knowledge base, then embeds a chatbot that answers from your own published content instead of generic model memory.

Install a typed ESM package from npm with Bun or your preferred package manager.
Build your own message rendering, conversation state, citations, and interaction design.
Use the same managed retrieval and source-grounded answer infrastructure as the hosted widget.
Public browser keys work across origins by default; exact origin restrictions are optional hardening, not authentication.
Workflow step

Create a ChattyBox project, index your content, and test representative questions.

Workflow step

Create a public widget API key; optionally restrict it to your application origins.

Workflow step

Install @openstaticfish/chattybox and initialize the client with the API URL from the dashboard.

Workflow step

Render answers and cited source URLs in the interface your product needs.

Three-step launch

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

Start building with the SDK
Headless chat infrastructure

Own the product experience, not the retrieval pipeline

The SDK is the recommended path for developer-led integrations that need custom UI, application state, or product-specific workflows.

Decision path

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

01

Typed client API

Use a focused TypeScript-friendly client for messages, follow-up conversations, widget configuration, and localized labels.

02

Source citations

Receive source URLs with each grounded answer and decide exactly how they appear in your interface.

03

Conversation continuity

Reuse the same conversationId for follow-ups to include up to 12 recent saved messages as model context, each clipped to 2,000 characters. This is bounded context, not the full transcript; keep IDs isolated between unrelated visitors.

04

Transparent boundaries

Your application owns rendering and interaction design; ChattyBox operates crawling, retrieval, generation, and scaling.

Install path

Install the JavaScript chatbot SDK

The package works in current browser and Node.js applications that provide fetch. Use the exact widget API URL and public browser key shown in your project Embed tab.

  1. 1Install @openstaticfish/chattybox from npm.
  2. 2Initialize one Chattybox client with your public API key and widget API URL.
  3. 3Send a message and render the returned answer, conversation ID, and source URLs.
Start building with the SDK
chat.ts
ts
import { Chattybox } from '@openstaticfish/chattybox';

// Replace these placeholders with the public key and widget API URL from Embed.
const chattybox = new Chattybox({
  apiKey: 'YOUR_PUBLIC_WIDGET_KEY',
  baseUrl: 'YOUR_WIDGET_API_URL',
});

const answer = await chattybox.sendMessage({
  message: 'How do I get started?',
});

console.log(answer.message, answer.sources);
Explore next

More ways to use ChattyBox

Browse platform guides
01React chatbot SDKManage chat state and cited answers in a custom React interface.02Next.js AI chatbotUse the SDK safely across App Router server and client boundaries.03JavaScript SDK referenceReview client methods, response fields, conversations, and errors.04Hosted widget installationChoose the maintained no-build UI when you do not need custom rendering.05Public npm packageReview published versions, package metadata, and the install command on npm.06GitHub source repositoryInspect the source repository, releases, issues, and project history on GitHub.
FAQ

Common questions

1

What is a headless JavaScript chatbot SDK?

It is a client library that provides chat transport and response data without prescribing the interface. Your application renders messages, sources, loading states, and controls.

2

Is the ChattyBox JavaScript SDK public on npm?

Yes. Install @openstaticfish/chattybox from npm and use the public API documented on the SDK reference page.

3

Does the SDK include retrieval and source citations?

The SDK calls ChattyBox managed infrastructure, which retrieves from your indexed content and returns the generated message with cited source URLs.

4

Should I use the SDK or widget.js?

Use the SDK when your team owns a custom interface or workflow. Use widget.js when you want ChattyBox to maintain a ready-made, no-build chat UI.

Start free

No credit card required

Create free chatbot

Free tier. No card needed.