Storybook Addon

Add the Asyntai AI chat assistant to your Storybook

Overview

Storybook is where teams build, test and document UI components and design systems. The Asyntai addon is an npm package. Add it to your Storybook configuration, and the chat bubble is in the corner of the Storybook window, on every story and every Docs page.

The assistant answers designers and developers about your components from your own documentation, in more than 80 languages, day and night.

Requirements

Storybook 8, 9 or 10, with any framework
Node 18 or later
An Asyntai account. The Free plan is enough to try the widget

Installation

Follow these steps to add Asyntai to your Storybook:

Get Your Widget ID

Sign in to Asyntai and open the Install page. The widget ID is the value of data-asyntai-id in the snippet shown there. It starts with asyntai_.

Add the Package

Run this command in your project folder:

npm install --save-dev storybook-addon-ai-chatbot

Add the Addon

Open .storybook/main.ts (or main.js) and add the addon with your widget ID:

const config = {
  // ...
  addons: [
    // ...your other addons
    {
      name: 'storybook-addon-ai-chatbot',
      options: { widgetId: 'asyntai_1a2b3c4d5e6f' },
    },
  ],
};

export default config;

Start Storybook

Run npm run storybook, or publish it with npm run build-storybook. The chat bubble is in the corner of the Storybook window.

Options

Option	Type	Default	What it does
`widgetId`	string	required	Your Asyntai widget ID
`scriptUrl`	string	the Asyntai CDN	Advanced. Load the widget from another URL

A missing or malformed widgetId stops Storybook with a message that says how to fix it.

How It Works

The addon adds the Asyntai loader to the Storybook window, in storybook dev and in the published build. Your stories render in their own frame, as before. The widget is never added to them, so your components, tests and visual snapshots stay exactly as they are.

The loader waits for the page's load event, so Storybook always renders first.

Answering From Your Documentation

Asyntai reads your published pages. Add the URL of your published Storybook or your design system site in the dashboard, and the assistant answers from it. You can also add guides, and question and answer pairs.

Tip: Add your design guidelines, your component usage rules and your contribution guide in the dashboard too. Your team then gets answers about how to use each component, not only what it looks like.

Removing It

Delete the addon from the addons list and restart Storybook. The chat bubble is gone.

Plans & Pricing

The package is free. View pricing.

Need Help?

If you have any questions or run into issues, contact us at [email protected].