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.

All public types are exported from the main ai-tool-elements entry point. Import them with import type { ... } from "ai-tool-elements" for zero runtime cost — type-only imports are fully erased by TypeScript and bundlers and never appear in your production bundle.

​
Import

import type { Tool, ToolCatalogItem, ToolField, ToolImage, ToolCardProps } from "ai-tool-elements";

​
Tool

Tool is the core connector type. Every catalog entry and every custom connector object must satisfy this shape. All properties are deeply Readonly — catalog items must not be mutated at runtime.
​
id
string
required
Stable unique identifier for the connector, formatted as a kebab-case or snake_case slug. This value is safe to store in databases and use as a lookup key. Examples: "slack", "google-drive", "microsoft_teams".
​
name
string
required
Human-readable display name rendered as the card title. Examples: "Slack", "Google Drive", "Microsoft Teams".
​
description
string
Short prose description of the connector. Rendered as card subtext beneath the name. Keep descriptions concise — one or two sentences.
​
image
ToolImage
Optional connector logo. Accepts either an inline SVG string or a hosted image URL. See ToolImage below for the full discriminated union.
​
fields
readonly ToolField[]
Optional list of configuration fields displayed in the card body as a labeled list. Each field shows its label, optional help text, and a Required or Optional badge. See ToolField below.
type Tool = Readonly<{
  id: string;
  name: string;
  description?: string;
  image?: ToolImage;
  fields?: readonly ToolField[];
}>;

​
ToolField

ToolField represents a single configuration input associated with a connector. Fields are rendered as a list inside the card body when the tool.fields array is non-empty. 
type ToolField = Readonly<{
  name: string;         // Unique field key
  label?: string;       // Display label (defaults to name if omitted)
  description?: string; // Help text shown below the label
  required?: boolean;   // Shown as "Required" or "Optional" badge
}>;
​
name
string
required
The unique key for this field within the connector’s fields array. Used as the React list key and as the display label fallback when label is not provided.
​
label
string
Human-readable display label rendered in bold above the help text. Defaults to name when omitted.
​
description
string
Optional help text rendered in a smaller, muted style below the label. Use it to clarify what value is expected — for example, "Your workspace subdomain, e.g. acme.slack.com".
​
required
boolean
When true, the field is labeled Required. When false or omitted, it is labeled Optional. Rendered as a small muted badge aligned to the right of the field row.

​
ToolImage

ToolImage is a discriminated union that lets you supply a connector logo either as an inline SVG string or as a hosted image URL. The type discriminant determines which other property is present. 
type ToolImage =
  | Readonly<{ type: "svg"; content: string }> // Inline SVG string
  | Readonly<{ type: "url"; src: string }>;    // Hosted image URL
{ type: "svg", content } — The content field must be the complete <svg>...</svg> markup, including a viewBox attribute. The component encodes it as a data:image/svg+xml URL at render time. All built-in catalog entries use this variant, sourced from @thesvg/icons. { type: "url", src } — Any stable hosted image URL. HTTPS is strongly preferred. The URL is used directly as the <img src> attribute, so it must be publicly accessible. Suitable for custom connectors whose logos are already hosted on a CDN or object storage bucket.

​
ToolCatalogItem

ToolCatalogItem is a direct type alias for Tool. It exists as a semantic alias to distinguish catalog-managed entries from arbitrary user-defined Tool objects, and to give consumer code a stable import name that will not change if the catalog type is ever extended in the future. 
type ToolCatalogItem = Tool;

​
ToolCardProps

ToolCardProps is the props type for the ToolCard component. It extends all props accepted by the underlying shadcn Card component (except children, which is disallowed) and adds three component-specific props. 
type ToolCardProps<T extends Tool = Tool> =
  Omit<ComponentProps<typeof Card>, "children"> & {
    tool: T;
    actions?: ReactNode;
    footer?: ReactNode;
  };
​
tool
T extends Tool
required
The connector data object. Drives all visual output from the card — logo, name, description, and fields list.
​
actions
ReactNode
Optional content rendered in the top-right action slot of the card header, alongside the connector name and logo.
​
footer
ReactNode
Optional content rendered in the card footer section, beneath a top border separator.
ToolCardProps omits children from ComponentProps<typeof Card> because ToolCard controls its own internal rendering. Passing children directly is not supported — use actions and footer for custom content slots instead.

Build docs developers (and LLMs) love

Get started for freeTalk to us