useRenderTool

Overview

useRenderTool is the React Native counterpart of the web tool-rendering hooks. It registers a tool with the agent and a render function that produces a React Native element for that tool's call, so the agent can drive inline generative UI inside the chat. It combines useFrontendTool (registration + optional handler) with a render registry that the prebuilt CopilotChat reads when displaying tool calls.

Signature

import { useRenderTool } from "@copilotkit/react-native";

function useRenderTool<T>(
  options: UseRenderToolOptions<T>,
  deps?: ReadonlyArray<unknown>,
): void;

Parameters

RenderToolProps<T>

Props passed to your render function.

Usage

import { useRenderTool } from "@copilotkit/react-native";
import { ActivityIndicator, Text, View } from "react-native";
import { z } from "zod";

function ChatScreen() {
  useRenderTool({
    name: "showWeather",
    description: "Display weather for a city",
    parameters: z.object({
      city: z.string(),
      temp: z.number(),
      condition: z.string(),
    }),
    render: ({ args, status }) => (
      <View style={{ padding: 12, backgroundColor: "#f0f0f0", borderRadius: 8 }}>
        <Text style={{ fontWeight: "bold" }}>{args.city}</Text>
        <Text>{args.temp}°C · {args.condition}</Text>
        {status === "executing" && <ActivityIndicator />}
      </View>
    ),
  });

  return <CopilotChat agentName="default" />;
}

Behavior

• Render returns ReactElement | null, not ReactNode. React Native's FlatList cannot render bare strings or portals, so a render function must return an element or null.
• Cleanup: unmounting unregisters both the tool and its render function.

RenderToolProvider and useRenderToolRegistry

These power the render registry and are installed automatically by CopilotKitProvider. You rarely use them directly.

Related

• useFrontendTool: register a tool without inline rendering
• useHumanInTheLoop: gate a tool call on user approval