React AI Tool

Collapsible tool execution display with status tracking. Build transparent AI tool calls with React, Next.js, and TypeScript, featuring expandable parameters, results, and error states for shadcn/ui applications.

AI Elements

Radix UI

Trying to implement AI Elements?

Join our Discord community for help from other developers.

Collapsible tool execution display with status tracking for AI function calls using React, Next.js, and TypeScript. Tool calls without visibility are sketchy. Users want to see what APIs the AI is hitting and with what parameters, especially when things go wrong. This free open source shadcn/ui component provides transparent AI tool calls for your conversational AI applications using Vercel AI SDK in JavaScript frameworks.

Tool execution with status

Collapsible tool call with parameters and results:

Loading component...

'use client';import { cn } from '@/lib/utils';import type { ComponentProps, HTMLAttributes } from 'react';import { isValidElement, memo } from 'react';import ReactMarkdown, { type Options } from 'react-markdown';import rehypeKatex from 'rehype-katex';import remarkGfm from 'remark-gfm';import remarkMath from 'remark-math';import { CodeBlock, CodeBlockCopyButton } from './code-block';import 'katex/dist/katex.min.css';import hardenReactMarkdown from 'harden-react-markdown';/** * Parses markdown text and removes incomplete tokens to prevent partial rendering * of links, images, bold, and italic formatting during streaming. */function parseIncompleteMarkdown(text: string): string {  if (!text || typeof text !== 'string') {    return text;  }  let result = text;  // Handle incomplete links and images  // Pattern: [...] or ![...] where the closing ] is missing  const linkImagePattern = /(!?\[)([^\]]*?)$/;  const linkMatch = result.match(linkImagePattern);  if (linkMatch) {    // If we have an unterminated [ or ![, remove it and everything after    const startIndex = result.lastIndexOf(linkMatch[1]);    result = result.substring(0, startIndex);  }  // Handle incomplete bold formatting (**)  const boldPattern = /(\*\*)([^*]*?)$/;  const boldMatch = result.match(boldPattern);  if (boldMatch) {    // Count the number of ** in the entire string    const asteriskPairs = (result.match(/\*\*/g) || []).length;    // If odd number of **, we have an incomplete bold - complete it    if (asteriskPairs % 2 === 1) {      result = `${result}**`;    }  }  // Handle incomplete italic formatting (__)  const italicPattern = /(__)([^_]*?)$/;  const italicMatch = result.match(italicPattern);  if (italicMatch) {    // Count the number of __ in the entire string    const underscorePairs = (result.match(/__/g) || []).length;    // If odd number of __, we have an incomplete italic - complete it    if (underscorePairs % 2 === 1) {      result = `${result}__`;    }  }  // Handle incomplete single asterisk italic (*)  const singleAsteriskPattern = /(\*)([^*]*?)$/;  const singleAsteriskMatch = result.match(singleAsteriskPattern);  if (singleAsteriskMatch) {    // Count single asterisks that aren't part of **    const singleAsterisks = result.split('').reduce((acc, char, index) => {      if (char === '*') {        // Check if it's part of a ** pair        const prevChar = result[index - 1];        const nextChar = result[index + 1];        if (prevChar !== '*' && nextChar !== '*') {          return acc + 1;        }      }      return acc;    }, 0);    // If odd number of single *, we have an incomplete italic - complete it    if (singleAsterisks % 2 === 1) {      result = `${result}*`;    }  }  // Handle incomplete single underscore italic (_)  const singleUnderscorePattern = /(_)([^_]*?)$/;  const singleUnderscoreMatch = result.match(singleUnderscorePattern);  if (singleUnderscoreMatch) {    // Count single underscores that aren't part of __    const singleUnderscores = result.split('').reduce((acc, char, index) => {      if (char === '_') {        // Check if it's part of a __ pair        const prevChar = result[index - 1];        const nextChar = result[index + 1];        if (prevChar !== '_' && nextChar !== '_') {          return acc + 1;        }      }      return acc;    }, 0);    // If odd number of single _, we have an incomplete italic - complete it    if (singleUnderscores % 2 === 1) {      result = `${result}_`;    }  }  // Handle incomplete inline code blocks (`) - but avoid code blocks (```)  const inlineCodePattern = /(`)([^`]*?)$/;  const inlineCodeMatch = result.match(inlineCodePattern);  if (inlineCodeMatch) {    // Check if we're dealing with a code block (triple backticks)    const hasCodeBlockStart = result.includes('```');    const codeBlockPattern = /```[\s\S]*?```/g;    const completeCodeBlocks = (result.match(codeBlockPattern) || []).length;    const allTripleBackticks = (result.match(/```/g) || []).length;    // If we have an odd number of ``` sequences, we're inside an incomplete code block    // In this case, don't complete inline code    const insideIncompleteCodeBlock = allTripleBackticks % 2 === 1;    if (!insideIncompleteCodeBlock) {      // Count the number of single backticks that are NOT part of triple backticks      let singleBacktickCount = 0;      for (let i = 0; i < result.length; i++) {        if (result[i] === '`') {          // Check if this backtick is part of a triple backtick sequence          const isTripleStart = result.substring(i, i + 3) === '```';          const isTripleMiddle =            i > 0 && result.substring(i - 1, i + 2) === '```';          const isTripleEnd = i > 1 && result.substring(i - 2, i + 1) === '```';          if (!(isTripleStart || isTripleMiddle || isTripleEnd)) {            singleBacktickCount++;          }        }      }      // If odd number of single backticks, we have an incomplete inline code - complete it      if (singleBacktickCount % 2 === 1) {        result = `${result}\``;      }    }  }  // Handle incomplete strikethrough formatting (~~)  const strikethroughPattern = /(~~)([^~]*?)$/;  const strikethroughMatch = result.match(strikethroughPattern);  if (strikethroughMatch) {    // Count the number of ~~ in the entire string    const tildePairs = (result.match(/~~/g) || []).length;    // If odd number of ~~, we have an incomplete strikethrough - complete it    if (tildePairs % 2 === 1) {      result = `${result}~~`;    }  }  return result;}// Create a hardened version of ReactMarkdownconst HardenedMarkdown = hardenReactMarkdown(ReactMarkdown);export type ResponseProps = HTMLAttributes<HTMLDivElement> & {  options?: Options;  children: Options['children'];  allowedImagePrefixes?: ComponentProps<    ReturnType<typeof hardenReactMarkdown>  >['allowedImagePrefixes'];  allowedLinkPrefixes?: ComponentProps<    ReturnType<typeof hardenReactMarkdown>  >['allowedLinkPrefixes'];  defaultOrigin?: ComponentProps<    ReturnType<typeof hardenReactMarkdown>  >['defaultOrigin'];  parseIncompleteMarkdown?: boolean;};const components: Options['components'] = {  ol: ({ node, children, className, ...props }) => (    <ol className={cn('ml-4 list-outside list-decimal', className)} {...props}>      {children}    </ol>  ),  li: ({ node, children, className, ...props }) => (    <li className={cn('py-1', className)} {...props}>      {children}    </li>  ),  ul: ({ node, children, className, ...props }) => (    <ul className={cn('ml-4 list-outside list-disc', className)} {...props}>      {children}    </ul>  ),  hr: ({ node, className, ...props }) => (    <hr className={cn('my-6 border-border', className)} {...props} />  ),  strong: ({ node, children, className, ...props }) => (    <span className={cn('font-semibold', className)} {...props}>      {children}    </span>  ),  a: ({ node, children, className, ...props }) => (    <a      className={cn('font-medium text-primary underline', className)}      rel="noreferrer"      target="_blank"      {...props}    >      {children}    </a>  ),  h1: ({ node, children, className, ...props }) => (    <h1      className={cn('mt-6 mb-2 font-semibold text-3xl', className)}      {...props}    >      {children}    </h1>  ),  h2: ({ node, children, className, ...props }) => (    <h2      className={cn('mt-6 mb-2 font-semibold text-2xl', className)}      {...props}    >      {children}    </h2>  ),  h3: ({ node, children, className, ...props }) => (    <h3 className={cn('mt-6 mb-2 font-semibold text-xl', className)} {...props}>      {children}    </h3>  ),  h4: ({ node, children, className, ...props }) => (    <h4 className={cn('mt-6 mb-2 font-semibold text-lg', className)} {...props}>      {children}    </h4>  ),  h5: ({ node, children, className, ...props }) => (    <h5      className={cn('mt-6 mb-2 font-semibold text-base', className)}      {...props}    >      {children}    </h5>  ),  h6: ({ node, children, className, ...props }) => (    <h6 className={cn('mt-6 mb-2 font-semibold text-sm', className)} {...props}>      {children}    </h6>  ),  table: ({ node, children, className, ...props }) => (    <div className="my-4 overflow-x-auto">      <table        className={cn('w-full border-collapse border border-border', className)}        {...props}      >        {children}      </table>    </div>  ),  thead: ({ node, children, className, ...props }) => (    <thead className={cn('bg-muted/50', className)} {...props}>      {children}    </thead>  ),  tbody: ({ node, children, className, ...props }) => (    <tbody className={cn('divide-y divide-border', className)} {...props}>      {children}    </tbody>  ),  tr: ({ node, children, className, ...props }) => (    <tr className={cn('border-border border-b', className)} {...props}>      {children}    </tr>  ),  th: ({ node, children, className, ...props }) => (    <th      className={cn('px-4 py-2 text-left font-semibold text-sm', className)}      {...props}    >      {children}    </th>  ),  td: ({ node, children, className, ...props }) => (    <td className={cn('px-4 py-2 text-sm', className)} {...props}>      {children}    </td>  ),  blockquote: ({ node, children, className, ...props }) => (    <blockquote      className={cn(        'my-4 border-muted-foreground/30 border-l-4 pl-4 text-muted-foreground italic',        className      )}      {...props}    >      {children}    </blockquote>  ),  code: ({ node, className, ...props }) => {    const inline = node?.position?.start.line === node?.position?.end.line;    if (!inline) {      return <code className={className} {...props} />;    }    return (      <code        className={cn(          'rounded bg-muted px-1.5 py-0.5 font-mono text-sm',          className        )}        {...props}      />    );  },  pre: ({ node, className, children }) => {    let language = 'javascript';    if (typeof node?.properties?.className === 'string') {      language = node.properties.className.replace('language-', '');    }    // Extract code content from children safely    let code = '';    if (      isValidElement(children) &&      children.props &&      typeof (children.props as any).children === 'string'    ) {      code = (children.props as any).children;    } else if (typeof children === 'string') {      code = children;    }    return (      <CodeBlock        className={cn('my-4 h-auto', className)}        code={code}        language={language}      >        <CodeBlockCopyButton          onCopy={() => console.log('Copied code to clipboard')}          onError={() => console.error('Failed to copy code to clipboard')}        />      </CodeBlock>    );  },};export const Response = memo(  ({    className,    options,    children,    allowedImagePrefixes,    allowedLinkPrefixes,    defaultOrigin,    parseIncompleteMarkdown: shouldParseIncompleteMarkdown = true,    ...props  }: ResponseProps) => {    // Parse the children to remove incomplete markdown tokens if enabled    const parsedChildren =      typeof children === 'string' && shouldParseIncompleteMarkdown        ? parseIncompleteMarkdown(children)        : children;    return (      <div        className={cn(          'size-full [&>*:first-child]:mt-0 [&>*:last-child]:mb-0',          className        )}        {...props}      >        <HardenedMarkdown          allowedImagePrefixes={allowedImagePrefixes ?? ['*']}          allowedLinkPrefixes={allowedLinkPrefixes ?? ['*']}          components={components}          defaultOrigin={defaultOrigin}          rehypePlugins={[rehypeKatex]}          remarkPlugins={[remarkGfm, remarkMath]}          {...options}        >          {parsedChildren}        </HardenedMarkdown>      </div>    );  },  (prevProps, nextProps) => prevProps.children === nextProps.children);Response.displayName = 'Response';

The React component provides expandable tool containers, status badges (pending, running, completed, error), parameter display with JSON formatting, and result/error handling. Built with TypeScript for type safety and designed for seamless integration in your JavaScript projects.

Installation

npx shadcn@latest add https://www.shadcn.io/registry/ai.json

npx shadcn@latest add https://www.shadcn.io/registry/ai.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/ai.json

bunx shadcn@latest add https://www.shadcn.io/registry/ai.json

Usage

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

<Tool>
  <ToolHeader type="web_search" state="output-available" />
  <ToolContent>
    <ToolInput input={{ query: "Latest AI news", limit: 10 }} />
    <ToolOutput output="Search results..." />
  </ToolContent>
</Tool>;

Why not just log tool calls to console?

Console logging is for developers, not users in React applications. Plus users can't see console output in production. When your AI calls 5 different APIs to answer one question in Next.js projects, users deserve to know what's happening.

Status indicators prevent panic in TypeScript components. "Searching web..." tells users the 10-second delay is normal, not a crash. Failed tools need clear error messages so users understand what broke in JavaScript implementations.

Usage with AI SDK

Display tool calls from AI models in React applications:

"use client";

import {
  Tool,
  ToolHeader,
  ToolContent,
  ToolInput,
  ToolOutput,
} from "@/components/ai/tool";
import { Response } from "@/components/ai/response";
import { useChat } from "@ai-sdk/react";
import { Button } from "@/components/ui/button";
import { useState } from "react";

export default function ToolDemo() {
  const [input, setInput] = useState("");
  const { messages, append, status } = useChat({
    api: "/api/tools",
  });

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (input.trim()) {
      append({ role: "user", content: input });
      setInput("");
    }
  };

  // Find tool calls in messages
  const toolCalls = messages.flatMap(
    (msg) => msg.parts?.filter((part) => part.type?.startsWith("tool-")) || []
  );

  return (
    <div className="space-y-4 max-w-3xl mx-auto p-6">
      <form onSubmit={handleSubmit} className="flex gap-2">
        <input
          type="text"
          value={input}
          onChange={(e) => setInput(e.target.value)}
          placeholder="Ask me to search, calculate, or fetch data..."
          className="flex-1 px-3 py-2 border rounded-lg"
        />
        <Button type="submit" disabled={status === "streaming"}>
          Send
        </Button>
      </form>

      <div className="space-y-3">
        {toolCalls.map((tool, index) => (
          <Tool key={index} defaultOpen={tool.state === "output-available"}>
            <ToolHeader type={tool.type} state={tool.state} />
            <ToolContent>
              <ToolInput input={tool.input} />
              {tool.state === "output-available" && (
                <ToolOutput
                  output={<Response>{tool.output}</Response>}
                  errorText={tool.errorText}
                />
              )}
            </ToolContent>
          </Tool>
        ))}
      </div>
    </div>
  );
}

