एआई असिस्टेंट की मदद से Firebase सेवाओं को इंटिग्रेट करना

एआई की मदद से काम करने वाले डेवलपमेंट टूल का इस्तेमाल करके, वेब ऐप्लिकेशन के लिए Firebase सेटअप को आसान बनाएं. जैसे, Antigravity, Claude Code, Codex, और Cursor. Firebase एजेंट स्किल को Firebase सीएलआई और Firebase एमसीपी सर्वर के साथ इस्तेमाल करके, अपने एआई कोडिंग एजेंट को Firebase का विशेषज्ञ बनाया जा सकता है. इससे वह कोड लिख सकता है, Firebase Security Rules को कॉन्फ़िगर कर सकता है, और लाइव रिसॉर्स मैनेज कर सकता है.

इस गाइड में, एआई कोडिंग एजेंट का इस्तेमाल करके, वेब ऐप्लिकेशन के लिए Cloud Firestore, Firebase Authentication, और Firebase Hosting को सेट अप करने का तरीका बताया गया है. iOS, Android, और Flutter ऐप्लिकेशन के बारे में जानकारी पाने के लिए, जल्द ही वापस आएं!

Firebase एजेंट स्किल और टूल का इस्तेमाल क्यों करना चाहिए?

एआई कोडिंग एजेंट को अक्सर प्रोजेक्ट के खास कॉन्फ़िगरेशन या पुरानी जानकारी की वजह से समस्या आती है. यह टूलकिट, खास निर्देशों (एजेंट की स्किल) को एजेंट के दो तरह के टूल (सीएलआई और एमसीपी सर्वर) के साथ जोड़कर, इस समस्या को हल करती है:

  • Firebase एजेंट स्किल: कोडिंग एजेंट को डोमेन की विशेषज्ञता और वर्कफ़्लो उपलब्ध कराएं. निर्देशों की लेयर के तौर पर, स्किल एजेंट को Firebase के साथ काम करने के सबसे सही तरीकों के बारे में बताती हैं. इनमें कोड लिखना भी शामिल है. स्किल से एजेंट को यह भी पता चलता है कि Firebase सीएलआई और Firebase एमसीपी सर्वर का इस्तेमाल कब और कैसे करना है.
  • एजेंट के एक्ज़ीक्यूशन टूल:
    • Firebase सीएलआई (कमांड-लाइन टूल): यह प्रोजेक्ट की लाइफ़साइकल और एनवायरमेंट से जुड़े टास्क के लिए टूल उपलब्ध कराता है. एजेंट, टर्मिनल एनवायरमेंट में सीएलआई कमांड चला सकता है. इससे Firebase प्रोजेक्ट में सेवाएं सेट अप की जा सकती हैं, पूरी साइटें या बैकएंड रिसॉर्स डिप्लॉय किए जा सकते हैं, लोकल एम्युलेटर शुरू किए जा सकते हैं, और अन्य काम किए जा सकते हैं.
    • Firebase एमसीपी सर्वर (प्रोग्रामैटिक टूल और संसाधन): यह रीयल-टाइम में जांच और डेटा से जुड़े ऑपरेशन के लिए टूल उपलब्ध कराता है. स्ट्रक्चर्ड टूल कॉल की मदद से, एजेंट प्रोग्राम के हिसाब से Cloud Firestore दस्तावेज़ों के लिए क्वेरी कर सकता है और उन्हें अपडेट कर सकता है. साथ ही, Firebase Authentication उपयोगकर्ताओं को मैनेज कर सकता है, Security Rules की पुष्टि कर सकता है, लाइव लॉग या दस्तावेज़ों को सीधे कॉन्टेक्स्ट में शामिल कर सकता है, और भी बहुत कुछ कर सकता है.

