Tools

ToolExecutionLog

Stacked timeline of tool invocations with status, args, result, and duration.

Preview

23:14:23

23:14:07

fetch_url · text

Nyxis is a React component library for AI products. 70+ components.

23:13:51
execute_code · error
Sandbox unreachable: timeout after 5000ms

23:13:33

list_models · json

{
  "models": [
    "claude-sonnet-4-5",
    "gpt-4o",
    "gemini-1.5-pro"
  ]
}

Installation

pnpm add nyxis-ui

Usage

import { ToolExecutionLog, type ToolExecution } from 'nyxis-ui';

<ToolExecutionLog executions={executions} limit={5} showResults />;

Composition

Each row composes <ToolCall> (the header) and optionally <ToolResult> (the inline output). When limit is set, the rest collapse with a +N more footer — useful for sidebars and side-rail inspectors.

Sourcing executions

The shape is intentionally narrow:

interface ToolExecution {
  id: string;
  name: string;
  args?: Record<string, unknown>;
  result?: unknown;
  error?: string;
  status: 'pending' | 'running' | 'completed' | 'errored';
  startedAt: Date | string;
  durationMs?: number;
}

You can derive these from useChat().toolCalls plus your own dispatch wall-clock, or from a server-side log if you persist tool calls.