🌐 Browser MCP Agent

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]

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/gsgaurav0/Browser-MCP-Agent.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:

   • Set OpenAI API Key as an environment variable:

     export OPENAI_API_KEY=your-openai-api-key
     

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
• OpenAI's models to interpret commands and generate responses