Backend route with tool definitions:

// app/api/tools/route.ts
import { streamText, convertToModelMessages } from "ai";
import { z } from "zod";

export async function POST(req: Request) {
  const { messages } = await req.json();

  const result = streamText({
    model: "openai/gpt-4o",
    messages: convertToModelMessages(messages),
    tools: {
      calculate: {
        description: "Perform mathematical calculations",
        parameters: z.object({
          expression: z.string().describe("Math expression to evaluate"),
        }),
        execute: async ({ expression }) => {
          // Simulate calculation
          const result = eval(expression); // Use a safe math parser in production
          return { expression, result };
        },
      },
      web_search: {
        description: "Search the web for information",
        parameters: z.object({
          query: z.string().describe("Search query"),
          limit: z.number().default(5).describe("Number of results"),
        }),
        execute: async ({ query, limit }) => {
          // Simulate web search
          await new Promise((resolve) => setTimeout(resolve, 1000));
          return {
            query,
            results: `Found ${limit} results for "${query}"`,
          };
        },
      },
    },
  });

  return result.toUIMessageStreamResponse();
}

Examples

Tool with streaming input

Tool receiving parameters in real-time:

Loading component...

'use client';import { Badge } from '@/components/ui/badge';import {  Collapsible,  CollapsibleContent,  CollapsibleTrigger,} from '@/components/ui/collapsible';import { cn } from '@/lib/utils';import type { ToolUIPart } from 'ai';import {  CheckCircleIcon,  ChevronDownIcon,  CircleIcon,  ClockIcon,  WrenchIcon,  XCircleIcon,} from 'lucide-react';import type { ComponentProps, ReactNode } from 'react';import { CodeBlock } from './code-block';export type ToolProps = ComponentProps<typeof Collapsible>;export const Tool = ({ className, ...props }: ToolProps) => (  <Collapsible    className={cn('not-prose mb-4 w-full rounded-md border', className)}    {...props}  />);export type ToolHeaderProps = {  type: ToolUIPart['type'];  state: ToolUIPart['state'];  className?: string;};const getStatusBadge = (status: ToolUIPart['state']) => {  const labels = {    'input-streaming': 'Pending',    'input-available': 'Running',    'output-available': 'Completed',    'output-error': 'Error',  } as const;  const icons = {    'input-streaming': <CircleIcon className="size-4" />,    'input-available': <ClockIcon className="size-4 animate-pulse" />,    'output-available': <CheckCircleIcon className="size-4 text-green-600" />,    'output-error': <XCircleIcon className="size-4 text-red-600" />,  } as const;  return (    <Badge className="rounded-full text-xs" variant="secondary">      {icons[status]}      {labels[status]}    </Badge>  );};export const ToolHeader = ({  className,  type,  state,  ...props}: ToolHeaderProps) => (  <CollapsibleTrigger    className={cn(      'flex w-full items-center justify-between gap-4 p-3',      className    )}    {...props}  >    <div className="flex items-center gap-2">      <WrenchIcon className="size-4 text-muted-foreground" />      <span className="font-medium text-sm">{type}</span>      {getStatusBadge(state)}    </div>    <ChevronDownIcon className="size-4 text-muted-foreground transition-transform group-data-[state=open]:rotate-180" />  </CollapsibleTrigger>);export type ToolContentProps = ComponentProps<typeof CollapsibleContent>;export const ToolContent = ({ className, ...props }: ToolContentProps) => (  <CollapsibleContent    className={cn(      'data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-popover-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in',      className    )}    {...props}  />);export type ToolInputProps = ComponentProps<'div'> & {  input: ToolUIPart['input'];};export const ToolInput = ({ className, input, ...props }: ToolInputProps) => (  <div className={cn('space-y-2 overflow-hidden p-4', className)} {...props}>    <h4 className="font-medium text-muted-foreground text-xs uppercase tracking-wide">      Parameters    </h4>    <div className="rounded-md bg-muted/50">      <CodeBlock code={JSON.stringify(input, null, 2)} language="json" />    </div>  </div>);export type ToolOutputProps = ComponentProps<'div'> & {  output: ReactNode;  errorText: ToolUIPart['errorText'];};export const ToolOutput = ({  className,  output,  errorText,  ...props}: ToolOutputProps) => {  if (!(output || errorText)) {    return null;  }  return (    <div className={cn('space-y-2 p-4', className)} {...props}>      <h4 className="font-medium text-muted-foreground text-xs uppercase tracking-wide">        {errorText ? 'Error' : 'Result'}      </h4>      <div        className={cn(          'overflow-x-auto rounded-md text-xs [&_table]:w-full',          errorText            ? 'bg-destructive/10 text-destructive'            : 'bg-muted/50 text-foreground'        )}      >        {errorText && <div>{errorText}</div>}        {output && <div>{output}</div>}      </div>    </div>  );};

