Agente MCP do Navegador

https://github.com/user-attachments/assets/a01e09fa-131b-479a-8df3-2d1a61fd80f3

Uma aplicação Streamlit que te permite navegar e interagir com websites utilizando comandos em linguagem natural através do Model Context Protocol (MCP) e MCP-Agent com integração Playwright.

Funcionalidades

• Interface em Linguagem Natural: Controla um navegador com comandos simples em inglês
• Navegação Completa no Navegador: Visita websites e navega entre páginas
• Elementos Interativos: Clica em botões, preenche formulários e rola através do conteúdo
• Feedback Visual: Tira capturas de ecrã de elementos de páginas web
• Extração de Informação: Extrai e resume conteúdo de páginas web
• Tarefas em Múltiplos Passos: Completa sequências de navegação complexas através de conversação

Configuração

Requisitos

• Python 3.8+
• Node.js e npm (para Playwright)
• Este é um requisito crítico! A aplicação utiliza Playwright para controlar um navegador sem interface gráfica
• Faz o download e instala a partir de nodejs.org
• Chave de API da OpenAI ou Anthropic

Instalação

1. Clona este repositório:

   git clone https://github.com/Shubhamsaboo/awesome-llm-apps.git
   cd mcp_ai_agents/browser_mcp_agent

Instalação

2. Instala os pacotes Python necessários:

   pip install -r requirements.txt

3. Verifica se o Node.js e o npm estão instalados:

Para verificar se o Node.js e o npm estão instalados, executa os seguintes comandos no terminal:

node -v

npm -v

Se ambos os comandos retornarem uma versão, significa que estão instalados corretamente. Caso contrário, deves instalar o Node.js, que inclui o npm.

   node --version
   npm --version

Ambos os comandos devem devolver números de versão. Se não o fizerem, instala o Node.js.

4. Configura as tuas chaves de API. Escolhe uma das seguintes opções:

a) Via variável de ambiente (mais simples para OpenAI):

   export OPENAI_API_KEY=your-openai-api-key

b) Via mcp_agent.secrets.yaml (obrigatório para Ollama / qualquer URL base personalizada):

   cp mcp_agent.secrets.yaml.example mcp_agent.secrets.yaml
   # edit mcp_agent.secrets.yaml and put your key under openai.api_key

Executar com um modelo local Ollama

Uma vez que mcp-agent comunica com um endpoint compatível com OpenAI e o Ollama expõe um em http://localhost:11434/v1, este agente funciona com um modelo local apenas com alterações de configuração - sem edições de código ou dependências adicionais. Vê a discussão em #329.

1. Instala e inicia o Ollama, depois puxa um modelo capaz de ferramentas:

   ollama pull llama3.2
   ollama serve

2. Edita o `mcp_agent.config.yaml` e substitui o bloco `openai:` por:

   openai:
     base_url: "http://localhost:11434/v1"
     default_model: "llama3.2"

3. No mcp_agent.secrets.yaml, define qualquer api_key não vazia (Ollama ignora-a):

   openai:
     api_key: "ollama"

4. Executa como normal - streamlit run main.py. Não é necessária a variável de ambiente OPENAI_API_KEY neste caminho.

Nota: a automação do navegador beneficia de um modelo capaz de raciocínio. Modelos locais mais pequenos podem ter dificuldades com tarefas de múltiplos passos no Playwright.

Executar a Aplicação

1. Inicia a aplicação Streamlit:

   streamlit run main.py

2. Na interface da aplicação:

• Introduz o teu comando de navegação
• Clica em "Run Command"
• Vê os resultados e capturas de ecrã

Exemplos de Comandos

Navegação Básica

• "Ir para www.mcp-agent.com"
• "Voltar à página anterior"

Interação

• "Clicar no botão de login"
• "Descer para ver mais conteúdo"

Extração de Conteúdo

• "Resumir o conteúdo principal desta página"
• "Extrair os itens do menu de navegação"
• "Fazer uma captura de ecrã da secção principal"

Tarefas em Múltiplos Passos

• "Ir ao blog, encontrar o artigo mais recente e resumir os seus pontos principais"

Arquitetura

A aplicação utiliza:

• Streamlit para a interface do utilizador
• MCP (Model Context Protocol) para conectar o LLM com ferramentas
• Playwright para automação de browser
• MCP-Agent para o Framework Agentic
• Modelos da OpenAI para interpretar comandos e gerar respostas