Tool Call

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

Installation

npx sdaia-ui@latest add tool-call-card

Usage

import { ToolCallCard } from "sdaia-ui"

1<ToolCallCard
2  variant="brand"
3  name="search_web"
4  subtitle="Search tools server · MCP"
5  request={{
6    label: "Arguments",
7    lines: ['query: "SDAIA data strategy 2030"', "locale: ar-SA · limit: 12"],
8  }}
9  response={{
10    label: "Response",
11    lines: ["12 trusted sources found", "top relevance: 94%"],
12  }}
13/>

Examples

Brand

Brand-tinted surface with a brand border — for a call worth highlighting.

Loading demo: tool-call-card-brand

Neutral

A raised surface with a default border — the quiet default.

Loading demo: tool-call-card-neutral

Outline

A transparent surface with a default border.

Loading demo: tool-call-card-outline

API Reference

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