Adicionando o Web MCP da Bright Data ao Roo Code no Visual Studio Code

Neste tutorial, você aprenderá:

1. O que é o Roo Code e por que ele é atualmente um dos agentes de codificação de IA mais usados nos IDEs.
2. Como equipá-lo com recursos de interação com a Web e extração de dados pode torná-lo ainda mais útil.
3. Como conectar o Roo Code ao servidor Bright Data Web MCP no Visual Studio Code para criar um agente de codificação de IA aprimorado.

Vamos mergulhar de cabeça!

O que é o Roo Code?

O Roo Code é um agente de codificação autônomo alimentado por IA que vive diretamente no seu editor. Em detalhes, ele pode:

• Operar como um programador de pares com tecnologia de IA com o qual você pode se comunicar em linguagem natural.
• Ler e gravar arquivos diretamente em seu espaço de trabalho.
• Executar comandos de terminal.
• Automatizar ações do navegador por meio de uma integração de navegador incorporada.
• Integrar-se a uma ampla gama de APIs/modelos compatíveis com OpenAI ou personalizados.
• Adaptar sua “personalidade” e seus recursos por meio de diferentes modos.
• Conecte-o a provedores de terceiros por meio da integração com o MCP.

O Roo Code nasceu como um fork do Cline e está disponível como uma extensão de código aberto do Visual Studio Code. Ele permite automatizar tarefas de codificação e aprimorar seu fluxo de trabalho de desenvolvimento usando IA diretamente no VS Code.

Ao contrário do Cline, o Roo Code não exige uma conta para funcionar (embora uma plataforma Roo Cloud esteja disponível com recursos adicionais para empresas). Para obter mais detalhes, consulte nosso guia sobre a integração do Cline com o servidor Web MCP da Bright Data.

Atualmente, o projeto Roo Code tem mais de 18 mil estrelas no GitHub e 750 mil instalações no mercado do Visual Studio Code. Isso significa que ele é um dos agentes de codificação de IA mais amplamente usados para IDEs.

Por que integrar o Web MCP à extensão Roo Code VS Code?

O LLM que você configura no Roo Code tem a limitação comum de todos os modelos de linguagem: conhecimento desatualizado. Um LLM só pode gerar respostas com base nos dados estáticos em que foi treinado, o que nada mais é do que um instantâneo do passado.

Considerando a rapidez com que o mundo da tecnologia evolui, essa limitação não pode ser ignorada. Os LLMs podem facilmente sugerir abordagens de codificação desatualizadas, métodos obsoletos ou ignorar completamente recursos recém-introduzidos.

Agora, imagine dar ao seu assistente de codificação com IA do Roo Code a capacidade de buscar tutoriais, páginas de documentação e guias atualizados e aprender com eles em tempo real. Isso é possível ao integrar o Roo Code a uma solução que amplia os LLMs com recursos de pesquisa na Web e acesso a dados.

É exatamente isso que você pode encontrar no servidor Web MCP da Bright Data. Esse servidor MCP de código aberto(agora com um nível gratuito) oferece mais de 60 ferramentas prontas para IA para interação com a Web em tempo real e coleta de dados.

As duas ferramentas mais comumente usadas no servidor MCP são:

Além disso, há mais de 55 ferramentas especializadas para interagir com páginas da Web (por exemplo, scraping_browser_click) e coletar dados estruturados de uma ampla variedade de sites, incluindo Amazon, Yahoo Finance, TikTok, LinkedIn e muito mais. Por exemplo, a ferramenta web_data_amazon_product recupera informações detalhadas e estruturadas de produtos da Amazon, aceitando um URL de produto válido como entrada.

Os possíveis casos de uso do Bright Data Web MCP + Roo Code incluem:

• Recuperação de dados SERP ao vivo e inserção de links contextuais em seus relatórios Markdown diretamente no VS Code.
• Solicitação de tutoriais ou documentação com base no código que você está escrevendo ativamente.
• Extrair dados públicos novos de sites e salvá-los localmente para simulação, análise ou processamento adicional.

Vamos ver agora o Web MCP em ação no Roo Code!

Como conectar o Roo Code ao Web MCP da Bright Data no Visual Studio Code

