# Component Tools
URL: /docs/api-reference/tools/component-tools

Register assistant tools from mounted React components, scoped to the lifetime of part of the UI tree.

`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

- href

  /docs/api-reference/tools/toolkits

Toolkits

.

## [API Reference](#api-reference)

### [makeAssistantTool](#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

- href

  /docs/api-reference/tools/component-tools#useassistanttool

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](#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; }`

`useAssistantTool`

- `tool` `: AssistantToolProps<TArgs, TResult>`

  - `streamCall`

    - variant

      deprecated

    `?: ToolStreamCallFunction<TArgs, TResult>`

    Deprecated: Experimental, API may change.

  - `type` `?: "frontend"`

    Tool that is executed in the frontend runtime.

  - `description` `?: string`

    Natural-language description shown to the model when selecting tools.

  - `parameters` `?: StandardSchemaV1<TArgs> | JSONSchema7`

    Schema for the arguments the model must provide when calling the tool.

  - `disabled` `?: boolean`

    Prevents the tool from being exposed to the model while true.

  - `execute` `?: ToolExecuteFunction<TArgs, TResult>`

    Executes the tool after the model provides valid arguments.

  - `toModelOutput` `?: ToolModelOutputFunction<TArgs, TResult>`

    Converts the execution result into model-visible output.

  - `experimental_onSchemaValidationError` `?: OnSchemaValidationErrorFunction<TResult>`

    Handles invalid tool arguments when schema validation fails.

  - `toolName` `: string`

  - `render` `?: unknown`

    Component used to render calls to this tool in assistant messages.