CopilotKit

useDefaultRenderTool

Register a wildcard default renderer for unhandled tool calls

Open your coding agent in your project's folder, or in an empty folder for a new app.This runs in a coding agent on your computer.

Overview

useDefaultRenderTool is a convenience wrapper around useRenderTool with name: "*".

This is part of the v2 tool rendering hook set with useComponent, useRenderTool, and useRenderToolCall.

  • With no config, it registers CopilotKit's built-in default tool-call UI.
  • With render, it replaces that default UI with your own wildcard renderer.

Use this for catch-all rendering of tool calls that do not have a specific named renderer.

Signature

import { useDefaultRenderTool } from "@copilotkit/react-core/v2";

function useDefaultRenderTool(
  config?: {
    render?: (props: {
      name: string;
      parameters: any;
      status: string;
      result: string | undefined;
    }) => React.ReactElement | null;
    group?: boolean;
  },
  deps?: ReadonlyArray<unknown>,
): void;

Behavior

  • Internally calls useRenderTool({ name: "*", ... }).
  • If config.render is omitted, uses an expandable default card UI that shows status, parameters, and result.
  • If config.render is provided, your renderer is used instead.
  • Your renderer can return null to draw nothing. Use this to render only the tool calls you care about and suppress the rest.
  • config.group lets the chat group the calls your renderer draws, the way it groups the built-in card's (see toolCallDisplay). It's on for the built-in card and off by default for a custom render, since a renderer that draws nothing would leave an empty group.
  • Inherits useRenderTool registration behavior and dependency semantics.
  • Tool calls the agent makes in a row are grouped by default (see toolCallDisplay). Inside a group, the built-in card draws itself as a compact row: status, tool name and main argument, opening to the arguments and result. A custom render is drawn as-is inside the group.

Usage

Built-in default renderer

function App() {
  useDefaultRenderTool();
  return null;
}

Custom wildcard renderer

function App() {
  useDefaultRenderTool(
    {
      render: ({ name, status, result }) => (
        <div>
          <strong>{name}</strong>: {status}
          {status === "complete" && result ? <pre>{result}</pre> : null}
        </div>
      ),
    },
    [],
  );

  return null;
}

Related