Coding Cloud

Quick Guide: Automating Browser Tasks with Claude & MCP

Published on May 1, 2025by Claudio Teixeira

Quickly learn to automate web tasks like form filling using Claude and Playwright Model Context Protocol (MCP).

Automate Your Browser with AI

Use AI assistants like Claude, combined with Model Context Protocol (MCP) tools, to automate browser tasks (navigation, form filling, clicks). MCP bridges the AI and your browser. This guide focuses on using an MCP client (like Claude Desktop or Windsurf IDE) with Playwright MCP. Based on testing, Playwright MCP proved significantly more reliable for common browser automation tasks like navigation and form submission compared to other available MCP servers.

Benefits: Save time on repetitive web tasks, automate testing/scraping, and integrate web actions into AI workflows.

Prerequisites

  • MCP Client: Claude Desktop, Windsurf IDE, or similar.
  • Node.js & npx: Install from nodejs.org.
  • Web Browser: Chrome, Firefox, Edge, etc.

Quick Setup Guide

  1. Install MCP Client: Install Claude Desktop or your chosen client (e.g., Windsurf IDE).
  2. Run Playwright MCP Server: Open a terminal and run: 
    npx @playwright/mcp@latest
    Keep this terminal open. Playwright MCP will open a dedicated browser window for automation.
  3. Configure MCP Client:
    • In your client's settings (Claude Desktop, Windsurf settings.json, etc.), enable MCP access.
    • Point it to the Playwright MCP server (usually ws://127.0.0.1:6270 - check server terminal output).
    • Example Windsurf Config Snippet: 
      {
  "mcp.servers": {
    "playwright": { "command": "npx", "args": ["@playwright/mcp@latest"] }
  }
}
  4. Connect: Ensure your client connects to the running server.

Instructing Claude

Give clear, step-by-step prompts for browser actions.

Example Prompt:

Open a browser, go to example.com, find the contact form, fill name with "John Doe" and email with "john.doe@email.com", then click submit.

Claude uses the MCP server to execute these actions in the dedicated browser window.

Key Considerations

  • Security: HIGHLY RECOMMENDED: Run client/server in a sandbox (Docker, VM) to isolate from your system.
  • Limitations: Some actions (account creation, social media posting, CAPTCHAs) may be restricted.
  • Supervision: Monitor AI actions, especially with sensitive data. It's not perfect.
  • Resources: Multiple MCP servers consume significant CPU/RAM.

Example Use Cases

  • Filling job applications.
  • Simple web testing/scraping (respect site rules).
  • Automating data entry on web forms.
  • Gathering information from multiple pages.

Conclusion

Browser automation with Claude and MCP offers powerful efficiency gains. Follow these steps, prioritize security, and start automating your web interactions. For deeper control, explore building custom MCP clients (claudiotx/coding-cloud-mcp-client-demo).

References