Tool Catalog: 1,000+ Pre-built Connector Definitions

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[];
}>;

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} />
  ));
}

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} />);
}