DOCSEARCHbyAlgolia
Submit Docs

tool-ui

repository·main·Indexed 20 days ago

https://github.com/assistant-ui/tool-ui

An open source component library (v0.2.0) providing copy-and-paste React components to render AI tool calls as interactive UI elements in chat interfaces. It includes specialized surfaces such as approval cards, audio, charts, citations, code blocks, data tables, geo-maps (Leaflet-based), image galleries, images, Instagram posts, and item carousels, each with associated serializable schemas and parsing helpers.

Tokens
84.8K
Snippets
218
Records
394
Agent score
73%

What's inside tool-ui

  5. Overview of Tool UI

    main

    Tool UI provides copy-and-paste React components designed to render AI tool calls as interactive UI within chat interfaces. Instead of displaying raw JSON payloads, these components transform tool outputs into actionable elements like forms, tables, charts, and approval cards.

    Key features include:

    • shadcn/ui Model: Components are copied directly into your codebase, avoiding dependency lock-in and allowing full customization.
    • Schema Validation: Every component is paired with a Zod schema to validate tool payloads before rendering.
    • Interactivity: Components support user interactions (like selections or approvals) that can flow back to the assistant as 'receipts'.
    • Built on shadcn/ui: Uses Radix UI primitives and Tailwind CSS, making it easy to integrate with your existing design system.

  7. Overview of the Order Summary Tool UI surface

    main

    The order-summary component is a specialized Tool UI surface implementation designed to display order details. It consists of a React component for rendering and a serializable schema for data validation and parsing.

    Key implementation files:

    • Public Component: components/tool-ui/order-summary/index.tsx
    • Schema & Helpers: components/tool-ui/order-summary/schema.ts (contains the serializable schema and parsing logic).

    For testing purposes, a preset payload is available in lib/presets/order-summary.ts to simulate real data.