Top

Transformam o Claude Code em um time de trabalho

5 MCPs para Claude Code
SYSTEM: ONLINE MODULOS: 5 PROTOCOLO: MCP HOST: CLAUDE_CODE STATUS: CONNECTED
>>> iniciando_transmissao.sh --topic="claude-code-mcps"

Transformam o Claude Code em um time de trabalho

5 MCPs especialmente úteis para quem trabalha com Claude Code
Perplexity // Playwright // Firecrawl // Glif // Chrome DevTools

Conectados ao Claude Code via Model Context Protocol.

Usar uma IA para escrever código já economiza tempo. Mas o salto realmente interessante acontece quando ela deixa de trabalhar apenas com o que está dentro da conversa e passa a interagir com ferramentas externas.

A ideia não é simplesmente instalar vários MCPs. O mais interessante é combinar capacidades diferentes para criar um fluxo de trabalho no qual o Claude consegue pesquisar, executar, observar resultados e corrigir o próprio trabalho.

Neste artigo, separei cinco MCPs especialmente úteis para quem trabalha com Claude Code: Perplexity, Playwright, Firecrawl, Glif e Chrome DevTools. A seguir, veremos o papel de cada um, quando faz sentido utilizá-lo, como funciona e como começar.

Antes de tudo: o que é MCP?

O Model Context Protocol, ou MCP, é um padrão aberto criado para permitir que aplicações de inteligência artificial se conectem de maneira padronizada a ferramentas, serviços e fontes externas de informação.

Uma forma simples de entender é pensar no MCP como uma interface entre a IA e o mundo externo.

O Claude Code sozinho já consegue analisar código, criar arquivos, executar determinadas tarefas e trabalhar dentro de um projeto. Quando conectado a servidores MCP, porém, seu conjunto de ferramentas pode ser ampliado.

> um MCP pode permitir que o agente:
  • pesquise informações atualizadas na internet
  • abra e controle um navegador
  • leia e processe páginas da web
  • consulte APIs
  • gere imagens e vídeos
  • examine logs e requisições de rede
  • analise a performance de uma aplicação
  • interaja com ferramentas especializadas

Isso transforma o Claude Code de um assistente concentrado principalmente em código em um agente capaz de trabalhar com diferentes etapas de um processo.

Os cinco MCPs abaixo mostram bem essa ideia.

// 01 //
Perplexity MCP - Pesquisa

1. Perplexity MCP

O pesquisador da equipe

O Perplexity MCP conecta o Claude à infraestrutura de pesquisa da Perplexity. Com isso, o agente pode consultar informações disponíveis na web em vez de depender exclusivamente do conhecimento incorporado ao modelo.

O servidor oficial oferece ferramentas para diferentes tipos de consulta, incluindo pesquisa direta, respostas apoiadas em fontes, pesquisa aprofundada envolvendo múltiplas fontes e tarefas que exigem maior raciocínio.

Por que isso é útil?

Modelos de linguagem não possuem conhecimento atualizado automaticamente sobre tudo o que acontece na internet.

Imagine, por exemplo, que você esteja usando Claude Code para investigar uma biblioteca que recebeu uma atualização ontem. Sem acesso a uma fonte externa, o agente pode trabalhar com documentação antiga ou simplesmente não conhecer aquela versão.

Com o Perplexity MCP, o fluxo pode ser diferente:

Claude -> pesquisa na web -> encontra documentação atual -> analisa as fontes -> utiliza a informação no projeto

Ele funciona, portanto, como o pesquisador do seu conjunto de ferramentas.

Tecnologia

O servidor é desenvolvido em Node.js/TypeScript e pode ser utilizado por meio do pacote npm:

@perplexity-ai/mcp-server

Também existem opções para execução via Docker e conexão com infraestrutura remota.

Quem desenvolve?

O projeto é mantido pela Perplexity AI.
Repositório oficial: github.com/perplexityai/modelcontextprotocol

Instalação no Claude Code

Uma das formas de configuração é utilizar o servidor remoto:

$ claude mcp add --transport http perplexity https://api.perplexity.ai/mcp

É necessária uma chave da API da Perplexity. Também é possível executar o servidor localmente usando npx e configurar a variável:

PERPLEXITY_API_KEY

Quando eu usaria?

  • pesquisar documentação recente
  • investigar erros pouco conhecidos
  • acompanhar mudanças em bibliotecas
  • comparar tecnologias
  • pesquisar APIs
  • localizar fontes técnicas
  • fazer pesquisas antes de implementar uma solução
// 02 //
Playwright MCP - Navegacao e Testes

2. Playwright MCP

O navegador e testador da equipe

O Playwright MCP, desenvolvido pela Microsoft, permite que agentes de IA controlem um navegador utilizando a infraestrutura do Playwright.

Uma característica importante é que o agente pode trabalhar com a estrutura e a árvore de acessibilidade da página, em vez de depender exclusivamente de screenshots e reconhecimento visual.

Isso fornece informações estruturadas sobre elementos como:

  • botões
  • links
  • formulários
  • campos
  • menus
  • textos
  • componentes interativos

O resultado é uma automação de navegador mais adequada para agentes.

Por que isso é útil?

Imagine que o Claude acabou de desenvolver uma página de cadastro.

Normalmente, ele poderia analisar o código e dizer que aparentemente está correto.

Com Playwright MCP, podemos avançar:

Claude -> abre a página -> preenche o formulário -> clica no botão -> observa o resultado -> identifica o problema -> altera o código -> testa novamente

Nesse cenário, o Playwright assume um papel parecido com o de um QA automatizado.

Tecnologia

O projeto utiliza Node.js/TypeScript e é construído sobre o Playwright.

Pacote npm:

@playwright/mcp

Também existe uma imagem Docker oficial:

mcr.microsoft.com/playwright/mcp

Quem desenvolve?

O projeto pertence à Microsoft, responsável pelo próprio Playwright.
Repositório oficial: github.com/microsoft/playwright-mcp

Instalação

Uma forma simples de executá-lo é:

$ npx @playwright/mcp@latest

Também é possível utilizar Docker:

$ docker run -i --rm --init --pull=always mcr.microsoft.com/playwright/mcp

É necessário ter um ambiente Node.js compatível e um cliente com suporte ao MCP.

Quando eu usaria?

  • testes de interface
  • automação de navegador
  • validação de formulários
  • testes end-to-end
  • reprodução de bugs
  • navegação automatizada
  • verificação de fluxos de usuário
// 03 //
Firecrawl MCP - Coleta e Estrutura

3. Firecrawl MCP

O coletor de informação da equipe

O Firecrawl MCP é especialmente útil quando o objetivo não é simplesmente navegar em uma página, mas transformar conteúdo da web em informação limpa e estruturada para uma IA processar.

Sites são construídos para navegadores e seres humanos, não necessariamente para modelos de linguagem.

Uma página pode conter menus, scripts, elementos de navegação, banners, componentes dinâmicos e uma enorme quantidade de HTML irrelevante.

O Firecrawl faz o trabalho intermediário. Ele acessa a página e devolve seu conteúdo em formatos mais apropriados para processamento por modelos, como Markdown estruturado.

O que ele pode fazer?

Dependendo da configuração e dos recursos utilizados, o Firecrawl pode trabalhar com:

  • scraping de páginas
  • crawling de sites
  • pesquisa na web
  • descoberta e mapeamento de URLs
  • extração estruturada de informações

Por que isso é útil?

Considere uma tarefa como: "Analise toda a documentação deste projeto e crie um guia de implementação."

Em vez de alimentar o Claude manualmente com dezenas de páginas, um fluxo pode utilizar o Firecrawl para localizar, percorrer e converter o conteúdo.

O processo fica aproximadamente assim:

site -> Firecrawl -> conteúdo estruturado -> Claude -> análise

Por isso, ele funciona como o coletor e organizador de informação da equipe.

