---
description: "Turns catalog tools on while the calling component is mounted: a promo row enables remove_promo, an open cart drawer enables its item tools."
---

# `useEnableTools`

Turns catalog tools on while the calling component is mounted: a promo row enables `remove_promo`, an open cart drawer enables its item tools. `EnableTools` is the component form, for JSX that would rather not call a hook.

This is the earlier way to scope a tool to a part of the page, for array catalogs (whose tools are off until something names them). With an object catalog every tool is already on where its `match` fits, and a tool that belongs to one component is better written with [`useWebTool`](/docs/reference/react/use-web-tool), which is on while the component is mounted.

## Import

```ts
import { EnableTools, useEnableTools } from "@webmcp-agents/react";
```

## Example

An array catalog, with `remove_promo` on while the promo row is on screen: the hook form in `PromoRow`, the component form in `PromoNotice`.

```tsx title="components/cart.tsx"
import {
  defineWebTool,
  EnableTools,
  useEnableTools,
  WebAgentsProvider,
} from "@webmcp-agents/react";

const removePromo = defineWebTool({
  id: "remove_promo",
  description: "Remove the promo code from the cart.",
  execute: () => "The promo code is removed.",
});

// An array catalog: its tools are off until something names them.
const catalog = [removePromo];

// The hook form: on while this row is on screen.
function PromoRow() {
  useEnableTools(["remove_promo"]);
  return <p>Promo WELCOME10 applied</p>;
}

// The component form, for JSX that would rather not call a hook.
function PromoNotice({ visible }: { visible: boolean }) {
  return visible ? <EnableTools names={["remove_promo"]} /> : null;
}

export function Cart({ hasPromo }: { hasPromo: boolean }) {
  return (
    <WebAgentsProvider tools={catalog}>
      {hasPromo && <PromoRow />}
      <PromoNotice visible={hasPromo} />
    </WebAgentsProvider>
  );
}
```

## Options

`useEnableTools(names)`.

| Name | Type | Default | Description |
|---|---|---|---|
| `names` | `readonly string[]` | required | Catalog tool ids (from the provider's `tools`) to enable while the component is mounted. |

`EnableTools` takes the same list as its `names` prop.

## Returns

Nothing. `EnableTools` renders `null`.

## Notes

- Needs a [`<WebAgentsProvider>`](/docs/reference/react/web-agents-provider): it calls [`useWebAgents`](/docs/reference/react/use-web-agents), which throws outside one.
- Ref-counted with every other holder (`global`, `routes`, other components, and the provider's own `match` and `availableTools`). A tool stays registered while anyone holds it.
- Release is deferred: a macrotask first (StrictMode's remount and route swaps cancel it), then until the tool's in-flight calls settle, plus 500 ms for the answer to reach the agent. So a tool whose own call unmounts the component still answers.
- The list is compared by value, so an inline array literal does not re-enable on every render.
- Unknown ids warn (outside `NODE_ENV=production`) with the catalog's ids instead of throwing. They stay held, and register if a later catalog update adds them.

## See also

- [Tools across your app](/docs/build/tools-across-your-app), the way new code scopes a tool
- [`WebAgentsProvider`](/docs/reference/react/web-agents-provider)
- [`useEnabledTools`](/docs/reference/react/use-enabled-tools)
- [`useWebTool`](/docs/reference/react/use-web-tool) (a tool defined inside a component: on while it is mounted)
- [`createToolRegistry`](/docs/reference/core/create-tool-registry)
- [`deferRelease`](/docs/reference/core/defer-release)