मुख्य सामग्री पर जाएँ

Gemini Fullstack LangGraph के साथ शुरुआत करें

React फ्रंटएंड और LangGraph बैकएंड वाला एक फुल-स्टैक डीप AI रिसर्च असिस्टेंट सेट अप करें।
· 10 मि॰ पढ़ें

AI के साथ खोजें

यदि आप Gemini मॉडल से अधिकतम लाभ उठाना चाहते हैं, तो सबसे अच्छा तरीका है कि आप Google Gen AI API को Gemini Fullstack LangGraph चैट एप्लिकेशन के साथ उपयोग करें। यह सेटअप React फ्रंटएंड और LangGraph बैकएंड के साथ एक फुल-स्टैक AI रिसर्च असिस्टेंट प्रदान करता है।

इस ट्यूटोरियल में, आप शुरू से एप्लिकेशन सेट अप करना सीखेंगे: आप फ्रंटएंड और बैकएंड दोनों इंस्टॉल करेंगे, उन्हें एक ही कमांड से साथ में चलाएंगे, और यह सुनिश्चित करने के लिए एप्लिकेशन का परीक्षण करेंगे कि सब कुछ सुचारू रूप से काम कर रहा है। 

इसके बाद, हम Docker का उपयोग करके एप्लिकेशन को डिप्लॉय करना देखेंगे, जो ऐप तक पहुंचने और Gemini मॉडल की अत्यंत सटीक, विस्तृत उत्तर-जनरेशन क्षमताओं का अनुभव करने का एक अधिक शुरुआती-अनुकूल तरीका है।

यदि आप अन्य Gemini- या LangGraph-आधारित प्रोजेक्ट्स की तलाश में हैं, तो हमारे ट्यूटोरियल Gemini 2.5 Pro API: एक गाइड डेमो प्रोजेक्ट के साथ और LangGraph ट्यूटोरियल: LangGraph क्या है और इसका उपयोग कैसे करें? अवश्य पढ़ें। 

1. सेट अप करना

यदि आप Windows का उपयोग कर रहे हैं, तो बेहतर डेवलपमेंट अनुभव के लिए Windows Subsystem for Linux (WSL) का उपयोग करने की अत्यधिक अनुशंसा की जाती है। WSL आपको Windows पर सीधे पूर्ण Linux वातावरण चलाने देता है, जिससे Linux टूल्स का उपयोग करना आसान हो जाता है।

1. PowerShell को Administrator के रूप में खोलें और कमांड wsl --install. चलाएँ। यह डिफ़ॉल्ट रूप से Ubuntu इंस्टॉल करेगा और सिस्टम रीस्टार्ट की आवश्यकता हो सकती है। 

2. रीस्टार्ट के बाद, Start मेनू से Ubuntu लॉन्च करें या PowerShell में wsl टाइप करें।

3. NVM (Node Version Manager) का उपयोग करके Node.js 18 इंस्टॉल करें।

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
source ~/.bashrc
nvm install 18
nvm use 18

4. इंस्टॉल किए गए Node.js का वर्ज़न जाँचें और सुनिश्चित करें कि यह 18 या उससे ऊपर है।

node --version
npm --version
v18.20.8
10.8.2

2. फ्रंटएंड और बैकएंड इंस्टॉल करना

1. Gemini Fullstack LangGraph Quickstart रिपॉजिटरी को क्लोन करें और प्रोजेक्ट डायरेक्टरी में जाएँ:

git clone https://github.com/google-gemini/gemini-fullstack-langgraph-quickstart.git
cd gemini-fullstack-langgraph-quickstart

अब आपकी डायरेक्टरी संरचना इस तरह दिखनी चाहिए:

प्रोजेक्ट डायरेक्टरी

2. Google AI Studio पर जाएँ और एक Gemini API कुंजी जेनरेट करें। 

Google AI Studio API keys

स्रोत: Get API key | Google AI Studio

3. बैकएंड डायरेक्टरी में जाएँ और Gemini API कुंजी के साथ .env फ़ाइल बनाएँ। “YOUR_ACTUAL_API_KEY” को अपनी जेनरेट की गई कुंजी से बदलें।