Tecnologia

O servidor MCP pode ser executado através do pacote npm:

firecrawl-mcp

Dependendo das funções utilizadas, pode ser necessária uma chave da API do Firecrawl.

Quem desenvolve?

O projeto é mantido pela equipe do Firecrawl.
Repositório oficial: github.com/firecrawl/firecrawl-mcp-server

Instalação

Exemplo utilizando uma chave de API:

$ env FIRECRAWL_API_KEY=fc-SUA_CHAVE npx -y firecrawl-mcp

Também existem opções hospedadas que evitam a necessidade de manter o servidor MCP localmente.

Quando eu usaria?

  • analisar documentação
  • pesquisar vários sites
  • criar bases de conhecimento
  • extrair dados
  • consolidar páginas
  • alimentar processos de RAG
  • preparar conteúdo web para análise por IA
// 04 //
Glif MCP - Estudio Criativo

4. Glif MCP

O estúdio criativo da equipe

Nem todo trabalho realizado com Claude Code precisa terminar em código ou texto.

O Glif MCP adiciona uma camada de geração de mídia ao fluxo, conectando o agente à plataforma Glif.

A proposta é permitir que o usuário solicite resultados em linguagem natural enquanto a plataforma cuida da interação com modelos e workflows especializados.

Isso pode incluir tarefas relacionadas à geração de:

  • imagens
  • vídeos
  • variações visuais
  • workflows criativos

Por que isso é interessante?

Imagine que você esteja criando uma aplicação e precise simultaneamente desenvolver a interface e produzir alguns recursos visuais.

O fluxo poderia ser:

Claude -> desenvolve a página -> Glif -> gera os assets -> Claude -> integra os arquivos ao projeto

Isso reduz a necessidade de interromper constantemente o trabalho para alternar entre diferentes ferramentas de geração.

Nesse conjunto de MCPs, o Glif assume o papel do estúdio criativo.

Tecnologia

Atualmente, a abordagem principal é utilizar o servidor MCP hospedado pela própria Glif.

Existiu anteriormente uma implementação local baseada em Node.js através do pacote:

@glifxyz/glif-mcp-server

A arquitetura evoluiu para priorizar o serviço hospedado.

Quem desenvolve?

O projeto é desenvolvido pela Glif, organização glifxyz.
Repositório: github.com/glifxyz/glif-mcp-server

Instalação

A configuração pode ser iniciada em:

A plataforma oferece integração com clientes MCP compatíveis. Também é necessário considerar que operações de geração de mídia podem consumir créditos da conta.

Quando eu usaria?

  • gerar assets para aplicações
  • produzir imagens para protótipos
  • experimentar conceitos visuais
  • gerar vídeos
  • criar variações de peças
  • incorporar geração multimídia a workflows automatizados
// 05 //
Chrome DevTools MCP - Diagnostico

5. Chrome DevTools MCP

O especialista em diagnóstico da equipe

Se o Playwright permite ao agente usar uma aplicação como usuário, o Chrome DevTools MCP acrescenta outra perspectiva: investigar tecnicamente o que está acontecendo dentro do navegador.

Ele fornece ao agente acesso programático a recursos relacionados ao Chrome DevTools. Isso pode incluir informações como:

  • console
  • requisições de rede
  • traces de performance
  • comportamento da página
  • screenshots
  • dados úteis para diagnóstico

O projeto utiliza Puppeteer internamente para controlar o navegador.

Uma diferença importante

Às vezes esse MCP é descrito como se simplesmente conectasse o Claude às abas que o usuário já possui abertas. Essa descrição é imprecisa.

A integração trabalha com uma instância do Chrome que pode ser controlada e inspecionada pelo ambiente MCP. O objetivo é permitir que o agente observe tecnicamente o comportamento real da aplicação.

Por que isso importa?

Um agente de programação consegue produzir código excelente e, ainda assim, não perceber determinados problemas que aparecem apenas durante a execução. Por exemplo:

