---
title: Tool Rendering
icon: "lucide/Server"
description: Render your agent's tool calls with custom UI components.
---

<IframeSwitcherGroup
  id="backend-tools-example"
  variants={[
    {
      label: "LangGraph",
      exampleUrl:
        "https://feature-viewer.copilotkit.ai/agent-spec-langgraph/feature/backend_tool_rendering?sidebar=false&chatDefaultOpen=false",
      codeUrl:
        "https://feature-viewer.copilotkit.ai/agent-spec-langgraph/feature/backend_tool_rendering?view=code&sidebar=false&codeLayout=tabs",
    },
    {
      label: "WayFlow",
      exampleUrl:
        "https://feature-viewer.copilotkit.ai/agent-spec-wayflow/feature/backend_tool_rendering?sidebar=false&chatDefaultOpen=false",
      codeUrl:
        "https://feature-viewer.copilotkit.ai/agent-spec-wayflow/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/agent-spec-wayflow/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 />
</Step>
<Step>
### Give your agent a tool to call

<Tabs groupId="language_agent-spec_agent" items={['Python']} default="Python" persist>
    <Tab value="Python">
        ```python title="agent.py"

        # Create the agent
        from pyagentspec.agent import Agent
        from pyagentspec.llms import OpenAiCompatibleConfig
        from pyagentspec.property import StringProperty
        from pyagentspec.tools import ServerTool
        from pyagentspec.serialization import AgentSpecSerializer

        llm = OpenAiCompatibleConfig(
            name="my_llm",
            model_id="gpt-5.4-mini",
            url="https://api.openai.com/v1",
        )
        weather_tool = ServerTool( # ServerTool are backend tools in Agent Spec
            name="get_weather",
            description="Get the weather for a given location.",
            inputs=[StringProperty(title="location", description="The location to get the weather forecast. Must be a city/town name.")],
            outputs=[StringProperty(title="weather_result")],
        )
        agent = Agent(
            name="my_agent",
            llm_config=llm,
            system_prompt="Based on the weather forecast result and the user input, write a response to the user",
            tools=[weather_tool],
            human_in_the_loop=True,
        )
        agentspec_json_config = AgentSpecSerializer().to_json(agent)

        async def get_weather(location: str = "Everywhere ever") -> str:
            """Get the weather for a given location. Ensure location is fully spelled out."""
            return f"The weather in {location} is sunny."

        # Start the server
        from fastapi import APIRouter, FastAPI
        from ag_ui_agentspec.agent import AgentSpecAgent
        from ag_ui_agentspec.endpoint import add_agentspec_fastapi_endpoint


        runtime = "langgraph" # you can also choose "wayflow"
        router = APIRouter()
        add_agentspec_fastapi_endpoint(
            app=router,
            agentspec_agent=AgentSpecAgent(
                agentspec_json_config,
                runtime=runtime,
                tool_registry={"get_weather": get_weather},
            ),
            path=f"/{runtime}/path_to_my_agent",
        )
        app = FastAPI(title="Agent-Spec x AG-UI Examples - Backend Tool")
        app.include_router(router)

        if __name__ == "__main__":
            uvicorn.run(app, host="0.0.0.0", port=8000)

        ```
    </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 of the action must match
  the name of the tool.
</Callout>

```tsx title="app/page.tsx"
// ...

const YourMainContent = () => {
  // ...
  // [!code highlight:12]
  useRenderTool({
    name: "get_weather",
    render: ({ status, args }) => {
      return (
        <p className="text-gray-500 mt-2">
          {status !== "complete" && "Calling weather API..."}
          {status === "complete" &&
            `Called the weather API for ${args.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.

<video
  src="https://cdn.copilotkit.ai/docs/copilotkit/images/coagents/tool-based-gen-ui.mp4"
  className="rounded-lg shadow-xl"
  loop
  playsInline
  controls
  autoPlay
  muted
/>
</Step>
</Steps>

## Default Tool Rendering

<DefaultToolRendering />
