Components

Every component a stream may use, with its arguments and the values each prop accepts. This page is section 6 of the specification, generated from the schema.

A component has exactly the props listed; any other prop is rejected ([5.9]). "Values" lists what each prop accepts; $state means a $key reference ([5.11]), and id means a component id. The styling of every value (what "muted" or "primary" looks like) belongs to the renderer. In each signature, positional props are written bare in their order, props written name=… can only be given by name, and props in [brackets] are optional: Image(asset, alt=…, [ratio=…]) is written Image("cabin-pines", alt="A cabin", ratio="16:9").

Stack

Stack(children, [direction=…], [gap=…], [align=…])

Prop	Position	Required	Values
children	1	yes	[id, …] (max 200)
direction	named only	no	"row" | "column"
gap	named only	no	"none" | "sm" | "md" | "lg"
align	named only	no	"start" | "center" | "end" | "stretch"

Card

Card(children, [title=…])

Prop	Position	Required	Values
children	1	yes	[id, …] (max 200)
title	named only	no	text (max 2000) | $state

Heading

Heading(text, [level=…])

Prop	Position	Required	Values
text	1	yes	text (max 2000) | $state
level	named only	no	1 | 2 | 3

Text

Text(text, [format=…], [currency=…], [tone=…])

Prop	Position	Required	Values
text	1	yes	text (max 2000) | number | $state
format	named only	no	"plain" | "currency" | "date"
currency	named only	no	3-letter currency code
tone	named only	no	"default" | "muted" | "strong"

Input

Input(value, label=…, [placeholder=…], [lines=…], [required=…], [format=…], [minLength=…], [maxLength=…])

Prop	Position	Required	Values
value	1	yes	$state
label	named only	yes	text (min 1, max 200)
placeholder	named only	no	text (max 200)
lines	named only	no	whole number 1-10
required	named only	no	true | false
format	named only	no	"email" | "number" | "phone" | "url"
minLength	named only	no	whole number 1-2000
maxLength	named only	no	whole number 1-2000

Button

Button(label, [action=…], [variant=…])

Prop	Position	Required	Values
label	1	yes	text (max 2000) | $state
action	named only	no	text (max 64, matching /^[a-z][A-Za-z0-9_]*$/)
variant	named only	no	"primary" | "secondary" | "danger"

Divider

Divider()

No props.

Badge

Badge(text, [tone=…])

Prop	Position	Required	Values
text	1	yes	text (max 2000) | $state
tone	named only	no	"neutral" | "success" | "warning" | "danger"

Skeleton

Skeleton([lines=…])

Prop	Position	Required	Values
lines	named only	no	whole number 1-6

Image

Image(asset, alt=…, [ratio=…])

Prop	Position	Required	Values
asset	1	yes	image name (max 64)
alt	named only	yes	text (min 1, max 300)
ratio	named only	no	"1:1" | "4:3" | "3:2" | "16:9"

Rating

Rating(value, [max=…])

Prop	Position	Required	Values
value	1	yes	number | $state
max	named only	no	whole number 1-10

DateInput

DateInput(value, label=…, [min=…], [max=…], [required=…])

Prop	Position	Required	Values
value	1	yes	$state
label	named only	yes	text (min 1, max 200)
min	named only	no	date "YYYY-MM-DD"
max	named only	no	date "YYYY-MM-DD"
required	named only	no	true | false

List

List(children)

Prop	Position	Required	Values
children	1	yes	[id, …] (max 200)

ListItem

ListItem(title, [detail=…], [trailing=…], [image=…])

Prop	Position	Required	Values
title	1	yes	text (max 2000) | $state
detail	named only	no	text (max 2000) | $state
trailing	named only	no	text (max 2000) | $state
image	named only	no	image name (max 64)

Message

Message(text, from=…)

Prop	Position	Required	Values
text	1	yes	text (max 2000) | $state
from	named only	yes	"user" | "assistant"

Select

Select(value, label=…, options=…, [placeholder=…], [required=…])

Prop	Position	Required	Values
value	1	yes	$state
label	named only	yes	text (min 1, max 200)
options	named only	yes	[text (min 1, max 200), …] (max 50)
placeholder	named only	no	text (max 200)
required	named only	no	true | false

Switch

Switch(value, label=…, [required=…])

Prop	Position	Required	Values
value	1	yes	$state
label	named only	yes	text (min 1, max 200)
required	named only	no	true | false

Table

Table(columns, children)

Prop	Position	Required	Values
columns	1	yes	[text (min 1, max 200), …] (max 8)
children	2	yes	[id, …] (max 200)

TableRow

TableRow(cells)

Prop	Position	Required	Values
cells	1	yes	[text (max 2000) | number, …] (max 8)

Tabs

Tabs(children)

Prop	Position	Required	Values
children	1	yes	[id, …] (max 200)

Tab

Tab(label, children)

Prop	Position	Required	Values
label	1	yes	text (min 1, max 200)
children	2	yes	[id, …] (max 200)

Notice

Notice(text, [tone=…], [title=…])

Prop	Position	Required	Values
text	1	yes	text (max 2000) | $state
tone	named only	no	"info" | "success" | "warning" | "danger"
title	named only	no	text (max 2000) | $state

BarChart

BarChart(title, labels, children, [format=…], [currency=…])

Prop	Position	Required	Values
title	1	yes	text (min 1, max 200)
labels	2	yes	[text (min 1, max 60), …] (max 24)
children	3	yes	[id, …] (max 6)
format	named only	no	"number" | "currency" | "percent"
currency	named only	no	3-letter currency code

LineChart

LineChart(title, labels, children, [format=…], [currency=…])

Prop	Position	Required	Values
title	1	yes	text (min 1, max 200)
labels	2	yes	[text (min 1, max 60), …] (max 24)
children	3	yes	[id, …] (max 6)
format	named only	no	"number" | "currency" | "percent"
currency	named only	no	3-letter currency code

PieChart

PieChart(title, children, [format=…], [currency=…])

Prop	Position	Required	Values
title	1	yes	text (min 1, max 200)
children	2	yes	[id, …] (max 8)
format	named only	no	"number" | "currency" | "percent"
currency	named only	no	3-letter currency code

Series

Series(name, values)

Prop	Position	Required	Values
name	1	yes	text (min 1, max 200)
values	2	yes	[number, …] (max 24)

Slice

Slice(name, value)

Prop	Position	Required	Values
name	1	yes	text (min 1, max 200)
value	2	yes	number

McpMutation

McpMutation(target, tool=…, [params=…])

Prop	Position	Required	Values
target	1	yes	id of a Button with an action
tool	named only	yes	a tool name in the app's registry, matching /^[a-z][A-Za-z0-9_]*(\.[a-z][A-Za-z0-9_]*)+$/ (for example payments.confirm)
params	named only	no	{key: value or $state, …} ([5.16])

An McpMutation isn't displayed. It only approves one action for its Button.