Puppeteer MCP Server
Click on "Install 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., "@Puppeteer MCP Servernavigate to https://example.com and take a screenshot"
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.
Puppeteer MCP Server
This MCP server provides browser automation capabilities through Puppeteer, allowing interaction with both new browser instances and existing Chrome windows.
Acknowledgment
This project is an experimental implementation inspired by @modelcontextprotocol/server-puppeteer. While it shares similar goals and concepts, it explores alternative approaches to browser automation through the Model Context Protocol.
Related MCP server: Puppeteer Debugger MCP Server
Features
Navigate web pages
Take screenshots
Click elements
Fill forms
Select options
Hover elements
Execute JavaScript
Smart Chrome tab management:
Connect to active Chrome tabs
Preserve existing Chrome instances
Intelligent connection handling
Project Structure
/
├── src/
│ ├── config/ # Configuration modules
│ ├── tools/ # Tool definitions and handlers
│ ├── browser/ # Browser connection management
│ ├── types/ # TypeScript type definitions
│ ├── resources/ # Resource handlers
│ └── server.ts # Server initialization
├── index.ts # Entry point
└── README.md # DocumentationInstallation
Option 1: Install from npm
npm install -g puppeteer-mcp-serverYou can also run it directly without installation using npx:
npx puppeteer-mcp-serverOption 2: Install from source
Clone this repository or download the source code
Install dependencies:
npm installBuild the project:
npm run buildRun the server:
npm startMCP Server Configuration
To use this tool with Claude, you need to add it to your MCP settings configuration file.
For Claude Desktop App
Add the following to your Claude Desktop configuration file (located at %APPDATA%\Claude\claude_desktop_config.json on Windows or ~/Library/Application Support/Claude/claude_desktop_config.json on macOS):
If installed globally via npm:
{
"mcpServers": {
"puppeteer": {
"command": "puppeteer-mcp-server",
"args": [],
"env": {}
}
}
}Using npx (without installation):
{
"mcpServers": {
"puppeteer": {
"command": "npx",
"args": ["-y", "puppeteer-mcp-server"],
"env": {}
}
}
}If installed from source:
{
"mcpServers": {
"puppeteer": {
"command": "node",
"args": ["path/to/puppeteer-mcp-server/dist/index.js"],
"env": {
"NODE_OPTIONS": "--experimental-modules"
}
}
}
}For Claude VSCode Extension
Add the following to your Claude VSCode extension MCP settings file (located at %APPDATA%\Code\User\globalStorage\saoudrizwan.claude-dev\settings\cline_mcp_settings.json on Windows or ~/Library/Application Support/Code/User/globalStorage/saoudrizwan.claude-dev/settings/cline_mcp_settings.json on macOS):
If installed globally via npm:
{
"mcpServers": {
"puppeteer": {
"command": "puppeteer-mcp-server",
"args": [],
"env": {}
}
}
}Using npx (without installation):
{
"mcpServers": {
"puppeteer": {
"command": "npx",
"args": ["-y", "puppeteer-mcp-server"],
"env": {}
}
}
}If installed from source:
{
"mcpServers": {
"puppeteer": {
"command": "node",
"args": ["path/to/puppeteer-mcp-server/dist/index.js"],
"env": {
"NODE_OPTIONS": "--experimental-modules"
}
}
}
}For source installation, replace path/to/puppeteer-mcp-server with the actual path to where you installed this tool.
Usage
Standard Mode
The server will launch a new browser instance by default.
Active Tab Mode
To connect to an existing Chrome window:
Close any existing Chrome instances completely
Launch Chrome with remote debugging enabled:
# Windows "C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222 # macOS /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 # Linux google-chrome --remote-debugging-port=9222Navigate to your desired webpage in Chrome
Connect using the
puppeteer_connect_active_tabtool:{ "targetUrl": "https://example.com", // Optional: specific tab URL "debugPort": 9222 // Optional: defaults to 9222 }
The server will:
Detect and connect to the Chrome instance running with remote debugging enabled
Preserve your Chrome instance (won't close it)
Find and connect to non-extension tabs
Provide clear error messages if connection fails
Available Tools
puppeteer_connect_active_tab
Connect to an existing Chrome instance with remote debugging enabled.
Optional:
targetUrl- URL of the specific tab to connect todebugPort- Chrome debugging port (default: 9222)
puppeteer_navigate
Navigate to a URL.
Required:
url- The URL to navigate to
puppeteer_screenshot
Take a screenshot of the current page or a specific element.
Required:
name- Name for the screenshotOptional:
selector- CSS selector for element to screenshotwidth- Width in pixels (default: 800)height- Height in pixels (default: 600)
puppeteer_click
Click an element on the page.
Required:
selector- CSS selector for element to click
puppeteer_fill
Fill out an input field.
Required:
selector- CSS selector for input fieldvalue- Text to enter
puppeteer_select
Use dropdown menus.
Required:
selector- CSS selector for select elementvalue- Option value to select
puppeteer_hover
Hover over elements.
Required:
selector- CSS selector for element to hover
puppeteer_evaluate
Execute JavaScript in the browser console.
Required:
script- JavaScript code to execute
Security Considerations
When using remote debugging:
Only enable on trusted networks
Use a unique debugging port
Close debugging port when not in use
Never expose debugging port to public networks
Logging and Debugging
File-based Logging
The server implements comprehensive logging using Winston:
Location:
logs/directoryFile Pattern:
mcp-puppeteer-YYYY-MM-DD.logLog Rotation:
Daily rotation
Maximum size: 20MB per file
Retention: 14 days
Automatic compression of old logs
Log Levels
DEBUG: Detailed debugging information
INFO: General operational information
WARN: Warning messages
ERROR: Error events and exceptions
Logged Information
Server startup/shutdown events
Browser operations (launch, connect, close)
Navigation attempts and results
Tool executions and outcomes
Error details with stack traces
Browser console output
Resource usage (screenshots, console logs)
Error Handling
The server provides detailed error messages for:
Connection failures
Missing elements
Invalid selectors
JavaScript execution errors
Screenshot failures
Each tool call returns:
Success/failure status
Detailed error message if failed
Operation result data if successful
All errors are also logged to the log files with:
Timestamp
Error message
Stack trace (when available)
Context information
Contributing
Contributions are welcome! Please read our Contributing Guidelines for details on how to submit pull requests, report issues, and contribute to the project.
License
This project is licensed under the MIT License - see the LICENSE file for details.
Available Tools
8 toolspuppeteer_clickC
Click an element on the page
| Name | Required | Description | Default |
|---|---|---|---|
| selector | Yes | CSS selector for element to click |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
The description is a tautology of the name and adds no behavioral details beyond 'click'. It does not specify side effects (e.g., navigation trigger), waiting behavior, or error conditions. With no annotations, this is insufficient for safe invocation.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is very concise (one sentence) but lacks necessary detail. It is front-loaded but does not earn its place by providing substantive information beyond the tool name.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the tool's simplicity (one parameter, no output schema), the description fails to cover essential context like post-click behavior, return value, or error handling. For a click action, crucial details (e.g., navigation wait) are missing.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The input schema already describes the selector parameter (CSS selector for element to click). The description adds no further meaning, but schema coverage is 100%, meeting the baseline. No extra value is provided.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the action ('click') and the target ('an element on the page'), making the purpose obvious. It distinguishes from sibling tools like fill, hover, or navigate, which have different actions.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides no guidance on when to use this tool versus alternatives (e.g., puppeteer_hover or puppeteer_fill). It does not mention prerequisites or context, leaving the agent to infer usage.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
puppeteer_connect_active_tabB
Connect to an existing Chrome instance with remote debugging enabled
| Name | Required | Description | Default |
|---|---|---|---|
| debugPort | No | Optional Chrome debugging port (default: 9222) | |
| targetUrl | No | Optional URL of the target tab to connect to. If not provided, connects to the first available tab. |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, and the description does not disclose what happens if connection fails, whether state changes, or prerequisites (e.g., Chrome must already be running with remote debugging).
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single sentence with 10 words, efficiently conveying the core purpose without unnecessary details.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
With no output schema and no annotations, the description is too brief for a connection tool. It lacks information about return values, success/failure indicators, and prerequisites for using the tool.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Input schema coverage is 100% and already includes parameter descriptions. The tool description adds no additional behavioral details beyond what is in the schema, so baseline score of 3 is appropriate.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the action ('Connect') and resource ('existing Chrome instance with remote debugging enabled'), distinguishing it from sibling tools that perform page manipulations.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
No guidance on when to use this tool versus alternatives, such as launching a new browser. It does not indicate it is a prerequisite for other puppeteer actions.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
puppeteer_evaluateB
Execute JavaScript in the browser console
| Name | Required | Description | Default |
|---|---|---|---|
| script | Yes | JavaScript code to execute |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description bears full responsibility. It mentions execution in the browser console but does not specify whether the script runs synchronously, how return values are handled, or potential side effects on the page state.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
A single, direct sentence that immediately conveys the tool's purpose. It is front-loaded and contains no unnecessary words.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
The description is minimal given the tool's potential complexity. It does not explain what the execution returns, how to handle asynchronous code, or any security considerations. No output schema exists to compensate.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The single parameter 'script' has a clear description in the schema ('JavaScript code to execute'), and the tool description adds no extra meaning. With 100% schema coverage, baseline 3 is appropriate.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the action ('Execute') and the target ('JavaScript in the browser console'), distinguishing it from sibling tools that perform specific UI interactions like clicking, filling, or navigating.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
No guidance on when to use this tool versus alternatives such as puppeteer_click or puppeteer_fill. The description lacks context about typical use cases for executing arbitrary JavaScript.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
puppeteer_fillC
Fill out an input field
| Name | Required | Description | Default |
|---|---|---|---|
| value | Yes | Value to fill | |
| selector | Yes | CSS selector for input field |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
The description does not disclose behavioral traits such as whether the field is cleared before filling, whether events are triggered, or what happens if the selector is invalid. With no annotations, the description carries the full burden but fails to provide any behavioral context.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single sentence that is front-loaded and concise. However, it could be slightly improved by adding more context without losing brevity.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the simplicity of the tool (fill input field), the description is minimally adequate. However, the lack of output schema and behavioral details (e.g., does it clear existing values?) leaves gaps for the agent.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, with both 'selector' and 'value' having descriptions. The description adds no additional meaning beyond what the schema provides, so baseline 3 is appropriate.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
Description states 'Fill out an input field' which clearly identifies the action (fill) and resource (input field). However, it does not differentiate from sibling tools like puppeteer_select or puppeteer_click, which could also interact with input fields.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
No guidance is provided on when to use this tool versus alternatives like puppeteer_select or puppeteer_click. The description does not mention prerequisites, exclusions, or typical use cases.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
puppeteer_hoverC
Hover an element on the page
| Name | Required | Description | Default |
|---|---|---|---|
| selector | Yes | CSS selector for element to hover |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries full burden. It only states the action without disclosing behavior like asynchronous execution, event side effects, or whether the hover is a one-time action.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single concise sentence. It is front-loaded and wastes no words, but could benefit from slightly more detail without losing conciseness.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the simplicity (1 param, no output schema), the description omits important context like return behavior (likely void) or side effects (e.g., triggering event listeners). Not complete for an agent.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100% (selector described), so baseline is 3. The description adds no new meaning beyond the schema; it merely restates the action.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description states the specific verb 'Hover' and resource 'an element on the page', clearly distinguishing it from sibling tools like click, fill, or navigate. However, it lacks nuance about what 'hover' entails, such as triggering mouseover events.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides no guidance on when to use this tool versus alternatives like puppeteer_click for interactions or puppeteer_evaluate for custom actions. There is no mention of prerequisites or context.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
puppeteer_screenshotB
Take a screenshot of the current page or a specific element
| Name | Required | Description | Default |
|---|---|---|---|
| name | Yes | Name for the screenshot | |
| width | No | Width in pixels (default: 800) | |
| height | No | Height in pixels (default: 600) | |
| selector | No | CSS selector for element to screenshot |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries full burden. It does not disclose what happens to the screenshot (e.g., saved to disk, returned as base64), nor any side effects or permissions needed.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single sentence, which is concise, but it lacks essential context such as output format or usage details. It is under-specified.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the lack of output schema and annotations, the description should explain what happens with the screenshot. It fails to mention return value or storage, making it incomplete.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, and the description adds no additional meaning beyond the schema. Baseline score of 3 is appropriate.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool takes a screenshot of the current page or a specific element, with a specific verb and resource. It differentiates from sibling tools like puppeteer_navigate or puppeteer_click.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
No guidance on when to use this tool versus alternatives, no preconditions, and no mention of when to capture a full page versus an element.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
puppeteer_selectC
Select an element on the page with Select tag
| Name | Required | Description | Default |
|---|---|---|---|
| value | Yes | Value to select | |
| selector | Yes | CSS selector for element to select |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description must carry the burden of behavioral disclosure. It only states the intended action but does not mention side effects (e.g., page state change), error conditions, or if it waits for the element.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single concise sentence. However, it is so brief that it sacrifices clarity; slightly more detail would be beneficial without losing conciseness.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a simple tool with well-described parameters, the description is adequate but incomplete. It does not explain change events, support for multiple select, or error handling, which would be useful for full completeness.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100% with clear parameter descriptions. The tool description adds the context that it works with a 'Select tag', which clarifies the element type beyond the schema, but this is minimal additional value.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description states 'Select an element on the page with Select tag', which identifies the target element type (select tag) and action, but it is vague about selecting an option from a dropdown. It does not clearly distinguish from sibling tools like puppeteer_click or puppeteer_fill.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
No guidance is provided on when to use this tool versus alternatives (e.g., puppeteer_click for generic clicks, puppeteer_fill for input fields). There is no mention of use cases or exclusions.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
TDQS
Each tool targets a distinct browser automation action (navigate, click, fill, etc.) with no overlap, making it easy for an agent to select the right tool.
All tools follow the consistent pattern 'puppeteer_verb' using present tense and snake_case, providing a predictable naming convention.
8 tools cover the essential browser automation operations without being excessive or too sparse for a typical workflow.
Core actions like navigation, clicking, filling, selecting, hovering, screenshots, and JavaScript execution are present, but missing operations like waiting, scrolling, or form submission represent minor gaps.
Maintenance
Resources
Unclaimed servers have limited discoverability.
Looking for Admin?
If you are the server author, to access and configure the admin panel.
Related MCP Connectors
MCP server to assist with JxBrowser development.
Hosted real Google Chrome MCP with per-user persistent state. Navigate, click, type, screenshot.
MCP server for Mint — AI-powered QA that runs your app in a real browser on every PR.
Related MCP Servers
- AlicenseBqualityNot gradedmaintenanceA MCP server that provides browser automation tools, allowing users to navigate websites, take screenshots, click elements, fill forms, and execute JavaScript through Playwright.82
- AlicenseBqualityCmaintenanceAn MCP server based on Puppeteer and Chrome DevTools Protocol for advanced browser debugging, performance analysis, and memory detection. It enables users to inspect DOM elements, monitor console errors, capture screenshots, and perform heap snapshot analysis through persistent browser connections.10351MIT
- AlicenseNot gradedqualityDmaintenanceAn MCP server for browser automation using Puppeteer that enables AI assistants to navigate web pages, interact with UI elements, and capture screenshots. It supports comprehensive web tasks including form filling, content extraction, and executing custom JavaScript within the browser context.1MIT
- AlicenseNot gradedqualityDmaintenanceSelf-hosted MCP server for browser automation using Puppeteer, with tools for navigation, screenshots, mouse interactions, cookie management, and multiple transport protocols.2,35920MIT
Latest Blog Posts
- Who's Calling? MCP Hosts Are an Identity Blind Spot (And the Spec Knows It)By Om-Shree-0709 on .mcpAgent IdentityOAuth 2.1
- Your AI Chatbot Just Exposed Your CEO's Salary to an InternBy Om-Shree-0709 on .Agent IdentityMCP SecurityOAuth Delegation
- Why MCP Servers Need Execution Sandboxing (And Why Your Current Stack Isn't Enough)By Om-Shree-0709 on .Agentic AiPrompt InjectionWebAssembly
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/jssyxd/puppeteer-mcp-server'
If you have feedback or need assistance with the MCP directory API, please join our Discord server