Tool with error state

Failed tool execution with error display:

Loading component...

'use client';import { Badge } from '@/components/ui/badge';import {  Collapsible,  CollapsibleContent,  CollapsibleTrigger,} from '@/components/ui/collapsible';import { cn } from '@/lib/utils';import type { ToolUIPart } from 'ai';import {  CheckCircleIcon,  ChevronDownIcon,  CircleIcon,  ClockIcon,  WrenchIcon,  XCircleIcon,} from 'lucide-react';import type { ComponentProps, ReactNode } from 'react';import { CodeBlock } from './code-block';export type ToolProps = ComponentProps<typeof Collapsible>;export const Tool = ({ className, ...props }: ToolProps) => (  <Collapsible    className={cn('not-prose mb-4 w-full rounded-md border', className)}    {...props}  />);export type ToolHeaderProps = {  type: ToolUIPart['type'];  state: ToolUIPart['state'];  className?: string;};const getStatusBadge = (status: ToolUIPart['state']) => {  const labels = {    'input-streaming': 'Pending',    'input-available': 'Running',    'output-available': 'Completed',    'output-error': 'Error',  } as const;  const icons = {    'input-streaming': <CircleIcon className="size-4" />,    'input-available': <ClockIcon className="size-4 animate-pulse" />,    'output-available': <CheckCircleIcon className="size-4 text-green-600" />,    'output-error': <XCircleIcon className="size-4 text-red-600" />,  } as const;  return (    <Badge className="rounded-full text-xs" variant="secondary">      {icons[status]}      {labels[status]}    </Badge>  );};export const ToolHeader = ({  className,  type,  state,  ...props}: ToolHeaderProps) => (  <CollapsibleTrigger    className={cn(      'flex w-full items-center justify-between gap-4 p-3',      className    )}    {...props}  >    <div className="flex items-center gap-2">      <WrenchIcon className="size-4 text-muted-foreground" />      <span className="font-medium text-sm">{type}</span>      {getStatusBadge(state)}    </div>    <ChevronDownIcon className="size-4 text-muted-foreground transition-transform group-data-[state=open]:rotate-180" />  </CollapsibleTrigger>);export type ToolContentProps = ComponentProps<typeof CollapsibleContent>;export const ToolContent = ({ className, ...props }: ToolContentProps) => (  <CollapsibleContent    className={cn(      'data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-popover-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in',      className    )}    {...props}  />);export type ToolInputProps = ComponentProps<'div'> & {  input: ToolUIPart['input'];};export const ToolInput = ({ className, input, ...props }: ToolInputProps) => (  <div className={cn('space-y-2 overflow-hidden p-4', className)} {...props}>    <h4 className="font-medium text-muted-foreground text-xs uppercase tracking-wide">      Parameters    </h4>    <div className="rounded-md bg-muted/50">      <CodeBlock code={JSON.stringify(input, null, 2)} language="json" />    </div>  </div>);export type ToolOutputProps = ComponentProps<'div'> & {  output: ReactNode;  errorText: ToolUIPart['errorText'];};export const ToolOutput = ({  className,  output,  errorText,  ...props}: ToolOutputProps) => {  if (!(output || errorText)) {    return null;  }  return (    <div className={cn('space-y-2 p-4', className)} {...props}>      <h4 className="font-medium text-muted-foreground text-xs uppercase tracking-wide">        {errorText ? 'Error' : 'Result'}      </h4>      <div        className={cn(          'overflow-x-auto rounded-md text-xs [&_table]:w-full',          errorText            ? 'bg-destructive/10 text-destructive'            : 'bg-muted/50 text-foreground'        )}      >        {errorText && <div>{errorText}</div>}        {output && <div>{output}</div>}      </div>    </div>  );};

