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

Define a tool in your Strands agent:

python

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],  # [!code highlight]
)

# 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, "/")

</Step> <Step> ### 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.

<Callout type="info" title="Important"> The tool name in `useRenderTool` must match the name of the tool defined in your agent. </Callout>

tsx

"use client";

export default function Page() {
  // [!code highlight:41]
  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>
  );
}

</Step> <Step> ### 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!

</Step> </Steps>

Advanced: Access tool arguments during execution

You can access the tool arguments even while the tool is still executing:

tsx

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>
    );
  },
});