# WebMCP Documentation

## Docs

- [null](https://docs.mcp-b.ai/CLAUDE.md)
- [null](https://docs.mcp-b.ai/CODE_BLOCKS_STYLE_GUIDE.md)
- [null](https://docs.mcp-b.ai/NPM_PACKAGES_REPO_ISSUES.md)
- [null](https://docs.mcp-b.ai/SNIPPETS_IMPLEMENTATION_PLAN.md)
- [null](https://docs.mcp-b.ai/USING_SNIPPETS.md)
- [null](https://docs.mcp-b.ai/WEBMCP_ALIGNMENT_ANALYSIS.md)
- [Advanced Patterns](https://docs.mcp-b.ai/advanced.md): Advanced WebMCP patterns including Chrome extensions, dynamic tool registration, multi-tab communication, conditional tools, and complex application architectures.
- [Best Practices for Creating Tools](https://docs.mcp-b.ai/best-practices.md): Learn best practices for designing and implementing WebMCP tools on websites you control. Tool design principles, naming conventions, security, and optimal AI integration.
- [Building MCP-UI + WebMCP Apps](https://docs.mcp-b.ai/building-mcp-ui-apps.md): Complete guide to building interactive apps that AI agents can control. Scaffold bidirectional MCP-UI and WebMCP integration with create-webmcp-app CLI tool.
- [AI Browsers](https://docs.mcp-b.ai/calling-tools/ai-browsers.md): Native browser AI assistants that support WebMCP tools out of the box.
- [Chrome DevTools MCP](https://docs.mcp-b.ai/calling-tools/devtools-mcp.md): Build and test WebMCP websites with AI-driven development using Chrome DevTools Protocol.
- [Embedded Agent](https://docs.mcp-b.ai/calling-tools/embedded-agent.md): Add an AI agent to your website with a single custom element. The easiest way to let users interact with your WebMCP tools.
- [MCP-B Extension](https://docs.mcp-b.ai/calling-tools/extension.md): Browser extension that connects AI agents to WebMCP tools on any website.
- [Calling WebMCP Tools](https://docs.mcp-b.ai/calling-tools/index.md): Connect AI agents to your website tools. Choose from embedded agents, AI browsers, extensions, or developer tools.
- [Changelog](https://docs.mcp-b.ai/changelog.md): Complete changelog showing WebMCP package version history, breaking changes, migration guides, new features, bug fixes, and deprecation notices for all npm packages.
- [Architecture Overview](https://docs.mcp-b.ai/concepts/architecture.md): Understanding WebMCP components, data flow, and how everything works together
- [Context Engineering](https://docs.mcp-b.ai/concepts/context-engineering.md): Design patterns for giving AI models only the tools and information relevant to their current task
- [Extension Architecture](https://docs.mcp-b.ai/concepts/extension.md): Understanding the MCP-B browser extension components and architecture including background workers, content scripts, MCP transport layer, and native host integration.
- [Glossary](https://docs.mcp-b.ai/concepts/glossary.md): Key terminology and concepts used in WebMCP documentation. Complete reference for WebMCP, MCP, W3C Web Model Context API, tools, transports, and protocol terms.
- [MCP-UI Architecture](https://docs.mcp-b.ai/concepts/mcp-ui-integration.md): Architecture and communication flow for bidirectional AI-app integration using IframeParentTransport and IframeChildTransport for parent-child tool communication.
- [Core Concepts](https://docs.mcp-b.ai/concepts/overview.md): Key concepts and terminology for understanding WebMCP architecture
- [Performance Guidelines](https://docs.mcp-b.ai/concepts/performance.md): Optimizing WebMCP tool registration, execution, and communication for fast AI interactions. Reduce latency, minimize overhead, and improve tool execution speed.
- [Prompts](https://docs.mcp-b.ai/concepts/prompts.md): Learn how to register and use prompts in WebMCP. Prompts are reusable message templates that standardize AI interactions.
- [Resources](https://docs.mcp-b.ai/concepts/resources.md): Learn how to register and expose resources in WebMCP. Resources provide data endpoints that AI agents can read asynchronously.
- [Tool Schemas & Validation](https://docs.mcp-b.ai/concepts/schemas.md): Defining input schemas for WebMCP tools using JSON Schema and Zod. Enable automatic validation and help AI agents understand tool parameters with type-safe schemas.
- [Tool Design Quick Reference](https://docs.mcp-b.ai/concepts/tool-design.md): Quick reference checklist for WebMCP tool design. For detailed guidance with code examples, see Best Practices.
- [Tool Registration](https://docs.mcp-b.ai/concepts/tool-registration.md): How to register, manage, and lifecycle tools using navigator.modelContext with registerTool() and provideContext() methods for dynamic tool management.
- [Transport Layers](https://docs.mcp-b.ai/concepts/transports.md): Understanding how WebMCP communicates between browser contexts using TabServerTransport, IframeParentTransport, IframeChildTransport, and ExtensionServerTransport implementations.
- [Why WebMCP?](https://docs.mcp-b.ai/concepts/why-webmcp.md): Understand why WebMCP provides a better approach to browser AI than automation, remote APIs, or computer use. Compare deterministic function calls vs UI navigation.
- [Local Development](https://docs.mcp-b.ai/development.md): Set up and develop with WebMCP locally on your website. Complete development workflow guide with debugging tools, testing strategies, and HMR support.
- [Examples](https://docs.mcp-b.ai/examples.md): Explore production-ready WebMCP implementations including React apps, vanilla JavaScript examples, and MCP-UI integrations for various frameworks and use cases.
- [Understanding Agents](https://docs.mcp-b.ai/extension/agents.md): Learn about the specialized AI agents in the MCP-B extension and when to use each one
- [MCP-B Extension](https://docs.mcp-b.ai/extension/index.md): Download the MCP-B browser extension for Chrome to build AI-powered userscripts, automate websites, and expose website tools to AI agents with native desktop integration.
- [Managing Userscripts](https://docs.mcp-b.ai/extension/managing-userscripts.md): Learn how to download, upload, enable, disable, and organize your userscripts in the MCP-B extension
- [Angular Integration](https://docs.mcp-b.ai/frameworks/angular.md): Integrate WebMCP tools with Angular using services and lifecycle hooks.
- [Framework Integrations](https://docs.mcp-b.ai/frameworks/index.md): Integrate WebMCP with any JavaScript or backend framework using production-ready examples.
- [Nuxt Integration](https://docs.mcp-b.ai/frameworks/nuxt.md): Integrate WebMCP tools with Nuxt 3, handling SSR safely.
- [Phoenix LiveView Integration](https://docs.mcp-b.ai/frameworks/phoenix-liveview.md): Integrate WebMCP tools with Phoenix LiveView using JavaScript hooks.
- [Rails Integration](https://docs.mcp-b.ai/frameworks/rails.md): Integrate WebMCP tools with Ruby on Rails using Stimulus controllers.
- [React & Next.js Integration](https://docs.mcp-b.ai/frameworks/react.md): Integrate WebMCP tools with React and Next.js, handling SSR safely with best practices for App Router.
- [Remix](https://docs.mcp-b.ai/frameworks/remix.md): Integrate WebMCP with Remix using client-only patterns for SSR safety.
- [Svelte & SvelteKit Integration](https://docs.mcp-b.ai/frameworks/svelte.md): Integrate WebMCP tools with Svelte and SvelteKit.
- [TanStack Start](https://docs.mcp-b.ai/frameworks/tanstack-start.md): Integrate WebMCP with TanStack Start using client-only patterns for SSR safety.
- [Vue.js Integration](https://docs.mcp-b.ai/frameworks/vue.md): Integrate WebMCP tools with Vue 3 using the Composition API.
- [Frontend Tool Calling](https://docs.mcp-b.ai/frontend-tools.md): Use WebMCP tools with frontend AI frameworks like Assistant-UI and AG-UI
- [WebMCP Documentation](https://docs.mcp-b.ai/introduction.md): W3C standard for making websites AI-accessible - Enable AI agents to interact with your website through structured tools via navigator.modelContext
- [Live WebMCP Prompt Examples](https://docs.mcp-b.ai/live-prompt-examples.md): Interactive examples of WebMCP prompts that AI agents can retrieve in real-time. Working demonstrations of greeting and code review prompts.
- [Live WebMCP Resource Examples](https://docs.mcp-b.ai/live-resource-examples.md): Interactive examples of WebMCP resources that AI agents can read in real-time. Working demonstrations of static and template-based resources.
- [Live WebMCP Tool Examples](https://docs.mcp-b.ai/live-tool-examples.md): Interactive examples of WebMCP tools that AI agents can call in real-time. Working demonstrations of calculator, color converter, storage, and DOM query tools.
- [llms.txt](https://docs.mcp-b.ai/llms-txt.md): View auto-generated llms.txt and llms-full.txt files for AI assistant indexing - optimized for Claude, ChatGPT, Gemini, and other LLMs
- [WebMCP over Model Context Protocol (MCP)](https://docs.mcp-b.ai/mcp-integration.md): Connect AI assistants to WebMCP documentation through MCP for instant access to guides and examples
- [Native Host Setup](https://docs.mcp-b.ai/native-host-setup.md): Connect WebMCP to local MCP clients like Claude Code and Claude Desktop. Bridge browser tools to desktop AI assistants with HTTP-based MCP protocol support.
- [Chrome DevTools MCP](https://docs.mcp-b.ai/packages/chrome-devtools-mcp.md): MCP server for Chrome DevTools with WebMCP integration - control browsers and build tools with AI-driven development
- [@mcp-b/extension-tools](https://docs.mcp-b.ai/packages/extension-tools.md): MCP wrappers for 62+ Chrome Extension APIs enabling protocol-based browser control. Manifest V3 compatible with comprehensive TypeScript definitions and Zod validation.
- [@mcp-b/global](https://docs.mcp-b.ai/packages/global.md): W3C Web Model Context API polyfill implementing navigator.modelContext. Turn JavaScript functions into AI-accessible tools with registerTool() for browser-based agent integration.
- [@mcp-b/mcp-iframe](https://docs.mcp-b.ai/packages/mcp-iframe.md): Custom element for exposing iframe MCP tools, resources, and prompts to parent pages via the Web Model Context API.
- [@mcp-b/react-webmcp](https://docs.mcp-b.ai/packages/react-webmcp.md): React hooks for Model Context Protocol with automatic lifecycle management and Zod validation. Register AI-accessible tools with useWebMCP() hook for React 18+ applications.
- [@mcp-b/smart-dom-reader](https://docs.mcp-b.ai/packages/smart-dom-reader.md): Token-efficient DOM extraction library for AI-powered browser automation. Extracts interactive elements, forms, and semantic content in compact AI-readable format.
- [@mcp-b/transports](https://docs.mcp-b.ai/packages/transports.md): Browser-specific transport implementations for Model Context Protocol including TabServerTransport, IframeTransport, and ExtensionServerTransport for web and extension MCP communication.
- [@mcp-b/webmcp-ts-sdk](https://docs.mcp-b.ai/packages/webmcp-ts-sdk.md): Browser-adapted Model Context Protocol TypeScript SDK supporting dynamic tool registration after connection. Modified MCP SDK for W3C Web Model Context API compatibility.
- [Quick Start](https://docs.mcp-b.ai/quickstart.md): Add AI agent support to your website in minutes with WebMCP. Turn JavaScript functions into AI-accessible tools using React hooks, vanilla JS, or script tags.
- [Security Best Practices](https://docs.mcp-b.ai/security.md): Comprehensive security best practices for WebMCP tools including authentication, authorization, input validation, prompt injection protection, and defending against malicious agents.
- [Claude Code](https://docs.mcp-b.ai/tools/claude-code.md): Configure Claude Code to help write, review, and update your WebMCP documentation
- [Troubleshooting](https://docs.mcp-b.ai/troubleshooting.md): Troubleshooting guide for WebMCP setup issues, tool registration errors, native host connection problems, extension detection, and debugging MCP client connections.


## Optional

- [Live Demo](https://webmcp.sh)
- [Examples](https://github.com/WebMCP-org/examples)