> ## Documentation Index
> Fetch the complete documentation index at: https://phaseo.app/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Next.js वेब चैट ऐप बनाएं

> मौजूदा Next.js सैंपल चैट ऐप को पूरी गाइड के रूप में इस्तेमाल करें; शुरुआत में कॉपी करने योग्य बिल्ड प्रॉम्प्ट भी है।

अगर आप एक छोटा, वास्तविक उपयोग जैसा Next.js चैट ऐप चाहते हैं और अपनी Phaseo API key सर्वर पर रखना चाहते हैं, तो इस पेज का उपयोग करें।

**लक्ष्य:** ऐसा ब्राउज़र चैट ऐप चलाएं जो मॉडल खोजे और सर्वर-साइड रूट के ज़रिए जवाब भेजे।

**परिणाम:** एक काम करने वाला स्थानीय चैट इंटरफ़ेस, जो Phaseo क्रेडेंशियल ब्राउज़र में उजागर नहीं करता।

<Prompt description="Phaseo Gateway पर **Next.js वेब चैट ऐप** बनाएं।" icon="message-square" actions={["copy", "cursor"]}>
  {`आप Phaseo Gateway के साथ प्रोडक्शन-शैली का छोटा चैट ऐप बना रहे हैं।

    इन सुविधाओं वाला Next.js ऐप बनाएं:
    - चैट UI
    - GET /v1/models से जुड़ा मॉडल पिकर
    - POST /v1/responses को कॉल करने वाला सर्वर-साइड रूट
    - PHASEO_API_KEY का उपयोग करके सर्वर-साइड API key प्रबंधन
    - लोडिंग, सफलता और त्रुटि स्थितियां

    ऐप को जानबूझकर छोटा और जांचने में आसान रखें。

    कार्यान्वयन की आवश्यकताएं:
    - मॉडल खोजने के लिए एक स्थानीय API route इस्तेमाल करें।
    - जवाब जनरेट करने के लिए एक स्थानीय API route इस्तेमाल करें।
    - सीक्रेट केवल सर्वर पर रखें。
    - कोड में अनुरोध/जवाब का प्रवाह स्पष्ट दिखाएं।
    - सेटअप और चलाने के चरणों वाला छोटा README जोड़ें।

    सत्यापन:
    - यदि संभव हो तो ऐप चलाएं।
    - चैट का एक सफल टर्न सत्यापित करें।
    - बदली गई फ़ाइलों, सत्यापित बातों और बाकी मान्यताओं की सटीक जानकारी दें。`}
</Prompt>

## सैंपल प्रोजेक्ट

* GitHub: [examples/web-chat-nextjs](https://github.com/phaseoteam/Phaseo/tree/main/examples/web-chat-nextjs)
* रिपॉज़िटरी में स्थानीय पथ: `examples/web-chat-nextjs`

## यह ऐप क्या करता है

* * उपलब्ध मॉडल लाता है `GET /v1/models`
* * चैट संदेश भेजता है `POST /v1/responses`
* API key को सर्वर पर रखता है
* OAuth की जटिलता के बिना वास्तविक उत्पाद शुरू करने के लिए सरल आधार देता है

## मुख्य फ़ाइलें

* `app/api/models/route.ts`
* `app/api/responses/route.ts`
* `app/components/ChatClient.tsx`
* `lib/gateway.ts`

## सैंपल की संरचना ऐसी क्यों है

### 1. ब्राउज़र सीधे Phaseo को कॉल नहीं करता

UI पहले आपके अपने Next.js रूट से बात करता है। वे रूट सर्वर पर Phaseo को कॉल करते हैं।

इससे आपको मिलता है:

* सर्वर-साइड सीक्रेट प्रबंधन
* हेडर और अनुरोध बॉडी संभालने की एक जगह
* बाद में auth, अनुरोध सीमाएं या लॉगिंग जोड़ने का आसान रास्ता

### 2. मॉडल खोज को जनरेशन से अलग रखा गया है

मॉडल सूची और चैट जनरेशन के लिए अलग रूट रखें, ताकि हर हिस्सा आसानी से समझ में आए:

* मॉडल सूचीबद्ध करने के लिए एक रूट
* चैट अनुरोध चलाने के लिए एक रूट

### 3. UI केवल इंटरैक्शन की स्थिति संभालता है

React क्लाइंट संभालता है:

* इनपुट की स्थिति
* लोडिंग की स्थिति
* त्रुटि दिखाना
* रेंडर किए गए संदेश

सर्वर रूट AI कॉल संभालता है। ब्राउज़र केवल उपयोगकर्ता अनुभव संभालता है।

## ज़रूरी चीज़ें

* * Node.js और समर्थित पैकेज मैनेजर
* Phaseo API key

## सैंपल चलाएं

<CodeGroup>
  ```bash npm theme={null}
  cd examples/web-chat-nextjs
  npm install
  cp .env.example .env.local
  ```

  ```bash pnpm theme={null}
  cd examples/web-chat-nextjs
  pnpm install
  cp .env.example .env.local
  ```

  ```bash yarn theme={null}
  cd examples/web-chat-nextjs
  yarn install
  cp .env.example .env.local
  ```

  ```bash bun theme={null}
  cd examples/web-chat-nextjs
  bun install
  cp .env.example .env.local
  ```
</CodeGroup>

यह सेट करें:

* `PHASEO_API_KEY`
* `NEXT_PUBLIC_GATEWAY_URL`

फिर चलाएं:

<CodeGroup>
  ```bash npm theme={null}
  npm run dev
  ```

  ```bash pnpm theme={null}
  pnpm dev
  ```

  ```bash yarn theme={null}
  yarn dev
  ```

  ```bash bun theme={null}
  bun run dev
  ```
</CodeGroup>

खोलें `http://localhost:3000`.

## काम की जांच करें

* मॉडल पिकर सर्वर रूट से मॉडल लोड करता है।
* संदेश भेजने पर असिस्टेंट का एक जवाब मिलता है।
* ब्राउज़र के नेटवर्क पैनल में `PHASEO_API_KEY`.
* Gateway अनुरोध विफल होने पर UI में उपयोगी त्रुटि स्थिति दिखती है।

## ऐप को अपने मुताबिक बनाएं

* डिफ़ॉल्ट मॉडल को अपने चुने हुए प्रोडक्शन मॉडल से बदलें
* अगर UX में token-by-token आउटपुट चाहिए तो streaming जोड़ें
* ऐप में कई उपयोगकर्ता होने पर बाद में auth जोड़ें
* उच्च-स्तरीय client चाहिए तो बाद में सर्वर रूट के अंदरूनी हिस्से को TypeScript SDK से बदलें

## दूसरा शुरुआती बिंदु कब चुनें

* UI के बजाय स्क्रिप्ट या backend smoke test चाहिए तो Node quickstart इस्तेमाल करें
* पहला integration worker, CLI या backend service में हो तो Python quickstart इस्तेमाल करें

## संबंधित गाइड

* [मिनी ऐप के लिए शुरुआती prompts](./mini-app-starter-prompts.mdx)
* [उदाहरण](../guides/examples.mdx)
* [त्वरित शुरुआत](../quickstart.mdx)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.