> ## 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.

# How-to guides

> Add WebMCP to an app, choose MCP-B packages, connect tools, and troubleshoot integrations.

Use these guides to complete a specific task in an existing project. If you need a guided first
experience, start with the [tutorials](/tutorials/index).

## Adopt WebMCP

Choose a runtime and expose application behavior to agents.

<CardGroup cols={2}>
  <Card title="Choose a runtime" icon="code-branch" href="/how-to/choose-runtime">
    Choose native WebMCP, the tool-only polyfill, or the full `@mcp-b/global` runtime.
  </Card>

  <Card title="Add tools to an existing app" icon="puzzle-piece" href="/how-to/add-tools-to-an-existing-app">
    Expose existing application functions as WebMCP tools.
  </Card>

  <Card title="Use schemas and structured output" icon="brackets-curly" href="/how-to/use-schemas-and-structured-output">
    Add input schemas, output schemas, and typed results to MCP-B tools.
  </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>

## Integrate a framework

<CardGroup cols={2}>
  <Card title="Integrate with a framework" icon="code" href="/how-to/frameworks">
    Register tools through the lifecycle patterns used by your frontend framework.
  </Card>
</CardGroup>

## Connect and verify tools

Bridge tools across contexts, diagnose failures, and test runtime behavior.

<CardGroup cols={2}>
  <Card title="Connect desktop agents with the local relay" icon="tower-broadcast" href="/how-to/connect-desktop-agents-with-local-relay">
    Bridge browser tools to desktop MCP clients.
  </Card>

  <Card title="Bridge tools across iframes" icon="window-restore" href="/how-to/bridge-tools-across-iframes">
    Expose tools from an embedded iframe to its parent page.
  </Card>

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

  <Card title="Test native and polyfill runtimes" icon="flask-vial" href="/how-to/test-native-and-polyfill">
    Run the same checks against native and polyfilled implementations.
  </Card>
</CardGroup>