Web to MCP
WebToMCP · Programmation
Web to MCP est une extension Chrome et un serveur Model Context Protocol qui capture n'importe quel composant d'un site en direct et envoie son code et ses styles à Cursor ou Claude Code.
À propos de Web to MCP
What Is Web to MCP
Web to MCP règle un problème précis et pénible : expliquer un composant d'interface à un assistant IA. Au lieu d'écrire « un bouton bleu aux coins arrondis avec un dégradé », vous désignez l'élément réel et vous l'envoyez.
L'outil se compose de deux pièces qui travaillent ensemble. Une extension Chrome se charge de la capture sur le site que vous parcourez, et un serveur MCP livre ce composant à votre assistant. Il vise les développeurs qui utilisent déjà Cursor ou Claude Code et qui veulent un point de départ fidèle au pixel plutôt qu'une approximation.
La principale limite tient à la portée. Web to MCP ne fait qu'alimenter l'assistant ; il n'écrit ni ne modifie le code tout seul, et la qualité du résultat dépend encore de votre modèle et de votre prompt. Il exige aussi le navigateur Chrome et un compte Google, et fonctionne via une URL MCP personnelle plutôt qu'un serveur partagé.
Getting Started
- Installez l'extension Web to MCP depuis le Chrome Web Store.
- Connectez-vous avec votre compte Google pour générer votre URL MCP unique.
- Ajoutez cette URL au fichier de configuration de votre assistant (Cursor lit
.cursor/mcp.json; Claude Code utilise sa propre configuration MCP). - Ouvrez n'importe quel site, cliquez sur l'icône de l'extension et activez le mode de sélection.
- Cliquez sur l'élément voulu, copiez son id de référence et demandez à l'assistant de le reconstruire.
Informations sur le produit
Aperçu des tarifs, des plateformes compatibles et des performances de Web to MCP.
Idéal pour
Les utilisateurs, tâches et cas d'usage où cet outil convient le mieux.
Utilisateurs
- Développeurs front-end sous Cursor ou Claude Code, car le code capturé entre directement dans leur flux de chat habituel.
- Profils de design engineering qui transforment maquettes et pages réelles en composants de production et veulent des valeurs de style exactes, pas approximatives.
- Équipes qui accueillent de nouvelles personnes, puisque capturer un composant déjà éprouvé va plus vite que documenter ses styles à la main.
Tâches
- Reconstruire un composant repéré sur un autre site, que l'extension capture avec sa structure DOM et son CSS calculé.
- Aligner les boutons ou les cartes d'un design system maison, pour que le nouveau code ne détonne pas avec ce que l'app utilise déjà.
- Prototyper une mise en page à partir d'une référence, où prendre plusieurs motifs réels vaut mieux que décrire chacun de zéro.
Cas d'usage
- Vous repérez un tableau de tarifs qui vous plaît et vous voulez que l'assistant reproduise sa structure dans votre stack.
- Un designer vous passe une page en direct, et vous avez besoin du vrai comportement au survol, pas d'une image figée.
- Vous cherchez à comprendre comment un composant complexe est construit et vous voulez le contexte de code pour l'étudier.
Fonctionnalités clés
Capture d'un composant en un clic
Cliquez sur l'icône de l'extension, passez en mode sélection et choisissez n'importe quel élément d'une page en direct. Web to MCP enregistre la structure DOM et le CSS calculé tel qu'il est rendu, si bien que votre assistant reçoit ce qu'un visiteur voit. Inutile d'ouvrir les outils de développement ou de recopier les styles à la main.
Livraison directe via MCP
Les composants capturés rejoignent votre assistant via le Model Context Protocol, grâce à une URL personnelle liée à votre compte. Cursor et Claude Code détectent l'outil d'eux-mêmes dès que l'URL figure dans leur configuration. Dans le chat, vous référencez l'élément par son id, et le passage reste dans les outils que vous utilisez déjà.
Sortie indépendante du framework
La capture marche pareil sur React, Vue, Angular et les sites en HTML et CSS brut, parce qu'elle lit le rendu final et non les entrailles du framework. Votre assistant adapte ensuite ce contexte à la stack dans laquelle vous développez. Pensez tout de même à préciser votre framework et votre design system dans le prompt pour orienter le résultat.
Contexte sémantique, pas seulement des pixels
Contrairement à une capture d'écran, on récupère ici du HTML sémantique, des valeurs CSS exactes et du contexte de mise en page comme la structure alentour et les états au survol. C'est ce détail qui permet à l'assistant de viser un rendu visuel proche au lieu de réinterpréter une image. Web to MCP affirme que ses données partent directement vers l'assistant et ne sont pas stockées sur ses serveurs.
Point de terminaison MCP personnel et unique
Chaque compte connecté reçoit sa propre URL MCP, générée après la connexion Google. Vous la collez dans un fichier de configuration de projet ou global, et la connexion vous reste privée. Ce choix réduit l'installation à quelques minutes, là où monter son propre serveur prend bien plus longtemps.
Compatible avec Claude Code et Cursor
Les guides d'installation couvrent Cursor et Claude Code, les deux assistants autour desquels l'outil a été conçu. Sous Cursor, vous ajoutez une entrée dans .cursor/mcp.json ; sous Claude Code, vous modifiez son fichier de configuration MCP. Les deux chemins suivent le même flux : capturer, puis référencer après l'installation.
Avantages et inconvénients
Avantages
- Supprime l'approximation quand on décrit une interface à un assistant, puisqu'il envoie le vrai code et les vrais styles.
- Transmet du HTML sémantique et du CSS exact au lieu d'une capture plate, ce qui améliore la réussite au premier essai.
- Fonctionne sur n'importe quel site et avec n'importe quel framework front-end car il lit le rendu final.
- L'installation prend quelques minutes avec une URL MCP personnelle et un fichier de configuration standard.
- Les données du composant partent directement vers l'assistant et ne sont pas stockées sur les serveurs de l'éditeur.
Inconvénients
- Exige Chrome et un compte Google, ce qui laisse de côté les utilisateurs de Firefox ou Safari.
- La qualité du résultat dépend de votre modèle et de votre prompt : c'est une meilleure entrée, pas un travail fini.
- L'offre gratuite limite les captures par mois, et les gros utilisateurs devront passer au plan Pro.
Questions fréquentes
Il capture un composant sur n'importe quel site en direct et envoie son code et ses styles à un assistant IA, pour que vous puissiez lui demander de reconstruire ce composant sans le décrire vous-même.
Contenus associés
Découvrez des outils, des compétences et des articles liés à Web to MCP.
Alternatives à Web to MCP
Base Code
Base44 (Wix) · Programmation · ProductivitéBase Code est un environnement de développement cloud partagé signé Base44. Votre équipe décrit des modifications sur un dépôt GitHub dans le chat, les vérifie en aperçu et les renvoie sous forme de pull requests.
Google EmbeddingGemma 2
Google DeepMind · Rédaction · Image · ProgrammationGoogle EmbeddingGemma 2 est un modèle ouvert de 740 millions de paramètres qui transforme texte, code, images, audio et images vidéo en vecteurs d'un même espace de 768 dimensions, sur un téléphone ou un ordinateur portable.
GitGlow
GitGlow · Programmation · ProductivitéGitGlow est un client Git de bureau qui place votre code et les modifications de vos agents IA dans une même revue, pour savoir ce qui quitte votre machine avant de livrer.