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

# WebMCP over Model Context Protocol (MCP)

> Connect AI assistants to WebMCP documentation through MCP for instant access to guides and examples

# WebMCP Documentation via MCP

> Connect your AI agent to WebMCP documentation for instant access to guides, examples, and API references

Give your AI assistant access to the complete WebMCP documentation through our Model Context Protocol (MCP) server. Your agent can explore the docs, find code examples, and help you implement WebMCP features.

## What is MCP?

MCP is a protocol for integrating tools with AI agents. It greatly enhances the capabilities of your AI agents by providing them with real-time data and context.

The WebMCP documentation MCP server allows your AI assistant to explore and search this documentation site. When connected, your agent can help you by finding relevant guides, pulling up code examples, and answering questions about WebMCP implementation.

## How does it work?

You need an MCP-capable agent environment to connect to the WebMCP documentation server. Popular options include Claude Desktop, Claude Code, Cursor, Windsurf, and ChatGPT.

Once connected, your AI assistant can explore the documentation to help you:

* Find relevant guides and tutorials
* Locate specific code examples and patterns
* Answer questions about WebMCP features and APIs
* Troubleshoot integration issues
* Understand best practices and implementation details

## Connecting to the Documentation Server

The WebMCP documentation is available via MCP at `https://docs.mcp-b.ai/mcp`.

When your client supports direct URL configuration, use:

```
https://docs.mcp-b.ai/mcp
```

For command-based configuration, use:

```json theme={null}
{
  "mcpServers": {
    "WebMCP Docs": {
      "command": "npx",
      "args": ["mcp-remote", "https://docs.mcp-b.ai/mcp"]
    }
  }
}
```

## Setup Instructions by Client

<AccordionGroup>
  <Accordion title="Claude Code" icon="robot">
    Run the following command in your terminal:

    ```bash theme={null}
    claude mcp add --transport http "WebMCP Docs" "https://docs.mcp-b.ai/mcp"
    ```

    Once added, Claude Code can explore the WebMCP documentation to help you implement features, debug issues, and find code examples.

    <Info>
      See the [Claude Code documentation](./tools/claude-code) for more ways to optimize your WebMCP development workflow.
    </Info>
  </Accordion>

  <Accordion title="Claude Desktop" icon="desktop">
    1. Go to **Settings** → **Connectors**
    2. Click **Add custom connector**
    3. Name it "WebMCP Docs"
    4. Add `https://docs.mcp-b.ai/mcp` as the server URL
    5. Click **Save**
    6. Click **Connect** to connect to the documentation server

    Claude Desktop can now explore and reference the WebMCP documentation in your conversations.
  </Accordion>

  <Accordion title="Cursor" icon="code">
    In `.cursor/mcp.json` in your project root, add:

    ```json theme={null}
    {
      "mcpServers": {
        "WebMCP Docs": {
          "url": "https://docs.mcp-b.ai/mcp"
        }
      }
    }
    ```

    Restart Cursor to enable documentation access for your AI assistant.
  </Accordion>

  <Accordion title="Windsurf" icon="wind">
    In `mcp_config.json`, add:

    ```json theme={null}
    {
      "mcpServers": {
        "WebMCP Docs": {
          "command": "npx",
          "args": ["mcp-remote", "https://docs.mcp-b.ai/mcp"]
        }
      }
    }
    ```

    Restart Windsurf to enable documentation access for your AI assistant.
  </Accordion>

  <Accordion title="Codex" icon="terminal">
    Add the following to your `~/.codex/config.toml`:

    ```toml theme={null}
    [mcp_servers.webmcp_docs]
    command = "npx"
    args = ["-y", "mcp-remote", "https://docs.mcp-b.ai/mcp"]
    ```

    Restart Codex to enable documentation access for your AI assistant.
  </Accordion>

  <Accordion title="ChatGPT" icon="message">
    <Note>
      MCP is only available for paid users in beta on ChatGPT web, by enabling Developer Mode.
    </Note>

    1. Enable **Developer Mode** in ChatGPT settings
    2. Go to **Settings** → **Connectors**
    3. Click **Add MCP server**
    4. Add `https://docs.mcp-b.ai/mcp` as the server URL
    5. Name it "WebMCP Docs"
    6. Click **Save** and **Connect**

    ChatGPT can now explore the WebMCP documentation during conversations.
  </Accordion>

  <Accordion title="VS Code (Cline Extension)" icon="code">
    If you're using the Cline extension for VS Code:

    1. Open VS Code settings
    2. Navigate to Cline extension settings
    3. Find **MCP Servers** configuration
    4. Add a new server with:
       * **Name**: WebMCP Docs
       * **URL**: `https://docs.mcp-b.ai/mcp`
    5. Save and restart VS Code

    Alternatively, edit your Cline configuration file directly:

    ```json theme={null}
    {
      "mcpServers": {
        "WebMCP Docs": {
          "url": "https://docs.mcp-b.ai/mcp"
        }
      }
    }
    ```
  </Accordion>
