A2UI Components Reference

Chat-in-Bio uses the A2UI v0.8 protocol to render rich UI inline in the chat. Components are built server-side in Python and rendered client-side with Lit.

Component format

Every component follows this structure:

{
  "id": "unique-node-id",
  "component": {
    "ComponentType": { ...props }
  }
}

Available components

Text

Display text content with optional styling.

from chatinbio.a2ui.components import text

text("t1", "Hello World", variant="h2")

Prop	Type	Description
text	string	The text content
variant	string	"h1", "h2", "h3", "body", "caption"

Button

Interactive button with an action.

from chatinbio.a2ui.components import button

button("b1", "RSVP Now", action="rsvp", context={"event_id": "123"})

Prop	Type	Description
label	string	Button text
action	string	Action identifier sent back as userAction
context	object	Arbitrary data attached to the action

TextField

Text input field.

from chatinbio.a2ui.components import text_field

text_field("tf1", placeholder="Enter your email", label="Email")

Prop	Type	Description
placeholder	string	Placeholder text
label	string	Field label

Card

Container with visual grouping (elevation/border).

from chatinbio.a2ui.components import card

card("c1", children=["t1", "b1"])

Prop	Type	Description
children	string[]	Child node IDs

Row

Horizontal layout container.

from chatinbio.a2ui.components import row

row("r1", children=["b1", "b2"])

Column

Vertical layout container.

from chatinbio.a2ui.components import column

column("col1", children=["t1", "t2", "b1"])

List

List container for repeated items.

from chatinbio.a2ui.components import list_component

list_component("l1", children=["card1", "card2"])

Image

Display an image.

from chatinbio.a2ui.components import image

image("img1", "https://example.com/photo.jpg", alt="Profile photo")

Prop	Type	Description
src	string	Image URL
alt	string	Alt text

Icon

Material icon.

from chatinbio.a2ui.components import icon

icon("i1", "calendar_today")

CheckBox

from chatinbio.a2ui.components import checkbox

checkbox("cb1", label="I agree", checked=False)

DateTimeInput

Date and time picker.

from chatinbio.a2ui.components import datetime_input

datetime_input("dt1", label="Select date")

ChoicePicker

Selection from options.

from chatinbio.a2ui.components import choice_picker

choice_picker("cp1", options=["Option A", "Option B"])

Modal

Overlay dialog.

from chatinbio.a2ui.components import modal

modal("m1", child="content-col")

Tabs

Tabbed content.

from chatinbio.a2ui.components import tabs

tabs("tabs1", labels=["Tab 1", "Tab 2"], children=["panel1", "panel2"])

Divider

Horizontal separator.

from chatinbio.a2ui.components import divider

divider("d1")

Builder API

Use A2UIBuilder for fluent construction:

from chatinbio.a2ui.builder import A2UIBuilder

builder = A2UIBuilder("my-surface")
builder.text("t1", "Available Events", variant="h2")
builder.button("b1", "RSVP", action="rsvp", context={"id": "123"})
builder.column("col1", children=["t1", "b1"])

messages = builder.to_messages(root_id="col1")
# Returns: [surfaceUpdate, beginRendering]

SurfaceManager

In agent tools, use SurfaceManager (from ctx.deps) to create builders:

async def my_tool(ctx: RunContext[ChatDeps]) -> str:
    builder = ctx.deps.surface_manager.create_builder()
    builder.text("t1", "Hello from tool")
    builder.column("root", children=["t1"])
    ctx.deps.surface_manager.set_root(builder.surface_id, "root")
    return "Displayed a greeting"