---
title: Tool Rendering
icon: "lucide/Server"
description: Render your agent's tool calls with custom UI components.
hideTOC: true
---
import { Accordions, Accordion } from "fumadocs-ui/components/accordion";
import { IframeSwitcher } from "@/components/content"
import { Tabs, Tab } from "fumadocs-ui/components/tabs"
import RunAndConnect from "@/snippets/integrations/langgraph/run-and-connect.mdx"
import DefaultToolRendering from "@/snippets/shared/guides/default-tool-rendering.mdx"

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

<Callout>
  This example demonstrates the [implementation](#implementation) section applied in the <a href="https://feature-viewer.copilotkit.ai/langgraph/feature/agentic_chat" target="_blank">CopilotKit feature viewer</a>.
</Callout>

## 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.

## Implementation

<Steps>
  <Step>
    ### Run and connect your agent
    <RunAndConnect components={props.components} />
  </Step>
<Step>
### Give your agent a tool to call

<Tabs groupId="language_langgraph_agent" items={['Python', 'TypeScript']} default="Python" persist>
    <Tab value="Python">
        ```python title="agent.py"
        from langchain_openai import ChatOpenAI
        from langchain.tools import tool
        # ...

        # [!code highlight:6]
        @tool
        def get_weather(location: str):
            """
            Get the weather for a given location.
            """
            return f"The weather for {location} is 70 degrees."

        # ...

        async def chat_node(state: AgentState, config: RunnableConfig):
            model = ChatOpenAI(model="gpt-5.4")
            model_with_tools = model.bind_tools([get_weather]) # [!code highlight]

            response = await model_with_tools.ainvoke([
                SystemMessage(content=f"You are a helpful assistant."),
                *state["messages"],
            ], config)

            # ...
        ```
    </Tab>
    <Tab value="TypeScript">
        ```typescript title="agent-js/src/agent.ts"
        import { ChatOpenAI } from "@langchain/openai";
        import { tool } from "@langchain/core/tools";
        import { z } from "zod";

        // [!code highlight:12]
        const get_weather = tool(
          (args) => {
            return `The weather for ${args.location} is 70 degrees.`;
          },
          {
            name: "get_weather",
            description: "Get the weather for a given location.",
            schema: z.object({
              location: z.string().describe("The location to get weather for"),
            }),
          }
        );

        async function chat_node(state: AgentState, config: RunnableConfig) {
          const model = new ChatOpenAI({ temperature: 0, model: "gpt-5.4" });
          const modelWithTools = model.bindTools([get_weather]); // [!code highlight]

          const response = await modelWithTools.invoke([
            new SystemMessage("You are a helpful assistant."),
            ...state.messages,
          ], config);

          // ...
        }
        ```
    </Tab>
</Tabs>
</Step>
<Step>
### Render the tool call in your frontend
At this point, your agent will be able to call the `get_weather` tool. Now
we just need to add a `useRenderTool` hook to render the tool call in
the UI.

<Callout type="info" title="Important">
  In order to render a tool call in the UI, the name must match the name of the tool.
</Callout>

```tsx title="app/page.tsx"
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>
      );
    },
  });
  // ...
}
```

</Step>
<Step>
### Give it a try!

Try asking the agent to get the weather for a location. You should see the custom UI component that we added
render the tool call and display the arguments that were passed to the tool.

</Step>
</Steps>

## Default Tool Rendering

<DefaultToolRendering components={props.components} />
