tool-demo

PreviousNext
Docs
takiexample

Preview

Loading preview…
registry/new-york/examples/tool-demo.tsx
import {
  Tool,
  ToolContent,
  ToolHeader,
  ToolInput,
  ToolOutput,
} from "@/registry/new-york/ai-elements/tool"

export default 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

npx shadcn@latest add @taki/tool-demo

Usage

import { ToolDemo } from "@/components/tool-demo"
<ToolDemo />