Google के ईकोसिस्टम की मदद से एआई ऐप्लिकेशन बनाना

1. शुरू करने से पहले

सॉफ़्टवेयर डेवलपमेंट में समय के साथ बदलाव हुआ है. सबसे कामयाब डेवलपर सिर्फ़ कोड नहीं लिखते. वे एआई टूल और एजेंट का इस्तेमाल करके, बेहतर और तेज़ी से कोड लिखते हैं. Google के टूल का इकोसिस्टम, पूरे लाइफ़साइकल के लिए एक बेहतरीन सुइट उपलब्ध कराता है: यूज़र इंटरफ़ेस (यूआई) जनरेट करना, ऐप्लिकेशन का प्रोटोटाइप बनाना और उसे डिप्लॉय करना, एआई की सुविधा डेवलप करना, और सुरक्षित, बड़े पैमाने पर बैकएंड इंटिग्रेशन करना. इस कोडलैब में, यूज़र इंटरफ़ेस (यूआई) डिज़ाइन करने के लिए Google Stitch, वाइब कोड करने और ऐप्लिकेशन को डिप्लॉय करने के लिए Google AI Studio, और एआई की सुविधाएं डेवलप करने और जानकारी को सुरक्षित, स्केल किए जा सकने वाले बैकएंड में सेव करने के लिए Firebase का इस्तेमाल किया जाएगा.

इस कोडलैब में आपको Decide For Me नाम का ऐप्लिकेशन बनाना है. यह ऐप्लिकेशन, फ़ैसले न ले पाने वाले लोगों की मदद करता है. जैसे, अपार्टमेंट बदलना, करियर बदलना या कोई शौक चुनना. उपयोगकर्ता अपनी दुविधा और जीवन में अपनी प्राथमिकताओं को दर्ज करता है, और ऐप एआई का उपयोग करके उपयोगकर्ता को यह तय करने में मदद करता है कि दीर्घकालिक निराशा को कम से कम कैसे किया जाए. साथ ही, ऐप्लिकेशन उपयोगकर्ता को पहला चरण पूरा करने में मदद करता है. आपके ऐप्लिकेशन का फ़ाइनल वर्शन कुछ ऐसा दिखना चाहिए:

'मेरे लिए फ़ैसला करो' ऐप्लिकेशन का स्क्रीनशॉट. इसमें चैट इंटरफ़ेस और प्राथमिकताएं पैनल दिख रहा है

आपको क्या सीखने को मिलेगा

  • Google Stitch की मदद से यूज़र इंटरफ़ेस डिज़ाइन करना.
  • Google AI Studio की मदद से, वेब ऐप्लिकेशन के लिए वाइब कोड जनरेट करें.
  • एआई की सुविधाएं डेवलप करने और क्लाउड में जानकारी सेव करने के लिए, Firebase का इस्तेमाल करें.
  • Google AI Studio (Cloud Run की मदद से काम करता है) का इस्तेमाल करके, वेब ऐप्लिकेशन को प्रोडक्शन में डिप्लॉय करें.

2. Stitch की मदद से यूज़र इंटरफ़ेस (यूआई) डिज़ाइन करना

  1. मॉकअप इमेज (DecideForMeScreen.jpeg) डाउनलोड करें. इसे किसी ऐसे लोकल फ़ोल्डर में सेव करें जहां आपको यह मिल सके.
  2. स्टिच करें पर जाएं. इसके बाद, इनपुट फ़ील्ड ढूंढें और वेब विकल्प चुनें. (इस कोडलैब में, आपको वेब अनुभव पर फ़ोकस करना होगा. हालांकि, मोबाइल स्क्रीन जनरेट करने के लिए भी Stitch का इस्तेमाल किया जा सकता है.)
  3. मॉकअप इमेज अपलोड करें:
    1. + (जोड़ें बटन) पर क्लिक करें.
    2. फ़ाइलें अपलोड करें को चुनें.
    3. सेटअप चरण (DecideForMeScreen.jpeg) में डाउनलोड की गई इमेज अटैच करें. हाथ से बनाए गए इस मॉकअप की मदद से, Stitch की मल्टीमॉडल सुविधाओं को आज़माया जा सकता है.
  4. यहां दिए गए प्रॉम्प्ट को कॉपी करें और इनपुट फ़ील्ड में चिपकाएं:
    # General Guidance
Create a modern, clean, and highly polished UI for a web application called
"Decide For Me" - a hyper-rational decision assistant.

CRITICAL: Replicate the exact layout, structure, and element placement shown in
the hand-drawn mockup file DecideForMeScreen.jpeg. Do not add any extra menus,
sidebars, buttons, or top/bottom navigation bars that are not explicitly drawn
in the file. Stick strictly to the skeleton provided in the mockup.

