React components for every tool your agent needs.

ai-tool-elements is a React component library for tool-related UI — render stateful tool calls at runtime, or build static tool cards, catalogs, and integration surfaces for providers like Composio, Apify, Scalekit, and more.

npm install ai-tool-elements

Every state, one prop

The states match AI SDK tool parts one-to-one, so part.state passes straight through — no mapping layer, no status enums of your own.

Static cards for everything else

ToolCard covers the rest of your surface — settings pages, integration pickers, connector galleries. All 1000+ catalog entries are typed named exports; search them below.

Your own tools use the same type

Anything that satisfies Toolrenders with the same cards — no registry required. Both cards are shadcn’s Card under the hood, so buttons, badges, and dialogs slot straight into their actions and footers.

settings — localhost:3000

Acme

A project-defined connector.

API keyRequired

tools.tstsx

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

export const Acme = {
  id: "acme",
  name: "Acme",
  description: "A project-defined connector.",
  fields: [{ name: "apiKey", label: "API key", required: true }],
} as const satisfies Tool;

<ToolCard tool={Acme} />