A full tool call showing the request the assistant made and the result it got back — an identity header over the Arguments and Response panels.
Loading demo: tool-call-card-real-world
npx sdaia-ui@latest add tool-call-card
import { ToolCallCard } from "sdaia-ui"1<ToolCallCard2variant="brand"3name="search_web"4subtitle="Search tools server · MCP"5request={{6label: "Arguments",7lines: ['query: "SDAIA data strategy 2030"', "locale: ar-SA · limit: 12"],8}}9response={{10label: "Response",11lines: ["12 trusted sources found", "top relevance: 94%"],12}}13/>
Brand-tinted surface with a brand border — for a call worth highlighting.
Loading demo: tool-call-card-brand
A raised surface with a default border — the quiet default.
Loading demo: tool-call-card-neutral
A transparent surface with a default border.
Loading demo: tool-call-card-outline
Prop | Type | Default | Required |
|---|---|---|---|
variant | 'brand' | 'neutral' | 'outline' | 'neutral' | optional |
name | ReactNode | — | required |
subtitle | ReactNode | — | optional |
request | ToolCallPanel | — | optional |
response | ToolCallPanel | — | optional |
icon | string | wrench02Stroke | optional |
showIcon | boolean | true | optional |
headerEnd | ReactNode | — | optional |
dir | 'ltr' | 'rtl' | 'ltr' | optional |
as | ElementType | 'div' | optional |