# 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.

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.

## Create a widget with AI

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**:

```text
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](/docs/widgets/code-editor).
- Wire its functions to real behavior — a message, a link, or a [custom action](/docs/actions/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](/docs/widgets/code-editor) — Refine the generated markup and schema by hand.
- [Components](/docs/widgets/components) — Reference for every component you can use.
- [Custom action](/docs/actions/custom-action) — Connect the widget to your data and the agent.