Quickstart: ai-tool-elements in Under Five Minutes

This guide walks you through everything you need to display your first tool cards with ai-tool-elements. By the end you will have the package installed, styles loaded, and React components rendering both catalog connectors and a fully custom tool — all in under five minutes.

Install the package

Add ai-tool-elements to your project using your preferred package manager.

npm install ai-tool-elements

yarn add ai-tool-elements

pnpm add ai-tool-elements

Import the bundled stylesheet

The library ships Tailwind CSS as a pre-built stylesheet. Import it once in your application entry point or root layout so the styles are available globally. Without this import, cards will render without any visual styling.

import "ai-tool-elements/styles.css";

In Next.js, add this line to app/layout.tsx (App Router) or pages/_app.tsx (Pages Router). In Vite, add it to src/main.tsx.

Render the full catalog

Import toolCatalog and ToolCard to render all 1,000+ pre-built connectors at once. Each item in the array is a ToolCatalogItem with a stable id you can use as the React key.

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

export function Tools() {
  return toolCatalog.map((tool) => (
    <ToolCard key={tool.id} tool={tool} />
  ));
}

Render individual named imports

Every catalog connector is also exported as a typed named constant. Import only the tools you need — your bundler will tree-shake everything else, including SVG logos that are not referenced.

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

export function Connectors() {
  return (
    <div>
      {[Gmail, Notion, Stripe].map((tool) => (
        <ToolCard key={tool.id} tool={tool} />
      ))}
    </div>
  );
}

Add a custom tool

You do not need to add anything to the package catalog to render your own connector. Create a plain object literal that satisfies the Tool type and pass it straight to ToolCard. The fields array is optional; when provided, ToolCard renders each field with its label, description, and a Required or Optional badge automatically.

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

const MyWeatherAPI = {
  id: "weather",
  name: "Weather API",
  description: "Fetch current and forecast weather data.",
  fields: [
    { name: "apiKey", label: "API Key", required: true },
    { name: "units", label: "Units", description: "metric or imperial", required: false },
  ],
} as const satisfies Tool;

export function WeatherCard() {
  return <ToolCard tool={MyWeatherAPI} />;
}

ToolCard renders tool.fields as a labelled list automatically. Each field shows its label (falling back to name when no label is set), an optional description line beneath it, and a Required or Optional badge aligned to the right. You do not need to build this layout yourself.

What’s Next

ToolCard Component

See every prop and slot the ToolCard component accepts, including actions and footer.

Connector Catalog

Browse all 1,000+ named connector exports available out of the box.

Custom Tools

Learn how to define custom connectors with inline SVGs, hosted images, and typed fields.

Get Started

Components

Tool Catalog

Guides

Quickstart: ai-tool-elements in Under Five Minutes

What’s Next

ToolCard Component

Connector Catalog

Custom Tools

​What’s Next

ToolCard Component

Connector Catalog

Custom Tools

What’s Next