# Tool Input Streaming Example

> Example implementation of tool input-streaming.

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-input-streaming).

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

## Files

### `registry/default/examples/tool-input-streaming.tsx`

```tsx
"use client";

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

const toolCall = {
  errorText: undefined,
  input: {
    include_snippets: true,
    max_results: 10,
    query: "latest AI market trends 2024",
  },
  output: undefined,
  state: "input-streaming" as const,
  toolCallId: nanoid(),
  type: "tool-web_search" as const,
};

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

export default Example;
```