> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mcp-b.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Add tools to an existing app

> Expose existing product functions as WebMCP tools with an MCP-B runtime.

Wrap the functions your application already uses, then register those wrappers with
`document.modelContext`. Keep business rules, authorization, and UI updates in the existing
application path.

## Install the runtime

For the complete MCP-B runtime, install and import `@mcp-b/global` before registering tools:

```bash title="Install the runtime" theme={null}
pnpm add @mcp-b/global
```

```ts title="main.ts" theme={null}
import '@mcp-b/global';
```

If you only need WebMCP tool registration, use the tool-only polyfill instead. See [Choose a
runtime](/how-to/choose-runtime) before selecting a package.

## Wrap an existing function

Call the same function used by your interface from the tool handler. Use an `AbortSignal` to remove
the tool when the capability is no longer available.

```ts title="cart-tool.ts" theme={null}
if (!document.modelContext) throw new Error('WebMCP is unavailable');
const controller = new AbortController();

await document.modelContext.registerTool(
  {
    name: 'add-to-cart',
    description: 'Add a product to the shopping cart',
    inputSchema: {
      type: 'object',
      properties: {
        productId: { type: 'string' },
        quantity: { type: 'integer' },
      },
      required: ['productId'],
    },
    async execute(args) {
      const item = await addToCart(args.productId, args.quantity ?? 1);
      return {
        content: [{ type: 'text', text: `Added ${item.name} to cart` }],
      };
    },
  },
  { signal: controller.signal }
);

export function removeCartTool() {
  controller.abort();
}
```

Create the controller when the user, route, or feature state makes the capability available. Call
`removeCartTool()` when that state becomes invalid. A later registration can reuse the same tool
name after the previous signal is aborted.

For React components, use the lifecycle-aware hooks in [Integrate with your
framework](/how-to/frameworks).

## Verify the registration

Check the page registry after your registration promise resolves:

```js title="Browser console" theme={null}
const tools = await document.modelContext?.getTools();
console.table(tools?.map(({ name, description }) => ({ name, description })) ?? []);
```

Use Chrome's [WebMCP DevTools
panel](https://developer.chrome.com/docs/devtools/application/webmcp) to inspect schemas and invoke
tools without maintaining a separate browser-debugging workflow.

## Finish the integration

* Add MCP-B input adapters or structured output in [Use input schemas and structured
  output](/how-to/use-schemas-and-structured-output).
* Follow Chrome's [WebMCP best
  practices](https://developer.chrome.com/docs/ai/webmcp/best-practices) for tool boundaries,
  names, descriptions, and agent-facing errors.
* Follow Chrome's [secure tools guidance](https://developer.chrome.com/docs/ai/webmcp/secure-tools)
  before exposing destructive or externally visible actions.
* If discovery fails, use [Debug and troubleshoot](/how-to/debug-and-troubleshoot) to trace the
  MCP-B runtime and transport.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.