brand-ui — ToolResultCard

import { ToolResultCard } from "@elabs-ai/components-ai";

Install

npm install @elabs-ai/components-tokens @elabs-ai/components-ui @elabs-ai/components-ai

Skipping the @source line is the most common first failure: Tailwind does not scan node_modules, so every component renders unstyled. The one-time wiring

Prompt for your coding agent

Paste it into Claude Code, Cursor, Codex or any other coding agent. Text in [brackets] is yours to fill in.

Add the brand-ui ToolResultCard component (from @elabs-ai/components-ai) to this project.

1. Read https://elabs-ai.com/llms.txt first: it maps every package and the rules. If you can use MCP servers, connect https://elabs-ai.com/mcp and use its search, docs and tokens tools. If not, run the same lookups in the terminal: `npx -y @elabs-ai/components-cli search "<what you need>"` and `npx -y @elabs-ai/components-cli docs <Component>`.
2. Look ToolResultCard up before writing code: `npx -y @elabs-ai/components-cli docs ToolResultCard` prints its real props, variants, what it pairs with and what to avoid.
3. If @elabs-ai/components-ai is not installed yet: `pnpm add @elabs-ai/components-tokens @elabs-ai/components-ui @elabs-ai/components-ai` (or `npm install @elabs-ai/components-tokens @elabs-ai/components-ui @elabs-ai/components-ai`). If this is the first brand-ui package in the project, wire it once: import `@elabs-ai/components-tokens/styles.css` plus the `themes/light.css` and `themes/dark.css` stylesheets in the CSS entry, add one Tailwind `@source` line per installed @elabs-ai package (Tailwind does not scan node_modules, so without it everything renders unstyled), and wrap the app root in `ThemeProvider` from `@elabs-ai/components-tokens`.
4. Use it here: [the screen or file, and what it should show]
5. Rules: use only @elabs-ai/components-* components and the semantic tokens — no raw colours, no raw font sizes, no arbitrary Tailwind values. Look up each component's real props with the docs tool before you use it; never guess a prop.
6. Done means: the typecheck passes, `npx -y @elabs-ai/components-cli audit src --strict` reports nothing, and you have opened the app and looked at every screen you touched in the light and the dark theme.

Avoid

Reaching for it in a console transcript — a console renders the same moment through TerminalToolCall in @elabs-ai/components-terminal.
Adding a border to it — elevation IS the separation gesture here; a border on a raised fill is the redundant-border anti-pattern.
Using it for a step that merely ran — that is Tool (rail + inspect); this hosts the produced object.
Importing a chart/table package to render the payload inside it — it stays dependency-light; the consumer passes the node.
Putting the payload's own controls in actions — actions is scoped to the artifact as a whole (expand, download, open); a chart's flip/zoom belongs to the chart's own frame.

Works with

Used inside

Message

Pairs with

Examples

2 live examples

Expandable Table

The whole point of the `actions` slot, and of `ExpandDialog` living in `@elabs-ai/components-ui`: a produced table expands through the SAME surface a produced chart does, so "make this bigger" means one thing across the whole chat. Never hand-roll a lightbox or an in-place breakout here — that is how a chat ends up teaching four different meanings for one button. Note what the context pane holds: the table's SHAPE (row count, columns and their declared formats), not min/max/avg. A model-emitted table's numerics may already be formatted strings, so statistics over them are wrong more often than right — a chart's `DefaultDetail` can compute them, this cannot.

API

`ToolResultCard`

Prop	Type	Description
`title`	`ReactNode`	Headline of the produced artifact (`text-subtitle`).
`summary`	`ReactNode`	The business summary line under the title (`text-meta`), not JSON.
`status`	`Status`	Canonical execution status (closed enum); renders a `StatusBadge`.
`actions`	`ReactNode`	Controls scoped to the whole artifact — expand, download, open. Rendered in the header row between the title and the status. A `ReactNode` slot, not a `role="toolbar"`: that role promises roving-tabindex traversal, which this row does not implement. Keep the payload's own controls out of here (see the note at the top of this file).
`details`	`ReactNode`	The technical view, kept behind disclosure — pass a default-collapsed `<ToolDetails>` holding `ToolInput`/`ToolOutput` (research 10 §B.5).

Also accepts: Omit<HTMLAttributes<HTMLDivElement>, "title">