---
title: Tool Rendering
icon: "lucide/Server"
description: Render your agent's tool calls with custom UI components.
hideTOC: true
---
import { IntegrationGrid } from "@/components/content/integration-grid";
import { Callout } from "fumadocs-ui/components/callout";

## What is this?

Tool rendering lets you customize how your agent's backend tool calls appear in the chat. Instead of showing raw tool execution, you can render custom React components that display tool arguments, progress, and results.

<Callout type="info">
  **Free course:** See this pattern built end-to-end in [Build Interactive Agents with Generative UI](https://www.deeplearning.ai/short-courses/build-interactive-agents-with-generative-ui/) — a free DeepLearning.AI short course taught by CopilotKit's CEO covering the full Generative UI spectrum (Controlled, Declarative, and Open-Ended).
</Callout>

## When should I use this?

Use tool rendering when you want to:
- Show users what tools your agent is calling and with what arguments
- Display progress indicators while tools execute
- Render custom results when tools complete
- Create a polished, transparent agent experience

## Choose your AI backend

<IntegrationGrid path="generative-ui/tool-rendering" />
