# Tool Output Available Example

> Example implementation of tool output-available.

A shadcn/ui block from the [@ai-elements](https://ai-sdk.dev/elements) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/ai-elements/example-tool-output-available).

- Page, with a live preview: https://shadcn.exchange/r/ai-elements/example-tool-output-available
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/ai-elements/example-tool-output-available-light-399e8883b66654ea.png
- Registry item: https://ai-sdk.dev/elements/api/registry/example-tool-output-available.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-tool-output-available.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `ai`, `nanoid`
- Registry items: `https://elements.ai-sdk.dev/code-block.json`, `https://elements.ai-sdk.dev/tool.json`

## Files

### `registry/default/examples/tool-output-available.tsx`

```tsx
"use client";

import { CodeBlock } from "@/components/ai-elements/code-block";
import {
  Tool,
  ToolContent,
  ToolHeader,
  ToolInput,
  ToolOutput,
} from "@/components/ai-elements/tool";
import type { ToolUIPart } from "ai";
import { nanoid } from "nanoid";

const toolCall: ToolUIPart = {
  errorText: undefined,
  input: {
    database: "analytics",
    params: ["2024-01-01"],
    query: "SELECT COUNT(*) FROM users WHERE created_at >= ?",
  },
  output: [
    {
      "Created At": "2024-01-15",
      Email: "john@example.com",
      Name: "John Doe",
      "User ID": 1,
    },
    {
      "Created At": "2024-01-20",
      Email: "jane@example.com",
      Name: "Jane Smith",
      "User ID": 2,
    },
    {
      "Created At": "2024-02-01",
      Email: "bob@example.com",
      Name: "Bob Wilson",
      "User ID": 3,
    },
    {
      "Created At": "2024-02-10",
      Email: "alice@example.com",
      Name: "Alice Brown",
      "User ID": 4,
    },
    {
      "Created At": "2024-02-15",
      Email: "charlie@example.com",
      Name: "Charlie Davis",
      "User ID": 5,
    },
  ],
  state: "output-available" as const,
  toolCallId: nanoid(),
  type: "tool-database_query" as const,
};

const Example = () => (
  <div style={{ height: "500px" }}>
    <Tool>
      <ToolHeader state={toolCall.state} type={toolCall.type} />
      <ToolContent>
        <ToolInput input={toolCall.input} />
        {toolCall.state === "output-available" && (
          <ToolOutput
            errorText={toolCall.errorText}
            output={
              <CodeBlock
                code={JSON.stringify(toolCall.output)}
                language="json"
              />
            }
          />
        )}
      </ToolContent>
    </Tool>
  </div>
);

export default Example;
```