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.
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 { 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.