useRenderToolCall

The useRenderToolCall hook enables rendering of backend tool calls in the frontend.

This v1 useRenderToolCall takes a { name, parameters, render } config object to register a renderer for a tool. In the v2 API, the same name has a different shape: v2 useRenderToolCall is a no-argument hook that returns a renderer function for consuming tool calls. To register renderers in v2, use useFrontendTool or useHumanInTheLoop instead.

useRenderToolCall is purely a rendering hook. It displays custom UI for tool calls without executing any logic. This is typically used to visualize backend tool executions in your chat interface, showing users what the AI is doing behind the scenes.

This hook has no handler function. You only provide a render function that receives information about the tool call (arguments, status, results) and displays it however you want. You can target specific tool names or use an asterisk ("*") to catch and render all tool calls.

Usage

Rendering a Specific Backend Tool

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

useRenderToolCall({
  name: "analyzeData",
  description: "Display results of data analysis",
  parameters: [
    {
      name: "datasetName",
      type: "string",
      description: "Name of the dataset being analyzed",
      required: true,
    },
    {
      name: "metrics",
      type: "string[]",
      description: "Metrics being calculated",
      required: true,
    },
  ],
  render: ({ args, status, result }) => {
    if (status === "inProgress") {
      return (
        <div className="p-4 border rounded animate-pulse">
          <h3>Analyzing {args.datasetName}...</h3>
          <p>Calculating: {args.metrics?.join(", ")}</p>
        </div>
      );
    }

    if (status === "complete" && result) {
      return (
        <div className="p-4 border rounded bg-green-50">
          <h3>Analysis Complete: {args.datasetName}</h3>
          <pre className="mt-2 p-2 bg-gray-100 rounded">
            {JSON.stringify(result, null, 2)}
          </pre>
        </div>
      );
    }

    return null;
  },
});

Migration from useCopilotAction

If you're migrating from useCopilotAction with only a render function:

// Before with useCopilotAction
useCopilotAction({
  name: "showResult",
  render: ({ args }) => <ResultCard {...args} />,
});

// After with useRenderToolCall
useRenderToolCall({
  name: "showResult",
  render: ({ args }) => <ResultCard {...args} />,
});

The migration is straightforward - just change the hook name. The render props remain the same.

Parameters

Prop

Type

Prop

Type

Prop

Type

Prop

Type

Prop

Type