Tool Rendering - Copilotkit

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