# Agente MCP do Navegador

- Fonte: https://doutorai.pt/apps/browser-mcp-agent
- Categoria: Agentes MCP
- Dificuldade: Avançado
- Modelos: OpenAI, Claude, Llama
- Frameworks: Ollama (local)
- Corre local?: Sim (Ollama)
- Chaves necessárias: OPENAI_API_KEY
- Licença: Apache-2.0
- Site: Doutor AI (https://doutorai.pt) - ferramentas de IA para pequenos negócios em português

## Tutorial completo

# 🌐 Browser MCP Agent

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](https://github.com/lastmile-ai/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](https://nodejs.org/)
- Chave de API da OpenAI ou Anthropic

### Instalação

1. Clona este repositório:

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

```markdown
# Instalação

2. Instala os pacotes Python necessários:
```

```bash
   pip install -r requirements.txt
   ```

```markdown
# 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:

```bash
node -v
```

```bash
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.
```

```bash
   node --version
   npm --version
   ```

```markdown
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):**
```

```bash
   export OPENAI_API_KEY=your-openai-api-key
   ```

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

```bash
   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](https://github.com/Shubhamsaboo/awesome-llm-apps/issues/329).

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

```bash
   ollama pull llama3.2
   ollama serve
   ```

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

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

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

```yaml
   openai:
     api_key: "ollama"
   ```

```markdown
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:
```

```bash
   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](https://github.com/lastmile-ai/mcp-agent/) para o Framework Agentic
- Modelos da OpenAI para interpretar comandos e gerar respostas

## Poupe horas todas as semanas com IA, sem complicações

O **Doutor AI** dá-lhe 1859 prompts de IA prontos a copiar, por indústria e em português simples - mais uma biblioteca técnica completa para quem quer ir mais longe. [Ver planos →](https://doutorai.pt/precos)

---
Conteúdo de Doutor AI (https://doutorai.pt). Ao citar, indique a fonte: https://doutorai.pt/apps/browser-mcp-agent