Tool Rendering - Copilotkit

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_adk_agent" items={['Python']} default="Python" persist> <Tab value="Python"> ```python title="agent.py" from fastapi import FastAPI from ag_ui_adk import ADKAgent, add_adk_fastapi_endpoint from google.adk.agents import LlmAgent

    def get_weather(location: str = "the entire world") -> str:
        """Retrieves the current weather report for a specified location.

        Args:
            location (str): The name of the location to get the weather for.

        Returns:
            str: The weather report for the specified location.
        """
        return f"The weather in {location} is sunny."


    agent = LlmAgent(
        model="gemini-2.5-flash",
        name="my_agent",
        instruction="You are a helpful weather assistant.",
        tools=[get_weather],
    )

    adk_agent = ADKAgent(
        adk_agent=agent,
        app_name="weather_demo",
        user_id="demo_user"
    )

    app = FastAPI()
    add_adk_fastapi_endpoint(app, adk_agent, path="/")

    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

// ...

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.

Default Tool Rendering