Configurable Puppeteer MCP Server
Supports interaction with web elements using CSS selectors for operations like clicking, hovering, filling form fields, and capturing specific elements in screenshots.
Offers the ability to use Firefox instead of Chrome as the browser engine through custom Puppeteer configuration options.
Enables execution of JavaScript code in the browser context through the puppeteer_evaluate tool, allowing for dynamic interaction with web page content.
Provides browser automation capabilities with configurable options, enabling navigation to websites, capturing screenshots, clicking elements, filling forms, and executing JavaScript in a real browser environment.
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., "@Configurable Puppeteer MCP Servertake a screenshot of the homepage at example.com"
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.
Configurable Puppeteer MCP Server
A Model Context Protocol server that provides browser automation capabilities using Puppeteer with configurable options. This server enables LLMs to interact with web pages, take screenshots, and execute JavaScript in a real browser environment, with the ability to customize Puppeteer launch options through environment variables.
Components
Tools
puppeteer_navigate
Navigate to any URL in the browser
Input:
url(string)
puppeteer_screenshot
Capture screenshots of the entire page or specific elements
Inputs:
name(string, required): Name for the screenshotselector(string, optional): CSS selector for element to screenshotwidth(number, optional, default: 800): Screenshot widthheight(number, optional, default: 600): Screenshot height
puppeteer_click
Click elements on the page
Input:
selector(string): CSS selector for element to click
puppeteer_hover
Hover elements on the page
Input:
selector(string): CSS selector for element to hover
puppeteer_fill
Fill out input fields
Inputs:
selector(string): CSS selector for input fieldvalue(string): Value to fill
puppeteer_select
Select an element with SELECT tag
Inputs:
selector(string): CSS selector for element to selectvalue(string): Value to select
puppeteer_evaluate
Execute JavaScript in the browser console
Input:
script(string): JavaScript code to execute
Resources
The server provides access to two types of resources:
Console Logs (
console://logs)Browser console output in text format
Includes all console messages from the browser
Screenshots (
screenshot://<name>)PNG images of captured screenshots
Accessible via the screenshot name specified during capture
Related MCP server: Steel Puppeteer
Key Features
Browser automation
Console log monitoring
Screenshot capabilities
JavaScript execution
Basic web interaction (navigation, clicking, form filling)
Configurable Puppeteer options through environment variables
Configuration
Using with Custom Puppeteer Options
You can configure Puppeteer launch options by providing a JSON string in the PUPPETEER_ARGS environment variable. This allows you to customize browser behavior without modifying the server code.
Example: Using Firefox Instead of Chrome
{
"mcpServers": {
"puppeteer": {
"command": "npx",
"args": ["-y", "github:afshawnlotfi/mcp-configurable-puppeteer"],
"env": {
"PUPPETEER_ARGS": "{\"browser\": \"firefox\"}"
}
}
}
}Example: Configuring Browser Window Size
{
"mcpServers": {
"puppeteer": {
"command": "npx",
"args": ["-y", "github:afshawnlotfi/mcp-configurable-puppeteer"],
"env": {
"PUPPETEER_ARGS": "{\"defaultViewport\": {\"width\": 1280, \"height\": 800}}"
}
}
}
}Standard Configuration
NPX
{
"mcpServers": {
"puppeteer": {
"command": "npx",
"args": ["-y", "github:afshawnlotfi/mcp-configurable-puppeteer"]
}
}
}You can also specify a branch, tag, or commit:
{
"mcpServers": {
"puppeteer": {
"command": "npx",
"args": ["-y", "github:afshawnlotfi/mcp-configurable-puppeteer#main"]
}
}
}License
This MCP server is licensed under the MIT License. This means you are free to use, modify, and distribute the software, subject to the terms and conditions of the MIT License. For more details, please see the LICENSE file in the project repository.
Available Tools
7 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?
No annotations are provided, so the description carries the full burden of behavioral disclosure. It states the action but lacks critical details: it doesn't specify if this triggers page navigation, requires the element to be visible/clickable, handles errors (e.g., if selector not found), or has side effects like waiting for network requests. This is inadequate for a mutation tool with zero annotation coverage.
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, efficient sentence with zero waste. It's front-loaded with the core action and target, making it easy to parse quickly.
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 complexity (a mutation tool interacting with web pages), lack of annotations, and no output schema, the description is incomplete. It doesn't cover behavioral aspects like error handling, prerequisites, or what happens post-click (e.g., page changes), leaving significant gaps for an AI agent to use it correctly.
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 schema description coverage is 100%, with the parameter 'selector' fully documented in the schema as 'CSS selector for element to click'. The description adds no additional meaning beyond this, such as selector syntax examples or constraints. Baseline 3 is appropriate when the schema does the heavy lifting.
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 target ('an element on the page'), providing a specific verb+resource combination. However, it doesn't explicitly distinguish this tool from sibling tools like 'puppeteer_hover' or 'puppeteer_select', which also interact with page elements, so it doesn't reach the highest score.
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. It doesn't mention prerequisites (e.g., needing a page to be loaded), exclusions, or comparisons to siblings like 'puppeteer_hover' for non-click interactions or 'puppeteer_select' for dropdowns.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
puppeteer_evaluateC
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?
With no annotations provided, the description carries full burden for behavioral disclosure. 'Execute JavaScript in the browser console' implies a mutation operation (executing code) but doesn't disclose critical traits: whether this requires specific page context, if it runs in isolated or page context, what happens on errors, or any side effects. It mentions nothing about permissions, rate limits, or execution environment details.
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, efficient sentence with zero waste. It's appropriately sized for a simple tool and front-loads the core functionality. Every word earns its place without redundancy or unnecessary elaboration.
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 this is a JavaScript execution tool with no annotations and no output schema, the description is incomplete. It doesn't explain what the tool returns (e.g., result of executed script), error behavior, execution context, or prerequisites. For a tool that can have significant side effects, more context about behavior and output is needed.
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 schema has 100% description coverage (parameter 'script' is fully documented in schema), so the baseline is 3. The description doesn't add any parameter-specific information beyond what the schema already provides about the 'script' parameter. No additional syntax, format, or usage details are given.
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 'Execute JavaScript in the browser console' clearly states the action (execute) and target (JavaScript in browser console). It distinguishes from siblings like puppeteer_click or puppeteer_navigate by focusing on script execution rather than UI interaction or navigation. However, it doesn't specify what 'browser' refers to (Puppeteer-controlled browser context), which prevents a perfect score.
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. It doesn't mention when puppeteer_evaluate is appropriate compared to other Puppeteer tools (e.g., use for custom logic vs. puppeteer_click for button clicks) or what scenarios it's designed for. There's no explicit when/when-not usage context.
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 |
|---|---|---|---|
| selector | Yes | CSS selector for input field | |
| value | Yes | Value to fill |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full burden of behavioral disclosure. It states the action ('fill out') but doesn't cover critical traits like whether it requires a loaded page, if it waits for the element to be visible, error handling for invalid selectors, or side effects (e.g., triggering events). For a mutation tool with zero annotation coverage, this leaves significant gaps in understanding its behavior.
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, efficient sentence ('Fill out an input field') that directly states the core action without unnecessary words. It's front-loaded and wastes no space, making it highly concise and well-structured for quick comprehension.
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 complexity of a web automation tool with 2 parameters, no annotations, and no output schema, the description is incomplete. It doesn't address behavioral aspects like error conditions, dependencies on other tools (e.g., navigation first), or what happens after filling (e.g., does it submit?). For a mutation tool in a sibling-rich environment, more context is needed to ensure safe and effective use.
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 has 100% description coverage, with clear documentation for 'selector' (CSS selector) and 'value' (value to fill). The description adds no additional meaning beyond this, as it doesn't explain parameter interactions, constraints, or examples. Given the high schema coverage, a baseline score of 3 is appropriate, as the schema handles the heavy lifting without extra value from the description.
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 'Fill out an input field' clearly states the verb ('fill out') and resource ('input field'), making the basic purpose understandable. However, it lacks specificity about the context (e.g., web page automation) and doesn't differentiate from siblings like 'puppeteer_click' or 'puppeteer_select', which could also interact with input fields. This results in a vague but functional purpose statement.
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. It doesn't mention prerequisites (e.g., requiring a page to be loaded), exclusions (e.g., not for non-input elements), or comparisons to siblings like 'puppeteer_select' for dropdowns. Without such context, users must infer usage from the tool name alone.
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?
With no annotations provided, the description carries the full burden of behavioral disclosure. It states the action but doesn't cover important traits like whether hovering triggers page events, requires the element to be visible, has side effects (e.g., changing page state), or handles errors (e.g., if the selector doesn't exist). This leaves significant gaps for a mutation-like operation.
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 extremely concise at four words, with zero wasted language. It's front-loaded with the core action ('Hover an element'), making it easy to parse quickly. Every word earns its place by contributing directly to understanding the tool's purpose.
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 complexity of a browser interaction tool with no annotations and no output schema, the description is incomplete. It doesn't explain what happens after hovering (e.g., whether it waits for effects or returns a status), potential errors, or dependencies (e.g., requiring a page to be loaded first). For a tool that likely mutates page state, more context is needed.
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 has 100% description coverage, with the 'selector' parameter clearly documented as a CSS selector. The description doesn't add any semantic details beyond this, such as examples of valid selectors or how to handle multiple matches. Given the high schema coverage, a baseline score of 3 is appropriate as the schema does the heavy lifting.
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 'Hover an element on the page' clearly states the action (hover) and target (an element on the page), making the purpose immediately understandable. However, it doesn't explicitly differentiate from sibling tools like 'puppeteer_click' or 'puppeteer_select', which also interact with page elements but perform 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. It doesn't mention scenarios where hovering is appropriate (e.g., to trigger dropdowns or tooltips) or when other tools like 'puppeteer_click' might be better suited. Without such context, the agent must infer usage from the tool name alone.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
puppeteer_screenshotC
Take a screenshot of the current page or a specific element
| Name | Required | Description | Default |
|---|---|---|---|
| name | Yes | Name for the screenshot | |
| selector | No | CSS selector for element to screenshot | |
| width | No | Width in pixels (default: 800) | |
| height | No | Height in pixels (default: 600) |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries full burden for behavioral disclosure. It states the action but lacks critical details: whether this is a read-only operation, if it requires specific page states, what happens on failure (e.g., invalid selector), or the output format (e.g., image data, file path). This is inadequate for a tool with potential side effects.
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, efficient sentence that directly states the tool's purpose without unnecessary words. It's appropriately sized and front-loaded with the core functionality.
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 tool with 4 parameters, no annotations, and no output schema, the description is insufficient. It doesn't explain what the tool returns (e.g., image data, file path), error conditions, or dependencies on other tools (like puppeteer_navigate). Given the complexity and lack of structured data, more behavioral context is needed.
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%, so the schema already documents all parameters thoroughly. The description adds minimal value beyond the schema—it implies 'selector' targets elements and 'width/height' control dimensions, but doesn't provide additional context like selector syntax examples or dimension constraints.
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 ('Take a screenshot') and target ('current page or a specific element'), providing a specific verb+resource. However, it doesn't explicitly distinguish this tool from its siblings (e.g., puppeteer_click, puppeteer_evaluate), which are different interaction types rather than direct alternatives for screenshotting.
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. It doesn't mention prerequisites (e.g., needing a page loaded via puppeteer_navigate first), exclusions, or contextual advice for choosing between full-page vs. element screenshots.
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 |
|---|---|---|---|
| selector | Yes | CSS selector for element to select | |
| value | Yes | Value to select |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description carries the full burden of behavioral disclosure. It mentions selecting an element but doesn't explain what happens—e.g., does it trigger events, change page state, or have side effects? It lacks details on error handling, permissions, or performance implications, which are critical for a tool interacting with web pages.
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, straightforward sentence with no wasted words. It's front-loaded with the core action, making it easy to parse quickly. However, it could be slightly more informative 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 complexity of web interaction tools and the lack of annotations or output schema, the description is incomplete. It doesn't cover what the tool returns, error cases, or how it fits into broader Puppeteer workflows. For a tool with two required parameters and no structured safety hints, more context is needed to guide effective use.
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%, so the schema already documents both parameters ('selector' and 'value') adequately. The description doesn't add any meaning beyond this, such as examples of valid selectors or what 'value' represents in the context of a 'Select tag'. Baseline 3 is appropriate as the schema does the heavy lifting.
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 action ('Select') and target ('element on the page with Select tag'), but it's vague about what 'Select' means in this context—whether it's clicking, choosing an option, or something else. It doesn't differentiate from siblings like 'puppeteer_click' or 'puppeteer_fill', which could involve similar interactions.
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. For example, it doesn't specify if this is for dropdowns, multi-selects, or other 'Select tag' elements, nor does it mention prerequisites like needing a page loaded first. This leaves the agent guessing about appropriate contexts.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
TDQS
Every tool has a clearly distinct purpose with no ambiguity. Clicking, evaluating JavaScript, filling inputs, hovering, navigating, taking screenshots, and selecting dropdown elements are all separate browser automation operations that an agent can easily distinguish. The descriptions clearly differentiate each action.
All tools follow a perfect verb_noun pattern with consistent snake_case naming (puppeteer_click, puppeteer_evaluate, etc.). The 'puppeteer_' prefix creates a clear namespace, and the action verbs (click, evaluate, fill, hover, navigate, screenshot, select) are consistently descriptive and parallel in structure.
Seven tools is well-scoped for a Puppeteer automation server. This provides core browser interaction capabilities without being overwhelming. Each tool earns its place by covering essential operations like navigation, interaction, evaluation, and capture that form a complete automation workflow.
The toolset covers most essential Puppeteer operations well, including navigation, interaction, evaluation, and screenshots. Minor gaps exist - there's no explicit tool for waiting/loading states, keyboard input, or cookie/session management - but agents can work around these using evaluate or other tools. Core browser automation workflows are well-supported.
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
A comprehensive Model Context Protocol (MCP) server that enables AI assistants to interact with yo…
A Model Context Protocol server for Wix AI tools
Enable secure connectivity between Sentry issues and debugging data, and LLM clients, using a Model Context Protocol (MCP) server.
The Telnyx MCP server is an official implementation of the Model Context Protocol that enables AI clients (like Claude Desktop, Cursor, and OpenAI Agents) to interact with Telnyx's telephony, messaging, and AI assistant APIs. It provides comprehensive capabilities including making and managing phone calls, sending SMS/MMS messages, purchasing and configuring phone numbers, creating AI assistants with custom instructions, managing cloud storage buckets, scraping and embedding website content, and handling integration secrets. The server exists as both a local implementation and a remotely hosted version, allowing developers to integrate real-world communication infrastructure directly into AI applications.
Related MCP Servers
- AlicenseNot gradedqualityCmaintenanceA Model Context Protocol server that provides browser automation capabilities using Playwright, enabling LLMs to interact with web pages, take screenshots, and execute JavaScript in a real browser environment.18Apache 2.0
- AlicenseNot gradedqualityDmaintenanceA Model Context Protocol server that enables LLMs to automate web browsers using Puppeteer, allowing navigation, screenshots, form filling, and JavaScript execution in a real browser environment.2MIT
- AlicenseBqualityDmaintenanceA Model Context Protocol server that provides browser automation capabilities using Puppeteer, enabling LLMs to interact with web pages, take screenshots, and execute JavaScript in a real browser environment.728,3661MIT
- AlicenseBqualityDmaintenanceA Model Context Protocol server that provides browser automation capabilities using Playwright, enabling LLMs to interact with web pages, take screenshots, generate test code, scrape web content, and execute JavaScript in real browser environments.3118,122MIT
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/afshawnlotfi/mcp-configurable-puppeteer'
If you have feedback or need assistance with the MCP directory API, please join our Discord server