Multiple tool calls

Sequential tool executions in a workflow:

Loading component...

'use client';import { Response } from '@/components/ui/shadcn-io/ai/response';import {  Tool,  ToolContent,  ToolHeader,  ToolInput,  ToolOutput,} from '@/components/ui/shadcn-io/ai/tool';import type { ToolUIPart } from 'ai';import { nanoid } from 'nanoid';const tools: ToolUIPart[] = [  {    type: 'tool-web_search' as const,    toolCallId: nanoid(),    state: 'output-available' as const,    input: {      query: 'latest React 19 features',      limit: 5,      region: 'us',    },    output: `Found 5 relevant results:1. **React 19 Beta Released** - Official announcement from React team2. **New Hooks in React 19** - Detailed guide on use() and other hooks  3. **React Compiler Deep Dive** - How automatic memoization works4. **Server Components Improvements** - Performance optimizations5. **Migration Guide to React 19** - Step-by-step upgrade instructions`,    errorText: undefined,  },  {    type: 'tool-code_execution' as const,    toolCallId: nanoid(),    state: 'output-available' as const,    input: {      language: 'javascript',      code: 'const fibonacci = (n) => n <= 1 ? n : fibonacci(n-1) + fibonacci(n-2);\nconsole.log(fibonacci(10));',    },    output: '55',    errorText: undefined,  },  {    type: 'tool-data_analysis' as const,    toolCallId: nanoid(),    state: 'input-available' as const,    input: {      dataset: 'sales_2024.csv',      operation: 'aggregate',      groupBy: 'month',      metric: 'sum',      field: 'revenue',    },    output: undefined,    errorText: undefined,  },];const Example = () => (  <div className="p-8 w-full space-y-3">    <p className="text-sm text-muted-foreground mb-4">      Multiple tools executing in sequence to complete a complex task:    </p>        {tools.map((tool, index) => (      <Tool key={tool.toolCallId} defaultOpen={index === 0}>        <ToolHeader state={tool.state} type={tool.type} />        <ToolContent>          <ToolInput input={tool.input} />          {tool.state === 'output-available' && (            <ToolOutput              errorText={tool.errorText}              output={                tool.output ? (                  <Response>{String(tool.output)}</Response>                ) : undefined              }            />          )}          {tool.state === 'input-available' && (            <div className="mt-3 text-sm text-muted-foreground animate-pulse">              Waiting to execute...            </div>          )}        </ToolContent>      </Tool>    ))}  </div>);export default Example;

