- Notifications
You must be signed in to change notification settings - Fork0
Exposes basic browser automation through HTTP and MCP
License
3p3r/puppeteer-command-server
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Exposes basic browser automation through HTTP and MCP for generative UI apps.
- Methodology
- Authentication
- Platforms
- Distribution
- Environment
- Development
- Implementation
- References
- Installation
- License
This project on launch exposes the following endpoints:
- a RESTful API HTTP server
- a Swagger docs server
- a MCP server
For example:
- http://localhost:3000/api: the RESTful API
- http://localhost:3000/mcp: the MCP endpoint
- http://localhost:3000/docs: the Swagger docs endpoint
- http://localhost:3000/jose: Jose library browser modules (for JWT verification)
- http://localhost:3000/jwt-verify: Browser-based JWT verification page
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 URLstabs/open: opens a new tab with an initial URL (optionally headless)tabs/goto/:tabId: navigates the tab with the given ID to a new URLtabs/screenshot/:tabId: takes a screenshot of the tab with the given IDtabs/click/:tabId: clicks at specified selector in the tab with the given IDtabs/hover/:tabId: hovers over specified selector in the tab with the given IDtabs/fill/:tabId: fills a form field at specified selector in the tab with the given IDtabs/select/:tabId: selects an option in a dropdown at specified selector in the tab with the given IDtabs/eval/:tabId: evaluates JavaScript in the context of the tab with the given IDtabs/close/:tabId: closes the tab with the given IDtabs/closeAll: closes all open tabstabs/bringToFront/:tabId: brings the tab with the given ID to fronttabs/focus/:tabId: focuses on a specific element via selector in the tab with the given IDtabs/goBack/:tabId: navigates back in browser history for the tab with the given IDtabs/goForward/:tabId: navigates forward in browser history for the tab with the given IDtabs/reload/:tabId: reloads the tab with the given IDtabs/waitForSelector/:tabId: waits for a selector to appear in the tab with the given IDtabs/waitForFunction/:tabId: waits for a function to return truthy value in the tab with the given IDtabs/waitForNavigation/:tabId: waits for navigation to complete in the tab with the given IDtabs/url/:tabId: gets the current URL of the tab with the given IDtabs/html/:tabId: gets the current HTML content of the tab with the given IDresources/clean: removes a specific screenshot resource by URIresources/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.
The server supports two optional authentication strategies:
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/listThe 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/listFor 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.
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: Add
x-api-keyheader with the key from.secret - For JWT: Add
Authorizationheader with valueBearer YOUR_JWT_TOKEN
Windows, WSL, Linux, and MacOS.
pcs.exefor Windowspcsfor WSL, Linux, and MacOS
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.
Node.jsversion 18+ andnpmGoversion 1.16+ (for signature generation)lipo(MacOS only) orllvm-lipo(non MacOS)upx(for executable compression)Docker(to buildldidif you don't have MacOS)
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
Code is organized in Object Oriented manner with classes. Logic is maintained ata level that the code is readable and easy to reason about.
- https://github.com/expressjs/express - To build the HTTP server
- https://www.npmjs.com/package/puppeteer-core - To control Chrome browser
- https://www.npmjs.com/package/puppeteer-extra - Puppeteer plugins framework
- https://github.com/panva/jose - JWT verification library
- https://github.com/vercel/pkg - To compile Node.js project into binaries
- https://github.com/upx/upx - Executable compressor
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.
{"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/mcpInstall 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:
- OpenCline.
- Click the hamburger menu icon (☰) to enter theMCP Servers section.
- ChooseRemote Servers tab.
- Click theEdit Configuration button.
- Add pcs to
mcpServers:
{"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:
- Press Cmd/Ctrl Shift P or go to the hamburger menu in the Augment panel
- Select Edit Settings
- Under Advanced, click Edit in settings.json
- Add the server configuration to the
mcpServersarray in theaugment.advancedobject
"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.
- Open the Gemini CLI settings file. The location is
~/.gemini/settings.json(where~is your home directory). - Add the following to the
mcpServersobject in yoursettings.jsonfile:
{"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.
- Open the Qwen Coder settings file. The location is
~/.qwen/settings.json(where~is your home directory). - Add the following to the
mcpServersobject in yoursettings.jsonfile:
{"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.
- In JetBrains IDEs, go to
Settings->Tools->AI Assistant->Model Context Protocol (MCP) - Click
+ Add. - Click on
Commandin the top-left corner of the dialog and select the As JSON option from the list - Add this configuration and click
OK
{"mcpServers": {"pcs": {"url":"http://localhost:3000/mcp","headers": {"x-api-key":"YOUR_API_KEY" } } }}- Click
Applyto save changes. - The same way pcs could be added for JetBrains Junie in
Settings->Tools->Junie->MCP Settings
Install in Kiro
SeeKiro Model Context Protocol Documentation for details.
- Navigate
Kiro>MCP Servers - Add a new MCP server by clicking the
+ Addbutton. - Paste the configuration given below:
{"mcpServers": {"PCS": {"url":"http://localhost:3000/mcp","headers": {"x-api-key":"YOUR_API_KEY" },"env": {},"disabled":false,"autoApprove": [] } }}- Click
Saveto 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.
- Navigate
Settings>AI>Manage MCP servers. - Add a new MCP server by clicking the
+ Addbutton. - 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 }}- Click
Saveto 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
- Open the Copilot CLI MCP config file. The location is
~/.copilot/mcp-config.json(where~is your home directory). - Add the following to the
mcpServersobject in yourmcp-config.jsonfile:
{"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.
- Navigate to
Program(right side) >Install>Edit mcp.json. - Paste the configuration given below:
{"mcpServers": {"PCS": {"url":"http://localhost:3000/mcp","headers": {"x-api-key":"YOUR_API_KEY" } } }}- Click
Saveto apply the changes. - Toggle the MCP server on/off from the right hand side, under
Program, 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:
- Go to the Zencoder menu (...)
- From the dropdown menu, select Agent tools
- Click on the Add custom MCP
- 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.
- Open Qodo Gen chat panel in VSCode or IntelliJ.
- Click Connect more tools.
- Click + Add new MCP.
- 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.
- Navigate
Perplexity>Settings - Select
Connectors. - Click
Add Connector. - Select
Advanced. - Enter Server Name:
PCS - Paste the following JSON in the text area:
{"url":"http://localhost:3000/mcp","headers": {"x-api-key":"YOUR_API_KEY" },"env": {}}- Click
Save.
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.
MIT License
About
Exposes basic browser automation through HTTP and MCP
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.