> ## 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. # Integrate with your framework > Register WebMCP tools in React, Vue, Svelte, Angular, Next.js, Astro, or vanilla JS using framework-native lifecycle patterns. Register WebMCP tools in any frontend framework by following its native lifecycle patterns. For cross-cutting patterns like conditional registration, error handling, and annotations, see [Add Tools to an Existing App](/how-to/add-tools-to-an-existing-app). ## Install the runtime The full runtime: polyfill, MCP server, transports, prompts, resources, sampling, and elicitation. ```bash npm theme={null} npm install @mcp-b/global ``` ```bash pnpm theme={null} pnpm add @mcp-b/global ``` ```html "Script tag (no build step)" theme={null} ``` `@mcp-b/global` accesses browser APIs on import. If you use SSR, see [Handle SSR](#handle-ssr) for required guards. Strict-core only: installs `document.modelContext` with `registerTool`, `getTools`, and `executeTool`. No MCP extensions, no transports. ```bash theme={null} npm install @mcp-b/webmcp-polyfill ``` The polyfill checks for a browser environment internally and is SSR-safe. No client guards needed. For details on when to use the polyfill vs the full runtime, see [Choose a Runtime](/how-to/choose-runtime). React users also need a hook package. Install `@mcp-b/react-webmcp` (recommended) or `usewebmcp` alongside your chosen runtime. See [Choose a hook package](#choose-a-react-hook-package) below. ## Initialize at your entry point Import `@mcp-b/global` once before any component mounts. The import is a side effect that installs `document.modelContext`. ```tsx "src/main.tsx" theme={null} import '@mcp-b/global'; import { createRoot } from 'react-dom/client'; import { App } from './App'; createRoot(document.getElementById('root')!).render(); ``` ```typescript "src/main.ts" theme={null} import '@mcp-b/global'; import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app'); ``` ```typescript "src/main.ts" theme={null} import '@mcp-b/global'; import App from './App.svelte'; const app = new App({ target: document.getElementById('app')! }); export default app; ``` ```typescript "src/main.ts" theme={null} import '@mcp-b/global'; import { bootstrapApplication } from '@angular/platform-browser'; import { AppComponent } from './app/app.component'; bootstrapApplication(AppComponent); ``` Next.js App Router defaults to Server Components. Import `@mcp-b/global` in a Client Component layout, not the root layout. ```tsx "src/app/(dashboard)/layout.tsx" theme={null} 'use client'; import '@mcp-b/global'; export default function DashboardLayout({ children }) { return <>{children}; } ``` The polyfill is idempotent. If tools live in multiple sections, import it in each feature layout. Do not make your root layout a Client Component. This disables SSR for your entire application. Import inside a ` ``` Alternatively, load the IIFE in your layout's ``: ```astro "src/layouts/Layout.astro" theme={null} ``` ```typescript "src/main.ts" theme={null} import '@mcp-b/global'; ``` Or without a build step: ```html "index.html" theme={null} ``` ## Register a tool Each framework has its own lifecycle hooks for mount and unmount. Register tools on mount, unregister on unmount. Two hook packages are available: | Package | Use when | | ----------------------------------------------------------- | --------------------------------------------------------------------------------------- | | [**@mcp-b/react-webmcp**](/packages/react-webmcp/reference) | You want the full MCP-B surface: Zod schemas, prompts, resources, sampling, elicitation | | [**usewebmcp**](/packages/usewebmcp/reference) | You want strict-core `document.modelContext` tools only | Both handle registration on mount and cleanup on unmount automatically. ```tsx "src/components/LikeTool.tsx" theme={null} import { useWebMCP } from '@mcp-b/react-webmcp'; import { z } from 'zod'; export function LikeTool() { const likeTool = useWebMCP({ name: 'posts_like', description: 'Like a post by ID. Increments the like count.', inputSchema: { postId: z.string().uuid().describe('The post ID to like'), }, annotations: { title: 'Like Post', readOnlyHint: false, idempotentHint: true, }, handler: async (input) => { await api.posts.like(input.postId); return { success: true, postId: input.postId }; }, }); return (

Liking...

Error: {likeTool.state.error.message}

}

); } ``` Call `registerTool()` in `onMounted` and abort the registration signal in `onUnmounted`. The `execute` function can read and write Vue reactive state through `.value` access. ```vue "src/components/CounterTool.vue" theme={null} ``` Use `onMount` to register and `onDestroy` to unregister. Svelte 5 runes work in the execute handler. ```svelte "src/lib/CounterTool.svelte" theme={null}

Count: {count}

