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 pages

Source-cited answers

Embeds with one script

No docs migration required

Start building with the SDK 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^

JavaScript SDK guide

chattybox.ai

Analytics

chattybox.ai

Home

chattybox.ai

Ask a question...

Built for JavaScript and TypeScript 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.

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.

Restrict public browser keys to approved origins without exposing management credentials.

Workflow step

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

Workflow step

Create a public widget API key and 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.

Typed client API

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

Source citations

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

Conversation continuity

Keep the returned conversation ID in visitor state to support contextual follow-up questions.

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.

1Install @openstaticfish/chattybox from npm.
2Initialize one Chattybox client with your public API key and widget API URL.
3Send a message and render the returned answer, conversation ID, and source URLs.

Start building with the SDK

chat.ts

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

const chattybox = new Chattybox({
  apiKey: import.meta.env.PUBLIC_CHATTYBOX_API_KEY,
  baseUrl: import.meta.env.PUBLIC_CHATTYBOX_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

React chatbot SDK

Manage chat state and cited answers in a custom React interface.

Open

Next.js AI chatbot

Use the SDK safely across App Router server and client boundaries.

Open

JavaScript SDK reference

Review client methods, response fields, conversations, and errors.

Open

Hosted widget installation

Choose the maintained no-build UI when you do not need custom rendering.

Open

Public npm package

Review published versions, package metadata, and the install command on npm.

Open

GitHub source repository

Inspect the source repository, releases, issues, and project history on GitHub.

Open

FAQ

Common questions

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.

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.

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.

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. Your content is not used for model training.

Create free chatbot

Free tier. No card needed.