MCP habilita Claude a criar, executar e testar aplicativos web apenas analisando capturas de tela

O que aconteceria se Claude pudesse não apenas escrever código, mas também salvá-lo em arquivos, instalar, executar e testá-lo controlando o navegador Chrome?

Nas últimas semanas, explorei como o Protocolo de Contexto de Modelo do Claude (MCP) desbloqueia essas possibilidades, e os resultados são empolgantes – no entanto, não é tudo perfeito ainda. Deixe-me guiá-lo através da minha jornada, desde os desafios até as descobertas e onde podemos chegar a seguir.

Se você prefere assistir a ler, aqui está um vídeo do YouTube?

Ligação com o passado

Anteriormente, criei uma ferramenta chamada ChatGPT Server Commander(blog, vídeo). Ela permitiu que o ChatGPT controlasse servidores ou seu computador remotamente ao habilitá-lo a ler e editar arquivos e executar comandos de terminal. Embora fosse indiscutivelmente poderosa, o processo de configuração era complexo e exigia um GPT personalizado conectado a um servidor local para gerenciar edição de arquivos e operações de terminal.

Essa capacidade de expandir a funcionalidade do ChatGPT foi a principal razão pela qual preferi ele ao Claude. Atualmente, o O1 carece de capacidades semelhantes, o que é o principal motivo pelo qual não estou interessado na assinatura do ChatGPT Pro.

Como o MCP preenche a lacuna dando ferramentas ao Claude

Mas as coisas estão finalmente começando a mudar com o lançamento do MCP pela Anthropic. Minha pergunta inicial quando encontrei isso foi,

“Como o MCP é diferente das Ações do ChatGPT?”

Agora posso responder a isso. Enquanto o ChatGPT se concentrou em conectar a servidores, os MCPs com o aplicativo desktop do Claude são voltados para a integração com serviços que rodam diretamente em sua máquina local. Essa mudança torna significativamente mais fácil realizar tarefas semelhantes às que criei com ChatGPT Server Commander.

Duass semanas atrás, decidi experimentar o MCP do Claude. Em teoria, parecia promissor, então decidi criar um Claude Desktop Commander. No entanto, durante uma transmissão ao vivo da tentativa (link), rapidamente encontrei problemas. Era poderoso, mas ainda não era amigável, e, para minha decepção, não consegui fazê-lo funcionar em 90 minutos. Foi como déjà vu: um ótimo conceito que simplesmente não estava pronto para o grande público ainda.

Aprendendo com os erros

Após meus desafios iniciais com o MCP, dei um passo atrás para reavaliar o que deu errado durante a transmissão ao vivo. Também entrei em contato no GitHub e conectei-me com outros que exploravam o protocolo. Essas conversas me ajudaram a descobrir dois mal-entendidos chave que causaram problemas durante meu experimento:

1. Claude baixa servidores automaticamente Uma grande desatenção foi que não percebi que Claude gerencia o download de servidores automaticamente. Durante a transmissão ao vivo, tentei baixar e gerenciar os servidores eu mesmo, o que causou complicações desnecessárias. Entender isso simplificou significativamente o processo.
2. A saída padrão é a chave para a comunicação Também aprendi que os servidores MCP se comunicam com Claude via saída padrão, que é tipicamente usada para logs de aplicação. Este foi um detalhe crucial que perdi, levando a problemas durante a configuração. No entanto, essa escolha de design traz seus próprios desafios:

• Importações de terceiros podem interferir: Muitas bibliotecas registram mensagens de depuração ou erro na saída padrão, o que pode interromper a comunicação do MCP.
• Comportamento inconsistente: Alguns servidores MCP falham ao iniciar ou se comportam de maneira imprevisível, tornando a configuração às vezes pouco confiável.

Através de tentativa e erro, consegui ajustar minha abordagem e fazer o MCP funcionar de forma mais eficaz. Mas essas percepções levantaram outro ponto importante:

Ainda não está pronto para usuários não técnicos

O MCP é um pouco complicado para a maioria dos usuários não técnicos. Configurá-lo às vezes requer encontrar onde estão os logs, resolver problemas de instalação. Pode funcionar, mas também pode falhar. Você também precisa ter node.js ou python em sua máquina dependendo do servidor. Eles realmente precisam criar algum tipo de mercado com instalações fáceis a seguir para os usuários não técnicos.

O que o MCP pode fazer quando funciona

Quando o MCP está configurado corretamente, suas capacidades são genuinamente impressionantes. Ele transforma o Claude em um assistente completo capaz de realizar tarefas que antes eram inimagináveis. Aqui está o que consegui alcançar com ele:

1. Desenvolvimento de Aplicativos Web Full-Stack

Claude pode não apenas escrever código para aplicativos web, mas também:

• Salvar o código em arquivos: Nada de copiar e colar – Claude pode gerenciar diretamente seus arquivos locais.
• Instalar dependências: Seja pacotes NPM ou bibliotecas Python, Claude pode instalar o que for necessário para o seu aplicativo executar.
• Executar o aplicativo: Inicie o aplicativo localmente e até identifique a porta em que está rodando.

