सभी काम

केस स्टडी

Fenado AI

एजेंटिक AI प्लेटफ़ॉर्म जो टेक्स्ट प्रॉम्प्ट को फ़ंक्शनल वेब एप्लिकेशन में बदलता है।

50K

ऐप जनरेट करने वाले उपयोगकर्ता

फ़ुल-स्टैक

एक प्रॉम्प्ट से आउटपुट

रियल-टाइम

WebSocket जनरेशन

प्रोडक्शन
fenado.ai
Fenado AI लैंडिंग पेज जो AI ऐप जनरेशन प्लेटफ़ॉर्म दिखा रहा है

चुनौती

एक AI जो कोड लिखता है, स्निपेट नहीं

ज़्यादातर AI कोड टूल टुकड़े बनाते हैं। यहाँ एक फ़ंक्शन, वहाँ एक कंपोनेंट। Fenado के संस्थापक कुछ अलग चाहते थे: एक प्लेटफ़ॉर्म जहाँ उपयोगकर्ता "मुझे एक इन्वेंट्री मैनेजमेंट सिस्टम बनाओ" लिखे और React फ़्रंटएंड, FastAPI बैकएंड, MongoDB डेटाबेस, और JWT ऑथेंटिकेशन वाला एक काम करने वाला एप्लिकेशन मिले। कोई मैन्युअल वायरिंग नहीं। कोई कॉपी-पेस्ट असेंबली नहीं।

तकनीकी समस्या की तीन परतें थीं। पहला, AI एजेंट को एक अस्पष्ट प्रॉम्प्ट को विशिष्ट स्क्रीन, डेटा मॉडल, और API रूट्स में विभाजित करना था। दूसरा, हर स्क्रीन को WebSockets पर रियल-टाइम में रेंडर होना था ताकि उपयोगकर्ता अपना एप्लिकेशन बनते हुए देख सकें। तीसरा, आउटपुट को कंपाइल और चलना था। टूटे हुए इम्पोर्ट या गायब डिपेंडेंसी पहली जनरेशन पर भरोसा तोड़ देते।

बिज़नेस मॉडल को तीन स्तरों ($199/माह, $1,999/माह, $9,999/माह) पर Stripe सब्सक्रिप्शन बिलिंग, प्रति-सदस्य बजट नियंत्रण के साथ टीम सहयोग, और लोकल डेवलपमेंट के लिए macOS डेस्कटॉप ऐप की ज़रूरत थी। यह सब एक ही प्रोडक्ट के रूप में शिप होना था।

हमने क्या बनाया

प्रॉम्प्ट अंदर। एप्लिकेशन बाहर।

LangChain के साथ एजेंटिक AI पाइपलाइन

उपयोगकर्ता एक टेक्स्ट प्रॉम्प्ट सबमिट करता है। LangChain एजेंट उस प्रॉम्प्ट को एक संरचित योजना में तोड़ते हैं: स्क्रीन, डेटा मॉडल, API एंडपॉइंट, और कंपोनेंट हायरार्की। प्रत्येक एजेंट एक चिंता संभालता है। प्लानर एजेंट एप्लिकेशन आर्किटेक्चर मैप करता है। डिज़ाइनर एजेंट स्क्रीन लेआउट जनरेट करता है। कोड एजेंट React कंपोनेंट और FastAPI रूट लिखता है। एजेंट एक साझा स्टेट ग्राफ़ के ज़रिए समन्वय करते हैं, बिना री-प्रॉम्प्ट किए आर्टिफ़ैक्ट आगे पास करते हैं।

Fenado AI ऐप बिल्डर इंटरफ़ेस जो जनरेशन वर्कफ़्लो दिखा रहा है

WebSockets पर रियल-टाइम जनरेशन

उपयोगकर्ता अपना एप्लिकेशन ब्राउज़र में असेंबल होते देखते हैं। जैसे ही प्रत्येक LangChain एजेंट एक स्टेप पूरा करता है, सर्वर WebSocket कनेक्शन के ज़रिए रिज़ल्ट पुश करता है। स्क्रीन डिज़ाइन एक-एक करके दिखाई देते हैं। कोड फ़ाइलें प्रोजेक्ट ट्री में स्ट्रीम होती हैं। प्रोग्रेस इंडिकेटर दिखाते हैं कौन सा एजेंट सक्रिय है और क्या प्रोड्यूस करता है। इस फ़ीडबैक लूप ने 60-सेकंड की प्रतीक्षा को एक आकर्षक बिल्ड अनुभव में बदल दिया।

Fenado AI फ़ीचर सेक्शन जो रियल-टाइम जनरेशन क्षमताएँ दिखा रहा है

फ़ुल-स्टैक एप्लिकेशन आउटपुट

हर जनरेट किया गया एप्लिकेशन shadcn/ui कंपोनेंट के साथ React 19 फ़्रंटएंड, MongoDB के साथ FastAPI बैकएंड, और पहले से बने JWT ऑथेंटिकेशन के साथ शिप होता है। टेम्पलेट सिस्टम सुसंगत प्रोजेक्ट संरचना लागू करता है: API रूट RESTful कन्वेंशन फ़ॉलो करते हैं, डेटाबेस मॉडल में वैलिडेशन शामिल है, और फ़्रंटएंड टाइप्ड API क्लाइंट के ज़रिए बैकएंड से कनेक्ट होता है। उपयोगकर्ता एक कमांड से चलने वाला प्रोजेक्ट डाउनलोड या डिप्लॉय करते हैं।

