Web MCP Documentation
Complete guide to Web MCP - connecting web applications with AI assistants through Model Context Protocol
Web MCP Documentation
Welcome to the Web MCP documentation! Web MCP enables you to connect your web applications with AI assistants through the Model Context Protocol (MCP), creating powerful integrations that enhance both user and developer experiences.
🚀 Quick Start
Web MCP provides two main components:
- Web MCP Extension - Browser extension that exposes web capabilities as MCP servers
- MCP Inspector - Web-based tool for testing and debugging MCP servers
📚 Documentation
Getting Started
MCP Inspector
- Overview - Introduction to the MCP Inspector tool
- MCP Servers - Available MCP servers for testing
- OpenAI Apps SDK - Building UI-powered AI applications
Web MCP Configuration
- Complete setup guide for connecting Web MCP to various AI clients:
- VS Code - Use Web MCP in Agent mode
- Cursor - Configure MCP servers in Cursor IDE
- Claude Desktop - Connect via local proxy
- Windsurf - MCP integration with Windsurf
- Trae - Setup guide for Trae IDE
- Workers AI LLM Playground - Web-based AI chat with MCP support
- Online MCP Inspector - Browser-based debugging tool
🎯 What is Web MCP?
Web MCP is a browser extension that transforms your web browsing experience into an interactive playground for AI assistants. It exposes web page content, form interactions, and browser capabilities as MCP tools that AI assistants can use to:
- 📖 Read and analyze web content - Extract information from any webpage
- 📝 Interact with web forms - Fill out forms, submit data, navigate interfaces
- 🔍 Inspect page structure - Understand HTML, CSS, and JavaScript in real-time
- 🌐 Browse the web - Navigate between pages programmatically
- 🎨 Analyze UI components - Understand design patterns and accessibility
🔧 Key Features
Browser Extension
- Real-time MCP Server - Exposes current page as MCP tools
- Multiple Transport Methods - Support for SSE and Streamable HTTP
- Secure Isolation - Sandboxed execution environment
- Cross-platform - Works with Chrome, Firefox, and Edge
MCP Inspector
- Web-based Testing - No installation required
- Interactive Debugging - Real-time MCP server testing
- Server Discovery - Browse and test available servers
- Developer Tools - Comprehensive debugging capabilities
🤝 AI Client Integration
Web MCP seamlessly integrates with popular AI clients and development environments:
| Client | Setup Difficulty | Transport Support | Notes |
|---|---|---|---|
| VS Code | ⭐ Easy | SSE | Agent mode support |
| Cursor | ⭐ Easy | SSE | Native MCP integration |
| Claude Desktop | ⭐⭐ Medium | HTTP (via proxy) | Requires local proxy |
| Windsurf | ⭐ Easy | SSE | Built-in MCP support |
| Trae | ⭐ Easy | SSE | IDE-native integration |
| Online Inspector | ⭐ Easy | SSE + HTTP | No installation needed |
🛠️ Development Resources
For Developers
- MCP Protocol Specification - Official MCP documentation
- OpenAI Apps SDK - Build UI-powered AI applications
- Extension Development - Create custom Web MCP extensions
Testing Tools
- Online MCP Inspector - Test MCP servers in your browser
- Sample Servers - Pre-configured servers for testing
- Debugging Guide - Troubleshooting common issues
🆘 Getting Help
- 📖 Documentation - Browse through our comprehensive guides
- 🔍 MCP Inspector - Use our online testing tool
- 🐛 Issues - Report bugs on GitHub
- 💬 Community - Join our developer community
🚀 Next Steps
- Install Web MCP Extension - Get started with the browser extension
- Try MCP Inspector - Test available MCP servers online
- Configure Your AI Client - Connect Web MCP to your preferred AI tool
- Build Your Own Server - Create custom MCP servers
Ready to get started? Begin with the MCP Inspector →