ToolCallCard
AI tool-invocation card showing call and result.
Installation
dotnet add package Lumeo
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <ToolCallCard />
Tested
Tier 3 · A11y + behavior
all components → Render Behavior A11y Keyboard Scale E2E
22 tests across 3 files. Auto-generated from the test suite.
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
DefaultOpento pre-expand cards for debugging or first-time viewing.
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
Hellofetch_url error5s
Input
{"url": "https://example.com/api/data"}Error
Connection timeout after 5000msanalyze_sentiment success128ms
Input
{"text": "Lumeo makes Blazor development a joy!"}Output
{"sentiment": "positive", "score": 0.96}Switch status to see the icon, color, and available sections change.
run_query pending
Input
{"sql": "SELECT * FROM users LIMIT 10"}list_files success18ms
Input
{"directory": "/src"}Output
Program.cs
App.razor
_Imports.razorread_file success24ms
Input
{"path": "/src/Program.cs"}Output
var builder = WebApplication.CreateBuilder(args);
// ...write_file running
Input
{"path": "/src/NewComponent.razor", "content": "..."}API Reference
ToolCallCard
| Prop | Type | Default | Description |
|---|---|---|---|
| ToolName | string | string.Empty | The tool's name, shown truncated in monospace in the collapsed summary row. |
| Status | ToolCallStatus | ToolCallStatus.Pending | The call's lifecycle state, driving the status dot color, chip text, and (for Error) which of Output/ErrorMessage is shown. Default Pending. |
| Input | string? | — | The tool call's input, shown (with a copy button) in a monospace block when the card is expanded. |
| Output | string? | — | The tool call's output, shown (with a copy button) when Status is not Error (or ErrorMessage is empty). |
| ErrorMessage | string? | — | The error message, shown (with a copy button, in destructive styling) instead of Output when Status is Error. |
| DurationMs | long? | — | Elapsed time in milliseconds, formatted and shown at the end of the summary row (e.g. "420ms" or "1.2s"). Omitted when null. |
| DefaultOpen | bool | false | Whether the card's details section is expanded on first render (the native <details open> attribute). |
| Class | string? | — | Additional CSS classes merged onto the card's <details> element. |
| AdditionalAttributes | Dictionary<string, object>? | — | Captures any unmatched attributes and applies them to the card's <details> element. |
Related Components
- ReasoningDisplay — Collapsible chain-of-thought block for AI reasoning traces.
- StreamingText — Token-by-token streaming text renderer for AI responses.