Nesta seção guiada, você aprenderá como adicionar o Roo Code ao Visual Studio Code e integrá-lo ao Web MCP da Bright Data. O resultado final será um agente de codificação de IA capaz de acessar e interagir com a Web. Esses recursos tornarão o agente mais engenhoso e preciso.

Especificamente, você criará um agente de IA de código Roo aprimorado com recursos de recuperação de dados e o usará para:

1. Extrair uma página de produto da Amazon em tempo real.
2. Armazenar os dados localmente.
3. Criar um script Python para carregar e processar os dados coletados.

Siga as etapas abaixo para começar!

Pré-requisitos

Para seguir este tutorial, você precisa de:

• Uma chave de API da Bright Data
• Uma chave de API de um dos provedores de LLM compatíveis (neste guia, usaremos uma chave de API do OpenRouter)

Não se preocupe se você ainda não tiver uma chave de API da Bright Data. Nós o orientaremos na configuração nas próximas etapas.

Para executar a saída gerada, você também precisará ter o Python instalado localmente.

Etapa 1: Instalar o código Roo no Visual Studio Code

Abra o Visual Studio Code. Em seguida, clique no ícone “Extensions” (Extensões) na barra lateral esquerda, procure por “Roo Code” e selecione a extensão Roo Code. Na guia da extensão Roo Code, pressione o botão “Install” (Instalar):

Se esta for a primeira vez que instala uma extensão do provedor Roo Code, você será solicitado a confiar no editor. Clique em “Trust Publisher & Install” (Confiar no editor e instalar) para continuar.

Após a conclusão da instalação, você verá um ícone do Roo Code na barra lateral esquerda. Clique nele para abrir a extensão:

Observação: se o ícone do Roo Code não for exibido, tente recarregar o Visual Studio Code. Para qualquer outro problema, consulte o guia de instalação oficial.

Pronto! O Roo Code agora está disponível no VS Code.

Etapa 2: configurar a conexão do OpenRouter

Agora que o Roo Code está instalado, a próxima etapa é conectá-lo a um provedor LLM. O Roo Code é compatível com uma ampla variedade de provedores, incluindo Anthropic, Claude Code, AWS Bedrock, DeepSeek, Google Gemini, Groq, Hugging Face, LiteLLM, Mistral AI, Ollama, OpenAI, OpenRouter, Requesty, xAI (Grok) e muitos outros.

Neste guia, conectaremos o Roo Code a um OpenRouter e usaremos o modelo qwen/qwen3-coder:free. Essa configuração é totalmente gratuita, o que significa que não são necessários fundos ou créditos.

Observação: se você preferir outro provedor ou já tiver chaves de API diferentes, siga o guia de integração específico na documentação do Roo Code.

Crie uma conta no OpenRouter e recupere sua chave de API. Se não estiver familiarizado com esse processo, dê uma olhada no que fizemos em nosso tutorial sobre o Qwen-Agent.

No painel de extensão do Roo Code, role para baixo até ver o botão “OpenRouter”. Clique nele:

Uma janela do navegador será aberta, solicitando que você faça login na sua conta do OpenRouter e autorize o Roo Code. Pressione “Authorize” (Autorizar) para continuar:

De volta ao VS Code, você será solicitado a confirmar a conexão. Clique em “Open” para concluir o processo de autorização:

Isso é o que você deve ver agora no Visual Studio Code:

Como você pode ver, a autorização funcionou bem, e o Roo Code está pronto para ser usado!

Por padrão, o Roo Code usa o modelo Claude Opus 4 (que requer uma conta OpenRouter financiada para ser usado). Para mudar para um modelo gratuito (ou qualquer outro modelo), clique no ícone de engrenagem no menu superior:

Na guia “Settings” (Configurações), role para baixo até o menu suspenso “Model” (Modelo) e escolha o modelo que deseja configurar:

Por exemplo, selecione qwen/qwen3-coder:free, um modelo de uso gratuito otimizado para cenários de codificação. Quando terminar, clique no botão “Done” (Concluído) para confirmar as alterações.

Fantástico! O Roo Code agora está totalmente configurado no VS Code. É hora de transformá-lo em um agente de codificação com recursos de interação e recuperação de dados da Web por meio da integração do MCP.

Etapa 3: Instalar o Web MCP da Bright Data