# Layout & Structure
- Two-Column Split Screen:
  - Left Side (Main Chat Area): Takes up roughly 70-75% of the screen width. It
    should feel like a premium, focused workspace.
  - Right Side (Configuration Panel): A sidebar taking up 25-30% of the screen
    width with a distinct, subtle background color to separate it from the
    chat.

# Right Panel: Configuration Screen
- Header: Title it "My Priorities" with a clean, minimalist typography.
- Content Card: A styled card containing a text box or paragraph area
  showcasing the user's priorities.
- Interactions: Include a clear "Edit Priorities" button. When clicked, this
  area should visually toggle into an editable textarea or input field.

# Left Panel: Chat & Dilemma Decision Screen
- Chat History: A clean vertical flow of message bubbles.
  - The first message bubble must be aligned to the left (system message) and
    say: "Tell me your dilemma". Use a friendly, neutral background color for
    this bubble.
- Bottom Input Area: Instead of a traditional single-line chat bar, create a
  unified, beautiful "Decision Submission" layout positioned at the bottom:
  - Dual Input Fields: Place two horizontal or cleanly stacked input fields.
    - Input 1 label: "Option A"
    - Input 2 label: "Option B"
  - Action Button: A prominent, styled "Go" action button to trigger the
    reasoning loop.

# Theme & Aesthetic
- Vibe: Hyper-rational, clean, trustworthy, and modern. Use a sophisticated
  color palette (e.g., deep slates, clean whites/grays, and a sharp accent
  color like a subtle indigo or teal for active states and buttons).
- Spacing & Typography: Use generous whitespace, soft rounded corners
  (border-radius) for cards and buttons, and a highly legible sans-serif font.
  5. इनपुट फ़ील्ड के निचले-दाएं कोने में मौजूद, जनरेट करने वाले ऐरो पर क्लिक करें. Stitch, स्क्रीन और पूरे डिज़ाइन सिस्टम को जनरेट करता है. इसमें कलर पैलेट, फ़ॉन्ट के विकल्प, आइकॉनोग्राफ़ी, और यूज़र इंटरफ़ेस (यूआई) एलिमेंट का सामान्य लुक शामिल है:

Stitch इंटरफ़ेस में, 'मेरे लिए फ़ैसला लें' सुविधा से जनरेट किया गया यूज़र इंटरफ़ेस डिज़ाइन और डिज़ाइन सिस्टम दिखाया गया है

3. Google AI Studio की मदद से ऐप्लिकेशन बनाना

  1. Stitch में बनाई गई स्क्रीन को Google AI Studio में एक्सपोर्ट करें:
    1. Stitch में जनरेट किए गए डिज़ाइन पर क्लिक करें.
    2. स्क्रीन के सबसे ऊपर दाएं कोने में मौजूद, एक्सपोर्ट करें पर क्लिक करें.
    3. पुष्टि करें कि आपने Google AI Studio को चुना हो.
    4. नीचे की ओर स्क्रोल करके, ब्यौरा फ़ील्ड पर जाएं.
  2. इस प्रॉम्प्ट को कॉपी करें और जानकारी फ़ील्ड में चिपकाएं:
    # General Guidance
Build the "Decide For Me" app: A hyper-rational decision assistant for
chronically indecisive people facing life choices (moving apartments, changing
careers, picking a hobby). The user enters a dilemma and their top priorities
in life. The app will help with the decision. Follow the instructions below to
build it:

# UI Instructions
Using the design artifacts exported from Stitch (the PNG image and HTML file),
build a fully functional web application that accurately mirrors the design and
layout.

# App Architecture & Initialization Instructions
- Initialize the Firebase JS SDK for client-side services.
- Set up Firebase Authentication using the Google provider. If a user is not
  logged in, show a clean, minimalist sign-in state. If the user is logged in,
  take them directly to the dilemma decision screen.
- Initialize Firebase App Check in debug mode
  (`self.FIREBASE_APPCHECK_DEBUG_TOKEN = true`) without a ReCaptchaV3Provider
  (we will add that later).

# State & Database Management Instructions
- User Priorities:
  - Once authenticated, pull the user's saved priorities from Firebase
    Firestore at the path: `users/{userId}`. Each document should contain one
    string field: 'priorities'.
  - Bind this data to the Right Panel ("My Priorities").
  - When the user clicks the "Edit" button, toggle the view to a textarea, with
    a 'save' button. When saved, write the updated string back to
    `users/{userId}`.
  - Make sure to implement and deploy strong Security Rules for Firestore.

