Skip to content
WebMCP Agents
Esc
↑↓navigate↵open⌘Jpreview
On this page

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 calls useWebAgents, 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

Was this page helpful?