Web to MCP
WebToMCP · Coding
Web to MCP ist eine Chrome-Erweiterung und ein Model-Context-Protocol-Server, der jede Komponente einer Live-Webseite erfasst und ihren Code samt Styles an Cursor oder Claude Code schickt.
Über Web to MCP
What Is Web to MCP
Web to MCP löst ein enges, lästiges Problem: einer KI-Assistenz eine UI-Komponente zu erklären. Statt „ein blauer Button mit abgerundeten Ecken und Farbverlauf" zu tippen, zeigst du auf das echte Element und schickst es los.
Das Tool besteht aus zwei Teilen, die zusammenspielen. Eine Chrome-Erweiterung erledigt die Erfassung auf jeder Seite, die du besuchst, und ein MCP-Server liefert diese Komponente in deine Assistenz. Es richtet sich an Entwickler, die schon mit Cursor oder Claude Code arbeiten und einen pixelgenauen Ausgangspunkt statt Rätselraten wollen.
Die wichtigste Einschränkung ist der Umfang. Web to MCP versorgt nur die Assistenz; es schreibt oder ändert keinen Code von allein, und die Qualität hängt weiter an deinem Modell und deinem Prompt. Außerdem braucht es den Chrome-Browser und ein Google-Konto, und es läuft über eine persönliche MCP-URL statt über einen geteilten Server.
Getting Started
- Installiere die Web-to-MCP-Erweiterung aus dem Chrome Web Store.
- Melde dich mit deinem Google-Konto an, um deine persönliche MCP-URL zu erzeugen.
- Trage diese URL in die Konfigurationsdatei deiner Assistenz ein (Cursor liest
.cursor/mcp.json; Claude Code nutzt seine eigene MCP-Konfiguration). - Öffne eine beliebige Webseite, klicke auf das Symbol der Erweiterung und aktiviere den Auswahlmodus.
- Klicke das gewünschte Element an, kopiere seine Referenz-ID und bitte die Assistenz, es nachzubauen.
Produktinformationen
Ein kurzer Überblick über Preise, unterstützte Plattformen und die Leistung von Web to MCP.
Am besten für
Die Nutzer, Aufgaben und Szenarien, für die dieses Tool am besten passt.
Nutzer
- Frontend-Entwickler mit Cursor oder Claude Code, weil der erfasste Code direkt in ihren gewohnten Chat-Ablauf fließt.
- Design-Engineers, die Mockups und echte Seiten in Produktionskomponenten überführen und exakte Stilwerte statt Näherungen wollen.
- Teams, die neue Leute einarbeiten, denn eine erprobte Komponente zu erfassen geht schneller, als ihre Styles von Hand zu dokumentieren.
Aufgaben
- Eine Komponente von einer anderen Seite nachbauen, die die Erweiterung mit ihrer DOM-Struktur und dem berechneten CSS erfasst.
- Buttons oder Karten eines eigenen Designsystems angleichen, damit der neue Code nicht ausschert.
- Ein Layout nach einer Vorlage skizzieren, wo mehrere echte Muster zu greifen mehr bringt als jedes einzeln zu beschreiben.
Szenarien
- Du entdeckst eine Preistabelle, die dir gefällt, und willst ihre Struktur in deinem Stack nachbauen lassen.
- Ein Designer reicht dir eine Live-Seite durch, und du brauchst das echte Hover-Verhalten statt eines flachen Bilds.
- Du willst verstehen, wie eine komplexe Komponente gebaut ist, und möchtest den echten Code-Kontext zum Nachlesen.
Wichtigste Funktionen
Komponente mit einem Klick erfassen
Klicke auf das Symbol der Erweiterung, wechsle in den Auswahlmodus und wähle ein beliebiges Element auf einer Live-Seite. Web to MCP hält die DOM-Struktur und das berechnete CSS so fest, wie sie gerendert werden, sodass deine Assistenz dasselbe erhält, was ein Besucher sieht. Dev-Tools öffnen oder Styles abschreiben musst du nicht.
Direkte Lieferung über MCP
Erfasste Komponenten wandern über das Model Context Protocol zu deiner Assistenz, über eine persönliche, an dein Konto gebundene URL. Cursor und Claude Code erkennen das Werkzeug von selbst, sobald die URL in ihrer Konfiguration steht. Im Chat verweist du über die ID auf das Element, und die Übergabe bleibt in den Werkzeugen, die du ohnehin nutzt.
Framework-unabhängiges Ergebnis
Die Erfassung funktioniert gleich gut auf React, Vue, Angular und reinen HTML-und-CSS-Seiten, weil sie das gerenderte Ergebnis liest und nicht das Innenleben des Frameworks. Deine Assistenz passt diesen Kontext danach an den Stack an, in dem du baust. Nenne im Prompt trotzdem dein Framework und dein Designsystem, um das Ergebnis zu lenken.
Semantischer Kontext, nicht nur Pixel
Anders als ein Screenshot enthält die Erfassung semantisches HTML, exakte CSS-Werte und Layout-Kontext wie die umgebende Struktur und Hover-Zustände. Genau dieses Detail lässt die Assistenz eine optisch nahe Lösung anstreben, statt ein Bild neu zu deuten. Web to MCP gibt an, dass die Daten direkt zur Assistenz gehen und nicht auf seinen Servern liegen.
Persönlicher, einzigartiger MCP-Endpunkt
Jedes angemeldete Konto erhält seine eigene MCP-URL, die nach der Google-Anmeldung entsteht. Du fügst sie in eine projektbezogene oder globale Konfigurationsdatei ein, und die Verbindung bleibt privat. Dadurch dauert die Einrichtung nur wenige Minuten, statt einen eigenen Server aufzusetzen.
Kompatibel mit Claude Code und Cursor
Die Einrichtungsanleitungen decken Cursor und Claude Code ab, die beiden Assistenzen, um die herum das Tool gebaut wurde. Bei Cursor trägst du einen Eintrag in .cursor/mcp.json ein; bei Claude Code bearbeitest du seine MCP-Konfigurationsdatei. Beide Wege folgen nach der Installation demselben Ablauf aus Erfassen und Verweisen.
Vor- und Nachteile
Vorteile
- Nimmt das Rätselraten beim Beschreiben einer Oberfläche ab, weil es den echten Code und die echten Styles schickt.
- Überträgt semantisches HTML und exaktes CSS statt eines flachen Screenshots, was den Treffer beim ersten Versuch verbessert.
- Läuft auf jeder Seite und mit jedem Frontend-Framework, weil es das gerenderte Ergebnis liest.
- Die Einrichtung dauert mit einer persönlichen MCP-URL und einer Standard-Konfigurationsdatei nur wenige Minuten.
- Die Komponentendaten gehen direkt zur Assistenz und liegen nicht auf den Servern des Anbieters.
Nachteile
- Verlangt Chrome und ein Google-Konto, sodass Nutzer von Firefox oder Safari außen vor bleiben.
- Die Qualität hängt weiter an deinem Modell und deinem Prompt: eine bessere Eingabe, kein fertiges Ergebnis.
- Der kostenlose Tarif begrenzt die Erfassungen pro Monat, und Vielnutzer brauchen den Pro-Tarif.
Häufige Fragen
Es erfasst eine Komponente von jeder Live-Seite und schickt ihren Code samt Styles an eine KI-Assistenz, sodass du sie bitten kannst, diese Komponente nachzubauen, ohne sie selbst zu beschreiben.
Ähnliche Inhalte
Entdecke passende Tools, Skills und Artikel zu Web to MCP.
Alternativen zu Web to MCP
Udon
Udon · Coding · ProduktivitätUdon macht aus einem Apple-Silicon-Mac einen Heimserver, den Sie im Browser steuern, mit Containern, Dateifreigaben und einem optionalen KI-Systemadministrator.
offstage
offstage cloud · Coding · Produktivitätoffstage gibt KI-Agenten und CI-Jobs einen echten Mac: ein frisches macOS-27-Konto auf Apple Silicon, per API gesteuert und sekundengenau abgerechnet.
BotBus
Chengdu Tuyang Tusen Technology Co., Ltd. · Coding · ProduktivitätMit BotBus lassen sich KI-Agenten vom Smartphone steuern, auch wenn der Rechner im Büro steht: Befehle freigeben, Aufgaben starten, Ergebnisse lesen.