# UI Stream Update & Display Instructions
- Once the user submits option A and option B in the dilemma decision screen,
  display both options as a single message on the user side of the chat. Then,
  display a sleek loading state in the main chat panel. Leave the app in this
  "loading" state and do nothing else, we will process both options and build
  the server-side thinking later.
  3. Google AI Studio की मदद से बनाएं पर क्लिक करें. इससे Google AI Studio एक नए टैब में खुल जाता है. साथ ही, आपकी डिज़ाइन फ़ाइलें और प्रॉम्प्ट भी ट्रांसफ़र हो जाते हैं:
    1. पुष्टि करें कि प्रॉम्प्ट को पूरी तरह से ट्रांसफ़र कर दिया गया है.
    2. अगर आपको प्रॉम्प्ट का सिर्फ़ कुछ हिस्सा दिखता है, तो पूरे प्रॉम्प्ट को फिर से चिपकाएं.
  4. बनाएं पर क्लिक करें. Google AI Studio, आपके प्रॉम्प्ट और यूज़र इंटरफ़ेस (यूआई) डिज़ाइन के हिसाब से Decide For Me ऐप्लिकेशन जनरेट करना शुरू कर देता है:
    1. जनरेट करते समय, यह यूज़र इंटरफ़ेस (यूआई) के अन्य डिज़ाइन के सुझाव देता है. इस कोडलैब के लिए, इन डिज़ाइन को अनदेखा करें. हालांकि, आने वाले समय में अलग-अलग डिज़ाइन चुने जा सकते हैं.
    2. जब Firebase चालू करने के लिए कहा जाए, तब चालू करें पर क्लिक करें.
  5. जनरेट किए गए ऐप्लिकेशन की जांच करें और पुष्टि करें कि:
    1. झलक देखें टैब में जाकर, ऐप्लिकेशन को टेस्ट करें.
    2. जनरेट की गई सभी फ़ाइलों और कोड की समीक्षा करने के लिए, कोड टैब पर जाएं.
    3. Google AI Studio ने एक Firebase प्रोजेक्ट भी बनाया है. साथ ही, Firebase Authentication और Firestore को चालू किया है. इसके अलावा, आपके कोडबेस में Firebase को कॉन्फ़िगर किया है. इस कोडलैब के अगले चरण में, आपको इस Firebase प्रोजेक्ट को ऐक्सेस करने और इस पर काम करने का मौका मिलेगा.

4. App Check के डीबग टोकन को रजिस्टर करना

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

अपने Firebase प्रोजेक्ट को ऐक्सेस करना

  1. Google AI Studio से बनाए गए Firebase प्रोजेक्ट का प्रोजेक्ट आईडी ढूंढें:
    1. Google AI Studio में, कोड टैब पर स्विच करें.
    2. firebase-applet-config.json फ़ाइल खोलें.
    3. projectId फ़ील्ड की वैल्यू कॉपी करें.
  2. Firebase कंसोल पर जाएं और इस आईडी का इस्तेमाल करके प्रोजेक्ट खोजें.

अपना डीबग टोकन रजिस्टर करना

आपका ऐप्लिकेशन, Firebase App Check का इस्तेमाल कर सकता है. इससे, बैकएंड सेवाओं और एआई मॉडल को गलत इस्तेमाल से बचाया जा सकता है. इसके लिए, यह पक्का किया जाता है कि आने वाला ट्रैफ़िक सिर्फ़ भरोसेमंद ऐप्लिकेशन से आ रहा हो.

क्योंकि आपका ऐप Google AI Studio पूर्वावलोकन वातावरण में चल रहा है, इसलिए यह App Check डीबग प्रोवाइडर (self.FIREBASE_APPCHECK_DEBUG_TOKEN = true) का उपयोग करता है. वेब ऐप्लिकेशन लोड होने पर, Firebase स्वचालित रूप से आपके ब्राउज़र के डेवलपर कंसोल में एक टोकन आउटपुट करता है.

  1. अपना डीबग टोकन ढूंढें:
    1. Google AI Studio में, ऐप्लिकेशन की झलक देखते समय अपने ब्राउज़र के डेवलपर टूल खोलें:
      • Chrome, Edge या Firefox: F12 दबाएं. इसके अलावा, झलक में कहीं भी राइट क्लिक करके जांच करें को चुनें. इसके बाद, कंसोल टैब को चुनें.
      • macOS: Cmd+Option+I दबाएं. इसके बाद, Console टैब चुनें.
    2. कंसोल लॉग में, App Check का डीबग मैसेज ढूंढें:
      AppCheck debug token: "123a4567-b89c-12d3-e456-789012345678".
