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.
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, which is on while the component is mounted.
Import
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.
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>: it callsuseWebAgents, which throws outside one. - Ref-counted with every other holder (
global,routes, other components, and the provider’s ownmatchandavailableTools). 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, the way new code scopes a tool
WebAgentsProvideruseEnabledToolsuseWebTool(a tool defined inside a component: on while it is mounted)createToolRegistrydeferRelease