Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Exposes basic browser automation through HTTP and MCP

License

NotificationsYou must be signed in to change notification settings

3p3r/puppeteer-command-server

Repository files navigation

Exposes basic browser automation through HTTP and MCP for generative UI apps.

Methodology

This project on launch exposes the following endpoints:

  • a RESTful API HTTP server
  • a Swagger docs server
  • a MCP server

For example:

Port is configurable with thePCS_PORT environment variable (default:3000).

On running the server, it attempts to find the first available Chrome or Chromeadjacent installation on the host machine. This setting can be updated over HTTPand MCP as well as a config file in the executable's current directory.

Assuming access to the path of the Chrome executable, the server offers this API:

  • tabs/list: lists all open tabs with their IDs and URLs
  • tabs/open: opens a new tab with an initial URL (optionally headless)
  • tabs/goto/:tabId: navigates the tab with the given ID to a new URL
  • tabs/screenshot/:tabId: takes a screenshot of the tab with the given ID
  • tabs/click/:tabId: clicks at specified selector in the tab with the given ID
  • tabs/hover/:tabId: hovers over specified selector in the tab with the given ID
  • tabs/fill/:tabId: fills a form field at specified selector in the tab with the given ID
  • tabs/select/:tabId: selects an option in a dropdown at specified selector in the tab with the given ID
  • tabs/eval/:tabId: evaluates JavaScript in the context of the tab with the given ID
  • tabs/close/:tabId: closes the tab with the given ID
  • tabs/closeAll: closes all open tabs
  • tabs/bringToFront/:tabId: brings the tab with the given ID to front
  • tabs/focus/:tabId: focuses on a specific element via selector in the tab with the given ID
  • tabs/goBack/:tabId: navigates back in browser history for the tab with the given ID
  • tabs/goForward/:tabId: navigates forward in browser history for the tab with the given ID
  • tabs/reload/:tabId: reloads the tab with the given ID
  • tabs/waitForSelector/:tabId: waits for a selector to appear in the tab with the given ID
  • tabs/waitForFunction/:tabId: waits for a function to return truthy value in the tab with the given ID
  • tabs/waitForNavigation/:tabId: waits for navigation to complete in the tab with the given ID
  • tabs/url/:tabId: gets the current URL of the tab with the given ID
  • tabs/html/:tabId: gets the current HTML content of the tab with the given ID
  • resources/clean: removes a specific screenshot resource by URI
  • resources/cleanAll: removes all screenshot resources

Browser automation happens through Puppeteer. Session management is automatic.

The server is implemented in Express and Typescript. All routes are protectedwith configurable authentication strategies.

Authentication

The server supports two optional authentication strategies:

1. API Key Authentication (Default: Enabled)

On first run, the server generates a random API key and saves it to.secret inthe current working directory. Use this key in thex-api-key header:

curl -H"x-api-key: YOUR_API_KEY" http://localhost:3000/api/tabs/list

2. JWT Bearer Token Authentication (Default: Disabled)

The server can verify external JWT tokens (issued by another service). ConfigureJWT verification inconfig.json (seeconfig.json.example for a template):

{"chromePath":"/path/to/chrome","port":3000,"auth": {"apiKey": {"enabled":true    },"jwt": {"enabled":true,"jwksUrl":"https://your-auth-server.com/.well-known/jwks.json","issuer":"https://your-auth-server.com","audience":"https://your-api-domain.com"    }  }}

Use JWT tokens in theAuthorization header:

curl -H"Authorization: Bearer YOUR_JWT_TOKEN" http://localhost:3000/api/tabs/list

Browser-Based JWT Verification

For JWT verification that needs to happen in a browser context (e.g., for testing browser-side authentication flows), enable theproxy option:

{"auth": {"jwt": {"enabled":true,"proxy":true,"jwksUrl":"https://your-auth-server.com/.well-known/jwks.json","issuer":"https://your-auth-server.com","audience":"https://your-api-domain.com"    }  }}

Whenproxy: true is set, JWT verification happens in a browser tab using the Jose library loaded as an ES module. This allows verification to occur in the same environment as your browser automation, which can be useful for debugging or working around network restrictions.

