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

# How-To Guides

> Goal-oriented guides for adopting WebMCP, integrating with frameworks, and connecting tools across environments.

This section contains how-to guides for WebMCP. Each guide addresses a specific goal and assumes you already understand the basics of the WebMCP standard and the `navigator.modelContext` API.

If you are new to WebMCP, start with the [Tutorials](/tutorials/index) instead.

## Adoption

Get WebMCP running in your project.

<CardGroup cols={2}>
  <Card title="Choose a Runtime" icon="code-branch" href="/how-to/choose-runtime">
    Decide between the native browser API, the strict polyfill, or the full `@mcp-b/global` runtime based on your project's needs.
  </Card>

  <Card title="Add Tools to an Existing App" icon="puzzle-piece" href="/how-to/add-tools-to-an-existing-app">
    Expose existing application functionality as WebMCP tools without rewriting your app.
  </Card>

  <Card title="Use Schemas and Structured Output" icon="brackets-curly" href="/how-to/use-schemas-and-structured-output">
    Define input schemas with JSON Schema, Standard Schema, or Zod, and add output schemas for typed agent responses.
  </Card>

  <Card title="Register Prompts and Resources" icon="layer-group" href="/how-to/register-prompts-and-resources">
    Expose prompts and resources through the MCP-B extension API.
  </Card>
</CardGroup>

## Frameworks

Wire WebMCP into your frontend framework.

<CardGroup cols={2}>
  <Card title="Integrate with your framework" icon="code" href="/how-to/frameworks">
    Register tools in React, Vue, Svelte, Angular, Next.js, Astro, or vanilla JS using framework-native lifecycle patterns.
  </Card>
</CardGroup>

## Connectivity

Connect tools across tabs, iframes, and desktop agents.

<CardGroup cols={2}>
  <Card title="Connect Desktop Agents with Local Relay" icon="tower-broadcast" href="/how-to/connect-desktop-agents-with-local-relay">
    Bridge browser tools to desktop AI agents like Claude Desktop or Cursor.
  </Card>

  <Card title="Bridge Tools Across Iframes" icon="window-restore" href="/how-to/bridge-tools-across-iframes">
    Expose tools from embedded iframes to the parent page.
  </Card>

  <Card title="Use DevTools MCP" icon="screwdriver-wrench" href="/how-to/use-devtools-mcp">
    Connect desktop agents to the browser through Chrome DevTools Protocol.
  </Card>

  <Card title="Debug and Troubleshoot" icon="bug" href="/how-to/debug-and-troubleshoot">
    Diagnose tool registration, transport, and execution issues.
  </Card>

  <Card title="Test Native and Polyfill" icon="flask-vial" href="/how-to/test-native-and-polyfill">
    Write tests that work against both native and polyfilled implementations.
  </Card>
</CardGroup>