Component Tools

useAssistantTool and makeAssistantTool register a single tool while a React component is mounted, and remove it on unmount.

Use these APIs when a tool's availability should follow a specific UI surface — for example, a tool that operates on whatever is currently selected in a panel that may or may not be present. For tools that should be available throughout an assistant subtree regardless of which UI is mounted, see Toolkits.

API Reference

makeAssistantTool

Creates a React component that registers an assistant tool when rendered.

Use this when exporting reusable tool modules that can be included in JSX rather than calling useAssistantTool directly.

type AssistantToolProps = CoreAssistantToolProps<TArgs, TResult> & {
  /** Component used to render calls to this tool in assistant messages. */
  render?: ToolCallMessagePartComponent<TArgs, TResult> | undefined;
};

const makeAssistantTool: <TArgs extends Record<string, unknown>, TResult>(tool: AssistantToolProps<TArgs, TResult>) => AssistantTool;

useAssistantTool

Registers a tool with the assistant model context while the component is mounted.

If render is provided, it is also installed as the renderer for matching tool-call message parts. The registration is removed automatically when the component unmounts or the tool definition changes.

Pass a referentially stable tool object, such as one declared at module scope or memoized with useMemo, to avoid re-registering on every render.

const weatherTool = {
  toolName: "get_weather",
  type: "frontend",
  description: "Get the weather for a city.",
  parameters: weatherSchema,
  execute: async ({ city }: { city: string }) => fetchWeather(city),
  render: WeatherToolUI,
} satisfies AssistantToolProps<{ city: string }, Weather>;

function WeatherToolRegistration() {
  useAssistantTool(weatherTool);
  return null;
}