# ToolFallback
URL: /docs/ui/tool-fallback

Default UI component for tools without dedicated custom renderers.

<ToolFallbackSample />

Getting Started \[#getting-started]

<Steps>
  <Step>
    Add `tool-fallback` \[#add-tool-fallback]

    <InstallCommand shadcn="[&#x22;tool-fallback&#x22;]" />

    This adds a `/components/assistant-ui/tool-fallback.tsx` file to your project, which you can adjust as needed.
  </Step>

  <Step>
    Use it in your application \[#use-it-in-your-application]

    Pass the `ToolFallback` component to the `MessagePrimitive.Parts` component

    ```tsx title="/components/assistant-ui/thread.tsx" {1,9}
    import { ToolFallback } from "@/components/assistant-ui/tool-fallback";

    const AssistantMessage = () => {
      return (
        <MessagePrimitive.Root>
          <MessagePrimitive.Parts>
            {({ part }) => {
              if (part.type === "tool-call") return <ToolFallback {...part} />;
              return null;
            }}
          </MessagePrimitive.Parts>
        </MessagePrimitive.Root>
      );
    };
    ```
  </Step>
</Steps>

Examples \[#examples]

Streaming Demo \[#streaming-demo]

Interactive demo showing the full tool call lifecycle: running → complete.

<ToolFallbackStreamingSample />

Running State \[#running-state]

Shows a loading spinner and shimmer animation while the tool is executing.

<ToolFallbackRunningSample />

Cancelled State \[#cancelled-state]

Shows a muted appearance when a tool call was cancelled.

<ToolFallbackCancelledSample />

Composable API \[#composable-api]

All sub-components are exported for custom layouts:

| Component              | Description                                     |
| ---------------------- | ----------------------------------------------- |
| `ToolFallback.Root`    | Collapsible container with scroll lock          |
| `ToolFallback.Trigger` | Header with tool name, status icon, and shimmer |
| `ToolFallback.Content` | Animated collapsible content wrapper            |
| `ToolFallback.Args`    | Displays tool arguments                         |
| `ToolFallback.Result`  | Displays tool execution result                  |
| `ToolFallback.Error`   | Displays error or cancellation messages         |

```tsx
import {
  ToolFallback,
  ToolFallbackRoot,
  ToolFallbackTrigger,
  ToolFallbackContent,
  ToolFallbackArgs,
  ToolFallbackResult,
  ToolFallbackError,
} from "@/components/assistant-ui/tool-fallback";

// Compound component syntax
<ToolFallback.Root>
  <ToolFallback.Trigger toolName="get_weather" status={status} />
  <ToolFallback.Content>
    <ToolFallback.Error status={status} />
    <ToolFallback.Args argsText={argsText} />
    <ToolFallback.Result result={result} />
  </ToolFallback.Content>
</ToolFallback.Root>
```

Related Components \[#related-components]

* [ToolGroup](/docs/ui/tool-group) - Group consecutive tool calls together