Backend Tools
Render your agent's tool calls with custom UI components.
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
Run and connect your agent
You'll need to run your agent and connect it to CopilotKit before proceeding.
If you don't already have CopilotKit and your agent connected, choose one of the following options:
Give your agent a tool to call
Define a tool in your Strands agent:
import os
from strands import Agent, tool
from strands.models.openai import OpenAIModel
from ag_ui_strands import StrandsAgent, create_strands_app
@tool
def get_weather(location: str) -> dict:
"""
Get weather information for a location.
Args:
location: The location to get weather for
Returns:
Weather data with temperature and conditions
"""
# Simulate weather data (in production, call a real weather API)
return {
"temperature": 72,
"conditions": "sunny",
"humidity": 45,
"wind_speed": 8
}
# Setup your Strands agent
api_key = os.getenv("OPENAI_API_KEY", "")
model = OpenAIModel(
client_args={"api_key": api_key},
model_id="gpt-4o",
)
agent = Agent(
model=model,
system_prompt="You are a helpful assistant that can get weather information.",
tools=[get_weather],
)
# Wrap with AG-UI integration
agui_agent = StrandsAgent(
agent=agent,
name="weather_agent",
description="A helpful weather assistant",
)
# Create the FastAPI app
app = create_strands_app(agui_agent, "/")Render the tool call in your frontend
Now we'll use the useRenderToolCall hook to render the tool call in the UI with a custom component.
Important
The tool name in useRenderToolCall must match the name of the tool defined in your agent.
"use client";
import { useRenderToolCall } from "@copilotkit/react-core";
import { CopilotSidebar } from "@copilotkit/react-ui";
export default function Page() {
useRenderToolCall({
name: "get_weather",
parameters: [
{
name: "location",
description: "The location to get weather for",
required: true,
},
],
render: ({ status, args, result }) => {
if (status === "executing") {
return (
<div className="p-4 bg-blue-50 rounded-lg">
<p className="text-sm text-blue-600">
Getting weather for {args.location}...
</p>
</div>
);
}
if (status === "complete" && result) {
const weather = result;
return (
<div className="p-4 bg-white border rounded-lg shadow-sm">
<h3 className="font-semibold text-lg mb-2">
Weather in {args.location}
</h3>
<div className="space-y-1 text-sm">
<p>🌡️ Temperature: {weather.temperature}°F</p>
<p>☁️ Conditions: {weather.conditions}</p>
<p>💧 Humidity: {weather.humidity}%</p>
<p>💨 Wind Speed: {weather.wind_speed} mph</p>
</div>
</div>
);
}
return null;
},
});
return (
<main>
<CopilotSidebar />
</main>
);
}Give it a try!
Try asking the agent to get the weather for a location:
What's the weather in San Francisco?You should see the custom UI component render with the weather information beautifully displayed in the chat!
Advanced: Access tool arguments during execution
You can access the tool arguments even while the tool is still executing:
useRenderToolCall({
name: "get_weather",
parameters: [
{
name: "location",
description: "The location to get weather for",
required: true,
},
],
render: ({ status, args, result }) => {
// args is available immediately, even when status is "executing"
const location = args.location;
return (
<div className="p-4 bg-blue-50 rounded-lg">
{status === "executing" && (
<p>Fetching weather for {location}...</p>
)}
{status === "complete" && result && (
<p>Weather in {location}: {result.temperature}°F</p>
)}
</div>
);
},
});
