이 MCP 서버는 Puppeteer를 통해 브라우저 자동화 기능을 제공하여 새로운 브라우저 인스턴스와 기존 Chrome 창 모두와의 상호 작용을 허용합니다.
이 프로젝트는 @modelcontextprotocol/server-puppeteer 에서 영감을 받아 실험적으로 구현한 것입니다. 유사한 목표와 개념을 공유하지만, Model Context Protocol을 통해 브라우저 자동화에 대한 대안적인 접근 방식을 모색합니다.
Related MCP server: Puppeteer MCP Server
웹 페이지 탐색
스크린샷 찍기
클릭 요소
양식 작성
옵션 선택
호버 요소
JavaScript 실행
스마트한 Chrome 탭 관리:
활성 Chrome 탭에 연결
기존 Chrome 인스턴스 보존
지능형 연결 처리
지엑스피1
npm install -g puppeteer-mcp-servernpx를 사용하면 설치 없이 바로 실행할 수도 있습니다.
npx puppeteer-mcp-server이 저장소를 복제하거나 소스 코드를 다운로드하세요
종속성 설치:
npm install프로젝트를 빌드하세요:
npm run build서버를 실행합니다:
npm startClaude와 함께 이 도구를 사용하려면 MCP 설정 구성 파일에 추가해야 합니다.
Claude Desktop 구성 파일(Windows에서는 %APPDATA%\Claude\claude_desktop_config.json , macOS에서는 ~/Library/Application Support/Claude/claude_desktop_config.json )에 다음을 추가합니다.
{
"mcpServers": {
"puppeteer": {
"command": "puppeteer-mcp-server",
"args": [],
"env": {}
}
}
}{
"mcpServers": {
"puppeteer": {
"command": "npx",
"args": ["-y", "puppeteer-mcp-server"],
"env": {}
}
}
}{
"mcpServers": {
"puppeteer": {
"command": "node",
"args": ["path/to/puppeteer-mcp-server/dist/index.js"],
"env": {
"NODE_OPTIONS": "--experimental-modules"
}
}
}
}Claude VSCode 확장 MCP 설정 파일에 다음을 추가합니다(Windows에서는 %APPDATA%\Code\User\globalStorage\saoudrizwan.claude-dev\settings\cline_mcp_settings.json 에 있고, macOS에서는 ~/Library/Application Support/Code/User/globalStorage/saoudrizwan.claude-dev/settings/cline_mcp_settings.json 에 있음).
{
"mcpServers": {
"puppeteer": {
"command": "puppeteer-mcp-server",
"args": [],
"env": {}
}
}
}{
"mcpServers": {
"puppeteer": {
"command": "npx",
"args": ["-y", "puppeteer-mcp-server"],
"env": {}
}
}
}{
"mcpServers": {
"puppeteer": {
"command": "node",
"args": ["path/to/puppeteer-mcp-server/dist/index.js"],
"env": {
"NODE_OPTIONS": "--experimental-modules"
}
}
}
}소스 설치의 경우, path/to/puppeteer-mcp-server 이 도구를 설치한 실제 경로로 바꾸세요.
서버는 기본적으로 새로운 브라우저 인스턴스를 시작합니다.
기존 Chrome 창에 연결하려면:
기존 Chrome 인스턴스를 완전히 닫습니다.
원격 디버깅을 활성화하여 Chrome을 실행합니다.
# 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=9222Chrome에서 원하는 웹 페이지로 이동합니다.
puppeteer_connect_active_tab 도구를 사용하여 연결합니다.
{
"targetUrl": "https://example.com", // Optional: specific tab URL
"debugPort": 9222 // Optional: defaults to 9222
}서버는 다음을 수행합니다.
원격 디버깅이 활성화된 Chrome 인스턴스를 감지하고 연결합니다.
Chrome 인스턴스를 보존합니다(닫지 않음)
확장 기능이 없는 탭을 찾아 연결
연결에 실패하면 명확한 오류 메시지를 제공합니다.
원격 디버깅이 활성화된 기존 Chrome 인스턴스에 연결합니다.
선택 과목:
targetUrl - 연결할 특정 탭의 URL
debugPort - Chrome 디버깅 포트(기본값: 9222)
URL로 이동합니다.
필수: url - 이동할 URL
현재 페이지나 특정 요소의 스크린샷을 찍습니다.
필수: name - 스크린샷의 이름
선택 과목:
selector - 스크린샷을 찍을 요소에 대한 CSS 선택기
width - 픽셀 단위 너비(기본값: 800)
height - 픽셀 단위 높이(기본값: 600)
페이지에서 요소를 클릭합니다.
필수: selector - 클릭할 요소에 대한 CSS 선택기
입력 필드를 작성하세요.
필수의:
selector - 입력 필드용 CSS 선택기
value - 입력할 텍스트
드롭다운 메뉴를 사용하세요.
필수의:
selector - 선택 요소에 대한 CSS 선택기
value - 선택할 옵션 값
요소 위에 마우스를 올려놓으세요.
필수: selector - 마우스를 올려놓을 요소에 대한 CSS 선택기
브라우저 콘솔에서 JavaScript를 실행합니다.
필수: script - 실행할 JavaScript 코드
원격 디버깅을 사용하는 경우:
신뢰할 수 있는 네트워크에서만 활성화
고유한 디버깅 포트를 사용하세요
사용하지 않을 때 디버깅 포트를 닫습니다.
디버깅 포트를 공개 네트워크에 노출하지 마십시오.
서버는 Winston을 사용하여 포괄적인 로깅을 구현합니다.
위치: logs/ 디렉토리
파일 패턴: mcp-puppeteer-YYYY-MM-DD.log
로그 회전:
매일 회전
최대 크기: 파일당 20MB
보관 기간: 14일
오래된 로그의 자동 압축
DEBUG: 자세한 디버깅 정보
INFO: 일반 운영 정보
WARN: 경고 메시지
오류: 오류 이벤트 및 예외
서버 시작/종료 이벤트
브라우저 작업(시작, 연결, 닫기)
탐색 시도 및 결과
도구 실행 및 결과
스택 추적을 포함한 오류 세부 정보
브라우저 콘솔 출력
리소스 사용량(스크린샷, 콘솔 로그)
서버는 다음에 대한 자세한 오류 메시지를 제공합니다.
연결 실패
누락된 요소
잘못된 선택자
JavaScript 실행 오류
스크린샷 실패
각 도구 호출은 다음을 반환합니다.
성공/실패 상태
실패 시 자세한 오류 메시지
성공 시 작업 결과 데이터
모든 오류는 다음과 같은 로그 파일에 기록됩니다.
타임스탬프
오류 메시지
스택 추적(사용 가능한 경우)
컨텍스트 정보
기여를 환영합니다! 풀 리퀘스트 제출, 문제 보고, 프로젝트 참여 방법에 대한 자세한 내용은 기여 가이드라인을 참조하세요.
이 프로젝트는 MIT 라이선스에 따라 라이선스가 부여되었습니다. 자세한 내용은 라이선스 파일을 참조하세요.
Click an element on the page
| Name | Required | Description | Default |
|---|---|---|---|
| selector | Yes | CSS selector for element to click |
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.
Connect to an existing Chrome instance with remote debugging enabled
| Name | Required | Description | Default |
|---|---|---|---|
| targetUrl | No | Optional URL of the target tab to connect to. If not provided, connects to the first available tab. | |
| debugPort | No | Optional Chrome debugging port (default: 9222) |
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.
Execute JavaScript in the browser console
| Name | Required | Description | Default |
|---|---|---|---|
| script | Yes | JavaScript code to execute |
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.
Fill out an input field
| Name | Required | Description | Default |
|---|---|---|---|
| selector | Yes | CSS selector for input field | |
| value | Yes | Value to fill |
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.
Hover an element on the page
| Name | Required | Description | Default |
|---|---|---|---|
| selector | Yes | CSS selector for element to hover |
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.
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) |
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.
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 |
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.
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
puppeteer_clickpuppeteer_connect_active_tabpuppeteer_evaluatepuppeteer_fillpuppeteer_hoverpuppeteer_navigatepuppeteer_screenshotpuppeteer_selectScored across 8 tools
Each tool targets a distinct browser action (click, navigate, fill, hover, etc.) with no overlap, making selection unambiguous.
All tools follow a consistent pattern: 'puppeteer_' prefix followed by a clear action verb, ensuring predictability.
With 8 tools covering essential browser interactions, the count is well-scoped for a focused automation server.
Core operations are covered, but missing explicit waiting or content extraction tools; however, puppeteer_evaluate can compensate.
AI-powered browser automation — navigate, click, fill forms, and extract data from any website.
Stealth web automation for AI agents. Login, signup, navigate, screenshot.
Stealth web automation for AI agents. Login, signup, navigate, screenshot.
Provides cloud browser automation capabilities using Stagehand and Browserbase, enabling LLMs to i…
