2 variants

Tool Call

What an agent does with its tools. A card for each call with a live timer and its input and output, and a permission prompt before anything that matters runs.

Tool call

One tool call with a status mark, a timer that counts while it runs, and the input and output folded underneath.

Input

{
  "query": "next.js 16 caching changes"
}

Output

[
  {
    "title": "Caching in Next.js",
    "url": "nextjs.org/docs/app/guides/caching"
  },
  {
    "title": "Next.js 16 release notes",
    "url": "nextjs.org/blog/next-16"
  }
]

Input

{
  "path": "app/page.tsx"
}

Output

export default function Page() {\n  return <Hero />;\n}

Input

{
  "command": "bun test"
}

usage.tsx

import { Globe } from "lucide-react";
import { ToolCall } from "@/components/registry/tool-call";

export function SearchStep() {
  return (
    <ToolCall
      name="search_web"
      icon={<Globe />}
      status="done"
      summary="Found 8 results"
      duration={1240}
      input={{ query: "next.js caching" }}
      output={results}
    />
  );
}

"use client";

import { Check, ChevronDown, X } from "lucide-react";
import { type ReactNode, useEffect, useId, useRef, useState } from "react";
import { cn } from "@/lib/utils";

export type ToolCallStatus = "running" | "done" | "error";

export interface ToolCallProps {
  /** The tool's name as the model called it: "search_web". */
  name: string;
  status: ToolCallStatus;

162 more lines ship with an easeUI Pro license.

Buy a license

Install

$ bunx --bun shadcn add @easeui-pro/tool-call

Tool approval

A permission prompt that shows exactly what will run, then folds down to a one line record of the answer.

Run a command in your terminalbash

I need to install the date library before I can finish the calendar view.

bun add date-fns@4

usage.tsx

import { ToolApproval } from "@/components/registry/tool-approval";

export function ConfirmCommand() {
  return (
    <ToolApproval
      title="Run a command in your terminal"
      name="bash"
      preview="bun add date-fns@4"
      onDecision={(decision) => respond(decision)}
    />
  );
}

"use client";

import { Check, ShieldAlert, X } from "lucide-react";
import { type ReactNode, useState } from "react";
import { cn } from "@/lib/utils";

export type ToolDecision = "allow" | "always" | "deny";

export interface ToolApprovalProps {
  /** What the agent wants to do, as a sentence: "Run a command in your terminal". */
  title: string;
  /** The tool's name as the model called it: "bash". */

126 more lines ship with an easeUI Pro license.

Buy a license

Install

$ bunx --bun shadcn add @easeui-pro/tool-approval