mirror of
https://github.com/CopilotKit/CopilotKit.git
synced 2026-09-14 16:26:20 +08:00
Tyler Slaton
8e1f1ec5f0
Shared MDX snippets had hardcoded langgraph URLs in IframeSwitcher components. Now they accept a framework prop so each integration page can specify its own feature viewer path. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
64 lines
2.3 KiB
Plaintext
64 lines
2.3 KiB
Plaintext
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.
|
|
</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} />
|