Agent Elements

GenericTool

Render a simple tool row for custom tools. Provide title/subtitle and control loading with isPending. icon lets you pass a custom icon component.

Custom toolPreview
Getting Started
$pnpm dlx shadcn@latest add https://agent-elements.21st.dev/r/generic-tool.json
Examples
Completed
Custom toolPreview
Pending
Fetching recordsdb.orders
Compatibility flag
Write failedpermissions
Source

Copy and paste the following code into your project, or run the install command above to pull it in automatically.

components/tools/generic-tool.tsx
import React, { memo } from "react";
import type { TimelineStep, StepState } from "../../types/timeline";
import { useToolComplete } from "../../hooks/use-tool-complete";
import { ToolRowBase } from "./tool-row-base";

export type GenericToolRowProps = {
  step: Extract<TimelineStep, { type: "tool-call" }>;
  state: StepState;
  onComplete: () => void;
};

export function GenericToolRow({
  step,
  state,
  onComplete,
}: GenericToolRowProps) {
  useToolComplete(state === "animating", step.duration, onComplete);
  const isPending = state === "animating";

  return (
    <ToolRowBase
      shimmerLabel={step.toolName}
      completeLabel={step.toolName}
      isAnimating={isPending}
      detail={step.toolDetail}
    />
  );
}

export type GenericToolProps = {
  icon?: React.ComponentType<{ className?: string }>;
  title: string;
  subtitle?: string;
  isPending: boolean;
  isError?: boolean;
};

export const GenericTool = memo(function GenericTool({
  icon,
  title,
  subtitle,
  isPending,
}: GenericToolProps) {
  const Icon = icon;

  return (
    <ToolRowBase
      icon={
        Icon ? (
          <Icon className="w-full h-full shrink-0 text-muted-foreground" />
        ) : undefined
      }
      shimmerLabel={title}
      completeLabel={title}
      isAnimating={isPending}
      detail={subtitle}
    />
  );
});
Also installs:
API reference
Prop
Type
Required
icon
React.ComponentType<{ className?: string }>
No
title
string
Yes
subtitle
string
No
isPending
boolean
Yes
isError
boolean
No