What is ai-tool-elements?

This is a TypeScript package that gives developers ready-made React components for displaying AI tool cards. When an AI agent calls external services like Slack, Gmail, Notion, or Exa, developers need a way to show users what tool is being used and what it is doing. This library provides those visual cards out of the box, so developers do not have to build them from scratch. The package installs through npm. Developers import individual tool components by name, such as Slack or Gmail, or they can import the entire catalog at once. The current catalog includes over 1000 tools, each with a matched logo where one is available. Logos come from a separate icon package and only load when needed, which keeps the final application small. Each tool card is built on top of existing open source UI components from the shadcn library. A custom tool only needs an id and a name to work. Fields like description, image, and typed required or optional fields are available but not required. The cards and their definitions do not depend on any specific backend service, so they work regardless of how the developer connects to the actual tool. The library also includes a component for showing tool calls in progress. Developers pass along the current state of the AI call, such as whether arguments are still streaming, whether approval is requested, or whether the result is ready. When the call finishes successfully, the developer can render custom React content as the output. The component supports states for streaming, approval, errors, denials, and cancellation. A runnable Next.js example is included so developers can see the components in action and edit them directly. The roadmap lists plans for more components, a unified interface for major tool providers, and agent skills.