Como conectar o Claude Code ao servidor MCP da Web da Bright Data

Neste tutorial, você aprenderá:

O que é o Claude Code e por que ele é considerado um dos agentes de codificação de CLI mais populares e avançados.
Como a adição de recursos de interação com a Web e de extração de dados pode torná-lo ainda mais eficaz.
Como conectar o Claude Code ao servidor MCP da Bright Data Web para criar um agente de codificação de IA aprimorado.

Vamos nos aprofundar!

O que é o Claude Code?

O Claude Code é uma ferramenta de interface de linha de comando desenvolvida pela Anthropic que oferece acesso direto aos modelos do Claude em seu terminal. Ela permite que você delegue tarefas complexas de codificação, automatize fluxos de trabalho e se integre a outras ferramentas.

Em outras palavras, ele atua como um programador de pares de IA e agente de codificação. O Claude Code se destaca por sua capacidade de entender o contexto do projeto, gerar código, testar, depurar e até mesmo executar operações do Git. Seus principais recursos principais incluem:

Codificação autêntica: Compreende tarefas complexas de codificação, faz brainstorming de soluções e as executa diretamente em seu fluxo de trabalho.
Integração do fluxo de trabalho: Integra-se a várias ferramentas e APIs por meio do MCP.
Compreensão da base de código: Analisa e compreende a estrutura e a lógica de sua base de código para uma geração de código mais consciente do contexto.
Geração e edição de código: Gera novo código, refatora o código existente e corrige bugs com base em suas instruções.
Testes e linting: Executa testes e comandos de linting para identificar e resolver problemas em seu código.
Integração com o Git: Simplifica as operações do Git, como confirmação, envio e criação de solicitações pull.

Com mais de 30 mil estrelas no GitHub e mais de 5 milhões de downloads semanais, o Claude Code é uma das soluções de programação em pares de IA mais populares, se não a mais popular. Isso não é surpreendente, já que os modelos do Claude são atualmente considerados um dos melhores LLMs disponíveis para codificação.

Por que expandir o Claude Code com acesso à Web e dados atualizados?

Embora o Claude Code seja alimentado por modelos avançados do Claude, ele ainda enfrenta a mesma limitação de qualquer LLM: seu conhecimento é estático. Os dados de treinamento representam um instantâneo no tempo, que rapidamente se torna desatualizado. Isso é especialmente verdadeiro em campos de rápida evolução, como o desenvolvimento de software!

Agora, imagine dar ao seu assistente Claude Code CLI a capacidade de:

acessar novos tutoriais e documentação,
consultar guias ao vivo enquanto escreve código e
navegar em sites dinâmicos com a mesma facilidade com que navega em seus arquivos locais.

É exatamente isso que você desbloqueia ao conectá-lo ao Web MCP da Bright Data.

O Web MCP da Bright Data fornece acesso a mais de 60 ferramentas prontas para IA, criadas para interação com a Web e coleta de dados em tempo real. Todas elas são alimentadas pela rica infraestrutura de IA da Bright Data.

Aqui estão apenas algumas possibilidades ao estender o Claude Code com o Web MCP da Bright Data:

Obtenha resultados atualizados de mecanismos de pesquisa e incorpore-os diretamente em suas anotações ou documentos.
Ingerir os tutoriais ou documentos de API mais recentes e, em seguida, gerar código de trabalho ou até mesmo projetos de andaimes a partir deles.
Colete dados de sites ao vivo para testes, simulações ou análises mais profundas.

Para obter o catálogo completo de ferramentas, explore a documentação do Bright Data MCP.

Se você quiser ver essa integração em ação, veja como o Web MCP funciona dentro do Claude Code.

Como conectar o Claude Code ao Web MCP da Bright Data

Saiba como instalar e configurar o Claude Code localmente e integrá-lo ao Web MCP da Bright Data. O agente de codificação estendido resultante será usado para:

Extrair uma página de perfil do LinkedIn em tempo real.
Armazenar os dados localmente em um arquivo JSON.
Criar um aplicativo Express com um ponto de extremidade que retorna dados simulados lidos do arquivo JSON.

Siga as etapas abaixo!

Pré-requisitos

Antes de começar, verifique se você tem o seguinte:

Node.js 18+ instalado localmente (recomendamos a versão LTS mais recente).
Uma assinatura do Claude ou uma conta do Anthropic com créditos (neste tutorial, usaremos uma conta do Anthropic).
Uma conta da Bright Data com uma chave de API pronta.