Se você ainda não o fez, comece criando uma conta da Bright Data. Caso contrário, se já tiver uma, faça o login.

Siga as instruções oficiais para gerar sua chave de API da Bright Data. Certifique-se de armazená-la em um local seguro. Vamos supor que você esteja usando uma chave de API com permissões de administrador, pois isso facilita a integração.

Abra o terminal e instale o Web MCP globalmente por meio do pacote @brightdata/mcp:

npm install -g @brightdata/mcp

Verifique se o servidor MCP local funciona com este comando Bash:

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

Ou, de forma equivalente, no Windows PowerShell:

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

Substitua o espaço reservado <YOUR_BRIGHT_DATA_API> pelo token real da API da Bright Data. Os dois comandos acima definem a variável de ambiente API_TOKEN necessária e, em seguida, iniciam o servidor MCP por meio do pacote npm @brightdata/mcp.

Em caso de sucesso, você deverá ver os registros como na imagem abaixo:

Na primeira inicialização, o pacote configura 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 duas zonas são necessárias para acessar todas as ferramentas expostas pelo Web MCP.

Para confirmar que as zonas acima foram criadas, faça login no painel de controle do Bright Data. Navegue até a página“Proxies & Scraping Infrastructure” e você verá as duas zonas listadas:

Observação: se o seu token de API não tiver permissões de administrador, essas zonas talvez não sejam configuradas automaticamente. Nesse caso, você pode criá-las manualmente no painel e especificar seus nomes por meio de variáveis de ambiente, conforme documentado na página do pacote no GitHub.

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 de uma longa lista de domínios, você precisa 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 PowerShell:

$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. Por outro lado, o modo Pro não está incluído na camada gratuita e incorrerá em cobranças adicionais.

Perfeito! Você verificou que o servidor Web MCP funciona em sua máquina. Encerre o processo do servidor, pois agora você configurará o Roo Code para iniciá-lo automaticamente e se conectar a ele.

Etapa 4: conectar o Roo Code ao Web MCP

É hora de conectar a extensão do Roo Code ao MCP da Web da Bright Data. No painel do Roo Code, no menu superior, selecione a opção “MCP Servers” (Servidores MCP):

Você chegará à seção de configuração “MCP Servers” (Servidores MCP). Aqui, você pode configurar servidores MCP, servidores MCP globais (disponíveis em todos os projetos) ou servidores MCP locais (disponíveis somente no projeto atual).

O procedimento de configuração é praticamente idêntico, portanto, clique no botão “Edit Global MCP”. Isso abrirá um arquivo mcp_settings.json, que contém uma entrada mcpServers vazia:

Esse arquivo de configuração é onde você precisa especificar os detalhes para se conectar ao Bright Data Web MCP. Certifique-se de que ele contenha o seguinte código:

