🛠 How to Create a New Tool UI Component

UI elements are incredibly important to the look and feel of your agent tool calls. The UI component below showcases a loading state until it later consumes a title and description and displays it.

Navigate to packages/custom/ui.
Create a new file, for example: MyNewTool.tsx.

Start with this boilerplate:


import { TToolUI } from "@agentpress/lib/types";
import { Loader2, CheckCircle2 } from "lucide-react";
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from "@agentpress/ui/ui";
 
export const MyNewTool: TToolUI = ({ toolInvocation }) => {
  const toolResult = toolInvocation?.result as any;
 
  if (!toolResult) {
    return (
      <Card className="border-2 border-border rounded-xl">
        <CardHeader className="pb-2">
          <div className="flex items-center gap-3">
            <div className="flex items-center justify-center w-8 h-8 rounded-full bg-blue-100">
              <Loader2 className="w-5 h-5 text-blue-600 animate-spin" />
            </div>
            <CardTitle className="text-base font-medium text-slate-700">
              Loading...
            </CardTitle>
          </div>
        </CardHeader>
      </Card>
    );
  }
 
  const { title, description } = toolResult;
 
  return (
    <Card className="relative rounded-xl border border-border">
      <CardHeader className="pb-4">
        <div className="flex items-center gap-3">
          <div className="flex items-center justify-center w-8 h-8 rounded-full bg-emerald-100">
            <CheckCircle2 className="w-5 h-5 text-emerald-600" />
          </div>
          <CardTitle className="text-base font-medium text-foreground">
            {title}
          </CardTitle>
        </div>
      </CardHeader>
      <CardContent className="pb-4">
        <p className="text-foreground/70 whitespace-pre-wrap text-sm leading-relaxed">
          {description}
        </p>
      </CardContent>
    </Card>
  );
};