Observe que você não precisa criar essas contas agora. As etapas abaixo o guiarão pela configuração quando necessário.

Em seguida, o conhecimento prévio é opcional, mas útil:

Uma compreensão geral de como o MCP funciona.
Alguma familiaridade com o servidor Bright Data Web MCP e suas ferramentas.

Etapa 1: Instalar e configurar o Claude Code

Para começar a usar o código do Claude, primeiro você precisa de uma assinatura do Claude ou de uma conta do Anthropic com alguns fundos.

Quando sua conta do Console do Claude/Anthropic estiver pronta, instale o Claude Code globalmente por meio do pacote npm oficial @anthropic-ai/claude-code:

npm install -g @anthropic-ai/claude-code

Em seguida, navegue até a pasta do projeto onde você deseja que o Claude Code opere e inicie-o com:

claude

Para configurar o modelo subjacente do Claude ou outras configurações, consulte a documentação oficial.

Se esta for a primeira vez que você executa o agente CLI, deverá ver a tela de configuração inicial:

Selecione um tema e pressione Enter para ir para a exibição de autorização:

Escolha o tipo de autenticação que deseja usar (“Conta do Claude com assinatura” ou “Conta do Anthropic Console”). Neste exemplo, presumiremos que você selecionou a opção 2, embora o procedimento seja semelhante para ambas.

A página a seguir solicitará que você conecte o código Claude à sua conta do Anthropic Console:

Authorizing Claude Code in your Anthropic Console account

Pressione o botão “Authorize” (Autorizar) e retorne ao seu terminal. Em sua conta do Anthropic Console, isso criará uma nova chave de API:

Em seguida, o Claude Code armazenará automaticamente essa chave de API em seus arquivos de configuração, de modo que você permanecerá conectado a partir de agora.

Agora você deve ver um prompt perguntando se confia na execução do Claude Code no diretório atual:

Trusting Claude Code in the current directory

Selecione a opção positiva e agora você terá acesso total à CLI do Claude Code:

No retângulo Try "refactor <filepath>", agora você pode escrever os prompts a serem passados para o agente de código.

Ótimo! O Claude Code agora está configurado e pronto para ser usado.

Etapa 2: começar a usar o Web MCP da Bright Data

Se você ainda não o fez, crie uma conta na Bright Data. Caso contrário, se já tiver uma, basta fazer o login.

Em seguida, siga as instruções oficiais para gerar sua chave de API da Bright Data. Para simplificar, neste tutorial, presumimos que você esteja usando uma chave de API com permissões de administrador.

Instale o Web MCP globalmente por meio do pacote @brightdata/mcp usando o seguinte comando:

npm install -g @brightdata/mcp

Em seguida, teste se o servidor funciona com este comando Bash:

API_TOKEN="<YOUR_BRIGHT_DATA_API>" npx -y @brightdata/mcp

Ou, no Windows PowerShell, o comando equivalente é:

$Env:API_TOKEN="<YOUR_BRIGHT_DATA_API>"; npx -y @brightdata/mcp

Certifique-se de substituir <YOUR_BRIGHT_DATA_API> pelo token de API real que você gerou anteriormente. Ambos os comandos definem a variável de ambiente API_TOKEN necessária e iniciam o servidor MCP por meio do pacote npm @brightdata/mcp.

Se tudo estiver funcionando corretamente, você verá logs semelhantes aos seguintes:

Na primeira inicialização, o servidor MCP cria automaticamente duas zonas padrão em sua conta da Bright Data:

mcp_unlocker: Uma zona para o Web Unlocker.
mcp_browser: Uma zona para a API do navegador.

Essas zonas são necessárias para acessar a gama completa de ferramentas do servidor MCP.

Para confirmar que as zonas foram criadas, faça login no painel de controle da Bright Data e navegue até a página“Proxies & Scraping Infrastructure“. Você deverá ver as duas zonas listadas:

The mcp_unlocker and mcp_browser zones created by the MCP server at startup

Observação: se o seu token de API não tiver permissões de administrador, essas zonas poderão não ser criadas automaticamente. Nesse caso, você pode criá-las manualmente e especificar seus nomes usando variáveis de ambiente, conforme explicado na documentação oficial.

Por padrão, o servidor MCP expõe apenas as ferramentas search_engine e scrape_as_markdown, que podem ser usadas gratuitamente.

Para desbloquear recursos avançados, como automação do navegador e extração de dados estruturados, é necessário ativar o modo Pro. Para fazer isso, defina a variável de ambiente PRO_MODE=true antes de iniciar o servidor MCP:

API_TOKEN="<YOUR_BRIGHT_DATA_API>" PRO_MODE="true" npx -y @brightdata/mcp

Ou, no Windows:

$Env:API_TOKEN="<YOUR_BRIGHT_DATA_API>"; $Env:PRO_MODE="true"; npx -y @brightdata/mcp

Importante: se optar por usar o modo Pro, você terá acesso a todas as mais de 60 ferramentas. Ao mesmo tempo, o modo Pro não está incluído no nível gratuito e incorrerá em cobranças adicionais.

Incrível! Você verificou que o servidor Web MCP está sendo executado corretamente em seu computador. Agora você pode interromper o servidor, pois a próxima etapa será configurar o Claude Code para iniciá-lo automaticamente para você.

Etapa 3: Configurar o Web MCP no Claude Code

O Claude Code oferece suporte a várias maneiras de se conectar a um servidor MCP. Neste tutorial, abordaremos dois métodos:

Usando o comando mcp add.
Usando um arquivo de configuração MCP .json.

Para configurar o servidor Web MCP globalmente em sua instalação do Claude Code, execute:

claude mcp add brightData 
  --env API_TOKEN=<YOUR_BRIGHT_DATA_API_KEY> 
  --env PRO_MODE=true 
  -- npx -y @brightdata/mcp

Ou, de forma equivalente, no Windows PowerShell:

claude mcp add brightData --env API_TOKEN=<YOUR_BRIGHT_DATA_API_KEY> --env PRO_MODE=true -- -- npx -y @brightdata/mcp

Ambos os comandos instruem o Claude Code a adicionar um servidor MCP personalizado chamado brightData. Ele será iniciado por meio do comando npx especificado com as variáveis de ambiente. Em outras palavras, o Claude Code agora pode se conectar automaticamente ao servidor Web MCP da Bright Data. (Lembre-se de que não é necessário habilitar o ambiente PRO_MODE ).

Depois de executar o comando, você verá uma saída semelhante a esta:

The output produced by the mcp add command

Isso confirma que o servidor MCP foi adicionado ao arquivo de configuração global do Claude Code.

Se, em vez disso, você preferir manter a configuração do MCP local em um projeto, crie um arquivo chamado mcp_servers.json com o conteúdo abaixo:

{
  "mcpServers": {
    "brightData": {
      "command" (comando): "npx",
      "args": [
        "-y",
        "@brightdata/mcp"
      ],
      "env": {
        "API_TOKEN": "<SUA CHAVE_API_DATA_BRIGHT_DATA>",
        "PRO_MODE": "true"
      }
    }
  }
}

Nessa configuração:

O objeto mcpServers informa ao Claude Code como iniciar servidores MCP externos.
A entrada brightData define o comando e as variáveis de ambiente necessárias para executar o Web MCP. A definição de PRO_MODE é opcional, mas recomendada.

Em seguida, instrua o Claude Code a carregar o arquivo de configuração acima por meio do sinalizador --``mcp-config:

claude --mcp-config mcp_servers.json

Importante: Substitua <YOUR_BRIGHT_DATA_API_KEY> pelo seu token real da API da Bright Data para ativar a autenticação.

Perfeito! Agora você está pronto para testar a integração do MCP no Claude Code.

Etapa 4: verificar a conexão com o MCP

Se você configurou a integração do MCP usando mcp add ou --mcp-config, deve verificar se o Claude Code pode realmente se conectar ao servidor Web MCP da Bright Data.

Para verificar a conexão, inicie a CLI do Claude Code e digite o comando /mcp. Se tudo estiver funcionando corretamente, você verá uma saída como esta:

Claude Code successfully connected to the brightData MCP

Como você pode ver, a instância local da CLI se conectou com êxito ao servidor MCP da brightData configurado. Muito bem!

Etapa 5: executar uma tarefa no código do Claude

Para testar os recursos do seu agente de codificação do Claude Code, inicie um prompt como o seguinte:

Extraia os dados de "https://it.linkedin.com/in/antonello-zanini" e salve a saída como JSON em um arquivo local chamado "profile.json". Em seguida, crie um projeto Express.js simples com um ponto de extremidade que receba um slug representando o perfil do LinkedIn e retorne o conteúdo de "profile.json".

Isso representa um caso de uso do mundo real, pois coleta dados do mundo real para simular uma API Express.