Fenado AI अतिरिक्त प्लेटफ़ॉर्म सेक्शन जो जनरेट किया गया एप्लिकेशन आउटपुट दिखा रहे हैं

Stripe बिलिंग और टीम सहयोग

तीन Stripe सब्सक्रिप्शन टियर एक्सेस नियंत्रित करते हैं: Business $199/माह, Business Plus $1,999/माह, और Business Express $9,999/माह पर। प्रत्येक टियर जनरेशन लिमिट और फ़ीचर गेट्स सेट करता है। टीम मालिक ईमेल से सदस्यों को आमंत्रित करते हैं, प्रति-सदस्य बजट असाइन करते हैं, और संगठन भर में जनरेशन उपयोग ट्रैक करते हैं। Stripe webhooks बिना मैन्युअल हस्तक्षेप के अपग्रेड, डाउनग्रेड, और विफल भुगतान संभालते हैं।

Fenado AI प्लेटफ़ॉर्म ओवरव्यू जो सब्सक्रिप्शन टियर दिखा रहा है

प्लेटफ़ॉर्म इंफ़्रास्ट्रक्चर

  • स्क्रीन-दर-स्क्रीन AI डिज़ाइन जनरेशन। प्लानर एजेंट कोड एजेंट के लिखने से पहले प्रत्येक स्क्रीन को मैप करता है, ताकि आउटपुट एक सुसंगत विज़ुअल हायरार्की का पालन करे।
  • लोकल डेवलपमेंट के लिए macOS डेस्कटॉप ऐप। उपयोगकर्ता ब्राउज़र में एप्लिकेशन जनरेट करते हैं, फिर उन्हें डेस्कटॉप ऐप में खोलकर एडिट, रन और डिप्लॉय करते हैं।
  • रोल-आधारित एक्सेस कंट्रोल के साथ Firebase ऑथेंटिकेशन, व्यक्तिगत उपयोगकर्ताओं को टीम मालिकों और संगठन सदस्यों से अलग करता है।
  • ओपिनियनेटेड डिफ़ॉल्ट के साथ टेम्पलेट सिस्टम: बैकएंड पर FastAPI + MongoDB, फ़्रंटएंड पर React 19 + shadcn/ui, और दोनों लेयर्स में JWT ऑथ प्री-वायर्ड।

आर्किटेक्चर

पाइपलाइन कैसे काम करती है

चरण 1

प्रॉम्प्ट इनटेक

उपयोगकर्ता सादे टेक्स्ट में बताता है कि उसे क्या चाहिए। प्लानर एजेंट प्रॉम्प्ट को एक संरचित स्पेसिफ़िकेशन में पार्स करता है: स्क्रीन काउंट, डेटा एंटिटीज़, रिलेशनशिप, और ऑथेंटिकेशन रिक्वायरमेंट।

चरण 2

स्क्रीन डिज़ाइन

डिज़ाइनर एजेंट स्क्रीन-दर-स्क्रीन लेआउट जनरेट करता है। प्रत्येक स्क्रीन अंतिम एप्लिकेशन में एक रूट से मैप होती है। कंपोनेंट प्लेसमेंट, डेटा बाइंडिंग, और नेविगेशन फ़्लो कोई भी कोड लिखने से पहले परिभाषित होते हैं।

चरण 3

कोड जनरेशन

कोड एजेंट React कंपोनेंट, FastAPI रूट, MongoDB मॉडल, और JWT मिडलवेयर लिखता है। प्रत्येक फ़ाइल पूरा होने पर WebSockets के ज़रिए क्लाइंट को स्ट्रीम होती है। आउटपुट टेम्पलेट सिस्टम के कन्वेंशन का पालन करता है।

चरण 4

आउटपुट

असेंबल किए गए प्रोजेक्ट में एक काम करने वाला फ़्रंटएंड, बैकएंड, डेटाबेस स्कीमा, और ऑथेंटिकेशन लेयर शामिल है। उपयोगकर्ता प्रोजेक्ट डाउनलोड करते हैं या macOS डेस्कटॉप ऐप में खोलते हैं। एप्लिकेशन एक ही कमांड से चलता है।

Next.js (App Router) React 19 TypeScript Tailwind CSS shadcn/ui LangChain Python FastAPI MongoDB Firebase Stripe WebSockets JWT

परिणाम

प्रोडक्शन नंबर

50K

फ़ंक्शनल वेब एप्लिकेशन जनरेट करने वाले उपयोगकर्ता

फ़ुल-स्टैक

एक ही प्रॉम्प्ट से फ़्रंटएंड + बैकएंड + API

3 टियर

$199 से $9,999/माह तक Stripe सब्सक्रिप्शन प्लान

संपर्क करें

बातचीत शुरू करें

हमें अपने प्रोजेक्ट के बारे में बताएं। हम 24 घंटे के भीतर एक स्पष्ट योजना, अनुमानित समयसीमा और मूल्य सीमा के साथ जवाब देंगे।

ईमेल

hello@savibm.com

स्थित

UAE और भारत