Tool Rendering

import { IframeSwitcher } from "@/components/content" import DefaultToolRendering from "@/snippets/shared/guides/default-tool-rendering.mdx"

<IframeSwitcher id="backend-tools-example" exampleUrl={https://feature-viewer.copilotkit.ai/${props.framework || "langgraph"}/feature/backend_tool_rendering?sidebar=false&chatDefaultOpen=false} codeUrl={https://feature-viewer.copilotkit.ai/${props.framework || "langgraph"}/feature/backend_tool_rendering?view=code&sidebar=false&codeLayout=tabs} exampleLabel="Demo" codeLabel="Code" height="700px" />

What is this?

Tools are a way for the LLM to call predefined, typically, deterministic functions. CopilotKit allows you to render these tools in the UI as a custom component, which we call Generative UI.

When should I use this?

Rendering tools in the UI is useful when you want to provide the user with feedback about what your agent is doing, specifically when your agent is calling tools. CopilotKit allows you to fully customize how these tools are rendered in the chat.

Render tool calls in your frontend

Use the useRenderTool hook to render tool calls in the UI. The name must match the name of the tool defined in your agent.

import { useRenderTool } from "@copilotkit/react-core/v2"; // [!code highlight]
import { z } from "zod";
// ...

const weatherParams = z.object({
  location: z.string().describe("The location to get weather for"),
});

const YourMainContent = () => {
  // ...
  // [!code highlight:14]
  useRenderTool({
    name: "get_weather",
    parameters: weatherParams,
    render: ({ status, parameters }) => {
      return (
        <p className="text-gray-500 mt-2">
          {status !== "complete" && "Calling weather API..."}
          {status === "complete" && `Called the weather API for ${parameters.location}.`}
        </p>
      );
    },
  });
  // ...
}

Default Tool Rendering