MCPInstall
Web-To-MCP logo

Web-To-MCP

by Web-to-MCP Web-to-MCP/mcp-server

Web-to-MCP lets you capture any real UI component from a live website and pull its exact details into your AI coding assistant. Click the Chrome extension, select an element, and you’ll get a reference ID. Paste that ID in Cursor or Claude, and your MCP server returns the component’s HTML, CSS, typography, colors, spacing, and layout context. What this really means is you stop guessing from screenshots and start from the source of truth. How it works 1. Open the extension and pick any element on a page. 2. Receive a reference ID for that capture. 3. In your IDE chat, call the MCP tool with the ID to fetch the spec and code. What you get Exact DOM structure plus consolidated CSS. Computed styles for sizing, spacing, fonts, and colors. Small preview image for quick visual check. Clean output you can use in React, Vue, Angular, or plain HTML/CSS. Why it’s useful Designers grab examples fast. Developers get accurate code. The handoff shrinks from trial-and-error to minutes, so teams ship UI that matches what they saw on the web.

View on GitHubWebsite
READMEmain

Web to MCP

Send any website component to Cursor, Claude Code, or your AI coding assistant in one click.

https://web-to-mcp.com

Web to MCP is a powerful browser extension and web service that bridges the gap between design and code by allowing you to capture website components and send them directly to your AI coding assistant using the Model Context Protocol (MCP).

🌟 Features

  • 🎯 One-Click Component Capture: Select any website element and send it directly to your AI assistant
  • 🔗 MCP Integration: Works seamlessly with Cursor IDE and Claude Code via Model Context Protocol
  • 🎨 Pixel-Perfect References: Capture actual rendered components with their exact styling
  • ⚡ Lightning Fast: 10x faster than traditional methods of describing UI components
  • 🔒 Secure: Google OAuth authentication with secure MCP channels
  • 🌐 Universal: Works with any website and any component
  • 💳 Flexible Pricing: Free tier available with premium features

🚀 Quick Start

Prerequisites

  • Chrome browser (latest version)
  • Google account for authentication
  • Cursor IDE or Claude Code (for MCP integration)

Installation

  1. Install the Chrome Extension

    https://chromewebstore.google.com/detail/web-to-mcp/hbnhkfkblpgjlfonnikijlofeiabolmi

  2. Sign in to your account

    • Click the extension icon
    • Authenticate with your Google account
    • Get your unique MCP URL

  3. Configure MCP in your AI tool

    • Follow the setup guides below for Cursor or Claude Code
    • Add your MCP URL to enable direct component transfer

🛠️ Setup Guides

For Cursor IDE

  1. Install the Chrome Extension (see above)

  2. Configure MCP in Cursor

    • Open Cursor Settings (Ctrl+Shift+J or Cmd+Shift+J)
    • Navigate to Features → Model Context Protocol
    • Create a new MCP configuration file

  3. Add MCP Configuration Create .cursor/mcp.json in your project root:

    {
  "mcpServers": {
    "web-to-mcp": {
      "url": "https://web-to-mcp.com/mcp/<YOUR_UNIQUE_ID>"
    }
  }
}

  4. Start Capturing

    • Navigate to any website
    • Click the extension icon
    • Select any component you want to capture
    • Reference it in Cursor using the component ID

For Claude Code

  1. Install the Chrome Extension (see above)

  2. Install Claude Code

    # Download from https://claude.ai/code
# Verify installation
claude --version

  3. Add MCP Server

    claude mcp add --transport http web-to-mcp https://web-to-mcp.com/mcp/<YOUR_UNIQUE_ID>

  4. Start Capturing

    • Navigate to any website
    • Click the extension icon
    • Select any component you want to capture
    • Reference it in Claude Code using the component ID