# Tool Output Error Example

> Example implementation of tool output-error.

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-error).

- Page, with a live preview: https://shadcn.exchange/r/ai-elements/example-tool-output-error
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/ai-elements/example-tool-output-error-light-984f732724942e8b.png
- Registry item: https://ai-sdk.dev/elements/api/registry/example-tool-output-error.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-error.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`
- Registry items: `https://elements.ai-sdk.dev/tool.json`

## Files

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

```tsx
"use client";

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

const toolCall: ToolUIPart = {
  errorText:
    "Connection timeout: The request took longer than 5000ms to complete. Please check your network connection and try again.",
  input: {
    headers: {
      Authorization: "Bearer token123",
      "Content-Type": "application/json",
    },
    method: "GET",
    timeout: 5000,
    url: "https://api.example.com/data",
  },
  output: undefined,
  state: "output-error" as const,
  toolCallId: "api_request_1",
  type: "tool-api_request" as const,
};

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

export default Example;
```