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.

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 haven't done so already, you can follow the instructions in the Getting Started guide.

If you don't already have an agent, you can use the coagent starter as a starting point as this guide uses it as a starting point.

Give your agent a tool to call#

Define a tool in your Strands agent:

main.py

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-5.4",
)

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 useRenderTool hook to render the tool call in the UI with a custom component.

Important

The tool name in useRenderTool must match the name of the tool defined in your agent.

app/page.tsx

"use client";

export default function Page() {
  const weatherParams = z.object({
    location: z.string().describe("The location to get weather for"),
  });

  useRenderTool({
    name: "get_weather",
    parameters: weatherParams,
    render: ({ status, parameters, result }) => {
      if (status === "executing") {
        return (
          <div className="p-4 bg-blue-50 rounded-lg">
            <p className="text-sm text-blue-600">
              Getting weather for {parameters.location}...
            </p>
          </div>
        );
      }

      if (status === "complete" && result) {
        const weather = JSON.parse(result);
        return (
          <div className="p-4 bg-white border rounded-lg shadow-sm">
            <h3 className="font-semibold text-lg mb-2">
              Weather in {parameters.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:

const weatherParams = z.object({
  location: z.string().describe("The location to get weather for"),
});

useRenderTool({
  name: "get_weather",
  parameters: weatherParams,
  render: ({ status, parameters, result }) => {
    // parameters is available immediately, even when status is "executing"
    const location = parameters.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}: {JSON.parse(result).temperature}°F
          </p>
        )}
      </div>
    );
  },
});