Blueprint MCP Server

आधिकारिक

Chrome और Firefox के लिए MCP के माध्यम से ब्राउज़र ऑटोमेशन

दस्तावेज़

Blueprint MCP

मॉडल कॉन्टेक्स्ट प्रोटोकॉल के माध्यम से AI से अपने वास्तविक ब्राउज़र को नियंत्रित करें

यह क्या है?

एक MCP (मॉडल कॉन्टेक्स्ट प्रोटोकॉल) सर्वर जो AI सहायकों को ब्राउज़र एक्सटेंशन के माध्यम से आपके वास्तविक ब्राउज़र (Chrome, Firefox, या Opera) को नियंत्रित करने देता है। हेडलेस ऑटोमेशन टूल्स के विपरीत, यह आपकी सभी लॉग-इन सत्रों, कुकीज़ और एक्सटेंशन के साथ आपके वास्तविक ब्राउज़र प्रोफ़ाइल का उपयोग करता है।

इसके लिए एकदम सही: AI एजेंट जिन्हें उन साइटों के साथ इंटरैक्ट करने की आवश्यकता है जहाँ आप पहले से लॉग इन हैं, या जिन्हें बॉट डिटेक्शन से बचने की आवश्यकता है।

Playwright/Puppeteer के बजाय इसका उपयोग क्यों करें?

Blueprint MCP	Playwright/Puppeteer
✅ वास्तविक ब्राउज़र (हेडलेस नहीं)	❌ हेडलेस या नया ब्राउज़र इंस्टेंस
✅ आपकी सभी साइटों पर लॉग इन रहता है	❌ प्रत्येक सत्र में पुनः प्रमाणीकरण करना होगा
✅ बॉट डिटेक्शन से बचता है (वास्तविक फिंगरप्रिंट का उपयोग करता है)	⚠️ अक्सर स्वचालित ब्राउज़र के रूप में पहचाना जाता है
✅ आपके मौजूदा ब्राउज़र एक्सटेंशन के साथ काम करता है	❌ कोई एक्सटेंशन समर्थन नहीं
✅ शून्य सेटअप - बॉक्स से बाहर काम करता है	⚠️ ब्राउज़र इंस्टॉलेशन की आवश्यकता है
✅ Chrome, Firefox, Edge, Opera समर्थन	✅ Chrome, Firefox, Safari समर्थन

इंस्टॉलेशन

1. MCP सर्वर इंस्टॉल करें

npm install -g @railsblueprint/blueprint-mcp

2. ब्राउज़र एक्सटेंशन इंस्टॉल करें

अपना ब्राउज़र चुनें:

Chrome / Edge / Opera

Chrome वेब स्टोर (सभी Chromium ब्राउज़रों के लिए काम करता है)
मैन्युअल: Releases से डाउनलोड करें, फिर chrome://extensions/ (Chrome), edge://extensions/ (Edge), या opera://extensions/ (Opera) पर अनपैक्ड लोड करें

Firefox

Firefox ऐड-ऑन्स
मैन्युअल: Releases से डाउनलोड करें, फिर about:debugging#/runtime/this-firefox पर लोड करें

3. अपने MCP क्लाइंट को कॉन्फ़िगर करें

Claude Desktop (~/Library/Application Support/Claude/claude_desktop_config.json):

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

Claude Code (AI-संचालित CLI):

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"]
    }
  }
}

त्वरित शुरुआत

अपना MCP क्लाइंट शुरू करें (Claude Desktop, Cursor, आदि)
अपने ब्राउज़र में Blueprint MCP एक्सटेंशन आइकन पर क्लिक करें
एक्सटेंशन स्वचालित रूप से MCP सर्वर से कनेक्ट हो जाता है
अपने AI सहायक से ब्राउज़ करने के लिए कहें!

उदाहरण वार्तालाप:

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)        │
└─────────────────────────┘

मुफ़्त बनाम PRO

मुफ़्त स्तर (डिफ़ॉल्ट)

✅ स्थानीय WebSocket कनेक्शन (पोर्ट 5555)
✅ एकल ब्राउज़र इंस्टेंस
✅ सभी ब्राउज़र ऑटोमेशन सुविधाएँ
✅ कोई खाता आवश्यक नहीं
❌ एक ही मशीन तक सीमित

PRO स्तर

✅ क्लाउड रिले - कहीं से भी कनेक्ट करें
✅ एकाधिक ब्राउज़र - कई ब्राउज़र इंस्टेंस को नियंत्रित करें
✅ साझा पहुँच - कई AI क्लाइंट एक ही ब्राउज़र का उपयोग कर सकते हैं
✅ ऑटो-रीकनेक्ट - नेटवर्क परिवर्तनों के माध्यम से कनेक्शन बनाए रखता है
✅ प्राथमिकता समर्थन

PRO में अपग्रेड करें

उपलब्ध उपकरण

MCP सर्वर AI सहायकों को ये उपकरण प्रदान करता है:

कनेक्शन प्रबंधन