Firebase सीएलआई और Firebase एमसीपी सर्वर के साथ-साथ Firebase एजेंट स्किल का इस्तेमाल करने से, आपके एआई कोडिंग एजेंट को ये अतिरिक्त सुविधाएं मिलती हैं:

  • कार्रवाई करें: सिर्फ़ कोड लिखने के अलावा और भी काम करें. आपका एजेंट, सेवाएं शुरू कर सकता है, Firebase Authentication उपयोगकर्ताओं को मैनेज कर सकता है, नए Firebase Security Rules डिप्लॉय कर सकता है, और सीधे आपके Cloud Firestore डेटा के साथ काम कर सकता है.
  • अप-टू-डेट रहें: सेटअप से जुड़े टास्क पूरे करने में अपने एजेंट की मदद करने के लिए, आधिकारिक और वर्शन के हिसाब से सही प्रॉम्प्ट इस्तेमाल करें.
  • ज़्यादा सटीक जवाब पाना: ज़्यादा काम के और सटीक जवाब देने के लिए, अपने प्रोजेक्ट के एनवायरमेंट और स्कीमा को ऐक्सेस करना.
  • टोकन की लागत कम करना: एजेंट की स्किल, पूरी जानकारी वाले दस्तावेज़ सिर्फ़ तब लोड करती हैं, जब किसी खास टास्क के लिए इसकी ज़रूरत होती है. इससे सेशन का ओवरहेड कम हो जाता है.

लागू होने वाली Firebase सेवाएं

इस गाइड में मुख्य रूप से यह बताया गया है कि एजेंट की स्किल, Firebase सीएलआई, और Firebase एमसीपी सर्वर, इन सेवाओं और सुविधाओं को तुरंत सेट अप करने में आपकी मदद करने के लिए, साथ मिलकर कैसे काम करते हैं:

  • Cloud Firestore: NoSQL डेटाबेस को सेट अप करें.
  • Firebase Authentication: उपयोगकर्ता के लिए सुरक्षित साइन-इन सेट अप करें.
  • Firebase Security Rules: अपने ऐप्लिकेशन के लिए Security Rules जनरेट करें और उन्हें बेहतर बनाएं.
  • Firebase Hosting: स्टैटिक वेब ऐप्लिकेशन को डिप्लॉय करने के लिए, अपना प्रोजेक्ट सेट अप करें.

उपलब्ध सुविधाओं की पूरी सूची देखने के लिए, Firebase एजेंट स्किल की पूरी सूची ब्राउज़ करें.

सामान्य वर्कफ़्लो

यहां दिए गए तरीके से, वेब ऐप्लिकेशन में Firebase की सेवाओं को सेट अप करने और उनका इस्तेमाल करने के लिए, Firebase एजेंट स्किल इस्तेमाल करने के सामान्य वर्कफ़्लो के बारे में बताया गया है. पर्दे के पीछे, एजेंट स्किल इन टास्क को पूरा करने के लिए, Firebase सीएलआई और Firebase एमसीपी सर्वर का इस्तेमाल करती हैं.

पहला चरण: Firebase एजेंट स्किल इंस्टॉल करना

ज़्यादातर मामलों में, अपने पसंदीदा एडिटर में Firebase एजेंट स्किल इंस्टॉल की जा सकती हैं. इसके लिए, आपको सिर्फ़ एक प्रॉम्प्ट देना होगा:

Antigravity

  • पहला विकल्प: ग्लोबल लेवल का ऐक्सेस

    Firebase एजेंट स्किल, Antigravity Marketplace में मौजूद Firebase प्लग इन में शामिल हैं. ये Build with Google इंटिग्रेशन बंडल के तौर पर भी उपलब्ध हैं. इनमें से किसी भी विकल्प का इस्तेमाल करके, प्लग इन इंस्टॉल करें:

    • Antigravity Marketplace से: कस्टमाइज़ेशन पर क्लिक करें, Marketplace टैब चुनें, और फिर Firebase प्लगिन कार्ड पर + पर क्लिक करें.
    • Antigravity CLI में: /plugin install firebase@agent-marketplace चलाएं (या /plugin चलाएं और खोजें टैब से Firebase इंस्टॉल करें). Antigravity में इंस्टॉल किए गए प्लगिन, Antigravity CLI के साथ भी अपने-आप सिंक हो जाते हैं.
    • सेट अप करने के दौरान: Firebase स्टैक के लिए चेकबॉक्स चुनें.
  • दूसरा विकल्प: प्रोजेक्ट-लेवल का ऐक्सेस

    अपने प्रोजेक्ट की डायरेक्ट्री में यह कमांड चलाएं:

    npx skills add firebase/agent-skills --agent=antigravity
    

