MetaNotes एक AI मीटिंग असिस्टेंट है जो Google Meet, Microsoft Teams और Zoom कॉल में शामिल होकर ट्रांसक्रिप्ट, एक्शन आइटम और बातचीत के सारांश बनाता है। यह एक सार्वजनिक प्रोडक्ट है और इसने अंदरूनी तौर पर Fireflies और tl;dv की जगह ली, क्योंकि उनके गेटेड फीचर्स और बढ़ती स्टोरेज लागत अब टीम की ज़रूरतों में फिट नहीं बैठ रहे थे। मैं इस प्रोजेक्ट का इकलौता फ्रंटएंड इंजीनियर था, फीचर स्कोप, डिप्लॉयमेंट और प्रोडक्ट फैसलों की ज़िम्मेदारी लगभग 5 महीने के बिल्ड में शुरू से आखिर तक मेरी थी।
मैंने क्या बनाया
- ट्रांसक्रिप्ट इंटरफ़ेस: टाइमस्टैंप-सिंक्ड हाइलाइटिंग वाला एक ट्रांसक्रिप्ट व्यूअर बनाया। एक्टिव लाइन वीडियो प्लेबैक पोज़ीशन को ट्रैक करती है, और किसी भी लाइन पर क्लिक करने से प्लेयर उस पल पर पहुंच जाता है।
- मीटिंग इंटेलिजेंस डैशबोर्ड: AI सारांश, एक्शन आइटम ट्रैकिंग, सेंटीमेंट इंडिकेटर और टॉपिक टैग के लिए इंटरैक्टिव व्यू डेवलप किए।
- फ्रंटएंड आर्किटेक्चर: शुरुआती कॉन्सेप्ट से प्रोडक्शन तक इस प्रोजेक्ट का इकलौता फ्रंटएंड इंजीनियर था। फीचर स्कोप, कंपोनेंट आर्किटेक्चर, स्टेट मैनेजमेंट और डिप्लॉयमेंट की ज़िम्मेदारी मेरी थी। बैकएंड पाइपलाइन असिंक और वेबहुक/क्रॉन-ड्रिवन है: ट्रांसक्रिप्ट और सारांश प्रोसेसिंग पूरी होने पर एक बार में लाए जाते हैं, लाइव स्ट्रीम नहीं होते।
यह क्यों मायने रखता था
MetaNotes एक सार्वजनिक SaaS प्रोडक्ट के रूप में लॉन्च हुआ और इसे अंदरूनी तौर पर 200+ Testlify कर्मचारियों ने मीटिंग रिकॉर्डिंग और क्लाइंट कॉल के लिए अपनाया, जिससे Fireflies और tl;dv की जगह ली गई। इससे उन वेंडरों को पहले चुकाई जा रही $24,000 सालाना ऑपरेशनल लागत खत्म हो गई।
प्रोजेक्ट लीड किया, शुरू से आखिर तक ओनरशिप
मैंने MetaNotes को फ्रंटएंड इंजीनियर के तौर पर लीड किया, और ओनरशिप सिर्फ़ UI तक सीमित नहीं थी। फीचर स्कोप, डिप्लॉयमेंट और रोज़मर्रा के प्रोडक्ट फैसले भी मेरे ही थे। पहले कमिट से अंदरूनी लॉन्च तक करीब 5 महीने लगे।
मीटिंग के दौरान नहीं, बाद में क्यों दिखता है ट्रांसक्रिप्ट
MetaNotes कॉल के दौरान ट्रांसक्रिप्ट टेक्स्ट स्ट्रीम नहीं करता। कैप्चर के दौरान UI सिर्फ़ एक स्टेटस बैज (Capturing/Paused) दिखाता है, साथ में पॉज़/रिज़्यूम/स्टॉप कंट्रोल्स। इनजेशन Attendee के वेबहुक (वह मीटिंग-बॉट API जो कॉल में शामिल होकर मीडिया कैप्चर करता है) और कुछ शेड्यूल्ड क्रॉन जॉब्स से होकर गुज़रता है: ट्रांसक्रिप्शन और OpenAI समराइज़ेशन कॉल खत्म होने के बाद असिंक्रोनसली होते हैं, और फ्रंटएंड फाइनल ट्रांसक्रिप्ट, सारांश और एक्शन आइटम एक ही सर्वर एक्शन कॉल में एक बार लाता है।
पांच महीने की टाइमलाइन को देखते हुए, जिसमें फीचर स्कोप, डिप्लॉयमेंट और प्रोडक्ट फैसले भी शामिल थे, लाइव स्ट्रीमिंग उसकी लागत के लायक नहीं थी। इसके लिए एक WebSocket कनेक्शन मैनेज करना पड़ता, पार्शियल-ट्रांसक्रिप्ट रीकंसिलिएशन और रीकनेक्ट हैंडलिंग करनी पड़ती, वह भी सिर्फ़ एक ऐसी क्षमता के लिए (ट्रांसक्रिप्ट को रियल टाइम में बनते देखना) जिसकी यूज़र्स को असल में ज़रूरत नहीं थी। कॉल खत्म होने के बाद असिंक इनजेशन वही ट्रांसक्रिप्ट, सारांश और एक्शन आइटम बहुत कम मूविंग पार्ट्स के साथ देता है, इसलिए यही शिप हुआ।
टाइमस्टैंप-सिंक्ड ट्रांसक्रिप्ट हाइलाइटिंग
वीडियो प्लेयर और ट्रांसक्रिप्ट लिस्ट के बीच एक सीधा टू-वे बाइंडिंग: एक timeupdate लिसनर प्लेबैक पोज़ीशन ट्रैक करता है, ट्रांसक्रिप्ट ऐरे पर एक स्कैन मौजूदा एक्टिव लाइन ढूंढकर हाइलाइट करता है, और किसी भी लाइन पर क्लिक करने से प्लेयर उस टाइमस्टैंप पर पहुंच जाता है। सामान्य मीटिंग लंबाई पर इसके लिए वर्चुअलाइज़्ड लिस्ट या डेडिकेटेड सिंक लाइब्रेरी की ज़रूरत नहीं। इनमें से किसी को भी अपनाना एक ऐसी समस्या हल करना होता जो डेटा के पास अभी है ही नहीं।
डेटा मॉडल और स्केल
- ट्रांसक्रिप्ट हर कन्वर्सेशन के लिए एक ही JSON ब्लॉब के रूप में स्टोर होता है, डेटाबेस लेवल पर चंक या पेजिनेटेड नहीं।
- कन्वर्सेशन और कैलेंडर लिस्ट प्रति पेज 10-20 आइटम पेजिनेट करती हैं।
- OpenAI को समराइज़ेशन कॉल प्रति रिक्वेस्ट 800 आउटपुट टोकन तक सीमित हैं।
मौजूदा मीटिंग वॉल्यूम और लंबाई पर ये फिलहाल ठीक काम कर रहे हैं। सिंगल-ब्लॉब ट्रांसक्रिप्ट कॉलम और लीनियर-स्कैन हाइलाइट लुकअप, ये दो चीज़ें हैं जिन्हें मैं सबसे पहले दोबारा देखूंगा अगर इनमें से कोई भी दस गुना बढ़ जाए। जाने-पहचाने ट्रेडऑफ़, अनजान कमियां नहीं।
बनाना बनाम खरीदना
Testlify Fireflies और tl;dv के लिए पैसे दे रहा था, लेकिन दोनों ही ज़रूरी फीचर्स को ऊंचे प्राइसिंग टियर के पीछे गेट कर देते थे और रिकॉर्डेड-मीटिंग स्टोरेज बढ़ने के साथ महंगे होते जाते थे। अंदरूनी तौर पर बनाने से दोनों बाधाएं खत्म हो गईं; 200+ कर्मचारियों द्वारा मीटिंग रिकॉर्डिंग और क्लाइंट कॉल के लिए अपनाए जाने के बाद, इसने उन वेंडरों पर पहले खर्च होने वाले $24,000 सालाना बचा दिए।
स्टैक
Next.js 16 / React 19 App Router, TypeScript, क्लाइंट स्टेट के लिए Zustand (localStorage पर्सिस्टेंस के साथ), ऑथ के लिए Clerk, UI के लिए Radix + Tailwind, रिकॉर्डिंग प्लेयर के लिए Vidstack, Zoom/Meet/Teams कैप्चर के लिए मीटिंग-बॉट API के रूप में Attendee।