4. PIP कमांड का उपयोग करके सभी Python पैकेज इंस्टॉल करें। 

cd backend                                
echo 'GEMINI_API_KEY="YOUR_ACTUAL_API_KEY"' > .env
pip install .

5. प्रोजेक्ट रूट पर लौटें और फ्रंटएंड डायरेक्टरी में जाएँ। npm का उपयोग करके फ्रंटएंड डिपेंडेंसीज़ इंस्टॉल करें।

cd ..
cd frontend                               
npm install  

3. एप्लिकेशन चलाना 

जब आप सभी डिपेंडेंसीज़ इंस्टॉल कर लें, तो आप प्रोजेक्ट रूट से डेवलपमेंट मोड में फ्रंटएंड और बैकएंड सर्वर दोनों शुरू कर सकते हैं।

1. अपने प्रोजेक्ट की रूट डायरेक्टरी से यह चलाएँ:

make dev

यह कमांड डेवलपमेंट मोड में फ्रंटएंड (Vite का उपयोग करके) और बैकएंड (LangGraph/FastAPI का उपयोग करके) दोनों लॉन्च करेगा।

2. फ्रंटएंड Vite द्वारा संचालित है, जो वेब प्रोजेक्ट्स के लिए तेज़ और प्रभावी डेवलपमेंट अनुभव प्रदान करने वाला एक आधुनिक बिल्ड टूल है। 

> [email protected] dev
> vite


  VITE v6.3.4  ready in 392 ms

  ➜  Local:   http://localhost:5173/app/
  ➜  Network: use --host to expose

3. बैकएंड सर्वर शुरू होगा और इस तरह की जानकारी दिखाएगा:

INFO:langgraph_api.cli:

        Welcome to

╦  ┌─┐┌┐┌┌─┐╔═╗┬─┐┌─┐┌─┐┬ ┬
║  ├─┤││││ ┬║ ╦├┬┘├─┤├─┘├─┤
╩═╝┴ ┴┘└┘└─┘╚═╝┴└─┴ ┴┴  ┴ ┴

- 🚀 API: http://127.0.0.1:2024
- 🎨 Studio UI: https://smith.langchain.com/studio/?baseUrl=http://127.0.0.1:2024
- 📚 API Docs: http://127.0.0.1:2024/docs

This in-memory server is designed for development and testing.
For production use, please use LangGraph Cloud.
  • बैकएंड API: http://127.0.0.1:2024
  • API प्रलेखन: http://127.0.0.1:2024/docsआप इस OpenAPI प्रलेखन का उपयोग करके अपने ब्राउज़र से सीधे बैकएंड एंडपॉइंट्स का परीक्षण कर सकते हैं।
  • LangGraph Studio UI: https://smith.langchain.com/studio/?baseUrl=http://127.0.0.1:2024यह डैशबोर्ड आपको अपने LangGraph वर्कफ़्लो को विज़ुअलाइज़ और टेस्ट करने देता है।

4. आप LangGraph Studio UI पर जाकर LangGraph वर्कफ़्लो का परीक्षण कर सकते हैं। 

Langsmith डैशबोर्ड

स्रोत: smith.langchain.com

बैकएंड API यहाँ उपलब्ध है: http://127.0.0.1:2024. API प्रलेखन यहाँ उपलब्ध है: http://127.0.0.1:2024/docs. आप OpenAPI प्रलेखन का उपयोग करके प्रत्येक बैकएंड एंडपॉइंट का परीक्षण कर सकते हैं।

FastAPI docs

अपने ब्राउज़र में http://localhost:5173/app/ खोलें ताकि चैट एप्लिकेशन इंटरफ़ेस तक पहुँच सकें। यह चैट एप्लिकेशन ChatGPT जैसा है। बस अपना प्रश्न लिखें और यह अपना जादू दिखाना शुरू कर देगा। 

Gemini Fullstack LangGraph ऐप UI

