MCP DeepCoding Browser

A custom MCP (Model Context Protocol) server that wraps the playwright-mcp-server with preset configurations and simplified tool names.

Features

• Simplified tool names: Removes playwright_ prefix from tool names
• Preset configurations: Built-in default values for browser settings
• Environment-aware navigation: Automatically constructs URLs using BASE_URL environment variable
• Reduced parameter complexity: Hide complex browser configuration options
• Improved cleanup: Properly closes browser instances on server shutdown (fixes original module issue)

Available Tools

• navigate - Navigate to a relative path (automatically prepended with BASE_URL)
• screenshot - Take screenshots with preset dimensions and save settings
• click - Click elements on the page
• fill - Fill input fields
• select - Select dropdown options
• hover - Hover over elements
• evaluate - Execute JavaScript
• console_logs - Retrieve browser console logs
• close - Close the browser
• get_visible_text - Get page text content
• get_visible_html - Get page HTML
• go_back / go_forward - Browser navigation
• drag - Drag and drop elements
• press_key - Press keyboard keys

Setup

1. Install dependencies:

npm install

2. Build the server:

npm run build

3. Set environment variables:

export BASE_URL=http://localhost:3000
export DOWNLOADS_DIR=/path/to/screenshots  # Optional, defaults to current working directory

Usage

The server can be used in several ways:

1. Via npx (after publishing)

npx @botanicastudios/mcp-deepcoding-browser

2. As a local installation

npm install @botanicastudios/mcp-deepcoding-browser
# Then run with:
npx mcp-deepcoding-browser

3. Direct usage with MCP clients

The server can be used directly with MCP clients or as part of a larger system.

Example Tool Usage

{
  "name": "navigate",
  "arguments": {
    "path": "/dashboard"
  }
}

This will navigate to ${BASE_URL}/dashboard with preset browser configurations (800x800 viewport, chromium browser, etc.).

Configuration

The server uses static properties defined in filteredTools.ts to provide default values:

• Browser: Always uses Chromium
• Viewport: 800x800 pixels
• Screenshots: Full page, saved as PNG files to current working directory (configurable via DOWNLOADS_DIR)
• Headless: Disabled by default (browser is visible)

Architecture

• index.ts - Main server entry point
• filteredTools.ts - Tool definitions with static properties
• toolWrapper.ts - Logic to transform custom calls to playwright calls
• requestHandler.ts - MCP protocol handlers

The server imports and wraps the published @executeautomation/playwright-mcp-server package, reusing all the complex browser management logic while providing a simplified, preset-configured interface.

Publishing

To publish this package to npm:

1. Build the package:

   npm run build

2. Test the package locally:

   npm pack --dry-run

3. Publish to npm:

   npm publish --access public

4. Test the published package:

   npx @botanicastudios/mcp-deepcoding-browser

Make sure you're logged into npm (npm login) and have the appropriate permissions for the @botanicastudios scope.