ai-tool-elements: React Components for AI Agent Tools

npm install ai-tool-elements

import "ai-tool-elements/styles.css";

import { Gmail, Notion, Stripe, ToolCard } from "ai-tool-elements";

export function ConnectorList() {
  return (
    <div>
      {[Gmail, Notion, Stripe].map((tool) => (
        <ToolCard key={tool.id} tool={tool} />
      ))}
    </div>
  );
}

import { ToolCard, type Tool } from "ai-tool-elements";

const MyAPI = {
  id: "my-api",
  name: "My API",
  description: "Internal connector for My API.",
  fields: [{ name: "apiKey", label: "API Key", required: true }],
} as const satisfies Tool;

export function MyAPICard() {
  return <ToolCard tool={MyAPI} />;
}