Nesta postagem do blog, você aprenderá:
- O que é o Cline e por que ele está ganhando popularidade na comunidade de codificação.
- Como a integração de seus agentes de codificação de IA pode levar sua experiência de desenvolvimento para o próximo nível.
- Como conectar o Cline ao servidor MCP da Bright Data Web para criar agentes de codificação de IA com ferramentas de recuperação de dados da Web.
Vamos mergulhar de cabeça!
O que é Cline?
O Cline é uma extensão do Visual Studio Code que funciona como um assistente de codificação autônomo alimentado por IA. Ele se integra à sua linha de comando e ao editor de código para ajudá-lo durante todo o processo de desenvolvimento.
A extensão Cline VS Code vai além do recurso básico de autocompletar código. Ela pode analisar estruturas de projeto, gerar e editar código, executar comandos de terminal e até mesmo ajudar a depurar aplicativos da Web.
O Cline oferece suporte a várias APIs de IA, permitindo que você se conecte a diferentes modelos e provedores. Você também pode ampliar sua funcionalidade adicionando ferramentas personalizadas de IA por meio do MCP(Model Context Protocol).
No momento em que este texto foi escrito, a extensão Cline tinha mais de 48 mil estrelas no GitHub e mais de 1,9 milhão de downloads no Visual Studio Marketplace.
Por que os agentes da Cline devem ser capazes de extrair dados da Web?
Por mais avançado que seja o LLM integrado ao Cline, ele ainda enfrenta uma limitação comum compartilhada por todos os modelos de linguagem: conhecimento desatualizado. Um LLM só pode responder com base nos dados estáticos em que foi treinado, o que representa um instantâneo do passado.
Dada a rapidez com que o mundo da tecnologia evolui, esse é um problema ainda maior. É por isso que não é incomum que os LLMs sugiram abordagens de codificação desatualizadas, métodos obsoletos ou percam completamente os recursos introduzidos recentemente.
Agora, imagine dar ao seu assistente de codificação Cline AI a capacidade de buscar tutoriais, páginas de documentação e guias atualizados – e aprender com eles. Isso é possível com a integração do Cline a uma solução que amplia os LLMs com recursos de pesquisa na Web e acesso a dados.
É exatamente isso que o servidor Web MCP da Bright Data oferece. Esse servidor fornece uma coleção de mais de 60 ferramentas prontas para IA para a coleta de dados da Web em tempo real, alimentadas pela infraestrutura de dados de IA da Bright Data.
Para obter a lista completa de ferramentas expostas pelo servidor Bright Data Web MCP, consulte a documentação.
Outros casos de uso possíveis incluem:
- Recuperação de dados SERP em tempo real e inserção de links contextuais em seus relatórios Markdown ao usar o VS Code como editor de texto.
- Pedir tutoriais ou documentação com base no código que você está escrevendo ativamente.
- Extrair dados de sites reais em tempo real e salvá-los localmente para fins de simulação ou análise posterior
Vamos ver agora o servidor Bright Data Web MCP em ação no Cline. Vamos analisar um dos casos de uso acima para entender o que essa integração realmente permite!
Como adicionar recursos de recuperação de dados a um agente de codificação de IA no Cline
Saiba como adicionar o Cline ao Visual Studio Code e integrá-lo ao servidor Bright Data Web MCP. O resultado desta seção passo a passo será um agente de codificação de IA que pode buscar dados da Web e interagir com eles. Isso permitirá que o agente forneça resultados mais precisos e resultados de tarefas mais inteligentes.
Em particular, você criará um agente Cline AI aprimorado com recursos de recuperação de dados e o usará para:
- Extraia uma página de produto da Amazon.
- Armazene os dados localmente.
- Crie um script Node.js para carregar e processar esses dados.
Siga as etapas abaixo!
Pré-requisitos
Para seguir este tutorial, você precisa:
- Node.js instalado localmente (recomendamos a versão LTS mais recente)
- Um relato de Cline
- Uma chave de API da Bright Data
- (Opcional) Uma chave de API para seu LLM preferido (como a chave de API do Google Gemini)
Não se preocupe se você ainda não tiver uma chave de API da Bright Data ou uma conta da Cline. Nós o orientaremos sobre como configurá-los nas próximas etapas.
Etapa 1: Instalar o Cline no Visual Studio Code
Abra o Visual Studio Code, clique no ícone Extensões na barra lateral esquerda, procure por “cline” e selecione a extensão Cline na lista. Na guia da extensão Cline, clique no botão “Install” (Instalar):
Se esta for a primeira vez que instala uma extensão da Cline, você será solicitado a confiar no editor. Clique em “Trust Publisher & Install” (Confiar no editor e instalar) para continuar:
Depois de instalado, você verá um ícone do Cline na barra lateral esquerda. Clique nele para abrir o painel do Cline:
Observação: se o ícone do Cline não for exibido, tente recarregar o Visual Studio Code. Para qualquer outro problema, consulte a página da documentação oficial de instalação.
Maravilhoso! O Cline foi instalado no VS Code.
Etapa 2: Configurar sua conexão Cline
Agora você precisa conectar sua conta Cline à extensão instalada anteriormente. Para isso, clique no botão “Get Started for Free”:
Você será redirecionado para a página a seguir em seu navegador:
Inscreva-se (ou faça login se já tiver uma conta) e você será redirecionado para a janela do VS Code:
No Visual Studio Code, você deverá ver o seguinte modal. Clique em “Open” (Abrir) para autenticar a extensão Cline:
A extensão Cline agora deve ter a seguinte aparência:
Se você retornar à sua conta Cline no navegador, perceberá que ela vem com US$ 0,50 em créditos gratuitos por padrão:
Se você planeja usar LLMs premium via Cline, considere adicionar créditos. (O motivo é que o saldo padrão permite apenas testes limitados).
Como alternativa, se quiser evitar gastar dinheiro ou preferir usar seu próprio provedor de LLM, você poderá conectar sua chave de API diretamente. Para fazer isso, clique no ícone de engrenagem no painel do Cline. Em seguida, selecione “API Configuration” (Configuração da API) e cole sua chave de API para configurar a integração com o LLM:
No exemplo acima, integramos o Cline ao modelogemini-2.5-flash, que pode ser usado gratuitamente via API.
Fantástico! O Cline agora está totalmente configurado no VS Code e pronto para ajudá-lo a criar um agente de codificação de IA com recursos de raspagem da Web.
Etapa 3: Instalar o servidor MCP da Bright Data
Se você ainda não o fez, crie uma conta na Bright Data. Se já tiver uma, basta fazer o login.
Em seguida, siga as instruções oficiais para recuperar a API do Bright Data. Para simplificar, as instruções abaixo presumem que você está usando um token de API com permissões de administrador.
Agora você pode instalar o servidor do Bright Data Web MCP globalmente em seu ambiente Node.js usando:
npm install -g @brightdata/mcpEm seguida, teste se tudo funciona com o comando Bash abaixo:
API_TOKEN="<YOUR_BRIGHT_DATA_API>" npx -y @brightdata/mcpOu, no Windows, o comando PowerShell equivalente é:
$env:API_TOKEN="<YOUR_BRIGHT_DATA_API>"; npx -y @brightdata/mcpNo comando acima, substitua o espaço reservado pelo espaço reservado real da API da Bright Data que você recuperou anteriormente. Esse comando define a variável de ambiente API_TOKEN necessária e inicia o servidor MCP usando o pacote npm @brightdata/mcp.
Se tudo estiver configurado corretamente, seu terminal deverá exibir algo parecido com isto:
Como você pode ver, na primeira vez que você inicia o comando, o pacote @brightdata/mcp inicializa as zonas necessárias da Bright Data em sua conta. Mais especificamente, ele cria uma zona para o Web Unlocker e outra para a API do navegador de raspagem. Essas duas zonas permitem que o servidor MCP execute todas as ferramentas que ele expõe.
Para verificar isso, faça login no painel de controle da Bright Data e acesse a página“Proxies & Scraping Infrastructure“(Proxies e infraestrutura de raspagem). Você verá as seguintes zonas criadas automaticamente:
Observação: se não estiver usando um token de API com permissões de administrador, será necessário criar as zonas manualmente. Consulte a documentação oficial para obter orientações detalhadas.
Excelente! O servidor MCP da Bright Data Web funciona muito bem.
Etapa 4: Conectar o Cline ao servidor MCP da Bright Data
Chegou a hora de integrar a extensão do Cline com o servidor Bright Data Web MCP em execução local. Comece clicando no botão “MCP Servers” (Servidores MCP) no painel do Cline:
Você será levado à seção de configuração dos Cline MCP Servers. Vá para a guia “Installed” (Instalado) e clique no botão “Configure MCP Servers” (Configurar servidores MCP):
Um arquivo cline_mcp_setting.json será aberto no Visual Studio Code. Nele, você pode definir a quais servidores MCP a extensão Cline pode se conectar. Para integração com o servidor Bright Data Web MCP, configure-o da seguinte forma:
{
"mcpServers": {
"Bright Data": {
"autoApprove": [],
"disabled": false,
"timeout": 300,
"type": "stdio",
"command": "npx",
"args": [
"@brightdata/mcp"
],
"env": {
"API_TOKEN": "<YOUR_BRIGHT_DATA_API>"
}
}
}
}Observação: para obter mais detalhes, consulte a edição oficial do GitHub.
Em outras palavras, adicione a configuração “Bright Data” dentro do campo mcpServers. Certifique-se de substituir pelo seu token real da API da Bright Data.
Você verá algo parecido com isto:
Perfeito! Agora, se você entrar na guia “Installed” (Instalado), verá uma entrada para o servidor Bright Data Web MCP. Expanda-a para ver todas as ferramentas que ela suporta:
Aqui, você pode configurar o servidor Bright Data Web MCP e suas ferramentas. Para este fluxo de trabalho, as configurações padrão estão corretas.
Para obter mais informações, dê uma olhada nos documentos oficiais.
Excelente! A extensão Cline agora pode se conectar ao servidor Bright Data Web MCP e utilizar suas ferramentas.
Etapa 5: Utilizar o Cline AI Agent
Você está pronto para testar o agente de codificação Cline AI conectado ao servidor Bright Data Web MCP no Visual Studio Code.
Comece abrindo o Cline. Em seguida, clique na seta à direita para acessar o menu “Auto-approve Settings” (Configurações de aprovação automática). No menu, marque a opção “Use MCP Servers” (Usar servidores MCP) para permitir a conexão automática com os servidores MCP configurados:
Com essa configuração ativada, o Cline se conectará automaticamente ao servidor MCP sem pedir permissão. Você ainda será solicitado antes que uma ferramenta seja usada, portanto, isso deve ser suficiente.
Teste os recursos de acesso a dados em seu agente de codificação de IA com um prompt como este:
Scrape data from "https://www.amazon.com/PlayStation%C2%AE5-console-slim-PlayStation-5/dp/B0CL61F39H/", save it to a local data.json file, and create a Node.js index.js script to load and print its contents.Isso descreve um possível cenário do mundo real, que é útil para coletar dados para análise, simulação ou teste.
Execute o prompt no Cline e você verá a seguinte interação:
O GIF acima foi acelerado, mas foi isso que aconteceu:
- A extensão Cline envia o prompt para o LLM configurado (por exemplo,
gemini-2.5-flash). - O LLM identifica a ferramenta MCP correta para o trabalho, que é
web_data_amazon_product. - Ele solicita sua permissão para executar essa ferramenta por meio do Bright Data MCP, usando o URL do produto da Amazon no prompt (ou seja,
https://www.amazon.com/PlayStation%C2%AE5-console-slim-PlayStation-5/dp/B0CL61F39H/) - Depois que você aprovar, a tarefa de raspagem será iniciada nos servidores da Bright Data.
- Em seguida, Cline solicita permissão para acessar o resultado da tarefa.
- Nos bastidores, a Bright Data executa a tarefa de raspagem, e a Cline recebe os dados reais do produto no formato JSON. Essa é a saída da ferramenta MCP, que é mostrada por Cline.
- É solicitada a sua permissão para salvar os dados em um arquivo
data.json. - Após a aprovação, o arquivo é criado e preenchido.
- Você será solicitado a criar um script
index.jspara ler e imprimir o conteúdo JSON. - Depois de aprovado, o arquivo é gerado.
Após a conclusão da tarefa, seu projeto conterá esses dois arquivos:
Onde data.json armazena os dados do produto da Amazon no formato JSON recuperados pelo Amazon Scraper da Bright Data:
Um index.js: contém a lógica do Node.js para carregar e imprimir seu conteúdo:
Execute o script index.js produzido com:
node index.jsNo terminal, você deverá ver os dados do produto impressos:
Os fluxos de trabalho funcionaram perfeitamente, pois os dados contidos no arquivo JSON correspondem aos dados da página original do produto da Amazon:
Observe que o data.json armazena dados reais extraídos, não conteúdo alucinado do LLM. Além disso, lembre-se de que a coleta de dados da Amazon não é uma tarefa fácil, considerando seus rígidos sistemas anti-bot (como o notório Amazon CAPTCHA).
Esse é o poder do Bright Data + Cline, e o caso acima foi apenas um caso de uso básico. Agora você pode experimentar mais prompts e explorar fluxos de trabalho de dados avançados orientados por LLM, diretamente no Visual Studio Code.
E pronto! Você acabou de testemunhar a recuperação perfeita de dados da Web usando a integração do MCP da Bright Data com o agente de codificação Cline AI.
Conclusão
Neste artigo, você aprendeu como integrar o Cline ao servidor MCP da Bright Data Web para criar um agente de codificação de IA que pode acessar a Web. Isso foi possível graças ao suporte do Cline para a integração do MCP.
Lembre-se de que este foi apenas um exemplo simples. Para criar agentes mais avançados, considere explorar toda a gama de ferramentas disponíveis no servidor do Bright Data Web MCP. Essas ferramentas podem dar suporte à maioria de seus casos de uso de dados orientados por IA.
Crie uma conta gratuita na Bright Data e comece a explorar nossas ferramentas de dados da Web prontas para IA!
