Rendering Catalog Tools with ToolCard in React Apps

The built-in catalog gives you 1,000 ready-to-render connector definitions. You can render the entire catalog, pick specific connectors by name, or filter to a subset — all with the same ToolCard component. Don’t forget to import the stylesheet once at your app’s entry point.

Render the full catalog

Pass every entry in toolCatalog to ToolCard to display all 1,000 connectors. The id field is stable and unique, making it a safe key prop:

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

export function AllTools() {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "1rem" }}>
      {toolCatalog.map((tool) => (
        <ToolCard key={tool.id} tool={tool} />
      ))}
    </div>
  );
}

Import specific tools by name

Each catalog entry is a typed named export. Import only the connectors your UI needs — the bundler tree-shakes the rest:

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

const tools = [Gmail, Notion, Stripe];

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

Filter the catalog

Filter toolCatalog by id, name, or any other field to produce a focused list at build time or render time:

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

const communicationTools = toolCatalog.filter((tool) =>
  ["slack", "gmail", "discord", "microsoft_teams"].includes(tool.id)
);

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

Search and filter UI

For interactive search, filter toolCatalog against a controlled input value. The pattern below mirrors the catalog search in the package’s example app:

"use client";
import { toolCatalog, ToolCard } from "ai-tool-elements";
import { useState } from "react";

export function CatalogSearch() {
  const [query, setQuery] = useState("");
  const q = query.trim().toLowerCase();
  const matches = q
    ? toolCatalog.filter((t) => t.name.toLowerCase().includes(q))
    : toolCatalog.slice(0, 50);

  return (
    <>
      <input
        type="text"
        placeholder="Search tools…"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
      />
      <div>
        {matches.map((tool) => (
          <ToolCard key={tool.id} tool={tool} />
        ))}
      </div>
    </>
  );
}

Tools without an image are valid — ToolCard renders gracefully without a logo. All catalog entries include SVG images, but custom tools don’t require one. See Custom Tools for details.

Get Started

Components

Tool Catalog

Guides

Rendering Catalog Tools with ToolCard in React Apps

Render the full catalog

Import specific tools by name

Filter the catalog

Search and filter UI

​Render the full catalog

​Import specific tools by name

​Filter the catalog

​Search and filter UI

Render the full catalog

Import specific tools by name

Filter the catalog

Search and filter UI