Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type @ followed by the MCP server name and your instructions, e.g., "@MCP Browser Automation Server go to github.com and search for MCP documentation"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
This is demo project to practice Model Context Protocol based server implemenation for automating browsing with Playwright. It interacts with a Claude Desktop client to accept user prompts and use server to control browser.
Related MCP server: claude-playwright
Clone the repository: git clone https://github.com/hrmeetsingh/mcp-browser-automation.git
Install dependencies: npm install
Verify the output executables are present in dist folder
Create a configuration file in ~/Application\ Support/Claude/claude_desktop_config.json (This is for macOS)
Copy the following to the file:
{
"mcpServers": {
"mcp-browser-automation": {
"command": "node",
"args": ["/path/to/mcp-browser-automation/dist/index.js"]
}
}
}Start Claude Desktop
Open Claude Desktop
Start a new conversation to open a browser and navigate to a URL
Added MCP Server options
Navigating to a URL and doing actions with playwright
Click an element on the page
Inputs: selector (required).
Perform an HTTP DELETE request
Inputs: url (required).
Execute JavaScript in the browser console
Inputs: script (required).
fill out an input field
Inputs: selector (required), value (required).
Perform an HTTP GET request
Inputs: url (required).
Hover an element on the page
Inputs: selector (required).
Perform an HTTP PATCH request
Inputs: url (required), value (required).
Perform an HTTP POST request
Inputs: url (required), value (required).
Perform an HTTP PUT request
Inputs: url (required), value (required).
Take a screenshot of the current page or a specific element
Inputs: name (required), downloadsDir, height, savePng, +3 more.
Select an element on the page with Select tag
Inputs: selector (required), value (required).
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
Loading tool schema changelog…
Scored across 12 tools
Most tools have distinct purposes, but there is some potential confusion between playwright_click and playwright_select, as both involve interacting with page elements. The HTTP methods (GET, POST, PUT, PATCH, DELETE) are clearly differentiated, and other tools like navigate, screenshot, and evaluate have unique functions.
All tools follow a consistent 'playwright_verb' naming pattern, using snake_case throughout. This predictability makes it easy for agents to understand and use the toolset without confusion about naming conventions.
With 12 tools, this server is well-scoped for browser automation, covering essential actions like navigation, interaction, HTTP requests, and debugging. Each tool serves a clear purpose, and the count aligns with the domain's complexity without being overwhelming.
The toolset provides strong coverage for core browser automation tasks, including navigation, element interaction, HTTP methods, and screenshots. A minor gap is the lack of tools for handling browser contexts, tabs, or more advanced JavaScript execution, but agents can still accomplish most workflows effectively.
Playwright browser automation — navigate, click, fill forms, extract, screenshot — 17 agent tools.
Provides cloud browser automation capabilities using Stagehand and Browserbase, enabling LLMs to i…
Control a real browser from AI agents: navigate, click, type, screenshot, read the page.
AI-powered browser automation — navigate, click, fill forms, and extract data from any website.
