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

​

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

• GitHub: 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 को कॉल नहीं करता

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

​

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

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

​

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

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

​

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

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

​

सैंपल चलाएं

cd examples/web-chat-nextjs
npm install
cp .env.example .env.local

cd examples/web-chat-nextjs
pnpm install
cp .env.example .env.local

cd examples/web-chat-nextjs
yarn install
cp .env.example .env.local

cd examples/web-chat-nextjs
bun install
cp .env.example .env.local

• PHASEO_API_KEY
• NEXT_PUBLIC_GATEWAY_URL

npm run dev

pnpm dev

yarn dev

bun run dev

​

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

• मॉडल पिकर सर्वर रूट से मॉडल लोड करता है।
• संदेश भेजने पर असिस्टेंट का एक जवाब मिलता है।
• ब्राउज़र के नेटवर्क पैनल में 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
• उदाहरण
• त्वरित शुरुआत