2. Automação de Navegador com Puppeteer

Uma das características de destaque do MCP é sua integração com o Puppeteer, permitindo que Claude:

• Abra e interaja com páginas web: Isso inclui navegar por sites, clicar em botões e preencher formulários.
• Tire capturas de tela: Claude pode capturar imagens de páginas web em várias resoluções, o que é inestimável para testar designs responsivos.
• Analise o conteúdo da página através de texto e capturas de tela: Seja depurando ou verificando se um recurso funciona como esperado, Claude pode inspecionar e relatar sobre elementos da página.

3. Teste Iterativo e Refinamento

A combinação de gerenciamento de arquivos, controle de terminal e automação de navegador permite que Claude:

• Escreva código para um recurso.
• Execute o código e abra o aplicativo em um navegador.
• Teste a funcionalidade e tire capturas de tela para verificar se funciona.
• Faça os ajustes necessários com base nos resultados, criando um ciclo contínuo de desenvolvimento e teste.

E tudo isso em uma ferramenta que já faz muito mais por 20$ por mês

Mesmo como usuários gratuitos, você recebe aproximadamente 30 a 40 mensagens curtas por dia.

Como replicar meu experimento em sua máquina

Se você está pronto para mergulhar na configuração do MCP para Claude, siga estes passos:

1. Instale o Claude Desktop:

• Se você ainda não o tem, baixe e instale o Claude Desktop no site da Anthropic.

2. Baixe o Projeto:

• Visite o repositório do ClaudeComputerCommander no GitHub.
• Clique em Code -> Download ZIP e salve o arquivo em seu computador.

3. Descompacte os arquivos:

• Extraia o arquivo ZIP para uma pasta em sua máquina.

4. Instale o Node.js (se ainda não estiver instalado):

• Baixe o Node.js de nodejs.org e siga as instruções de instalação.

5. Abra um Terminal na Pasta do Projeto:

• Navegue até a pasta extraída e abra um terminal lá

5. Execute o comando de configuração:

• No terminal, digite:

npm run setup

6. Configuração automatizada:

• O processo de configuração lidará com a instalação e construção de todos os componentes necessários.
• Ele também adicionará servidores de acesso a terminal, arquivos e navegador à sua configuração do Claude.

Inicie o Claude:

• Execute o Claude, e você deve começar a ver as ferramentas carregando sob este ícone:

Ainda técnico e propenso a erros

Embora estas instruções devam fazer você funcionar, o processo de configuração continua um pouco técnico e não é à prova de falhas. Você pode precisar solucionar erros, verificar logs e resolver problemas com dependências ou instalações.

Eu testei no Windows também

Mas o servidor de controle do navegador falha ao instalar:

Isso serve como exemplo de como pode ser difícil por agora.

O futuro da facilidade de uso

Tudo isso poderia – e deveria – ser muito mais fácil. Espero que isto seja apenas o começo e que a Anthropic tornem a configuração do MCP mais acessível para usuários não técnicos.

Este é um desenvolvimento empolgante que aquece a competição por melhores ferramentas de IA. Com o ChatGPT e o Claude empurrando os limites, podemos esperar ferramentas ainda mais poderosas e amigáveis no futuro.

Seus próximos passos

Se você está inclinado tecnicamente, experimente o MCP hoje e veja o que pode alcançar. Siga o guia de configuração e comece a experimentar. Para todos os outros, fiquem atentos – essas ferramentas estão evoluindo rapidamente e, em breve, podem se tornar tão fáceis quanto clicar em um botão.

Vamos moldar o futuro juntos. Compartilhe seus pensamentos, suas ideias e seus experimentos nos comentários. E se você achou isso interessante, não esqueça de curtir, inscrever-se e entrar na conversa – isso é apenas o começo!

Minha lista de desejos para o Claude e o MCP

Quanto a mim, aqui está o que eu adoraria explorar ou ver melhorado a seguir:

1. Edição de arquivos eficiente: Atualmente, o Claude reescreve arquivos inteiros, o que é lento, desperdiça sua cota e introduz erros. Adicionar capacidades de edição de arquivo mais eficientes e incrementais seria uma mudança de jogo.
2. Compreensão em nível de repositório: Ao contrário de ferramentas como Windsurfer ou Cursor, Claude carece de recursos para procurar e entender efetivamente repositórios de código. Embora comandos de terminal como grep possam ajudar, um servidor MCP especializado poderia possibilitar verdadeira compreensão e navegação em nível de repositório.
3. MCPs de busca na internet: Eu descobri alguns MCPs relacionados a busca (Awesome MCP Servers), mas suspeito que eles não vão competir com soluções mais polidas como Perplexity ou ferramentas de navegação do ChatGPT. Ainda assim, eu gostaria de experimentar e ver o que é possível.
4. Capacidades de voz: Adicionar entrada e saída de voz desbloquearia níveis totalmente novos de acessibilidade e usabilidade. Espero que a Anthropic siga nesta direção, pois isso tornaria ferramentas como o Claude ainda mais competitivas e versáteis.

E quanto a você? Compartilhe seus pensamentos nos comentários! Agora mesmo! 😀