mirror of
https://github.com/Shubhamsaboo/awesome-llm-apps.git
synced 2026-03-11 17:48:31 -05:00
Creating a README for browesr_mcp_agent
This commit is contained in:
87
mcp_ai_agents/browser_mcp_agent/README.md
Normal file
87
mcp_ai_agents/browser_mcp_agent/README.md
Normal file
@@ -0,0 +1,87 @@
|
||||
# 🌐 MCP Browser 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](https://github.com/lastmile-ai/mcp-agent) with Puppeteer 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 Puppeteer)
|
||||
- This is a critical requirement! The app uses Puppeteer to control a headless browser
|
||||
- Download and install from [nodejs.org](https://nodejs.org/)
|
||||
- OpenAI or Anthropic API Key
|
||||
|
||||
### Installation
|
||||
|
||||
1. Clone this repository:
|
||||
```bash
|
||||
git clone https://github.com/Shubhamsaboo/awesome-llm-apps.git
|
||||
cd mcp_ai_agents/browser_mcp_agent
|
||||
```
|
||||
|
||||
2. Install the required Python packages:
|
||||
```bash
|
||||
pip install -r requirements.txt
|
||||
```
|
||||
|
||||
3. Verify Node.js and npm are installed:
|
||||
```bash
|
||||
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:
|
||||
```bash
|
||||
export OPENAI_API_KEY=your-openai-api-key
|
||||
```
|
||||
|
||||
### Running the App
|
||||
|
||||
1. Start the Streamlit app:
|
||||
```bash
|
||||
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.lastmileai.dev"
|
||||
- "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
|
||||
- Puppeteer for browser automation
|
||||
- MCP-Agent for the Agentic Framework
|
||||
- OpenAI's models to interpret commands and generate responses
|
||||
Reference in New Issue
Block a user