Multi-Agent System with Playwright MCP Integration

This project demonstrates a Python LangChain / LangGraph agent that uses the Model Context Protocol (MCP) to for example browse the web via the Microsoft Playwright MCP server, then answers user queries with retrieved page context.

---

Prerequisites

• Node.js 18+
• Python 3.11+
• npm
• Chrome browser

---

Environment Setup

1. Configure Environment Variables

This project requires API keys to function. Follow these steps to set up your environment:

Step 1: Copy the environment template

cp .env.example .env

Step 2: Edit the .env file

Open the .env file in VS Code and replace your_api_key_here with your actual API key.

Update the following line in your .env file:

GENAI_API_KEY=your_actual_api_key_here

Step 3: Verify your configuration

The .env file should contain:

• GENAI_API_KEY: Your API key (required)
• LLM_PROVIDER: Set to either anthropic or azure (default: anthropic)
• Other configuration options with sensible defaults

2. Security Note

⚠️ Important: Never commit your .env file to version control. The .env file is already included in .gitignore to prevent accidental commits.

---

Python Setup

macOS/Linux Setup

# Create virtual environment
python3 -m venv .venv

# Activate virtual environment
source .venv/bin/activate

# Upgrade pip and install dependencies
pip install --upgrade pip
pip install -r requirements.txt

Windows Setup

# Create virtual environment
python -m venv .venv

# Activate virtual environment
.venv\Scripts\activate

# Upgrade pip and install dependencies
python -m pip install --upgrade pip
pip install -r requirements.txt

Note: VS Code can automatically detect and activate your virtual environment. Look for the Python interpreter selector in the bottom-left status bar.

Deactivating the Virtual Environment

When you're done working on the project:

deactivate

---

Installing & Running the Playwright MCP Server

You have two ways to run the Playwright MCP server:

This repo now contains a minimal package.json. Install dependencies:

npm install

Start the MCP servers (you might require to disable VPN during the initial installation that happens after starting it):

npm run mcp

For windows:

npm run mcp-win

or windows powershell:

npm run mcp-ps

You should see output like:

Listening on http://localhost:8931
Put this in your client config:
{
   "mcpServers": {
      "playwright": { "url": "http://localhost:8931/mcp" }
   }
}

---

Running the Agent

Ensure the MCP server is listening (one of the options above), then:

python -m research.run

The agent will:

1. Connect to the MCP servers
2. Use the provided tools
3. Produce a concise summary

You can update the research/run.py and change the prompt for the agent to solve.

Deep Agents UI

There is a great UI that you can start that will make use of our agent. To do that:

1. Clone the repo: https://github.com/langchain-ai/deep-agents-ui/tree/main
2. Follow readme and use the following as config:

NEXT_PUBLIC_DEPLOYMENT_URL="http://127.0.0.1:2024" # Or your server URL
NEXT_PUBLIC_AGENT_ID="research"

3. Run our agent using langgraph server: langgraph dev --config research/langgraph.json
4. Run UI:

npm install
npm run dev

5. Open the UI under http://localhost:3000 and start asking questions.

---

Testing Integration

python test_mcp_integration.py

---

License

This project is provided as-is for demonstration purposes.