#useFrontendTool, useRenderTool, useDefaultRenderTool, defineTool

1 messages · Page 1 of 1 (latest)

molten ice
#

What are these hooks in copilotkit, useFrontendTool, useRenderTool, useDefaultRenderTool, defineTool and what are their differences. If I have a get_weather tool defined using defineTool and also using useFrontendTool, how is it used like that. Pls explain to me with examples

clever parcelBOT
#

This solution has been AI generated

These APIs separate tool logic from UI. useFrontendTool defines a browser‑side tool (logic + optional UI). useRenderTool and useDefaultRenderTool render UI for tool calls whose logic runs elsewhere. defineTool declares server/agent tools (logic only).

Overview

  • useFrontendTool: Client tool with a handler (executes in browser) and optional render.
  • useRenderTool: Frontend UI renderer for a named tool; no execution.
  • useDefaultRenderTool: Fallback renderer for any tool without a specific renderer.
  • defineTool: Server/agent tool; execution only, no React UI.

When to use which

  • Need browser effects or local state changes? useFrontendTool.
  • Logic on the backend but want a custom UI in chat? defineTool (server) + useRenderTool (client).
  • Want a generic UI for all tools? useDefaultRenderTool.

Example 1: Server logic + frontend UI (recommended)

// server
const getWeather = defineTool({
  name: "get_weather",
  description: "Get weather for a city",
  parameters: z.object({ city: z.string() }),
  execute: async ({ city }) => fetchWeather(city),
});

// client
useRenderTool({
  name: "get_weather",
  render: ({ status, args, result, error }) => {
    if (status === "executing") return <p>Checking {args.city}…</p>;
    if (error) return <p>Failed: {String(error)}</p>;
    if (result) return <WeatherCard data={result} />;
    return null;
  },
});

Example 2: Pure frontend tool

useFrontendTool({
  name: "get_weather",
  description: "Show local weather using client APIs",
  parameters: [{ name: "city", type: "string" }],
  handler: async ({ city }) => {
    const r = await fetch(`/api/public/weather?city=${city}`);
    return await r.json();
  },
  render: ({ status, args, result }) => (
    status === "executing" ?
#

<p>Loading {args.city}…</p> : <pre>{JSON.stringify(result)}</pre>
),
});


### If you define get_weather with both defineTool and useFrontendTool
- The agent will typically execute the server tool (defineTool) for security and reliability.
- Your frontend render can still display the call/result. Prefer useRenderTool for this pattern to avoid ambiguity.


**Was this helpful?**

If this solution worked for you, please click on the appropriate option below to help us improve: