Tool

PreviousNext

Display tool calls and their results in AI interfaces.

Docs 
import {
  Tool,
  ToolContent,
  ToolHeader,
  ToolInput,
  ToolOutput,
} from "@/components/ai-elements/tool"

export function ToolDemo() {
  const toolData = {
    type: "tool-search-web",
    state: "output-available" as const,
    input: {
      query: "latest AI developments",
      maxResults: 5,
    },
    output: {
      results: [
        {
          title: "New AI Model Released",
          url: "https://example.com/ai-news",
          snippet: "A groundbreaking AI model was announced today...",
        },
      ],
    },
    errorText: undefined,
  }

  return (
    <Tool defaultOpen>
      <ToolHeader
        title="Search Web"
        type={toolData.type}
        state={toolData.state}
      />
      <ToolContent>
        <ToolInput input={toolData.input} />
        <ToolOutput output={toolData.output} errorText={toolData.errorText} />
      </ToolContent>
    </Tool>
  )
}

Installation

pnpm dlx shadcn@latest add tool

Usage

import {
  Tool,
  ToolHeader,
  ToolContent,
  ToolInput,
  ToolOutput,
} from "@/components/ai-elements/tool"
<Tool>
  <ToolHeader 
    title="Search Web" 
    type="tool-search-web" 
    state="output-available" 
  />
  <ToolContent>
    <ToolInput input={input} />
    <ToolOutput output={output} errorText={undefined} />
  </ToolContent>
</Tool>

Examples

Default

import {
  Tool,
  ToolContent,
  ToolHeader,
  ToolInput,
  ToolOutput,
} from "@/components/ai-elements/tool"

export function ToolDemo() {
  const toolData = {
    type: "tool-search-web",
    state: "output-available" as const,
    input: {
      query: "latest AI developments",
      maxResults: 5,
    },
    output: {
      results: [
        {
          title: "New AI Model Released",
          url: "https://example.com/ai-news",
          snippet: "A groundbreaking AI model was announced today...",
        },
      ],
    },
    errorText: undefined,
  }

  return (
    <Tool defaultOpen>
      <ToolHeader
        title="Search Web"
        type={toolData.type}
        state={toolData.state}
      />
      <ToolContent>
        <ToolInput input={toolData.input} />
        <ToolOutput output={toolData.output} errorText={toolData.errorText} />
      </ToolContent>
    </Tool>
  )
}

const toolData = {
  type: "tool-search-web",
  state: "output-available" as const,
  input: {
    query: "latest AI developments",
    maxResults: 5,
  },
  output: {
    results: [
      {
        title: "New AI Model Released",
        url: "https://example.com/ai-news",
        snippet: "A groundbreaking AI model...",
      },
    ],
  },
  errorText: undefined,
}
 
export default function Example() {
  return (
    <Tool defaultOpen>
      <ToolHeader
        title="Search Web"
        type={toolData.type}
        state={toolData.state}
      />
      <ToolContent>
        <ToolInput input={toolData.input} />
        <ToolOutput output={toolData.output} errorText={toolData.errorText} />
      </ToolContent>
    </Tool>
  )
}

Tool States

The component supports different states:

  • input-streaming: Tool input is being received
  • input-available: Input received, waiting to run
  • output-available: Tool has completed successfully
  • output-error: Tool execution failed

API Reference

Tool

Collapsible container for tool call.

PropTypeDefaultDescription
defaultOpenbooleanfalseInitial open state
classNamestring-Custom CSS classes

ToolHeader

Header showing tool name and status.

PropTypeDefaultDescription
titlestring-Tool display name
typestring-Tool type identifier
state"input-streaming" | "input-available" | "output-available" | "output-error"-Current state
classNamestring-Custom CSS classes

ToolInput

Display tool input parameters.

PropTypeDefaultDescription
inputany-Tool input data
classNamestring-Custom CSS classes

ToolOutput

Display tool output or error.

PropTypeDefaultDescription
outputany-Tool output data
errorTextstring-Error message if failed
classNamestring-Custom CSS classes