Renders tool call execution with arguments, state, and results.

Provides two rendering modes based on display configuration:

• Full mode: Shows tool name, state badge, JSON arguments, and results in expandable sections
• Minimal mode: Shows only tool name with subtle activity indicator for active executions
• Hidden mode: Returns null when both name and indicator are disabled

Supports custom renderers via the renderers prop, which maps tool names to React components. Custom renderers receive ToolCallRenderProps including display options for white-label customization.

The component respects display configuration from useDisplayConfig, allowing fine-grained control over which elements are visible (name, state, arguments, result, activity indicator).

State visualization uses color-coded badges: pending (yellow), executing (blue), awaiting-approval (orange), completed (green), failed (red).

Related types: ToolCallState, display config

Example

<ToolCallRenderer
  toolName="web_search"
  args={{ query: "weather" }}
  result={{ temperature: 72 }}
  state="completed"
  renderers={{
    web_search: CustomSearchRenderer
  }}
/>

function ToolCallRenderer(props: ToolCallRendererProps): React.ReactElement | null

Parameters

props