enable - ब्राउज़र ऑटोमेशन सक्रिय करें (आवश्यक पहला कदम)
disable - ब्राउज़र ऑटोमेशन निष्क्रिय करें
status - कनेक्शन स्थिति जाँचें
auth - PRO खाते में लॉगिन करें (क्लाउड रिले सुविधाओं के लिए)

टैब प्रबंधन

browser_tabs - ब्राउज़र टैब सूचीबद्ध करें, बनाएँ, संलग्न करें, या बंद करें

नेविगेशन

browser_navigate - URL पर नेविगेट करें
browser_navigate_back - इतिहास में पीछे जाएँ

सामग्री और निरीक्षण

browser_snapshot - सुलभ पृष्ठ सामग्री प्राप्त करें (पृष्ठ पढ़ने के लिए अनुशंसित)
browser_take_screenshot - दृश्य स्क्रीनशॉट कैप्चर करें
browser_console_messages - ब्राउज़र कंसोल लॉग प्राप्त करें
browser_network_requests - कई क्रियाओं के साथ शक्तिशाली नेटवर्क निगरानी और रीप्ले उपकरण:
- सूची मोड (डिफ़ॉल्ट): फ़िल्टरिंग और पृष्ठांकन के साथ हल्का अवलोकन (डिफ़ॉल्ट: 20 अनुरोध)
  - फ़िल्टर: urlPattern (सबस्ट्रिंग), method (GET/POST), status (200/404), resourceType (xhr/fetch/script)
  - पृष्ठांकन: limit (डिफ़ॉल्ट: 20), offset (डिफ़ॉल्ट: 0)
  - उदाहरण: action='list', urlPattern='api/users', method='GET', limit=10
- विवरण मोड: हेडर और बॉडी सहित विशिष्ट अनुरोध के लिए पूर्ण अनुरोध/प्रतिक्रिया डेटा
- JSONPath फ़िल्टरिंग: JSONPath सिंटैक्स का उपयोग करके बड़ी JSON प्रतिक्रियाओं को क्वेरी करें (जैसे, $.data.items[0])
- रीप्ले मोड: मूल हेडर और प्रमाणीकरण के साथ कैप्चर किए गए अनुरोधों को पुनः निष्पादित करें
- साफ़ मोड: मेमोरी खाली करने के लिए कैप्चर किए गए इतिहास को साफ़ करें
- उदाहरण: action='details', requestId='12345.67', jsonPath='$.data.users[0]'
browser_extract_content - पृष्ठ सामग्री को मार्कडाउन के रूप में निकालें

इंटरैक्शन

browser_interact - अनुक्रम में कई क्रियाएँ करें (क्लिक, टाइप, होवर, प्रतीक्षा, आदि)
browser_click - तत्वों पर क्लिक करें
browser_type - इनपुट में टेक्स्ट टाइप करें
browser_hover - तत्वों पर होवर करें
browser_select_option - ड्रॉपडाउन विकल्प चुनें
browser_fill_form - एक साथ कई फ़ॉर्म फ़ील्ड भरें
browser_press_key - कीबोर्ड कुंजियाँ दबाएँ
browser_drag - तत्वों को ड्रैग और ड्रॉप करें

उन्नत

browser_evaluate - पृष्ठ संदर्भ में JavaScript निष्पादित करें
browser_handle_dialog - अलर्ट/कन्फर्म/प्रॉम्प्ट डायलॉग संभालें
browser_file_upload - फ़ाइल इनपुट के माध्यम से फ़ाइलें अपलोड करें
browser_window - ब्राउज़र विंडो का आकार बदलें, छोटा करें, बड़ा करें
browser_pdf_save - वर्तमान पृष्ठ को PDF के रूप में सहेजें
browser_performance_metrics - प्रदर्शन मेट्रिक्स प्राप्त करें
browser_verify_text_visible - सत्यापित करें कि टेक्स्ट मौजूद है (परीक्षण के लिए)
browser_verify_element_visible - सत्यापित करें कि तत्व मौजूद है (परीक्षण के लिए)

एक्सटेंशन प्रबंधन

browser_list_extensions - इंस्टॉल किए गए ब्राउज़र एक्सटेंशन सूचीबद्ध करें
browser_reload_extensions - अनपैक्ड एक्सटेंशन पुनः लोड करें (विकास के दौरान उपयोगी)

विकास

पूर्वापेक्षाएँ

Node.js 18+
एक समर्थित ब्राउज़र (Chrome, Firefox, Edge, या Opera)
npm या 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 ../..

विकास में चलाना

टर्मिनल 1: डीबग मोड में MCP सर्वर शुरू करें

cd server
node cli.js --debug

टर्मिनल 2: Chrome एक्सटेंशन बनाएँ

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

नोट: Firefox एक्सटेंशन को बिल्ड चरण की आवश्यकता नहीं है - यह वेनिला JavaScript का उपयोग करता है और सीधे extensions/firefox/ से लोड किया जा सकता है

अपने ब्राउज़र में एक्सटेंशन लोड करें:

