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

Default UI component for tools without dedicated custom renderers.

***

title: ToolFallback
description: Default UI component for tools without dedicated custom renderers.
-------------------------------------------------------------------------------

import { InstallCommand } from "@/components/docs/fumadocs/install/install-command";
import { ToolFallbackSample } from "@/components/docs/samples/tool-fallback-sample";

<ToolFallbackSample />

## Getting Started

<Steps>
  <Step>
    ### Add `tool-fallback`

    <InstallCommand shadcn={["tool-fallback"]} />

    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

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

    ```tsx twoslash title="/components/assistant-ui/thread.tsx" {1,11}
    // @filename: /components/assistant-ui/tool-fallback.tsx
    import { FC } from "react";
    export const ToolFallback: FC = () => null;

    // @filename: ./thread.tsx
    import { FC } from "react";
    import { MessagePrimitive } from "@assistant-ui/react";
    import { Avatar, AvatarFallback } from "@/components/ui/avatar";

    const AssistantActionBar: FC = () => null;
    const BranchPicker: FC<{ className?: string }> = () => null;

    // ---cut---
    import { ToolFallback } from "@/components/assistant-ui/tool-fallback";

    const AssistantMessage: FC = () => {
      return (
        <MessagePrimitive.Root className="...">
          <div className="...">
            <MessagePrimitive.Parts
              components={{ tools: { Fallback: ToolFallback } }}
            />
          </div>
          <AssistantActionBar />

          <BranchPicker className="..." />
        </MessagePrimitive.Root>
      );
    };
    ```
  </Step>
</Steps>

## Related Components

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