चैटबॉट से परे: Next.js और Smallest.ai के साथ मल्टी-एजेंट वॉयस AI का निर्माण
टूल यूज़ (tool use) के साथ प्रोडक्शन-रेडी वॉइस AI एजेंट्स बनाने की एक व्यावहारिक गाइड। Smallest.ai, Next.js API रूट्स और एक डिटरमिनिस्टिक गेम इंजन द्वारा संचालित तीन अलग-अलग AI पर्सनालिटीज़ बनाएं।
इस गाइड में, हम आपको एक मल्टी-एजेंट वॉयस डैशबोर्ड बनाने की प्रक्रिया से रूबरू कराएंगे। हम तीन अलग-अलग एआई व्यक्तित्वों वाली एक एप्लिकेशन बनाएंगे: एक मौसम सहायक, एक टेक न्यूज क्यूरेटर और एक पूरी तरह से इंटरैक्टिव टिक-टैक-टो प्रतिद्वंद्वी।
गिटहब रिपॉजिटरी: https://github.com/smallest-inc/cookbook/tree/main/voice-agents/atoms_sdk_web_agent
हम क्या बना रहे हैं और क्यों
हमारा उद्देश्य रीयल-टाइम वातावरण में फ़ंक्शन कॉलिंग (टूल्स) को लागू करके एक मानक वॉयस बॉट की सीमाओं को पार करना था।
हम एक Next.js एप्लिकेशन बना रहे हैं जहाँ उपयोगकर्ता तीन एजेंटों के बीच स्विच कर सकते हैं:
वेदर एजेंट (Weather Agent): लाइव बाहरी डेटा प्राप्त करता है।
हैकर न्यूज एजेंट (Hacker News Agent): हैकर न्यूज एपीआई का उपयोग करके शीर्ष समाचारों का सारांश तैयार करता है।
टिक-टैक-टो एजेंट (Tic-Tac-Toe Agent): एक जटिल एजेंट जो खेल की स्थिति को बनाए रखता है, लॉजिक निष्पादित करता है, और वॉयस कमांड के माध्यम से उपयोगकर्ता के खिलाफ एक विजुअल गेम खेलता है।
कॉन्फ़िगरेशन संदर्भ: आप इस प्रोजेक्ट के लिए उपयोग किए गए सटीक सिस्टम प्रॉम्प्ट और टूल डेफिनिशन को agents-config डायरेक्टरी में पा सकते हैं। विशेष रूप से, जटिल गेम निर्देशों के लिए tic-tac-toe-agent.md और न्यूज क्यूरेटर सेटअप के लिए hackernews-agent.md को देखें।
आर्किटेक्चर अवलोकन
फ्रंटएंड: Next.js (ऐप राउटर), टेलविंड सीएसएस (Tailwind CSS), फ्रेमर मोशन (Framer Motion)।
वॉयस ऑर्केस्ट्रेशन (Voice Orchestration): Smallest.ai एटम्स एसडीके (Atoms SDK)।
बैकएंड लॉजिक: Next.js एपीआई रूट्स (एआई के लिए टूल्स के रूप में कार्य करते हुए)।
चरण 1: एजेंट कॉन्फ़िगरेशन
कोड लिखने से पहले, हमें Smallest.ai प्लेटफॉर्म पर इस ऑपरेशन के "दिमाग" को कॉन्फ़िगर करना होगा। हमें तीन अलग-अलग एजेंटों की आवश्यकता है, जिनमें से प्रत्येक के अपने विशिष्ट सिस्टम प्रॉम्प्ट और टूल डेफिनिशन होंगे।
टिक-टैक-टो एजेंट
यह सबसे जटिल एजेंट है। इसके लिए एआई को 3x3 ग्रिड को समझने और एक विशिष्ट gameId को याद रखने की आवश्यकता होती है।
सिस्टम प्रॉम्प्ट रणनीति: हम एआई को 'O' के रूप में खेलने और बोर्ड को 0-8 नंबर वाले ग्रिड के रूप में मानने का निर्देश देते हैं। महत्वपूर्ण बात यह है कि हम इसे स्टार्ट कमांड से प्राप्त gameId को सहेजने और उसे बाद के मूव कमांड में पास करने के लिए कहते हैं।
टूल डेफिनिशन: हम Smallest.ai डैशबोर्ड में तीन टूल्स को परिभाषित करते हैं जो हमारे स्थानीय एपीआई रूट्स से मैप होते हैं:
new_game: एक सत्र शुरू करने के लिए POST अनुरोध।
make_move:
gameIdऔरposition(0-8) लेने वाला POST अनुरोध।get_state: बोर्ड की स्थिति की जांच करने के लिए GET अनुरोध।
हैकर न्यूज और वेदर एजेंट
ये सरल GET अनुरोधों का उपयोग करते हैं। हैकर न्यूज एजेंट शीर्ष कहानियों को प्राप्त करने और उनका सारांश प्रस्तुत करने के लिए हमारे द्वारा बनाए जाने वाले प्रॉक्सी एंडपॉइंट को हिट करता है, जबकि वेदर एजेंट OpenWeatherMap के साथ इंटरैक्ट करता।
चरण 2: प्रोजेक्ट सेटअप और डिपेंडेंसीज
हम Next.js प्रोजेक्ट को इनिशियलाइज़ करके और वॉयस हैंडलिंग और स्टेट मैनेजमेंट के लिए आवश्यक विशिष्ट SDKs को इंस्टॉल करके शुरुआत करते हैं।
इंस्टॉलेशन
|
एन्वायरमेंट वेरिएबल्स (Environment Variables): एक .env.local फ़ाइल बनाएं। आपको अपनी Smallest.ai एपीआई कुंजी और चरण 1 में उत्पन्न अद्वितीय एजेंट आईडी की आवश्यकता होगी।
|
चरण 3: एजेंट टूल्स का निर्माण (बैकएंड)
एआई को बातचीत करने के लिए एपीआई की आवश्यकता होती है। टिक-टैक-टो के लिए, हम गेम लॉजिक को प्रबंधित करने के लिए एलएलएम (LLM) पर भरोसा नहीं कर सकते (यह चालों को लेकर भ्रमित हो सकता है)। हम अपने बैकएंड में एक नियतात्मक (deterministic) गेम इंजन बनाते हैं।
कोड संदर्भ: सर्वरलेस गेम लॉजिक को app/api/tictactoe के एपीआई रूट्स और app/lib/tictactoe-engine.ts में स्थित कोर रूल्स इंजन के बीच विभाजित किया गया है। यह अलगाव सुनिश्चित करता है कि एपीआई अनुरोध/प्रतिक्रिया चक्र को संभाले जबकि इंजन जीत/हार की गणना और रेडिस (Redis) स्टोरेज को संभाले।
|
यह रूट यह सुनिश्चित करता है कि जब उपयोगकर्ता "टॉप लेफ्ट" कहता है, तो बोर्ड अपडेट होता है, सीपीयू जवाबी चाल चलता है, और नई स्थिति सहेजी जाती है—यह सब आवाज प्रतिक्रिया की विलंबता (latency) सीमा के भीतर होता है।
चरण 4: एटम्स एसडीके (Atoms SDK) को एकीकृत करना
अब हम फ्रंटएंड को Smallest.ai वॉयस स्ट्रीम से जोड़ते हैं। हम WebRTC कनेक्शन को संभालने के लिए AtomsClient का उपयोग करते हैं।
क्लाइंट इनिशियलाइजेशन: app/page.tsx में, हम क्लाइंट को इनिशियलाइज करते हैं। हमें अपनी एपीआई कुंजियों को सुरक्षित रखने के लिए अपने बैकएंड से एक अस्थायी सत्र टोकन प्राप्त करने के लिए एक सिस्टम की आवश्यकता होती है।
कार्यान्वयन नोट: वॉयस क्लाइंट के लिए मुख्य कनेक्शन लॉजिक, इवेंट लिस्टनर्स और स्टेट मैनेजमेंट सभी मुख्य पेज फ़ाइल app/page.tsx के भीतर निहित हैं। इसमें setupEventListeners फ़ंक्शन शामिल है जो रीयल-टाइम ट्रांसक्रिप्शन और फ़ंक्शन कॉल के परिणामों को संभालता है।
|
इवेंट्स को संभालना: हम ट्रांसक्रिप्शन और विशेष रूप से फ़ंक्शन कॉल के परिणामों को संभालने के लिए लिस्टनर्स सेट करते हैं। यह एआई द्वारा कोई कार्रवाई करने पर यूआई को तुरंत अपडेट करने की अनुमति देता है।
|
चरण 5: अनुभव को विज़ुअलाइज़ करना
एक वॉयस एआई को एक चेहरे की आवश्यकता होती है। मैंने एक WaveAvatar घटक बनाया है जो एजेंट के बोलते समय दृश्य प्रतिक्रिया (visual feedback) प्रदान करने के लिए ऑडियो स्तरों पर प्रतिक्रिया करता है।
घटक संदर्भ: विज़ुअल घटक app/components में स्थित हैं। यह देखने के लिए कि ऑडियो स्तर सीएसएस ट्रांसफॉर्म को कैसे संचालित करते हैं, WaveAvatar.tsx देखें, और गेम ग्रिड के फ्रेमर मोशन कार्यान्वयन के लिए TicTacToeBoard.tsx देखें।
|
इसे स्वयं आज़माएं
आप इस लेख की शुरुआत में दिए गए गिटहब लिंक पर पूरा सोर्स कोड और सेटअप निर्देश पा सकते हैं। इसे क्लोन करने का प्रयास करें और अपने स्वयं के एजेंट बनाएं ताकि आप देख सकें कि आप और क्या बना सकते हैं।