Chromium ब्राउज़रों (Chrome, Edge, Opera) के लिए:

chrome://extensions/ (Chrome), edge://extensions/ (Edge), या opera://extensions/ (Opera) खोलें
"डेवलपर मोड" सक्षम करें
"अनपैक्ड लोड करें" पर क्लिक करें
extensions/chrome/dist फ़ोल्डर चुनें

Firefox के लिए:

about:debugging#/runtime/this-firefox खोलें
"अस्थायी ऐड-ऑन लोड करें" पर क्लिक करें
extensions/firefox फ़ोल्डर से कोई भी फ़ाइल चुनें

परियोजना संरचना

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

दस्तावेज़ीकरण:

मैन्युअल परीक्षण प्रक्रियाएँ - व्यापक मैन्युअल परीक्षण गाइड
सुविधा विनिर्देश - पूर्ण सुविधा दस्तावेज़ीकरण
परीक्षण प्रगति - वर्तमान परीक्षण कवरेज स्थिति

कॉन्फ़िगरेशन

सर्वर समझदार डिफ़ॉल्ट के साथ बॉक्स से बाहर काम करता है। उन्नत कॉन्फ़िगरेशन के लिए:

पर्यावरण चर

परियोजना रूट में एक .env फ़ाइल बनाएँ:

# 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

नोट: यदि आप पोर्ट बदलते हैं, तो आपको मिलान करने के लिए अपनी ब्राउज़र एक्सटेंशन सेटिंग्स अपडेट करनी होगी।

समस्या निवारण

एक्सटेंशन कनेक्ट नहीं होगा

जाँचें कि एक्सटेंशन इंस्टॉल और सक्षम है
एक्सटेंशन आइकन पर क्लिक करें - इसे "कनेक्टेड" दिखाना चाहिए
जाँचें कि MCP सर्वर चल रहा है (पोर्ट 5555 पर प्रक्रिया देखें)
एक्सटेंशन को पुनः लोड करने का प्रयास करें

"पोर्ट 5555 पहले से उपयोग में है"

एक और इंस्टेंस चल रहा है। आप या तो:

मौजूदा प्रक्रिया को समाप्त करें:

lsof -ti:5555 | xargs kill -9

एक अलग पोर्ट का उपयोग करें:

blueprint-mcp --port 8080

ब्राउज़र उपकरण काम नहीं कर रहे

सुनिश्चित करें कि आपने पहले enable कॉल किया है
जाँचें कि आपने browser_tabs के साथ एक टैब से अटैच किया है
सत्यापित करें कि टैब अभी भी मौजूद है (बंद नहीं किया गया था)

सहायता प्राप्त करना

योगदान

हम योगदान का स्वागत करते हैं! दिशानिर्देशों के लिए CONTRIBUTING.md देखें।

सुरक्षा

यह उपकरण AI सहायकों को आपके ब्राउज़र पर नियंत्रण देता है। कृपया समीक्षा करें:

MCP सर्वर डिफ़ॉल्ट रूप से केवल स्थानीय कनेक्शन स्वीकार करता है (localhost:5555)
PRO रिले कनेक्शन OAuth के माध्यम से प्रमाणित होते हैं
एक्सटेंशन को कनेक्ट करने के लिए स्पष्ट उपयोगकर्ता कार्रवाई की आवश्यकता होती है
सभी ब्राउज़र क्रियाएँ ब्राउज़र की अनुमति प्रणाली से होकर गुजरती हैं

कोई सुरक्षा समस्या मिली? कृपया सार्वजनिक मुद्दा दर्ज करने के बजाय [email protected] पर ईमेल करें।

श्रेय

यह परियोजना मूल रूप से Microsoft के Playwright MCP कार्यान्वयन से प्रेरित थी लेकिन Playwright के बजाय ब्राउज़र एक्सटेंशन-आधारित ऑटोमेशन का उपयोग करने के लिए पूरी तरह से पुनर्लिखित की गई है। आर्किटेक्चर, कार्यान्वयन और दृष्टिकोण मौलिक रूप से भिन्न हैं।

मुख्य अंतर:

DevTools प्रोटोकॉल के साथ ब्राउज़र एक्सटेंशन का उपयोग करता है (Playwright नहीं)
वास्तविक ब्राउज़र प्रोफाइल के साथ काम करता है (पृथक संदर्भ नहीं)
WebSocket-आधारित संचार (CDP रिले नहीं)
दूरस्थ पहुँच के लिए क्लाउड रिले विकल्प
मुफ़्त और PRO स्तरीय मॉडल
मल्टी-ब्राउज़र समर्थन (Chrome, Firefox, Edge, Opera)

हम MCP के माध्यम से ब्राउज़र ऑटोमेशन का मार्ग प्रशस्त करने के लिए Playwright टीम के आभारी हैं।

लाइसेंस

Apache License 2.0 - LICENSE देखें

❤️ के साथ Rails Blueprint द्वारा निर्मित

वेबसाइट • GitHub • NPM