AI Components/ToolCallViewer

ToolCallViewer

Collapsible UI for displaying AI tool calls — shows the tool name, arguments, result, and status. Great for AI playground or agent transparency UIs.

import { ToolCallViewer } from "@animui/ui"

Basic

donesearch_web

{
  "results": [
    {
      "title": "Steal Shadow",
      "url": "github.com/..."
    }
  ]
}

Multiple tool calls

Map over tool calls from your AI SDK and render each as a ToolCallViewer.

doneread_file

{
  "content": "import React from 'react'…"
}

runningsearch_web

errorwrite_file

Streaming integration

streaming-example.tsx

import { ToolCallViewer } from "@animui/ui";

export default function StreamingExample() {
  const [calls] = useToolCalls(); // from your AI SDK

  return (
    <div className="space-y-2">
      {calls.map((call) => (
        <ToolCallViewer
          key={call.id}
          name={call.name}
          args={call.args}
          result={call.result}
          status={call.status}  // "pending" | "running" | "done" | "error"
        />
      ))}
    </div>
  );
}

Props

Prop	Type	Default	Description
`name`	`string`	—	Name of the tool being called (displayed in the header).
`args`	`Record<string, unknown>`	—	Arguments passed to the tool, rendered as formatted JSON.
`result`	`unknown`	—	The tool's return value, rendered as formatted JSON.
`status`	`"pending" \| "running" \| "done" \| "error"`	`"pending"`	Current execution state of the tool call.
`className`	`string`	—	Additional classes for the wrapper.