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.

ai-tool-elements is a React component library that requires React 18 or higher as a peer dependency and Node.js 18 or higher at build time. TypeScript is optional but fully supported — types ship with the package, so no additional configuration is needed to get autocomplete and type-checking working immediately.

​
Requirements

Before installing, confirm your project meets the following prerequisites:
  • React 18 or higher — declared as a peer dependency; bring your own React installation
  • Node.js 18 or higher — required by the package’s engines field
  • A build tool that supports ESM — Vite, Next.js, Webpack 5, or any bundler with ESM support works out of the box

​
Install the Package

Add ai-tool-elements to your project dependencies using your preferred package manager. 
npm install ai-tool-elements

​
Import Styles

The library ships a pre-built Tailwind CSS stylesheet at the ai-tool-elements/styles.css export path. You must import this file once in your application’s entry point or root layout. Skipping this step means card components will render without any visual styling. 
// Next.js — app/layout.tsx or pages/_app.tsx
import "ai-tool-elements/styles.css";
The stylesheet is declared under sideEffects in the package’s package.json, so bundlers will not accidentally tree-shake it away even when using aggressive dead-code elimination.

​
Module Formats

ai-tool-elements ships a dual ESM + CJS build. The exports field in package.json routes bundlers to the correct format automatically:
  • import (ESM) → ./dist/index.js
  • require (CJS) → ./dist/index.cjs
  • ./styles.css → ./dist/index.css
No manual alias configuration or bundler plugin is required. Both modern ESM-first tools (Vite, Next.js App Router) and legacy CommonJS environments resolve the correct entry point without extra setup.

​
TypeScript

Type declarations are bundled with the package at ./dist/index.d.ts. No separate @types/ai-tool-elements package exists or is needed. After installation, the following public types are available for import directly from "ai-tool-elements": 
import type { Tool, ToolCatalogItem, ToolField, ToolImage, ToolCardProps } from "ai-tool-elements";
TypeScript 4.7+ (with moduleResolution: "bundler" or "node16") and TypeScript 5.x are both supported.
Importing named connector exports (e.g. import { Gmail } from "ai-tool-elements") lets your bundler tree-shake the output so that only Gmail’s SVG logo and tool definition are included in the final bundle. If you import toolCatalog instead, all 1,000+ connector logos are bundled. Use named imports whenever you only need a specific set of connectors.

​
Next Steps

Quickstart

Follow the five-minute guide to render your first catalog and custom tool cards.

Build docs developers (and LLMs) love

Get started for freeTalk to us