चैटबॉट से परे: Next.js और Smallest.ai के साथ मल्टी-एजेंट वॉयस AI का निर्माण
टूल यूज़ (tool use) के साथ प्रोडक्शन-रेडी वॉइस एआई एजेंट्स बनाने की एक व्यावहारिक गाइड। Smallest.ai द्वारा संचालित तीन अलग-अलग एआई पर्सनालिटीज बनाएं।
इस गाइड में, हम आपको एक मल्टी-एजेंट वॉयस डैशबोर्ड बनाने की प्रक्रिया से रूबरू कराएंगे। हम तीन अलग-अलग एआई व्यक्तित्वों वाला एक एप्लिकेशन बनाएंगे: एक मौसम सहायक, एक टेक न्यूज क्यूरेटर और एक पूरी तरह से इंटरैक्टिव टिक-टैक-टो प्रतिद्वंद्वी।
GitHub रिपोजिटरी: https://github.com/smallest-inc/cookbook/tree/main/voice-agents/atoms_sdk_web_agent
हम क्या बना रहे हैं और क्यों
इसका लक्ष्य वास्तविक समय के वातावरण में फंक्शन कॉलिंग (टूल्स) को लागू करके एक मानक वॉयस बॉट की सीमाओं को आगे बढ़ाना था।
हम एक Next.js एप्लिकेशन बना रहे हैं जहाँ उपयोगकर्ता तीन एजेंटों के बीच स्विच कर सकते हैं:
मौसम एजेंट: लाइव बाहरी डेटा लाता है।
हैकर न्यूज एजेंट: हैकर न्यूज एपीआई का उपयोग करके शीर्ष समाचारों का सारांश प्रस्तुत करता है।
टिक-टैक-टो एजेंट: एक जटिल एजेंट जो गेम की स्थिति को बनाए रखता है, लॉजिक निष्पादित करता है, और वॉयस कमांड के माध्यम से उपयोगकर्ता के खिलाफ एक दृश्य खेल खेलता है।
कॉन्फ़िगरेशन संदर्भ: आप इस प्रोजेक्ट के लिए उपयोग किए गए सटीक सिस्टम प्रॉम्प्ट और टूल डेफिनिशन पा सकते हैं agents-config डायरेक्टरी में। विशेष रूप से, जटिल गेम निर्देशों के लिए tic-tac-toe-agent.md और समाचार क्यूरेटर सेटअप के लिए hackernews-agent.md को देखें।
आर्किटेक्चर अवलोकन
फ्रंटएंड: Next.js (ऐप राउटर), टेलविंड सीएसएस, फ्रेमर मोशन।
वॉयस ऑर्केस्ट्रेशन: Smallest.ai एटम्स एसडीके।
बैकएंड लॉजिक: 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 को इंस्टॉल करके शुरुआत करते हैं।
इंस्टॉलेशन
|
एनवायरनमेंट वेरिएबल्स एक .env.local फ़ाइल बनाएं। आपको अपनी Smallest.ai एपीआई कुंजी और चरण 1 में जनरेट की गई विशिष्ट एजेंट आईडी की आवश्यकता होगी।
|
चरण 3: एजेंट टूल्स बनाना (बैकएंड)
इंटरैक्ट करने के लिए एआई को एपीआई की आवश्यकता होती है। टिक-टैक-टो के लिए, हम गेम लॉजिक को प्रबंधित करने के लिए एलएलएम पर भरोसा नहीं कर सकते (यह चालों को गलत तरीके से मान सकता है)। हम अपने बैकएंड में एक नियतात्मक गेम इंजन बनाते हैं।
कोड संदर्भ: सर्वरलेस गेम लॉजिक एपीआई रूट्स के बीच बंटा हुआ है app/api/tictactoe में और मुख्य नियम इंजन स्थित है app/lib/tictactoe-engine.ts में। यह अलगाव सुनिश्चित करता है कि एपीआई अनुरोध/प्रतिक्रिया चक्र को संभाले जबकि इंजन जीत/हार की गणना और रेडिस स्टोरेज को संभाले।
|
यह रूट सुनिश्चित करता है कि जब उपयोगकर्ता "टॉप लेफ्ट" कहता है, तो बोर्ड अपडेट होता है, सीपीयू मुकाबला करता है, और नई स्थिति सहेजी जाती है—यह सब वॉयस रिस्पॉन्स के विलंबता विंडो के भीतर होता है।
चरण 4: Atoms SDK को एकीकृत करना
अब हम फ्रंटएंड को Smallest.ai वॉयस स्ट्रीम से जोड़ते हैं। हम WebRTC कनेक्शन को संभालने के लिए AtomsClient का उपयोग करते हैं।
क्लाइंट इनिशियलाइजेशन app/page.tsx में, हम क्लाइंट को इनिशियलाइज करते हैं। अपनी एपीआई कुंजियों को सुरक्षित रखने के लिए हमें अपने बैकएंड से एक अस्थायी सत्र टोकन प्राप्त करने के लिए एक तंत्र की आवश्यकता है।
कार्यान्वयन नोट: मुख्य कनेक्शन लॉजिक, इवेंट श्रोता और वॉयस क्लाइंट के लिए स्टेट मैनेजमेंट सभी मुख्य पेज फ़ाइल के भीतर समाहित हैं app/page.tsx पर। इसमें setupEventListeners फ़ंक्शन शामिल है जो वास्तविक समय के ट्रांसक्रिप्शन और फ़ंक्शन कॉल परिणामों को संभालता है।
|
इवेंट्स को संभालना हम ट्रांसक्रिप्शन और, सबसे महत्वपूर्ण बात, फ़ंक्शन कॉल परिणामों को संभालने के लिए श्रोता सेट करते हैं। यह एआई द्वारा कोई क्रिया करने पर यूआई को तुरंत अपडेट करने की अनुमति देता है।
|
चरण 5: अनुभव की कल्पना करना
एक वॉयस एआई को एक चेहरे की आवश्यकता होती है। मैंने एक WaveAvatar घटक बनाया है जो एजेंट के बोलने पर दृश्य प्रतिक्रिया प्रदान करने के लिए ऑडियो स्तरों पर प्रतिक्रिया करता है।
घटक संदर्भ: दृश्य घटक स्थित हैं app/components में। यह देखने के लिए WaveAvatar.tsx देखें कि कैसे ऑडियो स्तर सीएसएस ट्रांसफ़ॉर्म को संचालित करते हैं, और गेम ग्रिड के फ्रेमर मोशन कार्यान्वयन के लिए TicTacToeBoard.tsx देखें।
|
स्वयं प्रयास करें
आप इस लेख की शुरुआत में दिए गए GitHub रिपॉजिटरी लिंक में पूरा सोर्स कोड और सेटअप निर्देश पा सकते हैं। इसे क्लोन करने का प्रयास करें और अपने खुद के एजेंट बनाकर देखें कि आप और क्या बना सकते हैं।
