toolCatalog Array and Named Tool Exports

The package exports a toolCatalog array of 1,000 typed ToolCatalogItem objects, plus every catalog entry as an individual named export. Use the named exports for single connectors or the full array when you need to iterate, search, or render the entire catalog.

toolCatalog

toolCatalog is a readonly array containing all 1,000 catalog entries in the order they are defined in the package. Each element is a ToolCatalogItem (a Tool with a stable id, name, and inline SVG image). Type: readonly ToolCatalogItem[]

import { toolCatalog } from "ai-tool-elements";

console.log(toolCatalog.length); // 1000
console.log(toolCatalog[0]);     // { id: "github", name: "GitHub", image: { type: "svg", content: "..." }, ... }

The array is readonly — do not mutate it. Do not rely on array index positions to look up a specific connector; use .find() with the stable id instead: toolCatalog.find((t) => t.id === "slack").

Named Tool Exports

Each of the 1,000 catalog entries is also exported individually as a named constant typed as ToolCatalogItem. Named exports let you import exactly the connectors your application uses without pulling in the rest of the catalog.

import { Slack, Gmail, Notion, Stripe, GitHub, Jira } from "ai-tool-elements";

// Each is a ToolCatalogItem
console.log(Slack.id);           // "slack"
console.log(Gmail.name);         // "Gmail"
console.log(Notion.image?.type); // "svg"

Selected Named Exports

The following well-known connectors are among the 1,000 named exports available from ai-tool-elements. Communication Slack, Gmail, Discord, MicrosoftTeams, WhatsApp, Telegram, Zoom, Zulip Developer Tools GitHub, GitLab, Jira, Linear, Bitbucket, Vercel, Render, CircleCI, Sentry, Datadog Productivity Notion, Asana, Trello, Todoist, ClickUp, Monday, Basecamp AI & ML OpenAI, HuggingFace, Replicate, MistralAI, Pinecone, ElevenLabs, Vapi, DeepSeek, Ollama Data & Databases Supabase, Neon, Snowflake, Databricks, GoogleBigQuery, Elasticsearch, Neo4J Payments Stripe, Paypal, Razorpay, Square, LemonSqueezy CRM HubSpot, Salesforce, Pipedrive, Attio Storage GoogleDrive, Dropbox, Box, Cloudinary Docs & Content GoogleDocs, Confluence, Contentful, Sanity, Notion Analytics GoogleAnalytics, PostHog, Mixpanel, Amplitude, Datadog

Tree-Shaking

Named imports are tree-shaken by all major bundlers (Vite, webpack, Rollup, esbuild). When you import a single connector, only that connector’s SVG data is included in your production bundle. Importing toolCatalog pulls in all 1,000 SVGs, so use it only when the full catalog is needed.

// Only Slack's SVG data is included in your bundle
import { Slack } from "ai-tool-elements";

// Imports all 1000 SVGs — use only if you need the full catalog
import { toolCatalog } from "ai-tool-elements";

If you need to render a dynamic subset of connectors selected by the user, filter toolCatalog at runtime rather than maintaining a manual list of named imports. The array is fast to .filter() and .find() at the scale of 1,000 entries.

​toolCatalog

​Named Tool Exports

​Selected Named Exports

​Tree-Shaking

toolCatalog

Named Tool Exports

Selected Named Exports

Tree-Shaking