You will need to safelist it in the Firebase console for it to work.
    3. टोकन स्ट्रिंग को कॉपी करें (कोटेशन मार्क के बिना).
  2. अपना डीबग टोकन रजिस्टर करें:
    1. Firebase कंसोल में, Security > App Check > Apps टैब पर जाएं.
    2. सूची में अपना वेब ऐप्लिकेशन ढूंढें. इसके बाद, तीन बिंदु वाले मेन्यू (⋮) पर क्लिक करें और डीबग टोकन मैनेज करें को चुनें.
    3. डीबग टोकन जोड़ें पर क्लिक करें. इसके बाद, कॉपी किया गया टोकन चिपकाएं और कोई नाम डालें. जैसे, Google AI Studio Preview. इसके बाद, सेव करें पर क्लिक करें.
    Firebase कंसोल में, 'डीबग टोकन मैनेज करें' मेन्यू आइटम का स्क्रीनशॉट

5. ऐप्लिकेशन को टेस्ट करना

अब आपका प्रोजेक्ट कनेक्ट हो गया है और आपका डीबग टोकन, App Check के साथ रजिस्टर हो गया है. इसलिए, बुनियादी सुविधाओं की जांच करें: पुष्टि करने की सुविधा और Firestore.

  1. उपयोगकर्ता की पुष्टि करने की सुविधा को टेस्ट करें और प्राथमिकताएं सेव करें:
    1. Google AI Studio में, मेरे लिए फ़ैसला लें ऐप्लिकेशन की झलक में, Google खाते से साइन इन करके पुष्टि करने वाली स्क्रीन को टेस्ट करें.
    2. दाएं पैनल (मेरी प्राथमिकताएं) का इस्तेमाल करके, अपनी प्राथमिकताओं को सेव करें.
  2. Firebase कंसोल में पुष्टि करने की सुविधा की पुष्टि करें:
    1. Firebase कंसोल पर जाएं और Authentication खोलें.
    2. पुष्टि करें कि आपने Decide For Me ऐप्लिकेशन में पुष्टि करने के लिए जिस Google खाते का इस्तेमाल किया था वह यहां मौजूद है:
    Firebase कंसोल के 'पुष्टि करना' पेज पर, पुष्टि किया गया Google खाता दिखाया गया है
  3. Firestore में डेटा सेव होने की पुष्टि करें:
    1. Firebase कंसोल में Firestore खोलें.
    2. पुष्टि करें कि आपकी प्राथमिकताएं, users/{userId} पाथ के तहत किसी दस्तावेज़ में सेव की गई हैं:
    Firebase कंसोल में Firestore डेटाबेस दिखाया गया है. इसमें users/{userId} में सेव की गई प्राथमिकताएं दिख रही हैं

6. Firebase का इस्तेमाल करके, एआई की मदद से काम करने वाला Decider फ़्लो बनाना

आपका ऐप्लिकेशन, मेरे लिए फ़ैसला करो सुविधा के लिए एआई का इस्तेमाल करेगा. एआई की मदद से काम करने वाले इस Decider फ़्लो को बनाने के लिए, Firebase का इस्तेमाल किया जा सकता है.

Firebase AI Logic सेट अप करना

  1. Firebase AI Logic में Gemini Developer API चालू करें:
    1. फायरबेस कंसोल में फायरबेस एआई लॉजिक खोलें, और फिर शुरू करें पर क्लिक करें.
    2. Gemini Developer API को चुनें. इसके बाद, एपीआई चालू करने के लिए कंसोल में दिए गए निर्देशों का पालन करें.
  2. Firebase AI Logic की सेटिंग कॉन्फ़िगर करें:
    1. सेटिंग टैब पर जाएं.
    2. सिर्फ़ टेंप्लेट वाला मोड लागू करें विकल्प को टॉगल करके लागू किया गया पर सेट करें.
    3. पुष्टि किए गए उपयोगकर्ताओं के लिए मोड लागू करें विकल्प को टॉगल करके लागू किया गया पर सेट करें.

सर्वर प्रॉम्प्ट टेंप्लेट बनाना

इस कोडलैब में, Firebase AI Logic के ज़रिए Gemini API के साथ इंटरैक्ट करने के लिए, सर्वर प्रॉम्प्ट टेंप्लेट का इस्तेमाल किया जाएगा.

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

  • बौद्धिक संपत्ति की सुरक्षा: यह सुविधा, क्लाइंट डिवाइस से प्रॉम्प्ट को हटाकर उन्हें बैकएंड पर सुरक्षित रखती है.
  • प्रॉम्प्ट इंजेक्शन के हमलों को रोकना: क्लाइंट, बैकएंड स्कीमा की पुष्टि करके सिर्फ़ कुछ वैरिएबल भर सकता है.
  • ऐप्लिकेशन रिलीज़ किए बिना अपडेट करना: ऐप्लिकेशन का नया वर्शन रिलीज़ किए बिना, कंसोल में प्रॉम्प्ट, सिस्टम के निर्देश, और मॉडल कॉन्फ़िगरेशन अपडेट किए जा सकते हैं.