The server automatically serves:

  • /jose/* - Jose library browser modules fromnode_modules
  • /jwt-verify - HTML page that implements browser-based JWT verification

Both strategies can be enabled simultaneously. If both are enabled, either validAPI key OR valid JWT token will grant access.

MCP Server testing

To interact and test the MCP server, you can use:

npx @modelcontextprotocol/inspector

In the UI, ensure "Transport Type" is set toStreamable HTTP and addauthentication headers:

  • For API Key: Addx-api-key header with the key from.secret
  • For JWT: AddAuthorization header with valueBearer YOUR_JWT_TOKEN

Platforms

Windows, WSL, Linux, and MacOS.

  • pcs.exe for Windows
  • pcs for WSL, Linux, and MacOS

Distribution

The project is coded in Typescript and compiled into native binaries using PKG.

When PKG is used to compile the project, executables are generated for Windows,Linux, and MacOS operating systems. The Linux binary runs on WSL as well.

After that, the executables are compressed and obfuscated to reduce size andcreate unique signatures for production.

Resulting binaries are entirely self-contained and do not require any externaldependencies beyond the target platform's standard libraries.

Environment

  • Node.js version 18+ andnpm
  • Go version 1.16+ (for signature generation)
  • lipo (MacOS only) orllvm-lipo (non MacOS)
  • upx (for executable compression)
  • Docker (to buildldid if you don't have MacOS)

Development

Building Binaries

Compile the project into native binaries:

npm run compile

Flags:

  • --fast: Fast build mode (skips Brotli compression, uses UPX level 1)
  • --linux: Build Linux binaries only
  • --mac: Build macOS binaries only
  • --win: Build Windows binaries only

Platform flags can be combined. Without any platform flag, all platforms are built.

Examples:

# Fast build for Linux onlynpm run compile -- --linux --fast# Build for Windows and macOSnpm run compile -- --win --mac# Full build (all platforms, maximum compression)npm run compile

Implementation

Code is organized in Object Oriented manner with classes. Logic is maintained ata level that the code is readable and easy to reason about.

References

Installation

Install in Cursor

Go to:Settings ->Cursor Settings ->MCP ->Add new global MCP server

Pasting the following configuration into your Cursor~/.cursor/mcp.json file is the recommended approach. You may also install in a specific project by creating.cursor/mcp.json in your project folder. SeeCursor MCP docs for more info.

Since Cursor 1.0, you can click the install button below for instant one-click installation.

Install MCP Server

{"mcpServers": {"pcs": {"url":"http://localhost:3000/mcp","headers": {"x-api-key":"YOUR_API_KEY"      }    }  }}
Install in Claude Code

Run this command. SeeClaude Code MCP docs for more info.

claude mcp add --transport http pcs http://localhost:3000/mcp --header"x-api-key: YOUR_API_KEY"
Install in Amp

Run this command in your terminal. SeeAmp MCP docs for more info.

amp mcp add pcs --header"x-api-key=YOUR_API_KEY" http://localhost:3000/mcp
Install in Windsurf

Add this to your Windsurf MCP config file. SeeWindsurf MCP docs for more info.

{"mcpServers": {"pcs": {"serverUrl":"http://localhost:3000/mcp","headers": {"x-api-key":"YOUR_API_KEY"      }    }  }}
Install in VS Code

Add this to your VS Code MCP config file. SeeVS Code MCP docs for more info.

"mcp": {"servers": {"pcs": {"type":"http","url":"http://localhost:3000/mcp","headers": {"x-api-key":"YOUR_API_KEY"      }    }  }}
Install in Cline

You can directly edit MCP servers configuration:

  1. OpenCline.
  2. Click the hamburger menu icon (☰) to enter theMCP Servers section.
  3. ChooseRemote Servers tab.
  4. Click theEdit Configuration button.
  5. Add pcs tomcpServers:
{"mcpServers": {"pcs": {"url":"http://localhost:3000/mcp","type":"streamableHttp","headers": {"x-api-key":"YOUR_API_KEY"      }    }  }}
Install in Zed

Add this to your Zedsettings.json. SeeZed Context Server docs for more info.

{"context_servers": {"pcs": {"source":"url","url":"http://localhost:3000/mcp","headers": {"x-api-key":"YOUR_API_KEY"      }    }  }}
Install in Augment Code

To configure PCS MCP in Augment Code, use manual configuration:

  1. Press Cmd/Ctrl Shift P or go to the hamburger menu in the Augment panel
  2. Select Edit Settings
  3. Under Advanced, click Edit in settings.json
  4. Add the server configuration to themcpServers array in theaugment.advanced object
"augment.advanced": {"mcpServers": [    {"name":"pcs","url":"http://localhost:3000/mcp","headers": {"x-api-key":"YOUR_API_KEY"      }    }  ]}

Once the MCP server is added, restart your editor. If you receive any errors, check the syntax to make sure closing brackets or commas are not missing.

Install in Roo Code

Add this to your Roo Code MCP configuration file. SeeRoo Code MCP docs for more info.

{"mcpServers": {"pcs": {"type":"streamable-http","url":"http://localhost:3000/mcp","headers": {"x-api-key":"YOUR_API_KEY"      }    }  }}
Install in Gemini CLI

SeeGemini CLI Configuration for details.

  1. Open the Gemini CLI settings file. The location is~/.gemini/settings.json (where~ is your home directory).
  2. Add the following to themcpServers object in yoursettings.json file:
{"mcpServers": {"pcs": {"httpUrl":"http://localhost:3000/mcp","headers": {"x-api-key":"YOUR_API_KEY","Accept":"application/json, text/event-stream"      }    }  }}

If themcpServers object does not exist, create it.

Install in Qwen Coder

SeeQwen Coder MCP Configuration for details.

  1. Open the Qwen Coder settings file. The location is~/.qwen/settings.json (where~ is your home directory).
  2. Add the following to themcpServers object in yoursettings.json file:
{"mcpServers": {"pcs": {"httpUrl":"http://localhost:3000/mcp","headers": {"x-api-key":"YOUR_API_KEY","Accept":"application/json, text/event-stream"      }    }  }}

If themcpServers object does not exist, create it.

Install in Claude Desktop

Open Claude Desktop and navigate to Settings > Connectors > Add Custom Connector. Enter the name asPCS and the MCP server URL ashttp://localhost:3000/mcp. Addx-api-key header with your API key.

Or edit yourclaude_desktop_config.json file to add the following configuration. SeeClaude Desktop MCP docs for more info.

{"mcpServers": {"pcs": {"url":"http://localhost:3000/mcp","headers": {"x-api-key":"YOUR_API_KEY"      }    }  }}
Install in Opencode

Add this to your Opencode configuration file. SeeOpencode MCP docs for more info.

"mcp": {"pcs": {"type":"remote","url":"http://localhost:3000/mcp","headers": {"x-api-key":"YOUR_API_KEY"    },"enabled":true  }}
Install in OpenAI Codex

SeeOpenAI Codex for more information.

Add the following configuration to your OpenAI Codex MCP server settings:

[mcp_servers.pcs]url ="http://localhost:3000/mcp"http_headers = {"x-api-key" ="YOUR_API_KEY" }
Install in JetBrains AI Assistant

SeeJetBrains AI Assistant Documentation for more details.

  1. In JetBrains IDEs, go toSettings ->Tools ->AI Assistant ->Model Context Protocol (MCP)
  2. Click+ Add.
  3. Click onCommand in the top-left corner of the dialog and select the As JSON option from the list
  4. Add this configuration and clickOK
{"mcpServers": {"pcs": {"url":"http://localhost:3000/mcp","headers": {"x-api-key":"YOUR_API_KEY"      }    }  }}
  1. ClickApply to save changes.
  2. The same way pcs could be added for JetBrains Junie inSettings ->Tools ->Junie ->MCP Settings
Install in Kiro

SeeKiro Model Context Protocol Documentation for details.

  1. NavigateKiro >MCP Servers
  2. Add a new MCP server by clicking the+ Add button.
  3. Paste the configuration given below:
{"mcpServers": {"PCS": {"url":"http://localhost:3000/mcp","headers": {"x-api-key":"YOUR_API_KEY"      },"env": {},"disabled":false,"autoApprove": []    }  }}
  1. ClickSave to apply the changes.
Install in Trae

Use the Add manually feature and fill in the JSON configuration information for that MCP server.For more details, visit theTrae documentation.

{"mcpServers": {"pcs": {"url":"http://localhost:3000/mcp","headers": {"x-api-key":"YOUR_API_KEY"      }    }  }}
Install in Amazon Q Developer CLI

Add this to your Amazon Q Developer CLI configuration file. SeeAmazon Q Developer CLI docs for more details.

{"mcpServers": {"pcs": {"url":"http://localhost:3000/mcp","headers": {"x-api-key":"YOUR_API_KEY"      }    }  }}
Install in Warp

SeeWarp Model Context Protocol Documentation for details.

  1. NavigateSettings >AI >Manage MCP servers.
  2. Add a new MCP server by clicking the+ Add button.
  3. Paste the configuration given below:
{"PCS": {"url":"http://localhost:3000/mcp","headers": {"x-api-key":"YOUR_API_KEY"    },"env": {},"working_directory":null,"start_on_launch":true  }}
  1. ClickSave to apply the changes.
Install in Copilot Coding Agent

Add the following configuration to themcp section of your Copilot Coding Agent configuration file Repository->Settings->Copilot->Coding agent->MCP configuration:

{"mcpServers": {"pcs": {"type":"http","url":"http://localhost:3000/mcp","headers": {"x-api-key":"YOUR_API_KEY"      }    }  }}

For more information, see theofficial GitHub documentation.

Install in Copilot CLI
  1. Open the Copilot CLI MCP config file. The location is~/.copilot/mcp-config.json (where~ is your home directory).
  2. Add the following to themcpServers object in yourmcp-config.json file:
{"mcpServers": {"pcs": {"type":"http","url":"http://localhost:3000/mcp","headers": {"x-api-key":"YOUR_API_KEY"      }    }  }}

If themcp-config.json file does not exist, create it.

Install in LM Studio

SeeLM Studio MCP Support for more information.

  1. Navigate toProgram (right side) >Install >Edit mcp.json.
  2. Paste the configuration given below:
{"mcpServers": {"PCS": {"url":"http://localhost:3000/mcp","headers": {"x-api-key":"YOUR_API_KEY"      }    }  }}
  1. ClickSave to apply the changes.
  2. Toggle the MCP server on/off from the right hand side, underProgram, or by clicking the plug icon at the bottom of the chat box.
Install in Visual Studio 2022

You can configure Context7 MCP in Visual Studio 2022 by following theVisual Studio MCP Servers documentation.

Add this to your Visual Studio MCP config file (see theVisual Studio docs for details):

{"inputs": [],"servers": {"context7": {"type":"http","url":"https://mcp.context7.com/mcp","headers": {"x-api-key":"YOUR_API_KEY"      }    }  }}

Or, for a local server:

{"mcp": {"servers": {"pcs": {"type":"http","url":"http://localhost:3000/mcp","headers": {"x-api-key":"YOUR_API_KEY"        }      }    }  }}

For more information and troubleshooting, refer to theVisual Studio MCP Servers documentation.

Install in Crush

Add this to your Crush configuration file. SeeCrush MCP docs for more info.

{"$schema":"https://charm.land/crush.json","mcp": {"pcs": {"type":"http","url":"http://localhost:3000/mcp","headers": {"x-api-key":"YOUR_API_KEY"      }    }  }}
Install in BoltAI

Open the "Settings" page of the app, navigate to "Plugins," and enter the following JSON:

{"mcpServers": {"pcs": {"url":"http://localhost:3000/mcp","headers": {"x-api-key":"YOUR_API_KEY"      }    }  }}

Once saved, you can use the PCS MCP server for browser automation. More information is available onBoltAI's Documentation site. For BoltAI on iOS,see this guide.

Install in Rovo Dev CLI

Edit your Rovo Dev CLI MCP config by running the command below -

acli rovodev mcp

Example config -

{"mcpServers": {"pcs": {"url":"http://localhost:3000/mcp","headers": {"x-api-key":"YOUR_API_KEY"      }    }  }}
Install in Zencoder

To configure PCS MCP in Zencoder, follow these steps:

  1. Go to the Zencoder menu (...)
  2. From the dropdown menu, select Agent tools
  3. Click on the Add custom MCP
  4. Add the name and server configuration from below, and make sure to hit the Install button
{"url":"http://localhost:3000/mcp","headers": {"x-api-key":"YOUR_API_KEY"  }}

Once the MCP server is added, you can easily continue using it.

Install in Qodo Gen

SeeQodo Gen docs for more details.

  1. Open Qodo Gen chat panel in VSCode or IntelliJ.
  2. Click Connect more tools.
  3. Click + Add new MCP.
  4. Add the following configuration:
{"mcpServers": {"pcs": {"url":"http://localhost:3000/mcp","headers": {"x-api-key":"YOUR_API_KEY"      }    }  }}
Install in Perplexity Desktop

SeeLocal and Remote MCPs for Perplexity for more information.

  1. NavigatePerplexity >Settings
  2. SelectConnectors.
  3. ClickAdd Connector.
  4. SelectAdvanced.
  5. Enter Server Name:PCS
  6. Paste the following JSON in the text area:
{"url":"http://localhost:3000/mcp","headers": {"x-api-key":"YOUR_API_KEY"  },"env": {}}
  1. ClickSave.
Install in Factory

Factory's droid supports MCP servers through its CLI. SeeFactory MCP docs for more info.

Run this command in your terminal:

droid mcp add pcs http://localhost:3000/mcp --type http --header"x-api-key: YOUR_API_KEY"

Once configured, PCS tools will be available in your droid sessions. Type/mcp within droid to manage servers, authenticate, and view available tools.

License

MIT License

About

Exposes basic browser automation through HTTP and MCP

Topics

Resources

License

Stars

Watchers

Forks


[8]ページ先頭

©2009-2025 Movatter.jp