--- title: Build Widgets with Hero AI slug: turbine-user-guide/build-widgets-with-hero-ai docTags: createdAt: 2026-07-01T04:52:30.329Z --- Use Hero AI to edit application and report widgets with natural language. Describe the change you want; Hero updates the widget **Code** tab so you can preview the result and **Apply & Save** it to the layout. This mode is separate from [Create and Modify Playbooks with Hero AI](docId\:TmMNjGlC0e9lIPO37KZPB) and [Create and Modify Components with Hero AI](docId\:ikUKoTgCOrZumuwb-JDsb), which edit automation on the playbook or component canvas. ## Choose Your Path | I want to… | Start here | | ---------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- | | Open the widget editor and Hero AI together | [Widget Editor and Hero AI Panel](https://docs.swimlane.com/build-widgets-with-hero-ai#widget-editor-and-hero-ai-panel) | | Edit a record widget with Hero AI | [Edit a Record Widget with Hero AI](https://docs.swimlane.com/build-widgets-with-hero-ai#edit-a-record-widget-with-hero-ai) | | Edit a report chart widget with Hero AI | [Edit a Report Widget with Hero AI](https://docs.swimlane.com/build-widgets-with-hero-ai#edit-a-report-widget-with-hero-ai) | | Refine a widget with another prompt | [Follow-Up Prompts in the Same Session](https://docs.swimlane.com/build-widgets-with-hero-ai#follow-up-prompts-in-the-same-session) | | Answer clarifying questions before a build completes | [Clarifying Questions](https://docs.swimlane.com/build-widgets-with-hero-ai#clarifying-questions) | :::hint{type="info"} **Build Widgets with Hero AI** requires the **Hero AI** feature and Hero AI chat assistant access for your user. Contact Swimlane Support if **Build with Hero AI** does not appear in the widget editor header. ::: ## Widget Editor and Hero AI Panel Starting in **26.2.0**, the widget editor opens as an **overlay** on top of the application or report builder—not in a separate dialog. You can close the overlay and still see the application underneath. The overlay layout lets you place the **Hero AI** companion **side by side** with the widget editor. In earlier releases, a dialog-based editor could not show the companion next to the code at the same time. The screenshot shows the **AI Analysis** widget editor on a **Case Management** layout, with three panes open side by side: **Code**, **Preview**, and **Hero AI**. The overlay title is **AI Analysis**; the live preview renders the **AI Alert Analysis** card. The header includes **Build with Hero AI** and **Apply & Save**. | Pane | What it shows | | -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Left — editor** | Widget name in the title bar (for example **AI Analysis**). Tabs **Code**, **Preview Record Data** (or **Preview Report Data** on reports), and **Context Data** | | **Center — preview** | **Preview** header, **Live Preview** toggle, **Update Preview** button, and rendered widget output (for example the **AI Alert Analysis** panel) | | **Right — Hero AI** | Companion with **Entered Widget Building Mode**, the widget builder welcome message, and a footer status bar (**Widget Building Mode** and **Editing widget:** *widget name*) | The editor header includes **Build with Hero AI**, **Apply & Save**, and an options menu (⋯) with **Widget documentation**. | Control | Action | | --------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- | | **Edit Widget** | Opens the widget editor overlay from a record layout or report chart (title shows the widget name, for example **AI Analysis**) | | **Build with Hero AI** | Opens or focuses the Hero AI panel in **Widget Building Mode** | | **Apply & Save** | Saves widget **Code** to the application or report layout (enabled when there are valid unsaved changes) | | **Widget documentation** (⋯ menu) | Opens the Turbine User Guide **Widgets** documentation in a new browser tab (widget code, context data, and APIs) | | Hero AI toggle (product chrome) | Opens or closes the companion for side-by-side editing | ## Widget Building Mode When the **widget editor** is open, Hero AI enters **Widget Building Mode** and helps you edit the widget on the **Code** tab. | Where you are | Hero AI mode | What it does | | ----------------------------------------------------- | ------------------------ | ---------------------------------------------------------------------------------- | | Most screens (records, reports, playbooks, and so on) | **General companion** | Questions about tenant data; see [Hero AI Companion](docId\:crQKFVnGpCz_wJ8xtHDs7) | | **Widget editor** open (record or report) | **Widget Building Mode** | Edit widget **Code** from natural-language prompts | When Widget Building Mode is active, the Hero AI panel typically shows: - A system line: **Entered Widget Building Mode** - A persistent banner and footer status: **Widget Building Mode**, with **Editing widget:** *widget name* (for example **AI Analysis**) - A welcome message, for example: - *Hi, I'm Hero's widget builder agent, and I can help you edit this widget.* - *Ask for changes to the widget code, layout, or behavior.* While Hero works, status messages appear in the companion. The first prompt in a session may take about a minute; follow-up prompts in the same session are usually faster. When Hero finishes, the **Code** tab updates. Review **Code** and **Preview**, then click **Apply & Save** in the widget editor header to save your changes. :::hint{type="warning"} Hero AI updates the in-editor **Code** tab only. Click **Apply & Save** to persist changes. If you close the widget editor with unsaved edits, the product asks you to confirm: *You have unsaved changes. Are you sure you want to close the widget editor?* ::: ## Edit a Record Widget with Hero AI 1. Open an application record that uses a custom widget layout. 2. Click **Edit Widget** to open the widget editor overlay. 3. Click **Build with Hero AI** (or open the Hero AI panel from the top-right toggle). 4. Optionally review tabs before you prompt: - **Code** — widget source Hero will edit. - **Preview Record Data** — sample record used for preview. Use **Select the Record to Load the Data From**, then click **Apply** on that tab to refresh preview data. This **Apply** control is separate from **Apply & Save** in the editor header. - **Context Data** — runtime context for the widget (account, tenant, user, application, and similar). 5. Describe the change you want in plain language. 6. Wait for Hero to update **Code** and review status messages in the companion. 7. Review the **Preview** panel (**Live Preview** toggle and **Update Preview** as needed). 8. Click **Apply & Save** in the widget editor header when you are satisfied. :::hint{type="info"} Some behaviors do not work in the in-editor preview (for example, **open record in drawer**). Save with **Apply & Save**, then test on a live record to confirm drawer, navigation, or other runtime-only actions. ::: ### Example Prompts (Record Widgets) | Goal | Example prompt | | ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Simple controls | Add a text input and a button. When the button is clicked, show the input text in a dialog. | | List application records | Build a widget that fetches all records in the current application and lists them in a table with tracking ID. Add a button on each row to open the record in a drawer. | | Follow-up in same session | Add a delete button on each row with a confirmation dialog before delete. | | Refine UX | Replace the browser confirm dialog with a standard confirmation dialog. | ## Edit a Report Widget with Hero AI Report chart widgets on dashboards use the **same** widget editor overlay and **Widget Building Mode** experience as record widgets. 1. Open a report that uses a custom chart widget. 2. Click **Edit Widget** to open the widget editor overlay. 3. Click **Build with Hero AI**. 4. Review **Code**, **Preview Report Data**, and **Context Data** as needed. 5. Describe the chart or table change you want. 6. Review preview output, then click **Apply & Save** to save. ## Follow-Up Prompts in the Same Session You can refine a widget with additional prompts without starting over. Follow-up requests—such as adding delete actions, swapping a browser confirm for a dialog, or adjusting columns—usually complete faster than the first prompt. Stay in the same Hero AI session while iterating. When you are done, click **Apply & Save** once to persist the final **Code** tab to the application or report. ## Clarifying Questions Hero may pause and ask **clarifying questions** when your prompt needs more detail before it can change the widget safely. The flow matches [Create and Modify Playbooks with Hero AI](docId\:TmMNjGlC0e9lIPO37KZPB) (one question at a time, **Back** / **Next** / **Save**, optional **Other** with free text). While Hero runs or waits for clarifying answers, status lines appear in the companion. There is no canvas progress overlay in the widget editor (that overlay is for playbook and component canvas only). ## Prompt Tips - Name the widget elements you want changed (columns, headers, colors, icons, buttons). - State the data fields or report columns to use. For record widgets, you can refer to "this application" or "the current record" when **Context Data** and **Preview Record Data** are loaded. - Ask for incremental changes and iterate in the same session. - Expect the first prompt to take longer; later prompts in the same session are typically quicker. - Open **Widget documentation** from the widget editor header menu (⋯) for widget code structure, context data, and APIs—the same Turbine User Guide topics linked under [See Also](https://docs.swimlane.com/build-widgets-with-hero-ai#see-also). :::hint{type="info"} Complex prompts may not succeed on the first try. Review generated **Code**, adjust the prompt, or break the request into smaller follow-up steps. ::: ## See Also - [Hero AI Companion](docId\:crQKFVnGpCz_wJ8xtHDs7) — general companion and mode switching - [Create and Modify Playbooks with Hero AI](docId\:TmMNjGlC0e9lIPO37KZPB) — playbook canvas building mode and clarifying questions - [Hero AI Credits](docId\:FPBH2J8Xm1TfDvEjnc8KB) — usage and credits (when enabled for your tenant) - [Widgets](docId\:ZpG3M3x7yrR0kC-jqyAjy) — widget overview in the Turbine User Guide (same destination as the **Widget documentation** menu link) - [Create Widgets](docId:4EICssPN39Z93M_nSElOo) — add and edit widgets in the application builder - [Widget Code Structure](docId\:GJJCAkY8XZ3_1nq8-bsTg) — widget source layout and conventions