सर्वर प्रॉम्प्ट टेंप्लेट बनाने और उसे टेस्ट करने का तरीका यहां बताया गया है:

  1. सर्वर प्रॉम्प्ट टेंप्लेट बनाएं:
    1. प्रॉम्प्ट टेंप्लेट टैब पर जाएं.
    2. टेंप्लेट बनाएं पर क्लिक करें.
    3. खाली टेंप्लेट चुनें.
    4. यहां दी गई जानकारी का इस्तेमाल करके, अपना पहला टेंप्लेट बनाएं:
      • टेंप्लेट का नाम: Decider Flow
      • टेम्प्लेट आईडी: decider-flow
      • कॉन्फ़िगरेशन (फ़्रंटमैटर)
        model: "gemini-3.5-flash-lite"
input:
  schema:
    priorities: "string, user's core priorities"
    optionA: "string, option A under consideration"
    optionB: "string, option B under consideration"
output:
  format: json
  schema:
    verdict: string
    justification: string
    firstStep: string
      • प्रॉम्प्ट और (ज़रूरी नहीं) सिस्टम के निर्देश
        {role "system"}
You are the Decider Agent, a multi-stage reasoning engine that
combines the roles of an honest and polite behavioral economist, a
long-term strategic forecaster, and an executive decision coach.
Your job is to take a user's dilemma and their core priorities, run
them through a rigorous, adversarial 3-phase thinking process, and
output a highly analytical, reasoning-backed final verdict. You must be
direct, sharp, and realistic. Do not give generic platitudes or claim
that "both options are great." You must force a clear choice.

{role "user"}
# Context & Inputs
You are analyzing a critical life decision for the user. Base your
entire multi-phase reasoning flow strictly on these three specific
inputs:
- User's Core Priorities: {{priorities}}
- Option A under consideration: {{optionA}}
- Option B under consideration: {{optionB}}

Execute your reasoning flow through the following three phases:

# Phase 1: Cynical Breakdown (Input-Driven Analysis)
Analyze {{optionA}} and {{optionB}} strictly through the lens of the
user's explicit {{priorities}}. Do not evaluate them in a vacuum.
- Identify the hidden flaws, compromises, and psychological costs
  embedded in both choices.
- Pinpoint exactly how {{optionA}} could directly conflict with or
  undermine their {{priorities}}.
- Pinpoint exactly how {{optionB}} could directly conflict with or
  undermine their {{priorities}}.
- Uncover any cognitive biases (like status quo bias or loss aversion)
  the user might be falling for in either option.

# Phase 2: Long-Term Regret Projection
Project the user 5 years into the future. Apply the Regret Minimization
Framework to both paths:
- The {{optionA}} Timeline: Quantify the absolute worst-case, deep,
  structural 5-year regret of choosing this path. Focus heavily on
  failures of courage vs. failures of action based on their
  {{priorities}}.
- The {{optionB}} Timeline: Quantify the matching 5-year regret for
  this path.
- Contrast these two timelines. Which option carries the kind of regret
  that fundamentally breaks the user's {{priorities}}?

# Phase 3: Final Recommendation & Action Step
Synthesize the cynical critiques and long-term regret scores.
Weigh them against the user's {{priorities}} to determine which
choice minimizes long-term disappointment.
- Verdict: You must declare either {{optionA}} or {{optionB}} as the
  definitive winner. No compromise, no "it depends," and no hybrid
  options.
- Justification: Provide a sharp, reasoning-backed explanation showing why
  the losing option was eliminated based on the Phase 1 and Phase 2
  analysis.
- First Step: Give one microscopic, low-friction task the user can
  execute within the next 15 minutes to commit to or move toward the
  chosen verdict.
        सही सिंटैक्स में सिस्टम के निर्देश और प्रॉम्प्ट लिखने के लिए, {role "system"} और {role "user"} के आस-पास एक और {} जोड़ें: 9db2a4f2c5cf2ec7.png
      • टेस्ट इनपुट
        {
  "priorities": "Be financially stable, have a good work-life balance where I can travel twice a year",
  "optionA": "Buy a house for 615000 British pounds with a mortgage of 2800 per month for the next 35 years",
  "optionB": "Keep renting for 2400 per month for the foreseeable"
}
  2. टेम्प्लेट सेव करें पर क्लिक करें.
  3. टेंप्लेट की जांच करें:
    1. प्रॉम्प्ट टेस्ट चलाएं पर क्लिक करें.
    2. जवाब की जांच करें पर जाएं और देखें कि इसमें वे सभी फ़ील्ड मौजूद हैं जो आपने प्रॉम्प्ट में दिए थे (verdict, justification, और firstStep).
    3. अगर सब कुछ उम्मीद के मुताबिक है, तो टेंप्लेट को लॉक करें. इसके लिए, टेंप्लेट के सबसे ऊपर दाएं कोने में मौजूद लॉक आइकॉन का इस्तेमाल करें. इससे यह पक्का किया जा सकेगा कि टेंप्लेट का वर्शन स्थिर रहे और उसमें गलती से बदलाव न हो.

