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

Clone this repository:

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

Install the required Python packages:
```
pip install -r requirements.txt
```
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.

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.

Install and start Ollama, then pull a tool-capable model:
```
ollama pull llama3.2
ollama serve
```

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

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

In mcp_agent.secrets.yaml, set any non-empty api_key (Ollama ignores it):
```
openai:
  api_key: "ollama"
```
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

Start the Streamlit app:
```
streamlit run main.py
```
In the app interface:
- Enter your browsing command
- Click "Run Command"
- View the results and screenshots

Example Commands

"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

README.md

🌐 Browser MCP Agent