Firebase Studio के फ़ाइल फ़ोल्डर को पसंद के मुताबिक बनाना

Firebase Studio की मदद से, अपने प्रोजेक्ट की खास ज़रूरतों के हिसाब से वर्कस्पेस को बनाया जा सकता है. इसके लिए, आपको एक .idx/dev.nix कॉन्फ़िगरेशन फ़ाइल तय करनी होगी. इस फ़ाइल में यह जानकारी शामिल होती है:

  • सिस्टम टूल, जिन्हें चलाने की ज़रूरत होती है. जैसे, कंपाइलर या अन्य बाइनरी. इन्हें टर्मिनल से चलाया जा सकता है.
  • आपको जिन एक्सटेंशन को इंस्टॉल करना है (उदाहरण के लिए, प्रोग्रामिंग भाषा के लिए सहायता).
  • आपकी ऐप्लिकेशन की झलक कैसे दिखनी चाहिए. उदाहरण के लिए, वेब सर्वर चलाने के लिए कमांड.
  • ग्लोबल एनवायरमेंट वैरिएबल, आपके वर्कस्पेस में चल रहे लोकल सर्वर के लिए उपलब्ध हैं.

dev.nix रेफ़रंस में जाकर, उपलब्ध सुविधाओं के बारे में पूरी जानकारी पाएं.

अपने प्रोजेक्ट में .idx/mcp.json (Firebase में Gemini के लिए) या .gemini/settings.json (Gemini CLI के लिए) फ़ाइल जोड़कर, मॉडल कॉन्टेक्स्ट प्रोटोकॉल (एमसीपी) सर्वर से भी कनेक्ट किया जा सकता है. इनमें Firebase एमसीपी सर्वर भी शामिल है.

Nix और Firebase Studio

Firebase Studio, हर वर्कस्पेस के लिए एनवायरमेंट कॉन्फ़िगरेशन तय करने के लिए Nix का इस्तेमाल करता है. खास तौर पर, Firebase Studio इन कुकी का इस्तेमाल करता है:

  • Nix प्रोग्रामिंग लैंग्वेज का इस्तेमाल करके, वर्कस्पेस एनवायरमेंट के बारे में बताया जाता है. Nix एक फ़ंक्शनल प्रोग्रामिंग भाषा है. dev.nix फ़ाइल में तय किए जा सकने वाले एट्रिब्यूट और पैकेज लाइब्रेरी, Nix एट्रिब्यूट सेट के सिंटैक्स के मुताबिक होते हैं.

  • आपके वर्कस्पेस के लिए उपलब्ध सिस्टम टूल को मैनेज करने के लिए, Nix पैकेज मैनेजर. यह ओएस के हिसाब से पैकेज मैनेज करने वाले टूल की तरह ही काम करता है. जैसे, APT (apt और apt-get), Homebrew (brew), और dpkg.

Nix एनवायरमेंट को फिर से बनाया जा सकता है और यह डिक्लेरेटिव होता है. Firebase Studio के संदर्भ में इसका मतलब है कि अपनी Nix कॉन्फ़िगरेशन फ़ाइल को अपनी Git रिपॉज़िटरी के हिस्से के तौर पर शेयर किया जा सकता है. इससे यह पक्का किया जा सकता है कि आपके प्रोजेक्ट पर काम करने वाले सभी लोगों के पास एक जैसा एनवायरमेंट कॉन्फ़िगरेशन हो.

बुनियादी उदाहरण

यहां दिए गए उदाहरण में, बुनियादी एनवायरमेंट कॉन्फ़िगरेशन दिखाया गया है. इससे झलक देखने की सुविधा चालू हो जाती है:

{ pkgs, ... }: {

  # Which nixpkgs channel to use.
  channel = "stable-23.11"; # or "unstable"

  # Use https://search.nixos.org/packages to find packages
  packages = [
    pkgs.nodejs_20
  ];

  # Sets environment variables in the workspace
  env = {
    SOME_ENV_VAR = "hello";
  };

  # Search for the extensions you want on https://open-vsx.org/ and use "publisher.id"
  idx.extensions = [
    "angular.ng-template"
  ];

  # Enable previews and customize configuration
  idx.previews = {
    enable = true;
    previews = {
      web = {
        command = [
          "npm"
          "run"
          "start"
          "--"
          "--port"
          "$PORT"
          "--host"
          "0.0.0.0"
          "--disable-host-check"
        ];
        manager = "web";
        # Optionally, specify a directory that contains your web app
        # cwd = "app/client";
      };
    };
  };
}