आपका टेंप्लेट, ऐप्लिकेशन में इस्तेमाल करने के लिए तैयार है!

7. ऐप्लिकेशन में, फ़ैसला लेने में मदद करने वाले प्रॉम्प्ट टेंप्लेट का इस्तेमाल करना

अपने वेब ऐप्लिकेशन में टेंप्लेट का इस्तेमाल करने के लिए:

  1. Google AI Studio में अपने ऐप्लिकेशन पर वापस जाएं.
  2. Google AI Studio के एजेंट से, मेरे लिए फ़ैसला करो कार्रवाई को लागू करने के लिए कहें:
    1. इस प्रॉम्प्ट को कॉपी करें:
      Now let's implement the "Decide For Me" button action. When clicked, it
should call the Firebase AI Logic SDK using a Template Generative Model.
The prompt is stored in a prompt template with the id "decider-flow". When
calling the API, pass the following variables as the input payload object:
- priorities
- optionA
- optionB

The API will return a JSON object. Handle the response asynchronously and
extract:
- verdict
- justification
- firstStep

Once the data is received, update the UI state to append a new message to
the chat array. Ensure it renders as a system chat bubble positioned on
the left side of the chat screen, mapping these three fields clearly into
the bubble's layout.

Please provide the necessary front-end component state updates and the
Firebase SDK call.
    2. प्रॉम्प्ट को Google AI Studio के चैट इनपुट में चिपकाएं और भेजें पर क्लिक करें.
  3. कॉन्फ़िगरेशन की पुष्टि करें और फ़ैसले लेने में मदद करने वाली सुविधा को टेस्ट करें:
    1. Google AI Studio को अपने ऐप्लिकेशन में Firebase AI Logic जोड़ने तक इंतज़ार करें.
    2. कोड टैब पर जाएं और पक्का करें कि आपकी firebase-applet-config.json फ़ाइल में एपीआई पासकोड मौजूद हो. अगर कॉन्फ़िगरेशन फ़ाइल में Firebase API कुंजी मौजूद नहीं है, तो Google AI Studio से इसे इंपोर्ट करने के लिए कहें.
    3. झलक टैब पर स्विच करें
    4. विकल्प A और B सबमिट करें. साथ ही, पुष्टि करें कि एआई ने फ़ैसले का वर्डक, वजह, और पहला चरण बताया हो.

रेफ़रंस के लिए, Google AI Studio से जनरेट किया गया कोड कुछ ऐसा दिखना चाहिए:

const aiInstance = getAI(app);
const templateModel = getTemplateGenerativeModel(aiInstance);

const result = await templateModel.generateContent('decider-flow', {
  priorities: priorities,
  optionA: optA,
  optionB: optB
});

const rawText = result.response.text();

// Parse response text to extract fields
const cleaned = rawText.replace(/```json|```/g, '').trim();
const parsedData: { verdict?: string; justification?: string; firstStep?: string } = JSON.parse(cleaned);

const verdict = parsedData.verdict;
const justification = parsedData.justification;
const firstStep = parsedData.firstStep;

अनुरोधों को डीबग और मॉनिटर करना

