tool result card — agent-ui component (HTML/CSS)

Installation

tokens.css + tool-result-card.css + button.css

head.html

<link rel="stylesheet" href="tokens.css">
<link rel="stylesheet" href="components/tool-result-card/tool-result-card.css">

Note

Preview

Note

Host-escaped note body.

Code

tool-result-card.html

<article class="au-notepad au-tool-result-card" data-au-component="tool-result-card" data-au-variant="note"><div class="au-notepad__bar"><h3 class="au-notepad__title">Note</h3></div><div class="au-notepad__body">Host-escaped note body.</div></article>

Weather

Preview

Tokyo

22°

Partly cloudy

Code

tool-result-card.html

<div class="au-weather au-tool-result-card" data-au-component="tool-result-card" data-au-variant="weather"><div class="au-weather__loc">Tokyo</div><div class="au-weather__temp">22°</div><div class="au-weather__cond">Partly cloudy</div></div>

Component contract

Install: tokens.css · tool-result-card.css · button.css
States: Host-owned via data-au-state and documented variants
Host: content, state transitions, and execution behind actions

For agents

tool-result-card.contract

# agent-ui / tool-result-card
component: tool-result-card
selector: .au-tool-result-card
data_au_component: tool-result-card
purpose: Typed tool result cards: note | weather (absorbs notepad, weather).

install:
  - tokens.css
  - tool-result-card.css
  - button.css when rendering actions

states: Host-owned via data-au-state and documented variants.
css_variables: Uses shared semantic tokens.
events: native form, focus, and click only — no custom events or runtime required
no_javascript: Markup and native controls remain usable without script.
host_owns: The host owns content, state transitions, and execution behind actions.
accessibility: Prefer labelled regions and text status, not color alone.
security: Escape untrusted model and tool text before insertion.

rules:
  - Host owns execution, authorization, persistence, validation, and state transitions.
  - Components render host-provided state; they never execute tools or imply approval.
  - Escape untrusted model output, tool args, and tool output before insertion.
  - Use only documented data-au-* attributes and data-au-state values.
  - Keep the no-JS path usable. Do not add React, Tailwind, bundlers, or remote assets.
source: components/tool-result-card/tool-result-card.{html,css} + README.md + fixture.html