</AccordionGroup>

## What Your Agent Can Do

Once connected to the documentation server, your AI assistant can:

<CardGroup cols={2}>
  <Card title="Search Documentation" icon="magnifying-glass">
    Find relevant pages, code examples, and API references instantly
  </Card>

  <Card title="Get Code Examples" icon="code">
    Access tested TypeScript and JavaScript examples for all WebMCP features
  </Card>

  <Card title="Understand Best Practices" icon="lightbulb">
    Learn recommended patterns for tool registration, security, and performance
  </Card>

  <Card title="Troubleshoot Issues" icon="wrench">
    Get help with common integration problems and debugging techniques
  </Card>
</CardGroup>

## Example Usage

After connecting the WebMCP MCP server, you can ask your AI assistant questions like:

<AccordionGroup>
  <Accordion title="Implementation Questions">
    * "How do I register a tool with WebMCP in React?"
    * "Show me how to set up the tab transport"
    * "What's the best way to validate tool parameters?"
  </Accordion>

  <Accordion title="Debugging Help">
    * "Why isn't my tool appearing in Claude Desktop?"
    * "How do I handle errors in WebMCP tool handlers?"
    * "What are common CORS issues with WebMCP?"
  </Accordion>

  <Accordion title="Architecture Questions">
    * "How does WebMCP's architecture work?"
    * "What's the difference between client and server transports?"
    * "How do I secure my WebMCP implementation?"
  </Accordion>
</AccordionGroup>

## Resources

<CardGroup cols={2}>
  <Card title="MCP Documentation" icon="book" href="https://modelcontextprotocol.io">
    Learn more about the Model Context Protocol
  </Card>

  <Card title="WebMCP Quickstart" icon="rocket" href="./quickstart">
    Get started with WebMCP in your application
  </Card>

  <Card title="GitHub Repository" icon="github" href="https://github.com/WebMCP-org">
    View source code and contribute
  </Card>

  <Card title="Discord Community" icon="discord" href="https://discord.gg/ZnHG4csJRB">
    Get help and share your projects
  </Card>
</CardGroup>

## Troubleshooting

<AccordionGroup>
  <Accordion title="Connection fails">
    * Ensure you have an active internet connection
    * Verify the URL is correct: `https://docs.mcp-b.ai/mcp`
    * Try restarting your AI client application
    * Check if your firewall or proxy is blocking the connection
  </Accordion>

  <Accordion title="Documentation not appearing">
    * Confirm the MCP server is connected in your client settings
    * Try disconnecting and reconnecting the server
    * Restart your AI client application
    * Check the client's MCP server logs for errors
  </Accordion>

  <Accordion title="Outdated information">
    * The MCP server provides the latest published documentation
    * If you notice discrepancies, please report them on our [GitHub issues](https://github.com/WebMCP-org/docs/issues)
  </Accordion>
</AccordionGroup>

<Info>
  Have questions or issues? Join our [Discord community](https://discord.gg/ZnHG4csJRB) or [open an issue on GitHub](https://github.com/WebMCP-org/docs/issues).
</Info>