CodingBaby Browser MCP server
About
Model Context Protocol (MCP) server that enables AI/LLMs to automate and control a real Chrome browser by connecting to the CodingBaby Extension
Details
- Author
- buyitsydney
- Downloads
- 423
- Categories
- Automation
Jump to
- Navigate to any URL.
- Click at specified coordinates.
- Type text into the focused element.
- Take full-page or area screenshots.
- Scroll the page or a specific element.
- Save HTML and screenshots locally.
Setting up with Highlight
This MCP is not yet compatible with Highlight’s one-click setup. However, you can still use it with Highlight by following these steps:
- Download and install Highlight from highlightai.com/download
- Navigate to the plugins tab and select "Add Custom Plugin"
-
Configure the plugin with the settings below
Plugin Name
CodingBaby Browser MCP serverCommand (node, npx, python, etc.)Please refer to the README for specific instructions on how to obtain API keys or other required environment variables.
- Enable "Start Automatically" if you want the plugin to start when Highlight launches
From the repository
Install the npm package (npm install @sydneyassistent/codingbaby-browser-mcp) or run from source (node chrome-server.js). The server starts a WebSocket on port 9876 and uses stdio for MCP communication. On the first tool call, it automatically starts the WebSocket and waits for the Chrome extension to connect.
navigate
Navigate to a URL
click
Perform click on a web page
type
Type text into focused element
press_key
Press a key or key combination on the keyboard
close
Close the browser
scroll
Scroll the page in a specified direction
set_viewport
Set the viewport configuration of the browser
area_screenshot
Take a screenshot of a specific area of the current page
wait
Wait for a specified number of seconds, with a screenshot of the current page state after waiting
tab_list
List browser tabs
tab_new
Open a new tab
tab_select
Select a tab by index
tab_close
Close a tab
batch
Execute a batch of browser operations in sequence. This powerful tool allows combining multiple actions (click, type, press_key, etc.) into a single command, reducing round-trip time. Ideal for form filling, search operations, and simple navigation sequences.
Claude Desktop / Cursor
Paste into your MCP client config file to install this server.
{
"mcpServers": {
"codingbaby browser mcp server": {
"codingbaby-browser-mcp": {
"command": "npx",
"args": [
"-y",
"@sydneyassistent/codingbaby-browser-mcp"
]
}
}
}
}McpServers
{
"codingbaby-browser-mcp": {
"command": "npx",
"args": [
"-y",
"@sydneyassistent/codingbaby-browser-mcp"
]
}
}CodingBaby-Browser-MCP
This is a Model Context Protocol (MCP) tool server designed to communicate with a Chrome browser extension via WebSocket for browser automation control.
Description
This server starts a WebSocket server and waits for a connection from the companion Chrome extension. Once connected, an MCP client can send commands through this server to the Chrome extension to control browser behavior, such as navigation, clicking, typing, scrolling, taking screenshots, etc.
Companion Chrome Extensio
This server requires a companion Chrome extension to perform the actual browser operations. Please ensure the extension is installed and enabled in your Chrome browser.
Available Tools (Registered in chrome-server.js)
navigate: Navigates to a specified URL.
click: Performs a click operation at the specified coordinates (x,y) on the web page.
type: Types text into the currently focused element.
press_key: Simulates pressing a specific key on the keyboard (e.g., 'Enter', 'ArrowLeft').
snapshot: Captures a screenshot of the current page (returns Base64 encoded image data).
close: Closes the browser (or the tab controlled by the extension).
scroll: Scrolls the page in a specified direction (up, down, left, right), optionally with a selector for the element to scroll.
save_html: Saves the full HTML content of the current page to a temporary file on the server.
set_viewport: Sets the size (width and height) of the browser viewport.
area_screenshot: Take a screenshot of a specific area of the current page.
get_saved_screenshots: Get a list of all saved screenshots.
wait: Wait for a specified number of seconds and automatically returns a screenshot of the current page state after waiting.
Installation
If using the source code directly, navigate to the mcp/CodingBaby-Browser-MCP directory and run:
npm install
If using the published npm package:
npm install @sydneyassistent/codingbaby-browser-mcp
npm install -g @sydneyassistent/codingbaby-browser-mcp
Running (from source)
node chrome-server.js
Or, using the script in package.json:
npm start
The server will start the WebSocket service on the default port 9876 and communicate with the MCP client via standard input/output (stdio).
Running (as installed package with npx)
If installed locally or globally, you can often run it using npx:
npx @sydneyassistent/codingbaby-browser-mcp
(This requires the package to be configured correctly, potentially using a
bin entry in package.json pointing to chrome-server.js for direct execution, which might need adjustment.)
Notes
On the first call to any browser operation tool, the server will automatically attempt to start the WebSocket server and wait for the Chrome extension to connect.
Screenshots and HTML content are returned as part of the response or saved locally on the server.
Sign in to leave a review
Use Google, GitHub, or an email account so ratings stay tied to real people.
No reviews posted yet.