बैकएंड पर चैट एप्लिकेशन इस तरह काम करता है:

  1. उपयोगकर्ता के इनपुट के आधार पर, यह Gemini मॉडल का उपयोग करके प्रारंभिक सर्च क्वेरी का सेट जेनरेट करता है।
  2. प्रत्येक क्वेरी के लिए, यह Google Search API के साथ Gemini मॉडल का उपयोग करके प्रासंगिक वेब पेज ढूँढता है।
  3. एजेंट Gemini मॉडल का उपयोग कर रिफ्लेक्शन के माध्यम से सर्च परिणामों का विश्लेषण करता है और नॉलेज गैप्स की पहचान करता है।
  4. यदि गैप्स मिलते हैं, तो यह फॉलो-अप क्वेरी जेनरेट करता है और रिसर्च व रिफ्लेक्शन चरणों को दोहराता है (निर्धारित सीमा तक)।
  5. जब पर्याप्त जानकारी एकत्र हो जाती है, तो एजेंट उद्धरणों के साथ एक सुसंगत उत्तर तैयार करता है।

AI रिसर्च असिस्टेंट द्वारा बनाया गया उत्तर

क्योंकि यह एप्लिकेशन अभी शुरुआती चरण में है, आपको कुछ बग्स और असंगतताएँ मिल सकती हैं, विशेष रूप से फ्रंटएंड इंटरफ़ेस में। एक सामान्य समस्या है असंगत फ्रंटएंड रेंडरिंग।

इसे ठीक करने के लिए, frontend/src/App.tsx में पंक्ति 57 को इस प्रकार अपडेट करें:

-           : `Need more information, searching for ${event.reflection.follow_up_queries.join(
+           : `Need more information, searching for ${(event.reflection.follow_up_queries || []).join(

4. Docker का उपयोग करके एप्लिकेशन डिप्लॉय करना

Docker के साथ अपना एप्लिकेशन डिप्लॉय करना सरल और कुशल है। Docker आपको अपने ऐप और उसकी डिपेंडेंसीज़ को एक एकल कंटेनर में पैकेज करने देता है।

1. अपने ऑपरेटिंग सिस्टम (Windows, macOS, या Linux) के लिए Docker Desktop डाउनलोड और इंस्टॉल करें। इंस्टॉलर और विस्तृत निर्देश आधिकारिक Docker वेबसाइट पर मिलेंगे। इंस्टॉल होने के बाद, Docker Desktop लॉन्च करें और सुनिश्चित करें कि यह ठीक से चल रहा है।

2. प्रोजेक्ट रूट डायरेक्टरी में जाएँ और Docker इमेज बनाने के लिए अपने टर्मिनल में निम्न कमांड चलाएँ:

docker build -t gemini-fullstack-langgraph -f Dockerfile .

3. एप्लिकेशन चलाने के लिए, आपको दो API कुंजियाँ चाहिए होंगी:

  • Gemini API Key: इसे Google AI Studio से प्राप्त करें।
  • LangSmith API Key: आधिकारिक LangSmith वेबसाइट पर जाएँ, एक निःशुल्क खाता बनाएँ, और अपनी API कुंजी जेनरेट करें।

Langsmith API कुंजियाँ जेनरेट करना

स्रोत: LangSmith

4. Docker Compose का उपयोग करके एप्लिकेशन शुरू करें, और placeholders को अपनी वास्तविक API कुंजियों से बदलें:

GEMINI_API_KEY=<your_gemini_api_key> LANGSMITH_API_KEY=<your_langsmith_api_key> docker-compose up

5. एप्लिकेशन तक पहुँचें:

  • फ्रंटएंड: http://localhost:8123/app/
  • API प्रलेखन: http://localhost:8123/docs

5. एप्लिकेशन का परीक्षण 

अपने वेब ब्राउज़र में http://localhost:8123/app/ पर जाएँ। इनपुट बॉक्स में यह प्रश्न टाइप करें “List the top 5 news headlines.”

प्रश्न सबमिट करने के बाद, एप्लिकेशन अपना रिसर्च प्रोसेस शुरू करेगा। आप चरण-दर-चरण देखेंगे कि एजेंट आपके प्रश्न का उत्तर देने के लिए जानकारी कैसे एकत्र कर रहा है और उसका विश्लेषण कर रहा है।

Gemini Fullstack LangGraph ऐप का परीक्षण

एप्लिकेशन विस्तृत उत्तर प्रदान करेगा, जिसमें संबंधित प्रकाशनों के सीधे लिंक शामिल होंगे। उत्तरों की गुणवत्ता और गहराई अक्सर अन्य डीप रिसर्च टूल्स से बेहतर होती है, जो परिणामों में अधिक पारदर्शिता और संदर्भ देती है।

Gemini Fullstack LangGraph ऐप का परीक्षण

और भी गहरी समझ के लिए, अपना LangSmith डैशबोर्ड देखें। यहाँ, आप एजेंट द्वारा आपका उत्तर बनाने के लिए उठाए गए हर कदम का विस्तृत लॉग देख सकते हैं। यह विस्तृत ट्रेस आपको एजेंट की तर्क प्रक्रिया समझने में मदद करता है और बताता है कि उत्तर कैसे तैयार किए गए।

Langsmith विस्तृत एजेंट रन लॉग्स

स्रोत: LangSmith

निष्कर्ष

10 मिनट से भी कम समय में, आप Docker इमेज बना सकते हैं और Google Gemini तथा LangSmith द्वारा प्रदान किए गए निःशुल्क APIs का उपयोग करके अपना खुद का डीप रिसर्च AI एप्लिकेशन स्थानीय रूप से लॉन्च कर सकते हैं। 

इस गाइड ने आपको एक सरल इम्प्लीमेंटेशन के माध्यम से ले जाकर दिखाया कि Gemini मॉडल सही टूल्स की पहचान करने, अत्यधिक विस्तृत, सटीक और ताज़ा रिसर्च उत्तर उत्पन्न करने की क्षमता में कैसे प्रगति कर रहा है।

आपने सीखा कि एप्लिकेशन कैसे सेट अप करें, बैकएंड और फ्रंटएंड दोनों इंस्टॉल करें, और सब कुछ लोकली चलाएँ। इसके अतिरिक्त, हमने Docker का उपयोग करके एक वैकल्पिक डिप्लॉयमेंट विधि भी कवर की, जिससे शुरुआत करना और डीप रिसर्च AI की शक्ति का अनुभव करना और भी आसान हो जाता है।

यदि आप अपने अगले प्रोजेक्ट की तलाश में हैं, तो हमारा गाइड देखें: Gemini Diffusion: 8 व्यावहारिक उदाहरणों के साथ एक गाइड।

Abid Ali Awan

लेखक

Abid Ali Awan

एक प्रमाणित डेटा साइंटिस्ट के रूप में, मैं अत्याधुनिक तकनीक का उपयोग करके नवाचारी मशीन लर्निंग अनुप्रयोग बनाने के लिए उत्साहित रहता/रहती हूँ। स्पीच रिकॉग्निशन, डेटा विश्लेषण और रिपोर्टिंग, MLOps, संवादात्मक AI और NLP में मजबूत पृष्ठभूमि के साथ, मैंने ऐसे बुद्धिमान सिस्टम विकसित करने में अपनी विशेषज्ञता निखारी है जो वास्तविक प्रभाव डाल सकें। तकनीकी दक्षता के अलावा, मैं जटिल अवधारणाओं को स्पष्ट और संक्षिप्त भाषा में प्रस्तुत करने में भी निपुण हूँ। परिणामस्वरूप, मैं डेटा साइंस पर एक मांग में रहने वाला/वाली ब्लॉगर बन गया/गई हूँ, और डेटा प्रोफेशनलों के बढ़ते समुदाय के साथ अपने अनुभव और विचार साझा करता/करती हूँ। वर्तमान में, मैं कंटेंट निर्माण और संपादन पर केंद्रित हूँ, बड़े भाषा मॉडलों के साथ काम करते हुए ऐसा प्रभावशाली और आकर्षक कंटेंट विकसित कर रहा/रही हूँ जो व्यवसायों और व्यक्तियों दोनों को अपने डेटा का अधिकतम लाभ उठाने में मदद कर सके।

विषय