Screens built from blocks

App UI blocks · Blocks

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

Open on App UI

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.

Block	Category	What it is for	Actions	Examples	Actions
columns	layout	Puts 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	Open
card	layout	Groups a few blocks under one title and an optional line of description, such as a ticket at a glance and its next step.	—	3	Open
heading	content	Names a section of a screen in a few words, so a person scanning the page finds it.	—	3	Open
text	content	A paragraph of plain text that explains what a person is looking at, such as what "Needs a person" means.	—	3	Open
markdown	content	Formatted text with headings, lists, links, bold and code, written inline or read from a row, such as a ticket's body.	—	3	Open
kpis	data	One to eight figures side by side, each with a label, such as open tickets, agents working and median first reply.	—	3	Open
chart	data	Draws 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	Open
grid	data	Rows a person searches, filters, sorts, selects and acts on, such as every open ticket and who is working on it.	set, delete, export	3	Open
timeline	data	What happened, in time order, such as everything an agent did on a ticket, with who did it and how it went.	—	3	Open
list	data	A short list of lines, each a title with an optional subtitle and link, read from a source or written as items.	—	3	Open
callout	content	A message a person must notice, such as a warning that an agent's hand-offs tripled, with an optional link to act on it.	open	3	Open
progress	data	One figure as a bar toward a limit, such as the yearly cap used or how much of an agent's budget is gone.	—	3	Open
form	input	Fields 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, update	3	Open
button	action	One link that starts the next step, to a screen of this app or a URL, such as Build an agent.	open	3	Open
approval	action	One card per row waiting for a decision, with Approve and Reject, such as an order an agent may not place on its own.	set	3	Open