Tool Rendering

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.

CopilotKit consumes AG-UI protocol events streamed by AG2 over /chat. See the AG2 AG-UI integration docs.

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#

Run and connect your agent#

Start your AG2 backend with a /chat endpoint and connect CopilotKit to that endpoint.

Give your agent a tool to call#

agent.py

from typing import Annotated

from fastapi import FastAPI, Header
from fastapi.responses import StreamingResponse
from autogen import ConversableAgent, LLMConfig
from autogen.ag_ui import AGUIStream, RunAgentInput

agent = ConversableAgent(
    name="assistant",
    system_message="You are a helpful assistant.",
    llm_config=LLMConfig({"model": "gpt-5.4-mini"}),
    human_input_mode="NEVER",
)

@agent.register_for_llm(
    description="Get the weather for a given location. Ensure location is fully spelled out."
)
def get_weather(location: Annotated[str, "Fully spelled out location"]) -> str:
    return f"The weather in {location} is sunny."

# Register the same function for execution on this backend process.
agent.register_for_execution(name="get_weather")(get_weather)

stream = AGUIStream(agent)
app = FastAPI()

@app.post("/chat")
async def run_agent(
    message: RunAgentInput,
accept: str | None = Header(None),
):
    return StreamingResponse(
        stream.dispatch(message, accept=accept),
        media_type=accept or "text/event-stream",
    )

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.

Important

In order to render a tool call in the UI, the name of the action must match the name of the tool.

app/page.tsx

import { useRenderTool } from "@copilotkit/react-core/v2"; 
// ...

const YourMainContent = () => {
  // ...
  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>
      );
    },
  });
  // ...
}

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#

useDefaultRenderTool provides a catch-all renderer for any tool that doesn't have a specific useRenderToolCall defined. This is useful for:

Displaying all tool calls during development
Rendering MCP (Model Context Protocol) tools
Providing a generic fallback UI for unexpected tools