ToolCard: Render Any AI Tool as a Typed React Card

ToolCard is the primary rendering component in ai-tool-elements. It accepts a Tool object and renders a shadcn/ui Card containing the tool’s logo, name, description, and — when provided — a typed list of fields. Two optional slots, actions and footer, let you attach buttons, badges, metadata, or any other React content without touching the card layout.

Import

import { ToolCard } from "ai-tool-elements";

Basic usage

Pass any named catalog export directly to the tool prop. Remember to import the bundled stylesheet once at your app entry point or layout.

import { Slack, ToolCard } from "ai-tool-elements";
import "ai-tool-elements/styles.css";

export function SlackCard() {
  return <ToolCard tool={Slack} />;
}

Props

T extends Tool

required

The tool object to render. All display data — name, description, image, and fields — is read from this object. Accepts any value that satisfies the Tool type, including built-in catalog entries and custom tool definitions.

ReactNode

Rendered inside the CardAction slot in the top-right corner of the card header. Use this for buttons, badges, status indicators, or any interactive element you want aligned with the card title row.

ReactNode

Rendered inside CardFooter at the bottom of the card, separated from the content area by a top border. Use this for metadata, external links, timestamps, or connection status.

ComponentProps<'div'>

Any additional props are spread directly onto the underlying Card div. This includes className for custom Tailwind overrides, data-* attributes, aria-* attributes, and event handlers.

import { Gmail, ToolCard } from "ai-tool-elements";

export function GmailCardWithActions() {
  return (
    <ToolCard
      tool={Gmail}
      actions={<button>Connect</button>}
      footer={<span>Last synced: 2 minutes ago</span>}
    />
  );
}

Rendering tool fields

When tool.fields is provided, ToolCard automatically renders each field as a list item inside the card body. Each item displays the field’s label (falling back to name if no label is set), an optional description in muted text below it, and a Required or Optional badge aligned to the right.

import { ToolCard, type Tool } from "ai-tool-elements";

const GitHubTool: Tool = {
  id: "github",
  name: "GitHub",
  description: "Access repositories, issues, and pull requests.",
  fields: [
    { name: "token", label: "Personal Access Token", description: "OAuth token with repo scope.", required: true },
    { name: "org", label: "Organization", description: "Default GitHub org for operations.", required: false },
  ],
};

export function GitHubCard() {
  return <ToolCard tool={GitHubTool} />;
}

If tool.fields is absent or empty, the card content area is omitted entirely and the card renders only its header (and footer, if provided).

Rendering all catalog tools

toolCatalog is a typed readonly array of every built-in catalog entry. You can map over it to render the full catalog, or filter it to a subset before rendering.

import { ToolCard, toolCatalog } from "ai-tool-elements";

export function AllTools() {
  return (
    <div className="grid grid-cols-3 gap-4">
      {toolCatalog.map((tool) => (
        <ToolCard key={tool.id} tool={tool} />
      ))}
    </div>
  );
}

Logo rendering

tool.image is optional. When present, it is one of two shapes defined by the ToolImage union type:

{ type: "svg"; content: string } — the raw SVG string is encoded as a data:image/svg+xml data URL and used as the <img> src.
{ type: "url"; src: string } — the src value is used directly.

In both cases the image is rendered as a 40×40 px element (size-10) with rounded-md corners and object-contain scaling. The alt attribute is intentionally left empty because the tool name in CardTitle already labels the card. If tool.image is not set, no image element is rendered.

ToolCard is a generic component typed as ToolCard<T extends Tool>. If you define a custom subtype of Tool with additional fields, the tool prop will be narrowed to your subtype — giving you full autocomplete and compile-time safety on any extra properties your subtype carries.

Get Started

Components

Tool Catalog

Guides

ToolCard: Render Any AI Tool as a Typed React Card

Import

Basic usage

Props

With actions and footer

Rendering tool fields

Rendering all catalog tools

Logo rendering

​Import

​Basic usage

​Props

​With actions and footer

​Rendering tool fields

​Rendering all catalog tools

​Logo rendering

Import

Basic usage

Props

With actions and footer

Rendering tool fields

Rendering all catalog tools

Logo rendering