Blueprint Mcp For Chrome

- Navigate and read pages in your real browser— Ask the assistant to go to a URL withbrowser_navigateand extract the accessible content viabrowser_snapshotorbrowser_extract_content.
- Interact with page elements— Usebrowser_interactorbrowser_click,browser_type,browser_fill_form, andbrowser_select_optionto click, type, fill forms, and choose dropdown options.
- Monitor network activity— Inspect, filter, and replay captured requests withbrowser_network_requests, including JSONPath filtering on response bodies.
- Capture visual state— Take a screenshot of the current page withbrowser_take_screenshotor save it as a PDF usingbrowser_pdf_save.
- Manage tabs and windows— List, create, attach to, or close tabs viabrowser_tabs, and resize or minimize the window withbrowser_window.
- Run custom JavaScript and handle dialogs— Execute arbitrary scripts in the page usingbrowser_evaluateand manage alerts, confirms, or prompts withbrowser_handle_dialog.

Control your real browser with AI through the Model Context Protocol

Perfect for:AI agents that need to interact with sites where you're already logged in, or that need to avoid bot detection.

Why use this instead of Playwright/Puppeteer?

npm install -g @railsblueprint/blueprint-mcp

- Chrome Web Store(works for all Chromium browsers)
- Manual: Download fromReleases, then load unpacked atchrome://extensions/(Chrome),edge://extensions/(Edge), oropera://extensions/(Opera)

- Firefox Add-ons
- Manual: Download fromReleases, then load atabout:debugging#/runtime/this-firefox

{ "mcpServers": { "browser": { "command": "npx", "args": ["@railsblueprint/blueprint-mcp@latest"] } } }

claude mcp add browser npx @railsblueprint/blueprint-mcp@latest

VS Code / Cursor(.vscode/settings.json):

{ "mcp.servers": { "browser": { "command": "npx", "args": ["@railsblueprint/blueprint-mcp@latest"] } } }

- Start your MCP client(Claude Desktop, Cursor, etc.)
- Click the Blueprint MCP extension iconin your browser
- The extension auto-connects to the MCP server
- Ask your AI assistant to browse!

You: "Go to GitHub and check my notifications" AI: navigates to github.com, clicks notifications, reads content You: "Fill out this form with my info" AI: reads form fields, fills them in, submits You: "Take a screenshot of this page" AI: captures screenshot and shows you

┌─────────────────────────┐ │ AI Assistant │ │ (Claude, GPT, etc) │ └───────────┬─────────────┘ │ │ MCP Protocol ↓ ┌─────────────────────────┐ │ MCP Client │ │ (Claude Desktop, etc) │ └───────────┬─────────────┘ │ │ stdio/JSON-RPC ↓ ┌─────────────────────────┐ │ blueprint-mcp │ │ (this package) │ └───────────┬─────────────┘ │ │ WebSocket (localhost:5555 or cloud relay) ↓ ┌─────────────────────────┐ │ Browser Extension │ └───────────┬─────────────┘ │ │ Browser Extension APIs ↓ ┌─────────────────────────┐ │ Your Browser │ │ (real profile) │ └─────────────────────────┘

- ✅ Local WebSocket connection (port 5555)
- ✅ Single browser instance
- ✅ All browser automation features
- ✅ No account required
- ❌ Limited to same machine

- ✅Cloud relay- connect from anywhere
- ✅Multiple browsers- control multiple browser instances
- ✅Shared access- multiple AI clients can use same browser
- ✅Auto-reconnect- maintains connection through network changes
- ✅Priority support

The MCP server provides these tools to AI assistants:

- enable- Activate browser automation (required first step)
- disable- Deactivate browser automation
- status- Check connection status
- auth- Login to PRO account (for cloud relay features)

- browser_tabs- List, create, attach to, or close browser tabs

- browser_navigate- Navigate to a URL
- browser_navigate_back- Go back in history

- browser_snapshot- Get accessible page content (recommended for reading pages)
- browser_take_screenshot- Capture visual screenshot
- browser_console_messages- Get browser console logs
- browser_network_requests- Powerful network monitoring and replay tool with multiple actions:

- List mode(default): Lightweight overview with filtering and pagination (default: 20 requests)

