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.

The ai-tool-elements catalog ships 1,000 connector definitions as typed named exports. Every entry carries a stable id, a human-readable name, an optional description, and an SVG logo sourced from per-slug @thesvg/icons imports. The catalog is a plain readonly array — there is no service, registry, or runtime dependency to configure.

​
What a catalog entry contains

Every item in the catalog conforms to the ToolCatalogItem type, which is identical to the core Tool type: 
type ToolCatalogItem = Readonly<{
  id: string;         // stable unique slug, e.g. "slack"
  name: string;       // display name, e.g. "Slack"
  description?: string;
  image?: ToolImage;  // always { type: "svg", content: "<svg>..." } for catalog items
  fields?: readonly ToolField[];
}>;
The image field for every catalog entry is { type: "svg", content: "..." } — raw SVG markup imported directly from @thesvg/icons. The fields array lists named configuration fields (such as API keys or region settings) when the connector definition includes them.

​
Importing the full catalog

toolCatalog is a readonly array of all 1,000 entries. Pass items directly to ToolCard — no transformation required: 
import { toolCatalog, ToolCard } from "ai-tool-elements";
import "ai-tool-elements/styles.css";

// Render all 1000 tools
export function AllConnectors() {
  return toolCatalog.map((tool) => (
    <ToolCard key={tool.id} tool={tool} />
  ));
}

​
Named imports

Every catalog item is also a typed named export. Importing a named tool pulls in only its matched SVG, making this pattern fully tree-shakeable: 
import { Slack, Gmail, Notion, Stripe, Jira, Figma, Discord, ToolCard } from "ai-tool-elements";
import "ai-tool-elements/styles.css";

const tools = [Slack, Gmail, Notion, Stripe, Jira, Figma, Discord];

export function SelectedConnectors() {
  return tools.map((tool) => <ToolCard key={tool.id} tool={tool} />);
}
Named exports are available for every entry in the catalog. A few examples — GitHub, Gmail, Slack, Notion, GoogleSheets, Shopify, GoogleDrive, Supabase, HubSpot, Exa, Linear, Stripe, Vercel, Salesforce, Jira, Figma, Discord, OpenAI, MicrosoftTeams, Asana, Zendesk, and hundreds more.

​
Sample catalog entries

The table below shows a selection of popular connectors with their exact IDs as they appear in toolCatalog:
Named exportid
Slack"slack"
Gmail"gmail"
Notion"notion"
Stripe"stripe"
GitHub"github"
Jira"jira"
Figma"figma"
Discord"discord"
OpenAI"openai"
Supabase"supabase"
Vercel"vercel"
Linear"linear"
HubSpot"hubspot"
Exa"exa"
Salesforce"salesforce"
The catalog is purely display metadata. It carries no runtime connector SDK, authentication logic, or API client. Connector IDs and field definitions are provided as typed references for your UI — wiring them to a backend or connector service is left entirely to your application.

​
Next steps

Using Catalog Tools

Render, filter, and search the built-in catalog with ToolCard.

Custom Tools

Define application-specific connectors that work alongside catalog entries.

Contributing a Tool

Add a new connector to the catalog via pull request.

Build docs developers (and LLMs) love

Get started for freeTalk to us