ToolFallback

Overview

The ToolFallback component displays a default ToolUI for tools that do not have a dedicated ToolUI.

Getting Started

Add `tool-fallback`

npx shadcn@latest add "https://r.assistant-ui.com/tool-fallback"

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

Use it in your application

Pass the ToolFallback component to the MessagePrimitive.Content component

/components/assistant-ui/thread.tsx

import { ToolFallback } from "@/components/assistant-ui/tool-fallback";
 
const AssistantMessage: FC = () => {
  return (
    <MessagePrimitive.Root className="...">
      <div className="...">
        <MessagePrimitive.Content
          components={{ tools: { Fallback: ToolFallback } }}
        />
      </div>
      <AssistantActionBar />
 
      <BranchPicker className="..." />
    </MessagePrimitive.Root>
  );
};

ToolFallback

Overview

Getting Started

Add tool-fallback

Use it in your application

On this page

Add `tool-fallback`