'use client';import { cn } from '@/lib/utils';import type { ComponentProps, HTMLAttributes } from 'react';import { isValidElement, memo } from 'react';import ReactMarkdown, { type Options } from 'react-markdown';import rehypeKatex from 'rehype-katex';import remarkGfm from 'remark-gfm';import remarkMath from 'remark-math';import { CodeBlock, CodeBlockCopyButton } from './code-block';import 'katex/dist/katex.min.css';import hardenReactMarkdown from 'harden-react-markdown';/** * Parses markdown text and removes incomplete tokens to prevent partial rendering * of links, images, bold, and italic formatting during streaming. */function parseIncompleteMarkdown(text: string): string {  if (!text || typeof text !== 'string') {    return text;  }  let result = text;  // Handle incomplete links and images  // Pattern: [...] or ![...] where the closing ] is missing  const linkImagePattern = /(!?\[)([^\]]*?)$/;  const linkMatch = result.match(linkImagePattern);  if (linkMatch) {    // If we have an unterminated [ or ![, remove it and everything after    const startIndex = result.lastIndexOf(linkMatch[1]);    result = result.substring(0, startIndex);  }  // Handle incomplete bold formatting (**)  const boldPattern = /(\*\*)([^*]*?)$/;  const boldMatch = result.match(boldPattern);  if (boldMatch) {    // Count the number of ** in the entire string    const asteriskPairs = (result.match(/\*\*/g) || []).length;    // If odd number of **, we have an incomplete bold - complete it    if (asteriskPairs % 2 === 1) {      result = `${result}**`;    }  }  // Handle incomplete italic formatting (__)  const italicPattern = /(__)([^_]*?)$/;  const italicMatch = result.match(italicPattern);  if (italicMatch) {    // Count the number of __ in the entire string    const underscorePairs = (result.match(/__/g) || []).length;    // If odd number of __, we have an incomplete italic - complete it    if (underscorePairs % 2 === 1) {      result = `${result}__`;    }  }  // Handle incomplete single asterisk italic (*)  const singleAsteriskPattern = /(\*)([^*]*?)$/;  const singleAsteriskMatch = result.match(singleAsteriskPattern);  if (singleAsteriskMatch) {    // Count single asterisks that aren't part of **    const singleAsterisks = result.split('').reduce((acc, char, index) => {      if (char === '*') {        // Check if it's part of a ** pair        const prevChar = result[index - 1];        const nextChar = result[index + 1];        if (prevChar !== '*' && nextChar !== '*') {          return acc + 1;        }      }      return acc;    }, 0);    // If odd number of single *, we have an incomplete italic - complete it    if (singleAsterisks % 2 === 1) {      result = `${result}*`;    }  }  // Handle incomplete single underscore italic (_)  const singleUnderscorePattern = /(_)([^_]*?)$/;  const singleUnderscoreMatch = result.match(singleUnderscorePattern);  if (singleUnderscoreMatch) {    // Count single underscores that aren't part of __    const singleUnderscores = result.split('').reduce((acc, char, index) => {      if (char === '_') {        // Check if it's part of a __ pair        const prevChar = result[index - 1];        const nextChar = result[index + 1];        if (prevChar !== '_' && nextChar !== '_') {          return acc + 1;        }      }      return acc;    }, 0);    // If odd number of single _, we have an incomplete italic - complete it    if (singleUnderscores % 2 === 1) {      result = `${result}_`;    }  }  // Handle incomplete inline code blocks (`) - but avoid code blocks (```)  const inlineCodePattern = /(`)([^`]*?)$/;  const inlineCodeMatch = result.match(inlineCodePattern);  if (inlineCodeMatch) {    // Check if we're dealing with a code block (triple backticks)    const hasCodeBlockStart = result.includes('```');    const codeBlockPattern = /```[\s\S]*?```/g;    const completeCodeBlocks = (result.match(codeBlockPattern) || []).length;    const allTripleBackticks = (result.match(/```/g) || []).length;    // If we have an odd number of ``` sequences, we're inside an incomplete code block    // In this case, don't complete inline code    const insideIncompleteCodeBlock = allTripleBackticks % 2 === 1;    if (!insideIncompleteCodeBlock) {      // Count the number of single backticks that are NOT part of triple backticks      let singleBacktickCount = 0;      for (let i = 0; i < result.length; i++) {        if (result[i] === '`') {          // Check if this backtick is part of a triple backtick sequence          const isTripleStart = result.substring(i, i + 3) === '```';          const isTripleMiddle =            i > 0 && result.substring(i - 1, i + 2) === '```';          const isTripleEnd = i > 1 && result.substring(i - 2, i + 1) === '```';          if (!(isTripleStart || isTripleMiddle || isTripleEnd)) {            singleBacktickCount++;          }        }      }      // If odd number of single backticks, we have an incomplete inline code - complete it      if (singleBacktickCount % 2 === 1) {        result = `${result}\``;      }    }  }  // Handle incomplete strikethrough formatting (~~)  const strikethroughPattern = /(~~)([^~]*?)$/;  const strikethroughMatch = result.match(strikethroughPattern);  if (strikethroughMatch) {    // Count the number of ~~ in the entire string    const tildePairs = (result.match(/~~/g) || []).length;    // If odd number of ~~, we have an incomplete strikethrough - complete it    if (tildePairs % 2 === 1) {      result = `${result}~~`;    }  }  return result;}// Create a hardened version of ReactMarkdownconst HardenedMarkdown = hardenReactMarkdown(ReactMarkdown);export type ResponseProps = HTMLAttributes<HTMLDivElement> & {  options?: Options;  children: Options['children'];  allowedImagePrefixes?: ComponentProps<    ReturnType<typeof hardenReactMarkdown>  >['allowedImagePrefixes'];  allowedLinkPrefixes?: ComponentProps<    ReturnType<typeof hardenReactMarkdown>  >['allowedLinkPrefixes'];  defaultOrigin?: ComponentProps<    ReturnType<typeof hardenReactMarkdown>  >['defaultOrigin'];  parseIncompleteMarkdown?: boolean;};const components: Options['components'] = {  ol: ({ node, children, className, ...props }) => (    <ol className={cn('ml-4 list-outside list-decimal', className)} {...props}>      {children}    </ol>  ),  li: ({ node, children, className, ...props }) => (    <li className={cn('py-1', className)} {...props}>      {children}    </li>  ),  ul: ({ node, children, className, ...props }) => (    <ul className={cn('ml-4 list-outside list-disc', className)} {...props}>      {children}    </ul>  ),  hr: ({ node, className, ...props }) => (    <hr className={cn('my-6 border-border', className)} {...props} />  ),  strong: ({ node, children, className, ...props }) => (    <span className={cn('font-semibold', className)} {...props}>      {children}    </span>  ),  a: ({ node, children, className, ...props }) => (    <a      className={cn('font-medium text-primary underline', className)}      rel="noreferrer"      target="_blank"      {...props}    >      {children}    </a>  ),  h1: ({ node, children, className, ...props }) => (    <h1      className={cn('mt-6 mb-2 font-semibold text-3xl', className)}      {...props}    >      {children}    </h1>  ),  h2: ({ node, children, className, ...props }) => (    <h2      className={cn('mt-6 mb-2 font-semibold text-2xl', className)}      {...props}    >      {children}    </h2>  ),  h3: ({ node, children, className, ...props }) => (    <h3 className={cn('mt-6 mb-2 font-semibold text-xl', className)} {...props}>      {children}    </h3>  ),  h4: ({ node, children, className, ...props }) => (    <h4 className={cn('mt-6 mb-2 font-semibold text-lg', className)} {...props}>      {children}    </h4>  ),  h5: ({ node, children, className, ...props }) => (    <h5      className={cn('mt-6 mb-2 font-semibold text-base', className)}      {...props}    >      {children}    </h5>  ),  h6: ({ node, children, className, ...props }) => (    <h6 className={cn('mt-6 mb-2 font-semibold text-sm', className)} {...props}>      {children}    </h6>  ),  table: ({ node, children, className, ...props }) => (    <div className="my-4 overflow-x-auto">      <table        className={cn('w-full border-collapse border border-border', className)}        {...props}      >        {children}      </table>    </div>  ),  thead: ({ node, children, className, ...props }) => (    <thead className={cn('bg-muted/50', className)} {...props}>      {children}    </thead>  ),  tbody: ({ node, children, className, ...props }) => (    <tbody className={cn('divide-y divide-border', className)} {...props}>      {children}    </tbody>  ),  tr: ({ node, children, className, ...props }) => (    <tr className={cn('border-border border-b', className)} {...props}>      {children}    </tr>  ),  th: ({ node, children, className, ...props }) => (    <th      className={cn('px-4 py-2 text-left font-semibold text-sm', className)}      {...props}    >      {children}    </th>  ),  td: ({ node, children, className, ...props }) => (    <td className={cn('px-4 py-2 text-sm', className)} {...props}>      {children}    </td>  ),  blockquote: ({ node, children, className, ...props }) => (    <blockquote      className={cn(        'my-4 border-muted-foreground/30 border-l-4 pl-4 text-muted-foreground italic',        className      )}      {...props}    >      {children}    </blockquote>  ),  code: ({ node, className, ...props }) => {    const inline = node?.position?.start.line === node?.position?.end.line;    if (!inline) {      return <code className={className} {...props} />;    }    return (      <code        className={cn(          'rounded bg-muted px-1.5 py-0.5 font-mono text-sm',          className        )}        {...props}      />    );  },  pre: ({ node, className, children }) => {    let language = 'javascript';    if (typeof node?.properties?.className === 'string') {      language = node.properties.className.replace('language-', '');    }    // Extract code content from children safely    let code = '';    if (      isValidElement(children) &&      children.props &&      typeof (children.props as any).children === 'string'    ) {      code = (children.props as any).children;    } else if (typeof children === 'string') {      code = children;    }    return (      <CodeBlock        className={cn('my-4 h-auto', className)}        code={code}        language={language}      >        <CodeBlockCopyButton          onCopy={() => console.log('Copied code to clipboard')}          onError={() => console.error('Failed to copy code to clipboard')}        />      </CodeBlock>    );  },};export const Response = memo(  ({    className,    options,    children,    allowedImagePrefixes,    allowedLinkPrefixes,    defaultOrigin,    parseIncompleteMarkdown: shouldParseIncompleteMarkdown = true,    ...props  }: ResponseProps) => {    // Parse the children to remove incomplete markdown tokens if enabled    const parsedChildren =      typeof children === 'string' && shouldParseIncompleteMarkdown        ? parseIncompleteMarkdown(children)        : children;    return (      <div        className={cn(          'size-full [&>*:first-child]:mt-0 [&>*:last-child]:mb-0',          className        )}        {...props}      >        <HardenedMarkdown          allowedImagePrefixes={allowedImagePrefixes ?? ['*']}          allowedLinkPrefixes={allowedLinkPrefixes ?? ['*']}          components={components}          defaultOrigin={defaultOrigin}          rehypePlugins={[rehypeKatex]}          remarkPlugins={[remarkGfm, remarkMath]}          {...options}        >          {parsedChildren}        </HardenedMarkdown>      </div>    );  },  (prevProps, nextProps) => prevProps.children === nextProps.children);Response.displayName = 'Response';

Features

Collapsible containers with smooth Radix UI animations in React applications
Visual status badges (pending, running, completed, error) for TypeScript components
JSON-formatted parameter display with syntax highlighting in JavaScript frameworks
Flexible output rendering supporting markdown and custom components for Next.js projects
Error state handling with clear error messages
Auto-open for completed/errored tools for immediate visibility
Keyboard navigation with proper focus management
Screen reader accessible with semantic HTML
Perfect for AI agents, AI chat applications, and conversational AI function calling
Free open source component built for Next.js with shadcn/ui design system and AI Elements
Optimized for Vercel AI SDK streaming and function calling

API Reference

Tool

Container component managing collapsible state.

Prop	Type	Default	Description
`defaultOpen`	`boolean`	`false`	Initial expanded state
`className`	`string`	-	Additional CSS classes
`...props`	`ComponentProps<typeof Collapsible>`	-	Collapsible component props

ToolHeader

Header showing tool name and status badge.

Prop	Type	Description
`type`	`string`	Required - Tool name/type
`state`	`"input-streaming" \| "input-available" \| "output-available" \| "output-error"`	Required - Execution state
`className`	`string`	Additional CSS classes
`...props`	`ComponentProps<typeof CollapsibleTrigger>`	Trigger props

ToolContent

Container for tool parameters and results.

Prop	Type	Description
`className`	`string`	Additional CSS classes
`...props`	`ComponentProps<typeof CollapsibleContent>`	Content props

ToolInput

Display for tool input parameters.

Prop	Type	Description
`input`	`any`	Required - Tool parameters (displayed as JSON)
`className`	`string`	Additional CSS classes
`...props`	`ComponentProps<'div'>`	Standard div attributes

ToolOutput

Display for tool results or errors.

Prop	Type	Description
`output`	`ReactNode`	Tool execution result
`errorText`	`string`	Error message if failed
`className`	`string`	Additional CSS classes
`...props`	`ComponentProps<'div'>`	Standard div attributes

Keyboard interactions

Key	Description
`Space` / `Enter`	Toggle tool expansion
`Tab`	Navigate between tools
`Escape`	Close expanded tool

Tool execution gotchas that will bite you

Long-running tools freeze the UI: Weather APIs take 3+ seconds, database queries even longer in React applications. Show progress or users think it crashed. "Searching..." beats dead silence in TypeScript components.

JSON parameter formatting breaks: Complex objects get mangled in display in JavaScript implementations. Use proper JSON.stringify with 2-space indentation or your parameters look like garbage in Next.js projects.

Error messages are useless: "Something went wrong" tells users nothing in React applications. Show the actual API error: "Rate limit exceeded, try again in 60 seconds."

Tool result size crashes browsers: Some APIs return 50KB responses in TypeScript components. Truncate after 1000 characters or add pagination. Don't let a Wikipedia API call freeze the page in JavaScript frameworks.

Tool dependencies create confusion: When one tool's output feeds into another, users lose track in React applications. Number them or show the flow visually.

Failed tools disappear: Keep failed tools visible with retry buttons in Next.js projects. Users want to debug what broke, not guess why their query vanished in TypeScript implementations.

Integration with other components

Tool works seamlessly with Response for formatted output in React applications. Use alongside CodeBlock for JSON results in Next.js projects. Combine with Task for multi-step workflows. This free open source component integrates seamlessly with modern JavaScript frameworks.

Tool execution with status

Installation

Usage

Why not just log tool calls to console?

Usage with AI SDK

Examples

Tool with streaming input

Tool with error state

Multiple tool calls

Features

API Reference

Tool

ToolHeader

ToolContent

ToolInput

ToolOutput

Keyboard interactions

Tool execution gotchas that will bite you

Integration with other components

Questions developers actually ask

On this page

React AI Tool

Reactai/response

Reactai/tool

Reactai/tool

Reactai/tool

Reactai/response

Reactai/tool

How do I show tools as they execute?

Can I customize how results are displayed?

How do I add icons for different tools?

How do I show parallel tool execution?

Should I show execution duration?

On this page