useRenderToolCall
The useRenderToolCall hook enables rendering of backend tool calls in the frontend.
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 empty string ("") 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
The name of the tool to render. Use "" to catch all tool calls.
A description of what this renderer does. Mainly for documentation purposes.
Optional array of parameter definitions. If provided, adds type safety to the args in the render function. Each parameter object should have:
name(string): The parameter nametype(string): The parameter type (e.g., "string", "number", "boolean", "string[]", "object")description(string): A description of what the parameter is forrequired(boolean): Whether the parameter is requiredproperties(array, optional): For object types, define nested properties using the same schema
Simple example: [{ name: "datasetName", type: "string", description: "Name of the dataset", required: true }]
Nested example:
[
{
name: "analysisConfig",
type: "object",
description: "Configuration for the analysis",
required: true,
properties: [
{ name: "method", type: "string", description: "Analysis method to use", required: true },
{ name: "threshold", type: "number", description: "Threshold value", required: false }
]
}
]A React component that renders the tool call UI. The component receives props with status, args, result, name, and description.
Whether the renderer is available. Set to "disabled" to prevent rendering.
