Documentation Index
Fetch the complete documentation index at: https://mintlify.com/omavashia2005/ai-tool-elements/llms.txt
Use this file to discover all available pages before exploring further.
ai-tool-elements is a composable React component library that gives you ready-to-render UI cards for AI agent tools and connectors. Instead of building your own card components every time you integrate a new service, you get a consistent, accessible ToolCard component, a catalog of 1,000+ pre-built integrations, and a Tool type that lets you define your own connectors with zero configuration.
Key Features
ToolCard Component
A polished card built on shadcn/ui primitives —
Card, CardHeader, CardTitle, CardDescription, CardContent, CardAction, and CardFooter — that renders any Tool object with an image, description, and typed fields.1,000+ Pre-Built Connectors
The package ships a typed catalog of over 1,000 integrations, each available as a named export (
Gmail, Notion, Stripe, and more) and included in the toolCatalog array for bulk rendering.Tree-Shakeable SVG Logos
Connector logos are sourced from
@thesvg/icons using exact subpath imports. Bundlers only include the icons for the connectors you actually import.Zero Vendor Lock-In
Cards and field definitions are entirely backend-agnostic. No connector service, no global registry, and no third-party account is required to render any tool card.
Full TypeScript Types
Public types —
Tool, ToolCatalogItem, ToolField, ToolImage, and ToolCardProps — ship with the package. No separate @types/ installation is needed.Custom Tools via Tool Type
Define your own connector as a plain object literal using
as const satisfies Tool. Pass it directly to ToolCard — no registration step, no schema compiler, no boilerplate.How It Works
The library is built around two pieces: theTool type and the ToolCard component.
A Tool is a plain, readonly TypeScript object that describes a connector. The only required fields are id and name. Everything else — description, image, and fields — is optional. An image can be either an inline SVG string ({ type: "svg", content: "..." }) or a hosted URL ({ type: "url", src: "https://..." }). Each entry in fields carries a name, optional label, optional description, and a required flag; ToolCard renders them automatically as a labelled list with Required / Optional badges.
ToolCard is a generic React component that accepts any object that extends Tool as its tool prop, along with optional actions and footer slots for custom content. It delegates layout and styling to shadcn/ui Card primitives and applies Tailwind CSS classes from the bundled stylesheet.
Every connector in the package catalog is both a typed named export and an entry in the exported toolCatalog array, so you can render a single tool, a hand-picked set, or the entire catalog from the same import.
Next Steps
Quickstart
Install the package and render your first tool cards in under five minutes.
ToolCard Component
Explore every prop, slot, and styling option the ToolCard component exposes.
Connector Catalog
Browse all 1,000+ pre-built connectors available as named exports.
TypeScript Types
Learn how Tool, ToolField, ToolImage, and ToolCatalogItem work together.