Claude Code

अपने टर्मिनल में ये कमांड चलाएं:

claude plugin marketplace add firebase/agent-skills
claude plugin install firebase@firebase

Codex

  • पहला विकल्प: Codex टर्मिनल

    अपने टर्मिनल में ये कमांड चलाएं:

    codex plugin marketplace add firebase/agent-skills
    codex plugin add firebase@firebase
    
  • दूसरा विकल्प: Codex ऐप्लिकेशन

    1. ये टास्क एक बार पूरे करें:

      1. टर्मिनल की मदद से रजिस्टर करना:

        codex plugin marketplace add firebase/agent-skills
        
      2. Codex ऐप्लिकेशन को पूरी तरह से रीस्टार्ट करें.

      3. प्लग इन खोलें.

      4. Firebase Marketplace/सोर्स चुनें.

      5. Firebase खोलें और + इंस्टॉल करें पर क्लिक करें.

    2. कोई नया टास्क शुरू करें.

    3. प्लग इन चुनने के लिए @Firebase टाइप करें या Codex से Firebase का कोई टास्क पूरा करने के लिए कहें.

कर्सर

  • पहला विकल्प: प्लग इन को सीधे Cursor Marketplace से इंस्टॉल करें.

  • दूसरा विकल्प: अपने टर्मिनल में यह कमांड चलाएं:

    npx skills add firebase/agent-skills --agent=cursor
    

अन्य एजेंट

अपने टर्मिनल में यह कमांड चलाएं:

npx skills add firebase/agent-skills

दूसरा चरण: Firebase एमसीपी सर्वर से कनेक्ट करना

कई Firebase एजेंट स्किल, टास्क के लिए Firebase सीएलआई का इस्तेमाल करती हैं. हालांकि, हमारा सुझाव है कि आप अपने एआई कोडिंग एजेंट को Firebase एमसीपी सर्वर से कनेक्ट करें. इस कनेक्शन से, आपके एजेंट की Firebase एनवायरमेंट के साथ इंटरैक्ट करने की क्षमता बेहतर होती है. इससे, बेहतर इंटिग्रेशन और ऐक्सेस मिलता है.

काम में एआई की मदद लेने का तरीका

ज़्यादातर मामलों में, अपने एआई कोडिंग एजेंट से Firebase एमसीपी सर्वर सेट अप करने के लिए कहा जा सकता है. हालांकि, अगर आपको कोई समस्या आती है या आपको सूची में Firebase एमसीपी सर्वर नहीं दिखता है, तो मैन्युअल तरीके का इस्तेमाल करें.

मैन्युअल तरीका

Antigravity

Firebase एमसीपी सर्वर का इस्तेमाल करने के लिए, Antigravity को कॉन्फ़िगर करने का तरीका:

  1. Antigravity में, एजेंट पैनल में मौजूद मेन्यू > एमसीपी सर्वर पर क्लिक करें.
  2. Firebase > इंस्टॉल करें को चुनें.

इससे आपकी mcp_config.json फ़ाइल अपने-आप अपडेट हो जाती है. इसे देखने के लिए, एमसीपी स्टोर पैनल में सबसे ऊपर मौजूद, एमसीपी सर्वर मैनेज करें > रॉ कॉन्फ़िगरेशन देखें पर क्लिक करें. इसमें यह कॉन्टेंट शामिल होता है:

{
  "mcpServers": {
    "firebase-mcp-server": {
      "command": "npx",
      "args": ["-y", "firebase-tools@latest", "mcp"]
    }
  }
}

Claude

Claude Code

  • पहला विकल्प: प्लगिन की मदद से इंस्टॉल करना (सुझाया गया)

    Claude Code में Firebase एमसीपी सर्वर को सेट अप करने का सबसे आसान तरीका, आधिकारिक Firebase प्लग इन इंस्टॉल करना है:

    1. Claude प्लग इन के लिए Firebase Marketplace जोड़ें:

      claude plugin marketplace add firebase/firebase-tools
    2. Firebase के लिए Claude प्लग इन इंस्टॉल करें:

      claude plugin install firebase@firebase
    3. इंस्टॉलेशन की पुष्टि करें:

      claude plugin marketplace list
  • दूसरा विकल्प: एमसीपी सर्वर को मैन्युअल तरीके से कॉन्फ़िगर करना

    इसके अलावा, Firebase एमसीपी सर्वर को मैन्युअल तरीके से भी कॉन्फ़िगर किया जा सकता है:

    1. अपने ऐप्लिकेशन फ़ोल्डर में यह कमांड चलाएं:

      claude mcp add firebase npx -- -y firebase-tools@latest mcp
    2. इंस्टॉलेशन की पुष्टि करें:

      claude mcp list

      इसमें यह जानकारी दिखनी चाहिए:

      firebase: npx -y firebase-tools@latest mcp - ✓ Connected
      

Claude Desktop

Firebase एमसीपी सर्वर का इस्तेमाल करने के लिए, Claude Desktop को कॉन्फ़िगर करें. इसके लिए, claude_desktop_config.json फ़ाइल में बदलाव करें. इस फ़ाइल को Claude > Settings मेन्यू से खोला या बनाया जा सकता है. डेवलपर टैब को चुनें. इसके बाद, कॉन्फ़िगरेशन में बदलाव करें पर क्लिक करें.

{
  "mcpServers": {
    "firebase": {
      "command": "npx",
      "args": ["-y", "firebase-tools@latest", "mcp"]
    }
  }
}

कर्सर

पहला विकल्प: Marketplace प्लगिन (इसका सुझाव दिया जाता है)

Cursor Marketplace से Firebase प्लगिन इंस्टॉल करें. इससे एमसीपी सर्वर अपने-आप कॉन्फ़िगर हो जाता है और Firebase एजेंट स्किल का ऐक्सेस मिल जाता है.

दूसरा विकल्प: एक क्लिक में एमसीपी सेटअप करना

अगर आपको एमसीपी सर्वर को सिर्फ़ अपने ग्लोबल कॉन्फ़िगरेशन में जोड़ना है, तो इस बटन पर क्लिक करें:

एमसीपी सर्वर इंस्टॉल करना

तीसरा विकल्प: मैन्युअल कॉन्फ़िगरेशन

अगर आपको किसी खास प्रोजेक्ट के लिए सर्वर को कॉन्फ़िगर करना है या अपनी सेटिंग में मैन्युअल तरीके से बदलाव करना है, तो अपनी mcp.json फ़ाइल को अपडेट करें:

  • किसी खास प्रोजेक्ट के लिए, .cursor/mcp.json में बदलाव करें
  • सभी प्रोजेक्ट (ग्लोबल) के लिए, ~/.cursor/mcp.json में बदलाव करें
"mcpServers": {
  "firebase": {
    "command": "npx",
    "args": ["-y", "firebase-tools@latest", "mcp"]
  }
}

क्लाइन

Firebase एमसीपी सर्वर का इस्तेमाल करने के लिए Cline को कॉन्फ़िगर करें. इसके लिए, cline_mcp_settings.json फ़ाइल में बदलाव करें. इस फ़ाइल को खोलने या बनाने के लिए, Cline पैनल में सबसे ऊपर मौजूद एमसीपी सर्वर आइकॉन पर क्लिक करें. इसके बाद, एमसीपी सर्वर कॉन्फ़िगर करें बटन पर क्लिक करें.