- Filters:urlPattern(substring),method(GET/POST),status(200/404),resourceType(xhr/fetch/script)
- Pagination:limit(default: 20),offset(default: 0)
- Example:action='list', urlPattern='api/users', method='GET', limit=10

- browser_interact- Perform multiple actions in sequence (click, type, hover, wait, etc.)
- browser_click- Click on elements
- browser_type- Type text into inputs
- browser_hover- Hover over elements
- browser_select_option- Select dropdown options
- browser_fill_form- Fill multiple form fields at once
- browser_press_key- Press keyboard keys
- browser_drag- Drag and drop elements

- browser_evaluate- Execute JavaScript in page context
- browser_handle_dialog- Handle alert/confirm/prompt dialogs
- browser_file_upload- Upload files through file inputs
- browser_window- Resize, minimize, maximize browser window
- browser_pdf_save- Save current page as PDF
- browser_performance_metrics- Get performance metrics
- browser_verify_text_visible- Verify text is present (for testing)
- browser_verify_element_visible- Verify element exists (for testing)

- browser_list_extensions- List installed browser extensions
- browser_reload_extensions- Reload unpacked extensions (useful during development)

- Node.js 18+
- A supported browser (Chrome, Firefox, Edge, or Opera)
- npm or yarn

# Clone the repository git clone https://github.com/railsblueprint/blueprint-mcp.git cd blueprint-mcp # Install server dependencies cd server npm install cd .. # Install Chrome extension dependencies cd extensions/chrome npm install cd ../..

Terminal 1: Start MCP server in debug mode

cd extensions/chrome npm run build # or for watch mode: npm run dev

Note:Firefox extension doesn't require a build step - it uses vanilla JavaScript and can be loaded directly fromextensions/firefox/

For Chromium browsers (Chrome, Edge, Opera):
- Openchrome://extensions/(Chrome),edge://extensions/(Edge), oropera://extensions/(Opera)
- Enable "Developer mode"
- Click "Load unpacked"
- Select theextensions/chrome/distfolder
- Openabout:debugging#/runtime/this-firefox
- Click "Load Temporary Add-on"
- Select any file from theextensions/firefoxfolder

blueprint-mcp/ ├── server/ # MCP Server │ ├── cli.js # Server entry point │ ├── src/ │ │ ├── statefulBackend.js # Connection state management │ │ ├── unifiedBackend.js # MCP tool implementations │ │ ├── extensionServer.js # WebSocket server for extension │ │ ├── mcpConnection.js # Proxy/relay connection handling │ │ ├── transport.js # Transport abstraction layer │ │ ├── oauth.js # OAuth2 client for PRO features │ │ └── fileLogger.js # Debug logging │ └── tests/ # Server test suites ├── extensions/ # Browser Extensions │ ├── chrome/ # Chrome extension (TypeScript + Vite) │ │ └── src/ │ │ ├── background.ts # Extension service worker │ │ ├── content-script.ts # Page content injection │ │ └── utils/ # Utility functions │ ├── firefox/ # Firefox extension (Vanilla JS) │ │ └── src/ │ │ ├── background.js # Service worker │ │ └── content-script.js # Page injection │ ├── shared/ # Shared code between extensions │ └── build-*.js # Build scripts for each browser ├── docs/ # Documentation │ ├── testing/ # Test documentation │ ├── architecture/ # Architecture docs │ └── stores/ # Browser store assets └── releases/ # Built extensions for distribution ├── chrome/ ├── firefox/ ├── edge/ └── opera/

# Run tests npm test # Run with coverage npm run test:coverage

- Manual Test Procedures- Comprehensive manual testing guide
- Feature Specification- Complete feature documentation
- Test Progress- Current test coverage status

# Authentication server (PRO features) AUTH_BASE_URL=https://blueprint-mcp.railsblueprint.com # Local WebSocket port (Free tier) MCP_PORT=5555 # Debug mode DEBUG=false

blueprint-mcp --debug # Enable verbose logging blueprint-mcp --port 8080 # Use custom WebSocket port (default: 5555) blueprint-mcp --debug --port 8080 # Combine options

We welcome contributions! SeeCONTRIBUTING.mdfor guidelines.

Found a security issue? Please emailsecurity@railsblueprint.cominstead of filing a public issue.

A platform-agnostic server for scalable mobile automation and development across iOS, Android, simulators, and emulators.