Cole o prompt no Claude Code e pressione Enter para executá-lo. Você deverá ver um comportamento semelhante a este:

O GIF foi acelerado, mas isso é o que acontece passo a passo:

O Claude Code divide o prompt em uma tarefa de quatro etapas.
O LLM seleciona a ferramenta MCP apropriada(web_data_linkedin_person_profile) com os argumentos corretos extraídos do prompt(url: "https://it.linkedin.com/in/antonello-zanini").
Você é solicitado a aceitar a execução da ferramenta.
Depois de aprovada, a tarefa de raspagem é iniciada por meio da integração do MCP.
Os dados resultantes são exibidos em formato bruto (ou seja, JSON).
O Claude Code pede permissão para salvar os dados em um arquivo local chamado profile.json.
Após a aprovação, o arquivo é criado e preenchido.
Você é solicitado a criar o arquivo package.json para o projeto Node.js Express.
Após a aprovação, o arquivo package.json é adicionado ao diretório atual.
É mostrado o código do server.js, que define o servidor Express com o endpoint de API necessário, e é solicitada a sua permissão para criá-lo.
Após a aprovação, o arquivo server.js é criado.
São mostrados os comandos para instalar as dependências do projeto e iniciar o servidor Express.

Neste exemplo, a saída final produzida pela tarefa tem a seguinte aparência:

The final instructions produced by Claude Code

Ao final da interação, seu diretório de trabalho deve conter estes três arquivos:

├── package.json
├── profile.json
└── server.js

Maravilhoso! Vamos agora verificar se os arquivos gerados funcionam conforme o esperado.

Etapa 6: explorar a saída

Abra o diretório do projeto no Visual Studio Code e comece inspecionando o arquivo profile.json:

Esse arquivo contém dados reais do LinkedIn, não conteúdo alucinado ou inventado gerado pelo Claude LLM. Especificamente, os dados foram capturados pela Bright Data usando a ferramenta web_data_linkedin_person_profile (que internamente chama o LinkedIn Scraper) da seguinte página de perfil público do LinkedIn:

Observação: a raspagem do LinkedIn é notoriamente difícil devido às suas robustas proteções anti-bot. Um LLM comum não pode executar essa tarefa de forma confiável, o que prova o quanto seu agente de codificação se tornou eficiente graças à integração do Bright Data Web MCP.

Em seguida, inspecione o arquivo package.json:

Esse arquivo lista as dependências necessárias (por exemplo, express) para definir seu projeto Node.js.

Por fim, examine o arquivo server.js:

Observe que o código define o endpoint de API necessário, conforme especificado no prompt. Em detalhes, o endpoint /profile/:slug carrega os dados do perfil do LinkedIn de profile.json e retorna o perfil correto com base no ID do LinkedIn (usado como slug aqui).

Incrível! Os arquivos gerados parecem sólidos. A etapa final é testar o aplicativo Express para garantir que ele se comporte como você deseja.

Etapa nº 7: testar o projeto gerado

Siga as instruções fornecidas pelo Claude Code na saída. Comece instalando as dependências do projeto:

npm install

Em seguida, inicie o servidor do Express com:

npm start

Seu servidor agora deve estar escutando em localhost. Teste o endpoint da API /profile/:slug usando curl:

curl http://localhost/profile/antonello-zanini

Ou, em um cliente HTTP visual como o Postman:

Testing the target API endpoint in Postman

Observação: o resultado deve incluir os dados corretos do LinkedIn lidos em profile.json.

E pronto! A API foi simulada com sucesso, graças à integração do Claude Code + Bright Data Web MCP.

Esse exemplo demonstra o poder de combinar o Claude Code com o Web MCP. Agora, experimente diferentes prompts e explore fluxos de trabalho de dados avançados orientados por LLM diretamente na CLI!

Conclusão

Neste artigo, você aprendeu a conectar o Claude Code com o servidor Web MCP da Bright Data(que agora oferece um nível gratuito!). O resultado é um poderoso agente de codificação de IA capaz de acessar e interagir com a Web.

Essa integração foi possível graças ao suporte incorporado do Claude Code para MCP. Para criar agentes de codificação mais avançados, explore toda a gama de serviços disponíveis na infraestrutura de IA da Bright Data. Essas ferramentas podem oferecer suporte a uma ampla variedade de cenários agênticos.

Crie uma conta da Bright Data gratuitamente e comece a fazer experiências com ferramentas da Web prontas para IA hoje mesmo!

Teste grátis Registro no Google