{
  "mcpServers": {
    "firebase": {
      "command": "npx",
      "args": ["-y", "firebase-tools@latest", "mcp"],
      "disabled": false
    }
  }
}

VS Code Copilot

किसी एक प्रोजेक्ट को कॉन्फ़िगर करने के लिए, अपने फ़ाइल फ़ोल्डर में मौजूद .vscode/mcp.json फ़ाइल में बदलाव करें:

"servers": {
  "firebase": {
    "type": "stdio",
    "command": "npx",
    "args": ["-y", "firebase-tools@latest", "mcp"]
  }
}

हर प्रोजेक्ट में सर्वर को उपलब्ध कराने के लिए, उपयोगकर्ता की सेटिंग में बदलाव करें. उदाहरण के लिए:

"mcp": {
  "servers": {
    "firebase": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "firebase-tools@latest", "mcp"]
    }
  }
}

विंडसर्फ़

Windsurf Editor को कॉन्फ़िगर करने के लिए, इस फ़ाइल में बदलाव करें ~/.codeium/windsurf/mcp_config.json:

"mcpServers": {
  "firebase": {
    "command": "npx",
    "args": ["-y", "firebase-tools@latest", "mcp"]
  }
}

तीसरा चरण: Firebase की सेवाएं शुरू करना

एजेंट की स्किल और टूल सेट अप करने के बाद, अब नैचुरल लैंग्वेज का इस्तेमाल करके, एआई कोडिंग एजेंट से Cloud Firestore, Firebase Authentication, और Firebase Hosting सेट अप करने के लिए कहा जा सकता है.

  1. अपने एजेंट से कोई सेवा सेट अप करने का अनुरोध करें. उदाहरण के लिए, इस तरह के प्रॉम्प्ट इस्तेमाल किए जा सकते हैं:

    • इस ऐप्लिकेशन के लिए, Cloud Firestore को डेटाबेस के तौर पर सेट अप करें.
    • Authentication का इस्तेमाल करके लॉगिन पेज बनाएं और Security Rules को अपडेट करें, ताकि यह पक्का किया जा सके कि सिर्फ़ अनुमति वाले उपयोगकर्ता ही अपना डेटा पढ़ और लिख सकें.
    • Firebase Hosting को सेट अप करें और ऐप्लिकेशन को प्रोडक्शन में डिप्लॉय करें.
  2. एजेंट से मिली जानकारी की समीक्षा करें और उसके दिए गए निर्देशों का पालन करें. जैसे:

    1. प्लान: आपका एजेंट, आपके मौजूदा कोड बेस के आधार पर रणनीति का सुझाव देता है.
    2. कनेक्ट करना: आपका एजेंट, आपके लोकल कोड को किसी मौजूदा Firebase प्रोजेक्ट से लिंक करता है या नया Firebase प्रोजेक्ट बनाने में आपकी मदद करता है.
    3. संसाधनों को शुरू करना: आपका एजेंट, आपके कोड बेस में ज़रूरी Firebase लाइब्रेरी और कॉन्फ़िगरेशन जोड़ता है.
    4. फ़ाइलें अपडेट करना: आपका एजेंट, ज़रूरी फ़ाइलें बनाता और अपडेट करता है. जैसे, firestore.rules (यह तय करने के लिए कि आपके डेटाबेस में मौजूद डेटा को कौन पढ़ सकता है, उसमें बदलाव कर सकता है या क्वेरी कर सकता है) या firebase.json (Firebase सीएलआई को यह बताने के लिए कि कौनसी सेवाएं डिप्लॉय करनी हैं और उन्हें कैसे कॉन्फ़िगर करना है).
    5. एक्ज़ीक्यूट करना: आपका एजेंट, अतिरिक्त कॉन्फ़िगरेशन या डिप्लॉयमेंट के चरणों के बारे में बताता है.

