Page Builder Runtime
Widgets
Use PageBuilderChart, PageBuilderIrisChat, and PageBuilderReport in Antly runtime pages.
The runtime ships higher-level widgets for common Antly UI: charts, Iris chat, and report download surfaces. Prefer these widgets over rebuilding the same behavior in a react block.
PageBuilderChart
PageBuilderChart renders the existing Page Builder chart renderers. Supported types include bar, pie, donut, timeSeries, line, area, tile, tree, radar, funnel, scatter, bubble, pictogram, proportionalArea, splitBar, heatmap, and alluvial.
1function RevenueChart({ rows }) {
2 return (
3 <PageBuilderChart
4 type="bar"
5 height={320}
6 properties={{
7 data: rows,
8 xKey: "month",
9 yKey: "revenue",
10 title: "Revenue by month"
11 }}
12 />
13 );
14}PageBuilderIrisChat
PageBuilderIrisChat embeds an Iris V2 topic in the page. The composer (textbox, send, optional mic / attachments / model picker) is fixed product chrome. The upper section — header, welcome copy, and suggestion chips — uses a plain default layout (not editorial) so page authors can restyle it.
Props
| Prop | Purpose |
|---|---|
topic | Iris V2 topic slug (built-in or tenant topic). Default runtime-assistant. |
title | Header title. Default Assistant. |
welcomeMessage | Empty-state copy above the chips. Prefer the Iris topic form; props are a fallback when no tenant topic row exists. |
suggestions | Quick-start chip labels. Same topic-form precedence as welcomeMessage. |
promptContext | Hidden guidance prepended to every prompt. |
namespace | Default namespace hint for the backend. |
provider / size | LLM selection. Default gemini / xs. |
allowModelSelect | Show an in-chat model picker. Default false. |
allowAttachments | Enable file attach / drop. Default false. |
allowMic / allowSpeech | Enable microphone input. Default false. |
allowSpeechFallback | Allow backend Whisper when Web Speech is unavailable. Default false. |
placeholder | Composer placeholder. |
initialPrompt | Optional prompt submitted once on mount. |
height | Fixed height in px. When omitted, the chat fills its parent (h-full). |
className | Extra classes on the outer shell. |
classNames | Per-slot class overrides for the upper chrome (see below). |
When a tenant iris.Topic row exists for topic, that row’s welcomeMessage and suggestions are the sole source — empty means show nothing (page-level props are ignored). Props remain a fallback for built-in topics and admin embeds with no topic row.
Basic example
1<PageBuilderIrisChat
2 topic="runtime-assistant"
3 title="Invoice assistant"
4 namespace="objects.Invoice"
5 welcomeMessage="Ask about invoices on this page."
6 suggestions={["Summarise overdue invoices", "Explain this chart"]}
7 promptContext="The page is used by finance operators reviewing invoice health."
8 allowAttachments
9 height={520}
10/>Styling the upper section (classNames)
Use classNames to restyle the header, welcome block, and suggestion chips without forking the widget. Each value is appended to that slot’s default classes via clsx. The composer is not part of this API.
| Slot | Targets |
|---|---|
root | Outer shell (same surface as top-level className) |
header | Title + topic row |
headerIcon | Sparkles icon circle |
title | Header title text |
subtitle | Topic / model line under the title |
messages | Scrollable message list |
welcome | Welcome + suggestions wrapper |
welcomeMessage | Welcome paragraph |
suggestions | Suggestion chip row |
suggestion | Individual suggestion button |
1<PageBuilderIrisChat
2 topic="generic"
3 title="Generic"
4 welcomeMessage="Hi! Ask me anything."
5 suggestions={["What can you help with?", "Summarise this page"]}
6 allowAttachments
7 allowSpeech
8 allowModelSelect
9 classNames={{
10 header: "px-0",
11 title: "text-base font-semibold",
12 welcome: "rounded-xl bg-zinc-50 p-4",
13 welcomeMessage: "text-zinc-800",
14 suggestions: "gap-1.5",
15 suggestion: "rounded-full border-zinc-300 text-xs",
16 }}
17/>Attachments use the same multipart JQL upload path described in /developer/forms-uploads.
PageBuilderReport
PageBuilderReport discovers or pins report definitions and lets the user download them from a page. It can use table scope, record scope, a fixed reportId, a recordId, runtime filters, and display variants.
1<PageBuilderReport
2 namespace="objects.Invoice"
3 scope="table"
4 filter={{ status: "approved" }}
5 variant="dropdown"
6 title="Invoice exports"
7/>Use scope="record" on record pages so single-record reports can use useRecordContext() automatically. For report concepts, see /guides/reports; for runtime code, see /developer/runtime-overview.