सिस्टम टूल जोड़ना

अपने वर्कस्पेस में सिस्टम टूल जोड़ने के लिए, जैसे कि क्लाउड सेवाओं के लिए कंपाइलर या सीएलआई प्रोग्राम, Nix पैकेज रजिस्ट्री में जाकर यूनीक पैकेज आईडी ढूंढें और उसे अपने dev.nix फ़ाइल के packages ऑब्जेक्ट में जोड़ें. इसके लिए, `pkgs.: प्रीफ़िक्स का इस्तेमाल करें.

{ pkgs, ... }: {
  # Which nixpkgs channel to use.
  channel = "stable-23.11"; # or "unstable"

  # Use https://search.nixos.org/packages to find packages
  packages = [
    pkgs.nodejs_20
  ];
  ...
}

यह सिस्टम पैकेज इंस्टॉल करने के सामान्य तरीके से अलग है. सिस्टम पैकेज इंस्टॉल करने के लिए, ओएस के हिसाब से पैकेज मैनेजर का इस्तेमाल किया जाता है. जैसे, APT (apt और apt-get), Homebrew (brew), और dpkg. सिस्टम के किन पैकेज की ज़रूरत है, इसके बारे में साफ़ तौर पर बताने से, Firebase Studio वर्कस्पेस को शेयर करना और फिर से बनाना आसान हो जाता है.

लोकल नोड बाइनरी का इस्तेमाल करना

आपकी लोकल मशीन की तरह ही, स्थानीय तौर पर इंस्टॉल किए गए नोड पैकेज से जुड़ी बाइनरी (उदाहरण के लिए, आपके package.json में तय किए गए पैकेज) को टर्मिनल पैनल में एक्ज़ीक्यूट किया जा सकता है. इसके लिए, उन्हें npx कमांड के साथ शुरू करें.

अगर आप node_modules फ़ोल्डर वाली किसी डायरेक्ट्री में हैं (जैसे कि वेब प्रोजेक्ट की रूट डायरेक्ट्री), तो स्थानीय तौर पर इंस्टॉल की गई बाइनरी को सीधे तौर पर चालू किया जा सकता है. इसके लिए, npx प्रीफ़िक्स की ज़रूरत नहीं होती.

gcloud कॉम्पोनेंट जोड़ना

gcloud CLI for Google Cloud का डिफ़ॉल्ट कॉन्फ़िगरेशन, सभी Firebase Studio वर्कस्पेस के लिए उपलब्ध है.

अगर आपको अतिरिक्त कॉम्पोनेंट की ज़रूरत है, तो उन्हें अपनी dev.nix फ़ाइल में जोड़ा जा सकता है:

{ pkgs }: {
  packages = [
    ...
    (pkgs.google-cloud-sdk.withExtraComponents [
      pkgs.google-cloud-sdk.components.cloud-datastore-emulator
    ])
    ...
  ];
}

आईडीई एक्सटेंशन जोड़ना

Firebase Studio में एक्सटेंशन इंस्टॉल करने के लिए, OpenVSX एक्सटेंशन रजिस्ट्री का इस्तेमाल दो तरीकों से किया जा सकता है:

  • एक्सटेंशन ढूंढने और उन्हें इंस्टॉल करने के लिए, Firebase Studio में एक्सटेंशन पैनल का इस्तेमाल करें. यह तरीका, उपयोगकर्ता के हिसाब से तय किए गए एक्सटेंशन के लिए सबसे सही है. जैसे:

    • पसंद के मुताबिक रंग वाली थीम
    • एडिटर इम्यूलेशन, जैसे कि VSCodeVim

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

    • प्रोग्रामिंग लैंग्वेज एक्सटेंशन. इनमें भाषा के हिसाब से डीबगर भी शामिल हैं
    • आपके प्रोजेक्ट में इस्तेमाल की जाने वाली क्लाउड सेवाओं के लिए आधिकारिक एक्सटेंशन
    • कोड फ़ॉर्मैट करने वाले टूल

दूसरे तरीके के लिए, अपनी dev.nix फ़ाइल में IDE एक्सटेंशन शामिल किए जा सकते हैं. इसके लिए, पूरी तरह से मान्य एक्सटेंशन आईडी (<publisher>.<id> के फ़ॉर्म में) ढूंढें और उसे idx.extensions ऑब्जेक्ट में इस तरह जोड़ें:

{ pkgs, ... }: {
  ...
  # Search for the extensions you want on https://open-vsx.org/ and use the format
  # "<publisher>.<id>"
  idx.extensions = [
    "angular.ng-template"
  ];
  ...
}

सामान्य सेवाएं जोड़ना

Firebase Studio, डेवलपमेंट के दौरान इस्तेमाल की जाने वाली सामान्य सेवाओं को आसानी से सेटअप और कॉन्फ़िगर करने की सुविधा भी देता है. इनमें ये सेवाएं शामिल हैं:

  • कंटेनर
    • Docker (services.docker.*)
  • मैसेजिंग
    • Pub/Sub Emulator (services.pubsub.*)
  • डेटाबेस
    • MySQL (services.mysql.*)
    • Postgres (services.postgres.*)
    • Redis (services.redis.*)
    • Spanner (services.spanner.*)

अपने वर्कस्पेस में इन सेवाओं को चालू करने के बारे में जानकारी पाने के लिए, dev.nix रेफ़रंस के services.* हिस्से देखें.

झलक को पसंद के मुताबिक बनाना

अपने ऐप्लिकेशन की झलक को पसंद के मुताबिक बनाने के तरीके के बारे में जानने के लिए, अपने ऐप्लिकेशन की झलक देखना लेख पढ़ें.

अपने वर्कस्पेस का आइकॉन सेट करना

अपने वर्कस्पेस के लिए पसंद के मुताबिक आइकॉन चुना जा सकता है. इसके लिए, dev.nix फ़ाइल के लेवल पर मौजूद .idx डायरेक्ट्री में, icon.png नाम की PNG फ़ाइल रखें. इसके बाद, Firebase Studio इस आइकॉन का इस्तेमाल करके, आपके डैशबोर्ड में आपके वर्कस्पेस को दिखाएगा.

इस फ़ाइल को सोर्स कंट्रोल (जैसे कि Git) में सेव किया जा सकता है. इसलिए, यह एक अच्छा तरीका है. इससे आपके प्रोजेक्ट पर काम करने वाले सभी लोगों को Firebase Studio का इस्तेमाल करते समय, आपके प्रोजेक्ट के लिए एक ही आइकॉन दिखेगा. साथ ही, फ़ाइल अलग-अलग Git ब्रांच में अलग-अलग हो सकती है. इसलिए, इस आइकॉन का इस्तेमाल करके, बीटा और प्रोडक्शन ऐप्लिकेशन के वर्कस्पेस के बीच अंतर किया जा सकता है. इसके अलावा, इसका इस्तेमाल अन्य कामों के लिए भी किया जा सकता है.

अपने बदलावों को टेंप्लेट में बदलना

अपने एनवायरमेंट कॉन्फ़िगरेशन को "स्टार्टर एनवायरमेंट" में बदलने के लिए, कस्टम टेंप्लेट बनाएं से जुड़े दस्तावेज़ देखें. इससे कोई भी व्यक्ति नए प्रोजेक्ट बनाने के लिए, इसका इस्तेमाल कर सकेगा.

पसंद के मुताबिक बनाने के सभी विकल्प एक्सप्लोर करना

एनवायरमेंट कॉन्फ़िगरेशन स्कीमा के बारे में ज़्यादा जानकारी के लिए, dev.nix रेफ़रंस देखें.

अपनी फ़ाइलें डाउनलोड करना

अपनी फ़ाइलों को ZIP फ़ाइल के तौर पर डाउनलोड करने के लिए:

  • एक्सप्लोरर पैन में मौजूद किसी भी डायरेक्ट्री पर राइट क्लिक करें. इसके बाद, ज़िप करें और डाउनलोड करें को चुनें.

अपने प्रोजेक्ट डायरेक्ट्री में मौजूद सभी फ़ाइलों को डाउनलोड करने के लिए:

  1. फ़ाइल > फ़ोल्डर खोलें को चुनें.

  2. डिफ़ॉल्ट /home/user डायरेक्ट्री स्वीकार करें.

  3. फ़ाइलें लोड होने के बाद, अपनी वर्किंग डायरेक्ट्री पर राइट क्लिक करें. इसके बाद, ज़िप करें और डाउनलोड करें को चुनें. App Prototyping agent का इस्तेमाल करने पर, आपकी वर्किंग डायरेक्ट्री studio होगी. अगर किसी टेंप्लेट या अपलोड किए गए प्रोजेक्ट का इस्तेमाल किया जा रहा है, तो यह आपके प्रोजेक्ट का नाम होगा.

  4. जब एनवायरमेंट को फिर से बनाने के लिए कहा जाए, तब रद्द करें पर क्लिक करें.

  5. डाउनलोड पूरा होने के बाद, अपने फ़ाइल फ़ोल्डर पर वापस जाने के लिए, फ़ाइल मेन्यू से अपनी वर्किंग डायरेक्ट्री को फिर से खोलें.

MCP सर्वर का इस्तेमाल करना

एमसीपी सर्वर, Gemini के लिए अतिरिक्त टूल और डेटा सोर्स उपलब्ध कराते हैं. उदाहरण के लिए, अपने ऐप्लिकेशन को बनाते या डीबग करते समय, Cloud Firestore में अपने डेटा को एक्सप्लोर करने के लिए, Firebase MCP सर्वर को जोड़ा जा सकता है. इसके लिए, सामान्य भाषा का इस्तेमाल किया जा सकता है.

ज़रूरी शर्तें

  • अगर MCP सर्वर के लिए इसकी ज़रूरत है, तो पक्का करें कि आपने Node.js और npm को इंस्टॉल किया हो और वे काम कर रहे हों.

आपके डिवाइस के साथ काम करने वाला MCP सर्वर चुनें

Firebase Studio, एमसीपी सर्वर के साथ काम करता है. इसका मतलब है कि सभी एमसीपी सर्वर के साथ काम नहीं करता. Firebase Studio के वर्कस्पेस में जोड़ने के लिए, MCP सर्वर चुनते समय इन बातों का ध्यान रखें:

  • काम करता है:
    • स्टैंडर्ड इनपुट/आउटपुट (stdio) या सर्वर-सेंट इवेंट (एसएसई)/स्ट्रीम किए जा सकने वाले एचटीटीपी ट्रांसपोर्ट सर्वर, जिनके लिए पुष्टि करने के खास फ़ॉर्म की ज़रूरत नहीं होती
    • एमसीपी सर्वर से उपलब्ध कराए गए टूल
  • फ़िलहाल, यह सुविधा इनके लिए उपलब्ध नहीं है:
    • ऐसे सर्वर जिनके लिए ग्राफ़िकल यूज़र इंटरफ़ेस या डेस्कटॉप सेशन की ज़रूरत होती है
    • एमसीपी सर्वर से मिले प्रॉम्प्ट, सैंपलिंग या अन्य संसाधन

कोई एमसीपी सर्वर जोड़ना

  1. एक्सप्लोरर (Ctrl+Shift+E) में जाकर, एमसीपी कॉन्फ़िगरेशन फ़ाइल में बदलाव करें या उसे बनाएं.

    • Firebase चैट में Gemini, .idx/mcp.json का इस्तेमाल करता है.

    • Gemini CLI, .gemini/settings.json का इस्तेमाल करता है.

    अगर फ़ाइल अभी तक मौजूद नहीं है, तो पैरंट डायरेक्ट्री पर राइट क्लिक करके और नई फ़ाइल चुनकर इसे बनाएं. Firebase और Gemini CLI में Gemini के MCP सर्वर का इस्तेमाल करने के लिए, दोनों फ़ाइलें बनाएं या उनमें बदलाव करें.

    Gemini CLI के साथ एमसीपी सर्वर इस्तेमाल करने के बारे में ज़्यादा जानने के लिए, पूरा दस्तावेज़ पढ़ें.

  2. फ़ाइल के कॉन्टेंट में सर्वर कॉन्फ़िगरेशन जोड़ें. उदाहरण के लिए, Firebase MCP सर्वर जोड़ने के लिए, यह डालें:

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

    इस कॉन्फ़िगरेशन फ़ाइल से Gemini को यह निर्देश मिलता है कि उसे किस एमसीपी सर्वर का इस्तेमाल करना है. इस उदाहरण में, हमने firebase नाम का एक सर्वर जोड़ा है. यह npx कमांड का इस्तेमाल करके, firebase-tools@latest को इंस्टॉल और रन करेगा. अन्य MCP सर्वर के लिए अलग-अलग कॉन्फ़िगरेशन की ज़रूरत होती है. हालांकि, ये एक ही सामान्य फ़ॉर्मैट का पालन करते हैं.

  3. टर्मिनल (Shift+Ctrl+C) में, इंस्टॉलेशन पूरा करने के लिए ज़रूरी कमांड चलाएं. उदाहरण के लिए, Firebase MCP सर्वर का इस्तेमाल करने के लिए, अपने खाते में साइन इन करने के लिए यह कमांड डालें:

    firebase login --no-localhost

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

    firebase init

    इससे आपकी रूट डायरेक्ट्री में एक firebase.json फ़ाइल बन जाएगी.

  4. सेटअप पूरा करने के लिए, अपना वर्कस्पेस फिर से बनाएँ:

    1. कमांड पैलेट (Shift+Ctrl+P) खोलें.

    2. Firebase Studio: Rebuild Environment डालें.

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

जिस MCP सर्वर का इस्तेमाल करना है उसे इंस्टॉल करने के बाद, उसके टूल या डेटा यहां उपलब्ध होते हैं:

  • Gemini CLI
  • एजेंट मोड और एजेंट (अपने-आप चलने वाला) मोड का इस्तेमाल करते समय, Firebase चैट में Gemini
  • App Prototyping agent

उदाहरण के लिए, Firebase MCP सर्वर जोड़ने पर, Gemini से ये काम करने के लिए कहा जा सकता है: मौजूदा प्रोजेक्ट के लिए SDK टूल का कॉन्फ़िगरेशन फ़ेच करना, Cloud Firestore और Realtime Database में सेव किया गया डेटा वापस पाना, Firebase सेवाओं को सेट अप करने में मदद करना, और भी बहुत कुछ.

MCP सर्वर से जुड़ी समस्या हल करना

अगर कोई एमसीपी सर्वर उम्मीद के मुताबिक काम नहीं करता है, तो गड़बड़ियों का पता लगाने के लिए Geminiलॉग खोलें:

  1. आउटपुट (Shift+Ctrl+U) में, ड्रॉप-डाउन मेन्यू पर क्लिक करें और Gemini चुनें.

  2. ऐसे मैसेज खोजें जो [MCPManager] टैग से शुरू होते हैं. इन लॉग में, यह जानकारी होती है कि कौनसे एमसीपी सर्वर सेट अप किए गए हैं. साथ ही, इनमें गड़बड़ी के मैसेज भी शामिल होते हैं. इस जानकारी का इस्तेमाल करके, कॉन्फ़िगरेशन से जुड़ी समस्या हल करें. जब कोई एमसीपी सर्वर कनेक्ट हो जाता है, तो आपको उन टूल की सूची दिखेगी जिन्हें उसने जोड़ा है.

अगर MCP सर्वर इंस्टॉल या कनेक्ट नहीं हो पाता है, तो अपने वर्कस्पेस को फिर से बनाने की कोशिश करें:

  1. कमांड पैलेट (Shift+Ctrl+P) खोलें.

  2. Firebase Studio: Rebuild Environment डालें.

  3. अपने वर्कस्पेस को फिर से बनाने के लिए इंतज़ार करें. इसके बाद, चुने गए एमसीपी सर्वर का इस्तेमाल करने के लिए फिर से कोशिश करें.

अगर एमसीपी सर्वर कनेक्ट हो जाता है, लेकिन Gemini उससे मिले टूल का इस्तेमाल नहीं करता है, तो:

  • Gemini के साथ नया चैट सेशन शुरू करें.

  • अगर Gemini, एमसीपी टूल का इस्तेमाल किए बिना टास्क पूरा कर सकता है, तो वह किसी दूसरे तरीके का इस्तेमाल कर सकता है. अगर आपको किसी टूल का इस्तेमाल करना है, तो अपने प्रॉम्प्ट में उस टूल का नाम लिखें. उदाहरण के लिए, "मौजूदा प्रोजेक्ट के लिए SDK कॉन्फ़िगरेशन पाने के लिए, firebase_get_sdk_config का इस्तेमाल करो."

  • Google Developer Program में शामिल हों.

अगले चरण