# ToolCallCard

Source: https://lumeo.nativ.sh/components/tool-call-card

# ToolCallCard

AI tool-invocation card showing call and result.

## When to Use

-   Display tool calls and their results inside an AI chat interface.
-   Show the status lifecycle — pending, running, success, or error — as the tool executes.
-   Use `DefaultOpen` to pre-expand cards for debugging or first-time viewing.

Preview Code

Status Variants

search\_web pending

Input

```
{"query": "latest Blazor news"}
```

read\_file

running

Input

```
{"path": "/src/app.razor"}
```

execute\_code success342ms

Input

```
{"language": "csharp", "code": "Console.WriteLine(\"Hello\");"}
```

Output

```
Hello
```

fetch\_url error5s

Input

```
{"url": "https://example.com/api/data"}
```

Error

```
Connection timeout after 5000ms
```

Copy Code

Preview Code

Expanded by Default

analyze\_sentiment success128ms

Input

```
{"text": "Lumeo makes Blazor development a joy!"}
```

Output

```
{"sentiment": "positive", "score": 0.96}
```

Copy Code

Preview Code

Multiple Tool Calls

list\_files success18ms

Input

```
{"directory": "/src"}
```

Output

```
Program.cs
App.razor
_Imports.razor
```

read\_file success24ms

Input

```
{"path": "/src/Program.cs"}
```

Output

```
var builder = WebApplication.CreateBuilder(args);
// ...
```

write\_file

running

Input

```
{"path": "/src/NewComponent.razor", "content": "..."}
```

Copy Code

## API Reference

### ToolCallCard

Property

Type

Default

Description

ToolName

string

""

The tool function name displayed in the summary row (e.g. `search_web`).

Status

ToolCallStatus

Pending

Current execution status. Values: `Pending`, `Running`, `Success`, `Error`. Controls color and icon.

Input

string?

null

Tool input parameters, typically a JSON string. Rendered in a code block when expanded.

Output

string?

null

Tool result/output rendered in a code block when expanded (shown only on Success).

ErrorMessage

string?

null

Error details rendered in a destructive-colored code block when `Status` is `Error`.

DurationMs

long?

null

Execution duration in milliseconds. Rendered as `342ms` or `1.4s` in the summary.

DefaultOpen

bool

false

Expand the card body on initial render.

Class

string?

null

Additional CSS classes merged onto the card root.

## Related Components

-   [ReasoningDisplay](/components/reasoning-display) — Collapsible chain-of-thought block for AI reasoning traces.
-   [AgentMessageList](/components/agent-message-list) — Chat message stream for AI agents with role-based styling.
-   [StreamingText](/components/streaming-text) — Token-by-token streaming text renderer for AI responses.