``` Use `ngOnInit` to register and `ngOnDestroy` to abort the registration signal. ```typescript "src/app/counter.component.ts" theme={null} import { Component, OnInit, OnDestroy } from '@angular/core'; import '@mcp-b/global'; @Component({ selector: 'app-counter', template: `

Count: {{ count }}

`, }) export class CounterComponent implements OnInit, OnDestroy { count = 0; private toolController?: AbortController; ngOnInit() { if (!('modelContext' in navigator)) return; this.toolController = new AbortController(); document.modelContext.registerTool( { name: 'increment', description: 'Increment the counter by a given amount', inputSchema: { type: 'object', properties: { amount: { type: 'number', description: 'Amount to add' }, }, }, execute: async ({ amount = 1 }) => { this.count += amount as number; return { content: [{ type: 'text', text: `Count: ${this.count}` }], }; }, }, { signal: this.toolController.signal } ); } ngOnDestroy() { this.toolController?.abort(); } } ``` Mark tool components with `'use client'` and use the same React hooks. ```tsx "src/components/dashboard-tools.tsx" theme={null} 'use client'; import { useWebMCP } from '@mcp-b/react-webmcp'; import { z } from 'zod'; export function DashboardTools() { useWebMCP({ name: 'get_metrics', description: 'Get dashboard metrics for a date range', inputSchema: { startDate: z.string().describe('ISO date string'), endDate: z.string().describe('ISO date string'), }, handler: async ({ startDate, endDate }) => { const res = await fetch(`/api/metrics?start=${startDate}&end=${endDate}`); return await res.json(); }, }); return null; } ``` Register tools inside a ` ``` If you use View Transitions, abort the registration before navigation: ```javascript theme={null} document.addEventListener('astro:before-preparation', () => { controller.abort(); }); ``` Call `registerTool()` directly after importing the runtime. ```typescript "src/main.ts" theme={null} import '@mcp-b/global'; const controller = new AbortController(); document.modelContext.registerTool( { name: 'get-page-title', description: 'Get the current page title', inputSchema: { type: 'object', properties: {} }, async execute() { return { content: [{ type: 'text', text: document.title }], }; }, }, { signal: controller.signal } ); ``` Abort the registration when the tool is no longer needed: ```typescript theme={null} controller.abort(); ``` ## Create a reusable abstraction React already has dedicated hook packages (`@mcp-b/react-webmcp` and `usewebmcp`), so no custom abstraction is needed. For other frameworks, extract the register/abort lifecycle into a reusable pattern. ```typescript "src/composables/useWebMCPTool.ts" theme={null} import { onMounted, onUnmounted } from 'vue'; export function useWebMCPTool( tool: Parameters[0] ) { let controller: AbortController | undefined; onMounted(() => { controller = new AbortController(); document.modelContext.registerTool(tool, { signal: controller.signal }); }); onUnmounted(() => { controller?.abort(); }); } ``` ```vue "src/components/GreetingTool.vue" theme={null} ``` ```typescript "src/lib/actions/webmcp.ts" theme={null} export function webmcpTool( node: HTMLElement, tool: Parameters[0] ) { const controller = new AbortController(); document.modelContext.registerTool(tool, { signal: controller.signal }); return { destroy() { controller.abort(); }, }; } ``` ```svelte "src/routes/+page.svelte" theme={null}

({ content: [{ type: 'text', text: 'Hello from Svelte!' }], }), }}> Content here

``` ```typescript "src/app/webmcp.service.ts" theme={null} import { Injectable, OnDestroy } from '@angular/core'; import '@mcp-b/global'; @Injectable({ providedIn: 'root' }) export class WebMCPService implements OnDestroy { private controllers = new Map(); registerTool(tool: Parameters[0]) { if (!('modelContext' in navigator)) return; this.controllers.get(tool.name)?.abort(); const controller = new AbortController(); this.controllers.set(tool.name, controller); document.modelContext.registerTool(tool, { signal: controller.signal }); } removeTool(name: string) { this.controllers.get(name)?.abort(); this.controllers.delete(name); } ngOnDestroy() { for (const controller of this.controllers.values()) { controller.abort(); } this.controllers.clear(); } } ``` ```typescript "src/app/greeting.component.ts" theme={null} import { Component, OnInit, OnDestroy } from '@angular/core'; import { WebMCPService } from './webmcp.service'; @Component({ selector: 'app-greeting', template: `

Greeting tool registered

`, }) export class GreetingComponent implements OnInit, OnDestroy { constructor(private webmcp: WebMCPService) {} ngOnInit() { this.webmcp.registerTool({ name: 'get_greeting', description: 'Get a greeting message', inputSchema: { type: 'object', properties: {} }, execute: async () => ({ content: [{ type: 'text', text: 'Hello from Angular!' }], }), }); } ngOnDestroy() { this.webmcp.removeTool('get_greeting'); } } ``` ## Handle SSR `@mcp-b/global` accesses browser APIs on import, so SSR frameworks need client-side guards. If you use `@mcp-b/webmcp-polyfill` instead, it is SSR-safe out of the box and these guards are not needed. Mark components with `'use client'`. For components that access `window` or `document` directly, use dynamic imports: ```tsx theme={null} import dynamic from 'next/dynamic'; const BrowserOnly = dynamic(() => import('./BrowserOnly'), { ssr: false }); ``` In Nuxt, guard with `import.meta.client`: ```vue "pages/index.vue" theme={null} ``` Guard with `browser` from `$app/environment`: ```svelte "src/routes/+page.svelte" theme={null} ``` To persist tools across route navigations in SvelteKit, register them in `+layout.svelte` instead of `+page.svelte`. Guard with `isPlatformBrowser`: ```typescript "src/app/my.component.ts" theme={null} import { Component, OnInit, OnDestroy, PLATFORM_ID, Inject } from '@angular/core'; import { isPlatformBrowser } from '@angular/common'; import '@mcp-b/global'; @Component({ selector: 'app-my', template: '' }) export class MyComponent implements OnInit, OnDestroy { private isBrowser: boolean; private controller?: AbortController; constructor(@Inject(PLATFORM_ID) platformId: object) { this.isBrowser = isPlatformBrowser(platformId); } ngOnInit() { if (!this.isBrowser || !('modelContext' in navigator)) return; this.controller = new AbortController(); document.modelContext.registerTool( { name: 'my_tool', description: 'A tool that only runs on the client', inputSchema: { type: 'object', properties: {} }, execute: async () => ({ content: [{ type: 'text', text: 'Done' }], }), }, { signal: this.controller.signal } ); } ngOnDestroy() { this.controller?.abort(); } } ``` Astro renders pages as static HTML by default. Code inside `