Integrate with an AI Coding Assistant

The recommended integration is the @openstaticfish/chattybox npm package. It lets application code configure the public key and API URL, mount ChattyBox's maintained interface where your component belongs, or use the headless client for a completely custom UI.

The standalone widget.js script is documented last as a no-build fallback for sites that cannot install npm packages.

Before You Start

Complete the chatbot setup before asking an assistant to edit your application:

• Verify representative answers and citations in Test Chat.
• Create a browser key in Public Keys and restrict its allowed origins.
• Copy the public key and widget API URL shown in Embed.
• Decide which application routes or layouts should mount the experience.

These are public browser credentials, but you should still avoid committing environment-specific values. Never provide a config deployment token, admin credential, or unrelated environment file.

Recommended: Mount the Maintained UI from npm

This is the default prompt for React, Next.js, Vite, and other package-based browser applications.

Prompt

Integrate the ChattyBox npm package

Integrate ChattyBox into this application using the @openstaticfish/chattybox npm package.

Public browser configuration:
- API key: [PASTE PUBLIC WIDGET KEY]
- API URL: [PASTE WIDGET API URL]

First inspect the framework, routing model, package manager, environment-variable conventions, and persistent application layout. Tell me which files you plan to change before editing. Ask me if the routes where ChattyBox should appear are unclear.

Requirements:
1. Install @openstaticfish/chattybox with the package manager already used by this repository.
2. Store the public API key and API URL using the framework's browser-exposed environment-variable convention. Add placeholder names to an example environment file, but do not commit real values.
3. Import Chattybox from @openstaticfish/chattybox and create one client with apiKey and baseUrl.
4. Mount the maintained interface with client.mountWidget() from the appropriate client-side component or lifecycle hook.
5. Mount it only on the routes or layout I specify, and call the returned remove() function during cleanup when the framework requires it.
6. Do not inject widget.js manually, create a backend proxy, or introduce a second ChattyBox client.
7. Preserve existing navigation, rendering boundaries, localization, analytics, consent, and styling.
8. Make the smallest focused change and do not deploy it.
9. Run the repository's build, lint, type-check, and relevant tests.
10. Report changed files, environment variables I must set, where the UI mounts, and how to test it on the deployed site.

The resulting application code should follow this shape:

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

const client = new Chattybox({
  apiKey: PUBLIC_CHATTYBOX_API_KEY,
  baseUrl: PUBLIC_CHATTYBOX_API_URL,
});

const widget = client.mountWidget();

// Use during component cleanup when appropriate.
// widget.remove();

Build a Custom Interface

Choose this when your application should own the message list, input, loading states, errors, citations, and placement instead of mounting the maintained interface.

Prompt

Build a headless ChattyBox interface

Build a custom chatbot interface using the @openstaticfish/chattybox npm package and its headless client.

Public browser configuration:
- API key: [PASTE PUBLIC WIDGET KEY]
- API URL: [PASTE WIDGET API URL]

First inspect the application's framework, component system, state patterns, styling, accessibility conventions, and test setup. Propose the component boundaries and files before editing.

Requirements:
1. Install @openstaticfish/chattybox with the repository's existing package manager.
2. Configure one Chattybox client with apiKey and baseUrl using browser-exposed environment variables; do not commit real values.
3. Use sendMessage() and retain conversationId for follow-up messages.
4. Render answer sources as accessible links and preserve their order.
5. Implement pending, empty, error, retry, and unsupported-answer states.
6. Prevent duplicate submissions and keep keyboard and screen-reader behavior usable.
7. Mount the interface only in the routes or layout I specify.
8. Follow existing components and styles instead of adding a new design system.
9. Do not load widget.js or call mountWidget().
10. Run build, lint, type-check, and relevant tests, then report changed files and a verification plan.

Framework Notes

Give the assistant one additional sentence when needed:

• Next.js App Router: “Keep the Chattybox client and mountWidget() call inside a small Client Component rendered by the intended layout.”
• React SPA: “Mount from the persistent app shell or the specific route layout, and clean up in the effect return function.”
• Docusaurus: “Create a client-only theme component and render it from src/theme/Root; preserve docs navigation and locale changes.”
• Vue, Nuxt, Svelte, or another framework: “Use the framework's client-only mount lifecycle and matching cleanup lifecycle.”

Review an Existing SDK Integration

Prompt

Review my ChattyBox SDK integration

Review this ChattyBox integration without deploying or changing unrelated code.

Check that:
1. @openstaticfish/chattybox is installed and imported instead of duplicating its behavior.
2. One Chattybox client receives the intended public API key and API URL.
3. Browser environment variables follow this framework's public-variable naming rules without exposing private credentials.
4. mountWidget() or the custom interface appears only in the intended routes and cleans up correctly.
5. Client-side navigation and development remounts do not create duplicate instances.
6. Existing rendering boundaries, localization, analytics, consent, accessibility, and layout remain intact.
7. The implementation has appropriate tests and no unrelated refactor.

Return findings by severity with file paths and line references. Propose only the smallest safe fixes and give me exact verification commands.

No npm or Build Step?

Use the widget.js installation guide only when the site cannot use the npm package—for example, plain HTML, a CMS custom-code field, or Google Tag Manager.

Prompt

Install the fallback widget script

Install the hosted ChattyBox widget on this site using the exact script generated by my ChattyBox Embed tab:

[PASTE COMPLETE WIDGET SCRIPT]

Inspect the site first and identify the safest global public-page insertion point. Load the unchanged script exactly once, exclude private/admin/checkout routes, preserve consent and CSP behavior, do not expose private credentials, do not deploy the change, and report the changed location plus a browser test plan.

Test the Result

1. Review the diff and confirm no real credentials were committed.
2. Run the project's normal build, lint, type-check, and tests.
3. Deploy through the normal review process.
4. Verify the intended routes in a private browser window, including client-side navigation.
5. Ask a supported question, follow a citation, and test the fallback behavior.
6. Check mobile layout, keyboard use, and the browser console.

Continue with the SDK reference and launch checklist.