Agent Execution Trace
Live Subagent
Tool Calls
Arguments
{
"query": "user_preferences",
"limit": 5
}Output Payload
{"found": 3, "records": ["dark_mode", "notifications_enabled", "compact_layout"]}Installation
npx kinetic-ui-cli@latest add Props
The component accepts an array of step objects containing status, arguments, and JSON output logs.
Usage Guide
1. Import the Component
Import the component into your React or Next.js page:
import { AgentToolInspector } from "@/components/creative/agent-tool-inspector";
2. Implementation Example
Render the component and customize its behavior by passing props:
import { AgentToolInspector } from "@/components/creative/agent-tool-inspector";
export default function Example() {
return (
<div className="w-full flex items-center justify-center p-8">
<AgentToolInspector
steps{/* value */}
title="example"
/>
</div>
);
}