अगर आपके ऐप्लिकेशन में गड़बड़ियां आती हैं, जवाब जनरेट नहीं हो पाता है या आपको एपीआई ट्रैफ़िक की ज़्यादा जानकारी चाहिए, तो Firebase AI Logic में पहले से मौजूद Analytics और मॉनिटरिंग टूल का इस्तेमाल करें:

  1. Firebase कंसोल में, एआई सेवाएं > एआई लॉजिक > एआई मॉनिटरिंग टैब पर जाएं.
  2. डैशबोर्ड पर संख्यात्मक मेट्रिक देखें:
    • अनुरोधों की संख्या और स्थिति: पुष्टि करें कि आने वाले अनुरोध, बैकएंड तक पहुंचते हैं और 200 OK दिखाते हैं या क्लाइंट या सर्वर की गड़बड़ियों की वजह से पूरे नहीं हो पाते.
    • लेटेंसी: एंड-टू-एंड रिस्पॉन्स टाइम देखने के लिए, लेटेंसी ग्राफ़ की जांच करें.
    • टोकन की संख्या: हर अनुरोध के लिए, इनपुट और आउटपुट टोकन के इस्तेमाल पर नज़र रखें.
  3. ज़्यादा बारीकी से डीबग करने के लिए, अनुरोध के अलग-अलग ट्रेस की जांच करें:पेलोड की जांच करने के लिए, ट्रेस टेबल में किसी अनुरोध के ट्रेस पर क्लिक करें.
    • इनपुट: पुष्टि करें कि वैरिएबल (priorities, optionA, और optionB) को क्लाइंट ऐप्लिकेशन से सही तरीके से पास किया गया था.
    • आउटपुट: मॉडल से जनरेट किए गए रॉ टेक्स्ट को देखें. इससे यह पुष्टि की जा सकेगी कि मॉडल ने स्कीमा से मेल खाने वाला मान्य JSON फ़ॉर्मैट में डेटा दिया है या नहीं.
    • गड़बड़ी की जानकारी: अगर कोई अनुरोध पूरा नहीं होता है, तो ट्रेस एरर लॉग देखें. इससे आपको गड़बड़ी की वजहों के बारे में पता चलेगा. जैसे, App Check के अमान्य टोकन, पुष्टि अस्वीकार होना, कोटा की सीमाएं या प्रॉम्प्ट की पुष्टि से जुड़ी गड़बड़ियां.
  4. Google AI Studio से जुड़ी समस्याओं को हल करना:
    • अगर आपको ट्रेस में कोई गड़बड़ी मिलती है (उदाहरण के लिए, JSON रिस्पॉन्स को गलत तरीके से पार्स करना या पैरामीटर मौजूद न होना), तो गड़बड़ी का मैसेज या पेलोड कॉपी करें.
    • Google AI Studio पर वापस जाएं और असिस्टेंट को ऐप्लिकेशन कोड में मौजूद समस्या को ठीक करने के लिए कहें.

8. ज़रूरी नहीं: ऐप्लिकेशन डिप्लॉय करना

अब जब आपका ऐप्लिकेशन झलक मोड में काम कर रहा है, तो उसे प्रोडक्शन में डिप्लॉय करें.

प्रोडक्शन में अपने Firebase एंडपॉइंट को सुरक्षित रखने के लिए, Firebase App Check के साथ इस्तेमाल करने के लिए, प्रोडक्शन एटेस्टेशन प्रोवाइडर को कॉन्फ़िगर करें. इस कोडलैब में, reCAPTCHA v3 का इस्तेमाल किया जाएगा.

आपको सबसे पहले अपना ऐप्लिकेशन डिप्लॉय करना होगा, ताकि आपको उसका लाइव यूआरएल मिल सके. इससे, सभी ai.studio ऐप्लिकेशन को अनुमति देने के बजाय, किसी खास डोमेन को reCAPTCHA के साथ रजिस्टर किया जा सकता है.