Claude cria aplicação ↓ Chrome executa ↓ DevTools detecta erro ↓ Claude analisa console/rede ↓ Claude modifica código ↓ Aplicação é testada novamente

Essa capacidade cria um ciclo extremamente interessante:

escrever -> executar -> observar -> diagnosticar -> corrigir -> testar novamente

É exatamente o tipo de feedback que aproxima agentes de programação de um workflow real de desenvolvimento.

Tecnologia

O servidor é distribuído pelo npm:

chrome-devtools-mcp

Ele utiliza Node.js e Puppeteer, com suporte ao Google Chrome e Chrome for Testing.

Quem desenvolve?

O projeto é desenvolvido pela equipe do Chrome DevTools, do Google.
Repositório oficial: github.com/ChromeDevTools/chrome-devtools-mcp

Instalação

Uma configuração típica no Claude Code pode utilizar:

$ claude mcp add chrome-devtools -- npx chrome-devtools-mcp@latest

Depois de configurado, o Claude Code pode iniciar o servidor MCP quando precisar utilizar essas ferramentas.

Quando eu usaria?

  • investigar erros JavaScript
  • analisar o console
  • verificar requisições de rede
  • encontrar APIs que estão falhando
  • analisar performance
  • investigar carregamento lento
  • depurar aplicações web
  • validar o comportamento real do código no navegador
// SÍNTESE //

O verdadeiro poder está em combinar os MCPs

Individualmente, cada ferramenta resolve uma necessidade específica. A parte mais interessante aparece quando elas são combinadas.

Podemos imaginar cada MCP como um especialista:

MCPPapel no fluxo
PerplexityPesquisa informações atualizadas
FirecrawlColeta e estrutura conteúdo da web
PlaywrightNavega e testa a aplicação
GlifProduz conteúdo visual
Chrome DevToolsDiagnostica o comportamento técnico

Agora imagine uma solicitação como:

"Pesquise as melhores práticas atuais para esta funcionalidade, implemente uma versão, crie os recursos visuais necessários, abra a aplicação no navegador, teste o fluxo e investigue qualquer erro encontrado."

Com uma combinação adequada de ferramentas, podemos decompor a tarefa:

Perplexity pesquisa as informações atuais. ↓ Firecrawl coleta documentação relevante. ↓ Claude Code analisa e implementa a solução. ↓ Glif pode gerar os recursos visuais necessários. ↓ Playwright abre a aplicação e executa o fluxo. ↓ Chrome DevTools investiga erros, rede e performance. ↓ Claude Code corrige o projeto e executa novos testes.

Essa é uma mudança importante na forma de pensar sobre agentes de IA.

Em vez de perguntar apenas "qual modelo é melhor?", começa a fazer sentido perguntar:

> Quais ferramentas esse modelo consegue usar para concluir o trabalho?

Um bom modelo continua sendo importante, mas o conjunto formado por modelo + contexto + ferramentas + MCPs + capacidade de executar e verificar resultados pode ser ainda mais determinante para a qualidade do agente.

// FIM //

Conclusão

Perplexity pesquisa. Firecrawl coleta. Playwright interage. Glif cria. Chrome DevTools investiga. E o Claude Code pode funcionar como a camada que coordena essas capacidades.

Você não precisa instalar todos eles. O ideal é começar pelo problema que deseja resolver e adicionar MCPs conforme a necessidade.

Para desenvolvimento web, por exemplo, Playwright + Chrome DevTools já formam uma combinação particularmente interessante. Para pesquisa e produção de conteúdo técnico, Perplexity + Firecrawl cumprem papéis complementares. Para workflows que também precisam produzir mídia, o Glif adiciona a camada criativa.

O ponto principal é simples: um agente de IA se torna muito mais útil quando, além de pensar e escrever, também consegue pesquisar, agir, observar o resultado e utilizar esse feedback para continuar trabalhando.
>>> fim_da_transmissao

Comentários

Postagens mais visitadas deste blog

Macro: Criar Indice de Planilhas no Excel

ITECOS