Browser MCP Agent

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

A Streamlit application that allows you to browse and interact with websites using natural language commands through the Model Context Protocol (MCP) and MCP-Agent with Playwright integration.

Features

• Natural Language Interface: Control a browser with simple English commands
• Full Browser Navigation: Visit websites and navigate through pages
• Interactive Elements: Click buttons, fill forms, and scroll through content
• Visual Feedback: Take screenshots of webpage elements
• Information Extraction: Extract and summarize content from webpages
• Multi-step Tasks: Complete complex browsing sequences through conversation

Setup

Requirements

• Python 3.8+
• Node.js and npm (for Playwright)
• This is a critical requirement! The app uses Playwright to control a headless browser
• Download and install from nodejs.org
• OpenAI or Anthropic API Key

Installation

1. Clone this repository:

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

2. Install the required Python packages:

pip install -r requirements.txt

3. Verify Node.js and npm are installed:

node --version
npm --version

Both commands should return version numbers. If they don't, please install Node.js.

4. Set up your API keys. Pick one of:

a) Via environment variable (simplest for OpenAI):

export OPENAI_API_KEY=your-openai-api-key

b) Via mcp_agent.secrets.yaml (required for Ollama / any custom base URL):

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

Running with a local Ollama model

Because mcp-agent talks to an OpenAI-compatible endpoint and Ollama exposes one at http://localhost:11434/v1, this agent runs against a local model with just config changes - no code edits or extra dependencies. See discussion in #329.

1. Install and start Ollama, then pull a tool-capable model:

ollama pull llama3.2
ollama serve

2. Edit mcp_agent.config.yaml and replace the openai: block with:

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

3. In mcp_agent.secrets.yaml, set any non-empty api_key (Ollama ignores it):

openai:
  api_key: "ollama"

4. Run as normal - streamlit run main.py. No OPENAI_API_KEY env var is required in this path.

Note: browser automation benefits from a reasoning-capable model. Smaller local models may struggle with multi-step Playwright tasks.

Running the App

1. Start the Streamlit app:

streamlit run main.py

2. In the app interface:

• Enter your browsing command
• Click "Run Command"
• View the results and screenshots

Example Commands

Basic Navigation

• "Go to www.mcp-agent.com"
• "Go back to the previous page"

Interaction

• "Click on the login button"
• "Scroll down to see more content"

Content Extraction

• "Summarize the main content of this page"
• "Extract the navigation menu items"
• "Take a screenshot of the hero section"

Multi-step Tasks

• "Go to the blog, find the most recent article, and summarize its key points"

Architecture

The application uses:

• Streamlit for the user interface
• MCP (Model Context Protocol) to connect the LLM with tools
• Playwright for browser automation
• MCP-Agent for the Agentic Framework
• OpenAI's models to interpret commands and generate responses