AI widget builder

Describe the widget you want in plain language and Bookbag generates the markup, data schema, and example data for you — then refine it in the code editor.

View as Markdown

The AI builder is the fastest way to create a widget. You describe what you want — "a product carousel with image, name, price, and an add-to-cart button" — and Bookbag generates the complete widget: the JSX-like markup, a typed data schema, and example data so the preview renders immediately.

1
Open the Widgets gallery
Go to Widgets and choose to create a new widget with AI.
2
Describe what you want
Write a clear, specific description of the UI, the data it shows, and what its buttons should do.
3
Generate
Bookbag drafts the markup, schema, and a default example. The live preview renders from the example so you can see it instantly.
4
Refine
Iterate by editing the description, or switch to the code editor for precise control.

Write a good prompt

The builder produces better results when you name the components, the data fields, and the actions:

A shoppable product list. Each item shows a square product image, the
product name, its category, and the price. Add an "Add to cart" button
under each product that calls an addToCart function with the product id.
Lay the products out in a horizontal, scrollable carousel.

Be explicit about data

Mention the exact fields you have (e.g. image, name, price, id). The builder turns those into the widget's data schema, which is what your action or API needs to populate at runtime.

What gets generated

Output	What it is
Markup	JSX-like code over the built-in component library that defines the layout and UI.
Data schema	A typed declaration of the fields the widget expects (a Zod schema plus a JSON mirror).
Default example	Sample data used to render the live preview before real data is wired in.
Functions	Behavior for interactive elements — e.g. a button that sends a message or sets variables.

AI transform

You don't have to start from scratch every time. You can ask the AI to transform an existing widget — "add a quantity stepper," "make the layout vertical," "add a submitted confirmation state." Bookbag edits the markup and schema in place while preserving what already works.

After generating

A generated widget is a starting point, not a finished integration. To put it in front of customers you still need to:

Review the markup and data schema in the code editor.
Wire its functions to real behavior — a message, a link, or a custom action that calls your API.
Attach the widget to an action so the agent can render it in a conversation.

info

AI generation uses a configured language model. If your workspace has no model provider available, the builder falls back to a deterministic scaffold so you still get a valid, editable widget to start from.

What's next

Code editor

Refine the generated markup and schema by hand.

Components

Reference for every component you can use.

Custom action

Connect the widget to your data and the agent.

Widgets overview