Web to MCP
WebToMCP · Programação
O Web to MCP é uma extensão do Chrome e servidor de Model Context Protocol que captura qualquer componente real de um site e envia seu código e estilos ao Cursor ou Claude Code.
Sobre Web to MCP
What Is Web to MCP
O Web to MCP resolve um problema específico e chato: explicar um componente de interface a um assistente de IA. Em vez de escrever "um botão azul com cantos arredondados e degradê", você aponta para o elemento real e o envia.
A ferramenta se divide em duas partes que trabalham juntas. Uma extensão do Chrome cuida da captura em qualquer site que você visite, e um servidor MCP entrega esse componente ao seu assistente. Ela é feita para desenvolvedores que já usam Cursor ou Claude Code e querem pontos de partida fiéis ao pixel em vez de adivinhação.
A principal limitação é o alcance. O Web to MCP só alimenta o assistente; ele não escreve nem edita código sozinho, e a qualidade do resultado ainda depende do seu modelo e do seu prompt. Também exige o navegador Chrome e uma conta do Google, e funciona com uma URL MCP pessoal em vez de um servidor compartilhado.
Getting Started
- Instale a extensão do Web to MCP pela Chrome Web Store.
- Entre com sua conta do Google para gerar sua URL MCP única.
- Adicione essa URL ao arquivo de configuração do assistente (o Cursor lê
.cursor/mcp.json; o Claude Code usa a própria configuração MCP). - Abra qualquer site, clique no ícone da extensão e ative o modo de seleção.
- Clique no elemento que quiser, copie o id de referência e peça ao assistente para reconstruí-lo.
Informações do produto
Uma visão rápida dos preços, das plataformas compatíveis e do desempenho de Web to MCP.
Ideal para
Os usuários, tarefas e cenários em que esta ferramenta se encaixa melhor.
Usuários
- Desenvolvedores front-end no Cursor ou Claude Code, porque o código capturado entra direto no fluxo de chat que já usam.
- Profissionais de design engineering que transformam mockups e páginas reais em componentes de produção e querem valores de estilo exatos, não aproximados.
- Equipes que recebem gente nova, já que capturar um componente já testado é mais rápido do que documentar seus estilos à mão.
Tarefas
- Reconstruir um componente visto em outro site, que a extensão captura com sua estrutura DOM e seu CSS calculado.
- Igualar botões ou cartões de um design system próprio, para o código novo não destoar do que o app já usa.
- Prototipar um layout a partir de uma referência, onde pegar vários padrões reais rende mais do que descrever cada um do zero.
Cenários
- Você vê uma tabela de preços de que gosta e quer que o assistente reproduza a estrutura dela no seu stack.
- Um designer te passa uma página ao vivo, e você precisa do comportamento real ao passar o mouse, não de uma imagem estática.
- Você está aprendendo como um componente complexo é montado e quer o contexto de código para estudar.
Principais recursos
Captura de componentes em um clique
Clique no ícone da extensão, mude para o modo de seleção e escolha qualquer elemento de uma página real. O Web to MCP registra a estrutura DOM e o CSS calculado conforme a renderização, então o assistente recebe o mesmo que um visitante vê. Não precisa abrir o dev tools nem copiar estilos à mão.
Entrega direta via MCP
Os componentes capturados chegam ao seu assistente pelo Model Context Protocol usando uma URL pessoal ligada à sua conta. O Cursor e o Claude Code detectam a ferramenta sozinhos assim que a URL está na configuração. No chat você referencia o elemento pelo id, e a passagem fica dentro das ferramentas que você já usa.
Saída independente de framework
A captura funciona igual no React, no Vue, no Angular e em sites de HTML e CSS puro, porque lê o resultado renderizado, não as entranhas do framework. Depois seu assistente adapta esse contexto ao stack em que você constrói. Ainda assim, vale dizer no prompt qual é o seu framework e o seu design system para orientar o resultado.
Contexto semântico, não só pixels
Diferente de um print, aqui entram HTML semântico, valores CSS exatos e contexto de layout como a estrutura em volta e os estados de hover. Esse detalhe é o que permite ao assistente chegar perto do resultado visual em vez de reinterpretar uma imagem. O Web to MCP afirma que os dados vão direto ao assistente e não ficam guardados nos servidores da empresa.
Endpoint MCP pessoal e único
Cada conta logada recebe a própria URL MCP, gerada após o login com o Google. Você cola em um arquivo de configuração de projeto ou global, e a conexão fica só para você. Esse desenho deixa a instalação em poucos minutos, em vez de exigir levantar seu próprio servidor.
Compatível com Claude Code e Cursor
Os guias de instalação cobrem o Cursor e o Claude Code, os dois assistentes em torno dos quais a ferramenta foi feita. No Cursor você adiciona uma entrada em .cursor/mcp.json; no Claude Code edita o arquivo de configuração MCP. Os dois caminhos seguem o mesmo fluxo de capturar e referenciar depois de instalar.
Prós e contras
Prós
- Acaba com a adivinhação de descrever uma interface ao assistente, porque envia o código e os estilos reais.
- Manda HTML semântico e CSS exato no lugar de um print plano, o que melhora o acerto na primeira tentativa.
- Funciona em qualquer site e com qualquer framework front-end porque lê o resultado renderizado.
- A instalação leva poucos minutos com uma URL MCP pessoal e um arquivo de configuração padrão.
- Os dados do componente vão direto ao assistente e não ficam guardados nos servidores do fabricante.
Contras
- Exige Chrome e uma conta do Google, então quem usa Firefox ou Safari fica de fora.
- A qualidade do resultado depende do seu modelo e do seu prompt: é uma entrada melhor, não um trabalho pronto.
- O plano gratuito limita as capturas por mês, e quem captura muito vai precisar do plano Pro.
Perguntas frequentes
Ele captura um componente de qualquer site ao vivo e envia seu código e seus estilos a um assistente de IA, então você pode pedir que ele reconstrua aquele componente sem descrevê-lo.
Conteúdo relacionado
Explore ferramentas, skills e artigos relacionados a Web to MCP.
Alternativas a Web to MCP
Forefront
Forefront · ProgramaçãoO Forefront é uma plataforma web para construir com IA de código aberto. Você ajusta os principais modelos de linguagem de código aberto com seus próprios dados, avalia o desempenho deles e os roda por uma API ou os exporta para hospedar por conta própria. Desenvolvedores que querem a conveniência de uma plataforma fechada, mas fazem questão de ser donos dos modelos e dos dados, são o público-alvo aqui.
Startkit
StartKit.AI · ProgramaçãoStartkit é um boilerplate para criar produtos de SaaS com IA e wrappers de IA. Pense nele como um boilerplate para startups de IA com as partes chatas já conectadas: autenticação, pagamentos com Stripe e Lemon Squeezy, limites de uso, e-mail transacional e um kit inicial de API de IA que conversa com OpenAI, Anthropic, Groq ou Llama. Você clona o repositório, define seu preço e começa pela parte do produto que as pessoas realmente pagam. Ele é feito em Next.js sobre React e Tailwind, então boa parte do código boilerplate já parece familiar.
Testim
Tricentis · ProgramaçãoO Testim é uma plataforma de automação de testes com IA para criar e executar testes de ponta a ponta em aplicações web, mobile e Salesforce. Ele se apoia no aprendizado de máquina para manter os testes estáveis quando uma interface muda, então as equipes gastam menos tempo consertando seletores quebrados. Nada mal para uma ferramenta de testes automatizados que você pode começar a usar hoje. Você cria testes gravando ações no navegador e depois adiciona JavaScript quando precisa de mais controle. É uma escolha sólida para equipes de QA ocupadas.