अपना ऐप्लिकेशन डिप्लॉय करें और reCAPTCHA को कॉन्फ़िगर करें:

  1. Google AI Studio की मदद से वेब ऐप्लिकेशन डिप्लॉय करें:
    1. Google AI Studio में, शीर्ष नेविगेशन बार में प्रकाशित करें पर क्लिक करें.
    2. शुरू करें पर क्लिक करें. इसके बाद, ऐप्लिकेशन के नाम और ब्यौरे की समीक्षा करें या उसे पसंद के मुताबिक बनाएं. इसके बाद, अपना ऐप्लिकेशन पब्लिश करें पर क्लिक करें.
    3. Google AI Studio को अपना ऐप्लिकेशन बनाने और उसे डिप्लॉय करने दें. आम तौर पर, इसमें एक से दो मिनट लगते हैं.
    4. जनरेट किए गए लाइव वैनिटी यूआरएल (उदाहरण के लिए, https://decide-for-me-123.ai.studio) को कॉपी करें और उसके डोमेन (उदाहरण के लिए, decide-for-me-123.ai.studio) को नोट करें.
  2. Google reCAPTCHA में reCAPTCHA वर्शन 3 की कुंजियां बनाएं:
    1. Google reCAPTCHA Admin Console पर जाएं.
    2. कोई लेबल डालें (उदाहरण के लिए, Decide For Me - Production).
    3. reCAPTCHA का प्रकार > reCAPTCHA वर्शन 3 (स्कोर पर आधारित) को चुनें.
    4. डोमेन सेक्शन में, अपने ऐप्लिकेशन का डिप्लॉय किया गया सटीक डोमेन जोड़ें. उदाहरण के लिए, decide-for-me-123.ai.studio. इसमें https:// और कोई भी पाथ शामिल न करें. अगर आपको कस्टम डोमेन का इस्तेमाल करना है, तो उसे जोड़ें.
    5. सेवा की शर्तों को स्वीकार करें और सबमिट करें पर क्लिक करें.
    6. इस टैब को खुला रखें: आपको साइट की कुंजी (सार्वजनिक क्लाइंट कुंजी) और सीक्रेट कुंजी (निजी सर्वर कुंजी), दोनों की ज़रूरत होगी.
  3. Firebase कंसोल में अपनी सीक्रेट कुंजी रजिस्टर करें:
    1. Firebase कंसोल में App Check पर जाएं.
    2. ऐप्लिकेशन टैब पर जाएं.
    3. सूची में अपना वेब ऐप्लिकेशन ढूंढें. इसके बाद, उस पर क्लिक करें या तीन बिंदु वाले मेन्यू ⋮ पर क्लिक करें. इसके बाद, reCAPTCHA वर्शन 3 को चुनें.
    4. reCAPTCHA सीक्रेट कुंजी को फ़ील्ड में चिपकाएं और सेव करें पर क्लिक करें.
  4. क्लाइंट ऐप्लिकेशन को ReCaptchaV3Provider का इस्तेमाल करने के लिए कॉन्फ़िगर करें:
    1. Google AI Studio में, चैट पैनल पर स्विच करें और असिस्टेंट को प्रोडक्शन के लिए, App Check कॉन्फ़िगरेशन को अपडेट करने के लिए प्रॉम्प्ट दें:
      Please update our Firebase App Check initialization to use
ReCaptchaV3Provider with the reCAPTCHA site key "YOUR_RECAPTCHA_SITE_KEY",
while retaining support for debug tokens in non-production environments.
    2. अगर आपको कोड टैब में सीधे कोड की समीक्षा करनी है, तो पक्का करें कि App Check को शुरू करने का तरीका इस स्ट्रक्चर से मेल खाता हो:
      import { initializeAppCheck, ReCaptchaV3Provider } from "firebase/app-check";

const appCheck = initializeAppCheck(app, {
  provider: new ReCaptchaV3Provider("YOUR_RECAPTCHA_SITE_KEY"),
  isTokenAutoRefreshEnabled: true
});
    3. कोड अपडेट करने के बाद, Google AI Studio में अपने ऐप्लिकेशन को फिर से पब्लिश करें. इससे, App Check का अपडेट किया गया कॉन्फ़िगरेशन आपकी लाइव साइट पर पुश हो जाएगा.
  5. प्रोडक्शन ट्रैफ़िक की पुष्टि करें और App Check पर नज़र रखें:
    1. अपने लाइव ऐप्लिकेशन का यूआरएल, गुप्त ब्राउज़र विंडो में खोलें. इसके बाद, Google खाते से साइन इन करें और दुविधा सबमिट करने की सुविधा को टेस्ट करें.
    2. Firebase कंसोल में App Check पर वापस जाएं. इसके बाद, एपीआई और निगरानी टैब की जांच करें. इससे यह पुष्टि की जा सकेगी कि Firestore और Firebase AI Logic के लिए अनुरोध रजिस्टर हो गए हैं.

9. नतीजा

बधाई हो! आपने Google के बिल्डर स्टैक में मौजूद टूल का इस्तेमाल करके, एआई की सुविधाओं वाला एक काम का ऐप्लिकेशन बनाया है. यह तो बस शुरुआत है. Google के टूल का इस्तेमाल करके, और भी बहुत कुछ किया जा सकता है. अब आपके पास Firebase + Google Cloud प्रोजेक्ट है. आपके लिए उपलब्ध सभी सेवाओं को एक्सप्लोर करें!

बिल्डर जर्नी पूरी की बैज पर दावा करने के लिए, इस लिंक पर जाएं!

अपनी यात्रा जारी रखने के लिए, अगले लैब के लिए goo.gle/builders पर जाएं.

अगर Antigravity 2.0 का इस्तेमाल पहले से किया जा रहा है, तो Google AI Studio से अपने प्रोजेक्ट को तुरंत एक्सपोर्ट किया जा सकता है. Antigravity, Google का एक ऐसा प्लैटफ़ॉर्म है जो एक साथ कई ऑटोनॉमस एजेंट को मैनेज करता है. प्रोजेक्ट को एक्सपोर्ट करने के बाद, उसे Antigravity में इंपोर्ट किया जा सकता है, ताकि उस पर स्थानीय तौर पर काम किया जा सके. Antigravity के पास, Firebase के लिए एजेंट स्किल उपलब्ध हैं. इन्हें एक क्लिक में इंस्टॉल किया जा सकता है. इन स्किल की मदद से, मोबाइल ऐप्लिकेशन भी डेवलप किए जा सकते हैं. इससे, अगर आपको इस ऐप्लिकेशन को Android और iOS, दोनों प्लैटफ़ॉर्म पर इस्तेमाल करना है, तो इसे आसानी से कॉपी किया जा सकता है.