Claude Code

Claude Code, via a mod. The a2ui-claude-code plugin draws these atoms as native terminal panes inside Claude Code: /a2ui payload.json, payloads from the a2uicatalog MCP server, animated progress bars for scripts (a2ui-progress build 42) and a long-job dashboard. Atoms this surface does not draw yet show a placeholder.

Install from the repository: claude --plugin-dir a2ui/claude-code-surface · source and README

11 catalog atoms also render on this surface

Body

prose paragraph block

Live preview

This is a body paragraph. It supports bold, italic, and inline code via lightweight markdown.

Heading

H2 section title

Live preview

Section Heading

Subheading

H3 subsection title

Live preview

Subheading text

Code

syntax-highlighted fenced code block

Live preview
{
  "type": "stat_card",
  "value": "1B+",
  "label": "daily executions"
}
Callout

coloured tip info warning or danger highlight box

Live preview
ℹ️
Steps

numbered step-by-step instruction sequence

Live preview
    Table

    data table with header row on mobile

    Live preview
    Example fields
    FieldTypeRequired
    valuestringyes
    labelstringyes
    trendstringno
    Progress Bar

    labelled horizontal progress bar with percentage

    Live preview
    Progress Bar75%
    Key Takeaways

    highlighted summary of main conclusions and critical takeaways

    Live preview
    🔑 Key takeaways
    • First key point
    • Second key point
    • Third key point
    Metric Row

    horizontal metric strip — value, label, prefix/suffix, trend up/down

    Live preview
    $1.2M↑
    Revenue
    42K↑
    Users
    Badge

    inline badge pill

    Live preview
    New