AgentPress Docs

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>
  );
};

How to Create a New Tool UI Component