useComponent

Overview

useComponent is a convenience hook built on top of useFrontendTool. It registers a tool and renders a React Native component in chat using the tool call parameters.

Re-exported from @copilotkit/react-core/v2. It is identical to the React (V2) useComponent; only the import path differs.

Use this when you want a visual component renderer without writing a full frontend tool config manually. The component you pass to render returns React Native elements that CopilotKit surfaces in the chat. See useRenderTool for the underlying React Native render mechanism.

Signature

import { z } from "zod";
import type { ComponentType } from "react";
import { useComponent } from "@copilotkit/react-native";

function useComponent<TSchema extends z.ZodTypeAny | undefined = undefined>(
  config: {
    name: string;
    description?: string;
    parameters?: TSchema;
    // When parameters is provided, props are inferred via z.infer.
    // When omitted, render accepts any props.
    render: ComponentType<InferRenderProps<TSchema>>;
    agentId?: string;
  },
  deps?: ReadonlyArray<unknown>,
): void;

Parameters

config.name: tool name used by the agent to invoke this component tool.
config.description: optional extra description for model guidance.
config.parameters: optional Zod schema for typed/validated parameters. When provided, render props are inferred from the schema.
config.render: React Native component rendered with parsed tool parameters. Accepts any props when parameters is omitted.
config.agentId: optional agent scope for the registration.
deps: optional dependency array for refreshing registration.

Behavior

Prepends a default instruction to the description: "Use this tool to display the "<name>" component in the chat...".
Calls useFrontendTool internally with a render function that spreads the tool parameters as component props.
Inherits useFrontendTool lifecycle behavior: duplicate-name override warning, tool removal on unmount, and renderer retention for chat history.
Tracks updates by config.name plus deps (include any changing captured values in deps).

Usage

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

const weatherCardSchema = z.object({
  city: z.string().describe("City name"),
  unit: z.enum(["c", "f"]).default("c"),
});

type WeatherCardProps = z.infer<typeof weatherCardSchema>;

function WeatherCard({ city, unit }: WeatherCardProps) {
  return (
    <View style={{ borderWidth: 1, borderRadius: 8, padding: 12 }}>
      <Text style={{ fontSize: 12, color: "#71717a" }}>Weather request</Text>
      <Text style={{ fontWeight: "500" }}>
        {city} ({unit.toUpperCase()})
      </Text>
    </View>
  );
}

function App() {
  useComponent(
    {
      name: "showWeatherCard",
      description: "Render a weather card in chat for the requested city.",
      parameters: weatherCardSchema,
      render: WeatherCard,
    },
    [],
  );

  return null;
}