import { IframeSwitcher } from "@/components/content"
import DefaultToolRendering from "@/snippets/shared/guides/default-tool-rendering.mdx"

<IframeSwitcher
  id="backend-tools-example"
  exampleUrl={`https://feature-viewer.copilotkit.ai/${props.framework || "langgraph"}/feature/backend_tool_rendering?sidebar=false&chatDefaultOpen=false`}
  codeUrl={`https://feature-viewer.copilotkit.ai/${props.framework || "langgraph"}/feature/backend_tool_rendering?view=code&sidebar=false&codeLayout=tabs`}
  exampleLabel="Demo"
  codeLabel="Code"
  height="700px"
/>

<Callout>
  This example demonstrates the implementation section applied in the <a href={`https://feature-viewer.copilotkit.ai/${props.framework || "langgraph"}/feature/agentic_chat`} target="_blank">CopilotKit feature viewer</a>.
</Callout>

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

## Render tool calls in your frontend

Use the `useRenderTool` hook to render tool calls in the UI. The name must match the name of the tool defined in your agent.

<Callout type="info" title="Important">
In order to render a tool call in the UI, the name must match the name of the tool. [Learn more](/built-in-agent/server-tools).
</Callout>

```tsx title="app/page.tsx"
import { useRenderTool } from "@copilotkit/react-core/v2"; // [!code highlight]
import { z } from "zod";
// ...

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

const YourMainContent = () => {
  // ...
  // [!code highlight:14]
  useRenderTool({
    name: "get_weather",
    parameters: weatherParams,
    render: ({ status, parameters }) => {
      return (
        <p className="text-gray-500 mt-2">
          {status !== "complete" && "Calling weather API..."}
          {status === "complete" && `Called the weather API for ${parameters.location}.`}
        </p>
      );
    },
  });
  // ...
}
```

## Default Tool Rendering

<DefaultToolRendering components={props.components} />