एआई कोडिंग एजेंट को प्रॉम्प्ट देने के लिए सामान्य सलाह

एआई कोडिंग एजेंट का ज़्यादा से ज़्यादा फ़ायदा पाने के लिए, खास तौर पर Firebase जैसे कई पहलुओं वाले इंटिग्रेशन के साथ काम करते समय, इंटरैक्शन को एक बार में दिए जाने वाले निर्देश के बजाय, एक साथ मिलकर काम करने के तौर पर देखें.

सटीक जानकारी और कॉन्टेक्स्ट दें

Firebase एमसीपी सर्वर, एजेंट को आपके प्रोजेक्ट के बारे में काफ़ी जानकारी देता है. हालांकि, साफ़ और सटीक नैचुरल लैंग्वेज प्रॉम्प्ट से सबसे अच्छे नतीजे मिलते हैं. गोल-मोल अनुरोध न करें.

  • अस्पष्ट: "डेटाबेस की गड़बड़ी को ठीक करें."
  • खास: "मुझे Cloud Firestore में 'users' कलेक्शन में डेटा लिखने की कोशिश करते समय, 'अनुमति नहीं है' वाली गड़बड़ी का मैसेज मिल रहा है. मेरे firestore.rules की समीक्षा करो और कोई ऐसा समाधान बताओ जिससे पुष्टि किए गए उपयोगकर्ता अपने दस्तावेज़ में बदलाव कर सकें."

बेहतर बनाने के लिए लगातार सुधार करें

एआई कोडिंग एजेंट, मुश्किल टास्क के लिए पहली बार में ही सही कोड जनरेट नहीं कर पाते. अगर कोई जवाब सही नहीं है, तो बातचीत जारी रखें:

  • गड़बड़ी के मैसेज दें: टर्मिनल की गड़बड़ियों या कंसोल लॉग को चैट में वापस चिपकाएं.
  • बदलाव करने के लिए कहें: "इस कोड में पुराने v8 SDK का इस्तेमाल किया गया है. Firebase v9 मॉड्यूलर SDK टूल का इस्तेमाल करके, इसे फिर से लिखें."
  • जानकारी मांगना: "बताएं कि Firebase Security Rules उपयोगकर्ता के डेटा को कैसे सुरक्षित रखते हैं."

कार्रवाई करने से पहले पुष्टि करना

एआई कोडिंग एजेंट बेहतरीन होते हैं, लेकिन वे गलतियां कर सकते हैं या "गलत जानकारी" दे सकते हैं. जैसे, गलत नाम वाले फ़ंक्शन या सेवाएं बनाना.

  • कोड की समीक्षा करें: जनरेट किए गए कोड को हमेशा ध्यान से पढ़ें. खास तौर पर, प्रोडक्शन में डिप्लॉय करने से पहले, Firebase Security Rules और कॉन्फ़िगरेशन फ़ाइलों (जैसे, firebase.json) को ध्यान से पढ़ें.
  • लोकल लेवल पर टेस्ट करना: जब भी संभव हो, एजेंट से कहें कि वह बदलावों को लाइव करने से पहले, लोकल लेवल पर टेस्ट करने में आपकी मदद करे.

एमसीपी कनेक्शन का इस्तेमाल करना

Firebase एमसीपी सर्वर, आपके एजेंट को आपके प्रोजेक्ट के स्ट्रक्चर की जानकारी देता है. इसलिए, आपको अपनी ज़रूरत के हिसाब से सलाह पाने के लिए, खास फ़ाइलों का रेफ़रंस देना होगा.

  • उदाहरण: "मेरी src/web/index.html फ़ाइल देखो और मुझे बताओ कि स्टैंडर्ड Firebase इनिशलाइज़ेशन स्क्रिप्ट कहां जोड़नी है."

अगले चरण