Skip to main content

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 React component library that gives you pre-built, typed UI cards for every tool or connector an AI agent might call — Slack, Gmail, Stripe, Notion, Exa, and 1,000+ more. Import named exports, render them with ToolCard, and wire in your own backend. No vendor SDK required.

Quickstart

Go from zero to rendered tool cards in under five minutes.

Installation

Install the package and import the bundled CSS styles.

ToolCard Component

Full prop reference for the primary ToolCard component.

Tool Catalog

Browse the 1,000+ built-in connectors and their named exports.

Custom Tools

Define and render your own connectors without any global registry.

TypeScript Types

Explore the Tool, ToolField, and ToolImage type definitions.

​
Get up and running

1

Install the package

npm install ai-tool-elements
2

Import styles

Add the bundled Tailwind CSS once in your app entry point or layout:
import "ai-tool-elements/styles.css";
3

Render a tool card

Import any named catalog tool and pass it to ToolCard:
import { Gmail, Notion, Stripe, ToolCard } from "ai-tool-elements";

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

Use your own tools

Create a custom connector with the Tool type — no registration needed:
import { ToolCard, type Tool } from "ai-tool-elements";

const MyAPI = {
  id: "my-api",
  name: "My API",
  description: "Internal connector for My API.",
  fields: [{ name: "apiKey", label: "API Key", required: true }],
} as const satisfies Tool;

export function MyAPICard() {
  return <ToolCard tool={MyAPI} />;
}

​
Why ai-tool-elements?

Vendor-neutral

Works with any AI backend — Composio, OpenAI, Anthropic, or your own pipeline.

Fully typed

Every catalog entry and component prop is TypeScript-typed for autocomplete and compile-time safety.

Tree-shakeable

Import only the tools you need. Logos are lazy-loaded as inline SVGs via @thesvg/icons.

Build docs developers (and LLMs) love

Get started for freeTalk to us