{
  "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 Roo Code como iniciar servidores MCP externos.
• A entrada brightData define o comando(npx) e as variáveis de ambiente necessárias para iniciar o Web MCP. PRO_MODE é opcional, mas sua ativação desbloqueia o conjunto completo de ferramentas disponíveis.

É isso que você deve ver:

Substitua o espaço reservado <YOUR_BRIGHT_DATA_API_KEY> pela chave da API da Bright Data recuperada anteriormente.

Essa configuração diz ao Roo Code para executar o mesmo comando npx com as variáveis de ambiente vistas na etapa anterior. Em outras palavras, o Roo Code agora pode iniciar e se conectar ao servidor Web MCP da Bright Data. (A ativação do PRO_MODE é opcional, mas recomendada).

Depois de adicionar a entrada brightData em mcpServers, o Roo Code se conectará imediatamente ao servidor Web MCP e exibirá as ferramentas disponíveis:

Como definimos a variável de ambiente PRO_MODE como verdadeira, o Roo Code agora fornece acesso a mais de 60 ferramentas. Sem PRO_MODE, apenas duas ferramentas estariam disponíveis: scrape_as_markdown e search_engine.

Clique no botão “Done” (Concluído) e você terá integrado com êxito o Web MCP ao Roo Code. Excelente!

Etapa 5: testar o agente do Roo Code

Por padrão, o Roo Code é executado no modo Architect, que atua como um “líder técnico experiente e planejador que ajuda a projetar sistemas e criar planos de implementação”.

Na maioria dos cenários, você desejará usá-lo como um programador de pares de IA. Para fazer isso, alterne o modo Roo Code para Code, conforme mostrado abaixo:

Agora, teste os recursos de recuperação de dados da Web de seu agente de codificação de IA com um prompt como o seguinte:

Extraia dados de "https://www.amazon.com/Owala-FreeSip-Insulated-Stainless-BPA-Free/dp/B0F354MWSL/", salve-os em um arquivo local "product.json" e crie um script Python "script.py" para carregar e imprimir seu conteúdo.

Isso simula um caso de uso do mundo real, recuperando dados para análise, visualização, simulação ou outros fluxos de trabalho.

Execute o prompt no Roo Code e você verá um resultado semelhante a este:

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

1. O Roo Code divide a tarefa em um plano de três etapas.
2. Ele determina que a melhor maneira de obter os dados do produto Amazon é usar a ferramenta web_data_amazon_product do Web MCP.
3. Você é solicitado a aprovar a execução da ferramenta de raspagem.
4. A ferramenta é executada e os dados de produtos da Amazon são recuperados no formato JSON.
5. Você é questionado se os dados devem ser salvos em um arquivo product.json local.
6. Após a aprovação, o arquivo JSON é criado e preenchido.
7. O Roo Code pede permissão para gerar um arquivo script.py que lê e imprime o conteúdo do product.json.
8. O arquivo é criado com o código Python gerado.
9. Você é solicitado a executar o script com python script.py.
10. O script falha devido a problemas de codificação.
11. O Roo Code sugere a atualização do script com o tratamento de UTF-8.
12. Após a aprovação, o script atualizado é executado corretamente e produz o resultado esperado.

Observe como o Roo Code sugeriu proativamente a execução do script, mesmo que seu prompt original não o tenha solicitado explicitamente. Isso foi útil, pois ajudou o agente a detectar falhas e a refinar sua própria saída.

Depois de concluir o fluxo, seu diretório de trabalho deverá conter estes dois arquivos:

├── product.json
└── script.py

Abra product.json no código VS:

Esse arquivo contém dados reais de produtos da Amazon – não é um resultado alucinado ou fabricado. Em particular, os dados foram capturados pela Bright Data usando a ferramenta web_data_amazon_product (que aproveita internamente o Amazon Scraper) da página do produto de destino abaixo:

Observação: a raspagem da Amazon é notoriamente difícil devido às suas rígidas proteções anti-bot (por exemplo, o notório Amazon CAPTCHA). Um LLM padrão sozinho não pode lidar com essa tarefa de forma confiável. É por isso que a combinação do Roo Code com o Web MCP da Bright Data torna seu agente de codificação excepcionalmente poderoso.

Esse arquivo contém dados reais da Amazon, não conteúdo alucinado ou inventado gerado pelo LLM escolhido. Especificamente, os dados foram capturados pela Bright Data usando a ferramenta web_data_amazon_product (que internamente chama o Amazon Scraper).

Em seguida, o arquivo script.py gerado contém a lógica para ler e imprimir os dados JSON do produto:

Execute o script Python acima com:

python script.py

O resultado será os dados do produto carregados de product.json:

Esse é o poder do Bright Data + Roo Code. Lembre-se de que o exemplo acima foi apenas um caso de uso simples, portanto, experimente com mais prompts. Explore fluxos de trabalho de dados avançados orientados por LLM, diretamente no Visual Studio Code.

E pronto! Você concluiu a integração do MCP da Bright Data no Roo Code.

Conclusão

Nesta postagem do blog, você viu como conectar o Roo Code ao servidor Web MCP da Bright Data(que agora oferece uma camada gratuita!) no Visual Studio Code. O resultado é um agente de codificação de IA rico em recursos, capaz de buscar dados da Web e interagir com eles de forma inteligente.

Usamos esse agente aprimorado para gerar um script Python simples com acesso aos dados de produtos da Amazon. Para projetos mais complexos ou inspiração, lembre-se de que as ferramentas expostas pelo Web MCP podem oferecer suporte a uma ampla variedade de cenários e fluxos de trabalho agênticos.

Para criar agentes de IA avançados, explore toda a gama de serviços disponíveis na infraestrutura de IA da Bright Data.

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