Skip to content

Blocks

Every block an App UI screen is made of, with its contract

Each block says what it is for and when to use another, the props it takes, the data it reads, the actions it offers and how it looks in each state. Agents read the same contract at /llms.txt.

Filters
Columns
15 rows
BlockCategoryWhat it is forActionsExamples
columnslayoutPuts two to four blocks side by side in equal shares, such as a chart and the events that explain it; they stack on a narrow screen.—3
cardlayoutGroups a few blocks under one title and an optional line of description, such as a ticket at a glance and its next step.—3
headingcontentNames a section of a screen in a few words, so a person scanning the page finds it.—3
textcontentA paragraph of plain text that explains what a person is looking at, such as what "Needs a person" means.—3
markdowncontentFormatted text with headings, lists, links, bold and code, written inline or read from a row, such as a ticket's body.—3
kpisdataOne to eight figures side by side, each with a label, such as open tickets, agents working and median first reply.—3
chartdataDraws a source's rows as an area, line, bar, donut or spark chart, such as tickets closed per hour or where the money goes.—3
griddataRows a person searches, filters, sorts, selects and acts on, such as every open ticket and who is working on it.set, delete, export3
timelinedataWhat happened, in time order, such as everything an agent did on a ticket, with who did it and how it went.—3
listdataA short list of lines, each a title with an optional subtitle and link, read from a source or written as items.—3
calloutcontentA message a person must notice, such as a warning that an agent's hand-offs tripled, with an optional link to act on it.open3
progressdataOne figure as a bar toward a limit, such as the yearly cap used or how much of an agent's budget is gone.—3
forminputFields a person fills in to add a row to a table or change one, such as a new agent's rules or a ticket's status.insert, update3
buttonactionOne link that starts the next step, to a screen of this app or a URL, such as Build an agent.open3
approvalactionOne card per row waiting for a decision, with Approve and Reject, such as an order an agent may not place on its own.set3

Search

esc

Go to