Generative UI अब नया फ्रंटएंड है

यहाँ आपके लिए Hindi (हिन्दी) अनुवाद दिया गया है। Markdown संरचना, कोड ब्लॉक, टैग, और ब्रांड नामों को यथावत रखा गया है, साथ ही भाषा को स्वाभाविक और मूल जैसा बनाया गया है।

फ्रंटएंड पहले एक निश्चित चीज़ हुआ करता था। डिज़ाइनर इसे बनाते थे। इंजीनियर इसे कोड करते थे। उपयोगकर्ताओं को वही मिलता था जो शिप होता था।

वो समय खत्म हो गया।

2026 में शिप होने वाले इंटरफ़ेस आंशिक रूप से एजेंट द्वारा ही, रीयल टाइम में, उपयोगकर्ता ने वास्तव में क्या मांगा, उसके आधार पर बनाए जाते हैं। टेबल मांगें, टेबल मिलेगी। उसका वर्णन करने वाला पैराग्राफ नहीं।

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

लेकिन इसे बनाने का एक ही तरीका नहीं है। तीन हैं। और ज़्यादातर टीमें यह जाने बिना कि उन्होंने कोई विकल्प चुना है, एक को चुन लेती हैं।

प्रोटोकॉल स्टैक

तीन प्रोटोकॉल। हर एक एक काम करता है।

MCP एजेंटों को टूल से जोड़ता है। A2A एजेंटों को एक-दूसरे से जोड़ता है। AG-UI एजेंटों को उपयोगकर्ताओं से जोड़ता है।

AG-UI स्ट्रीमिंग लेयर है जो नीचे आप जो कुछ भी देखेंगे उसे ले जाती है: टूल कॉल, A2UI स्कीमा, MCP App इवेंट, स्टेट डेल्टा। SSE पर चलता है। स्टेट उसी स्ट्रीम पर दोनों दिशाओं में बहता है। उपयोगकर्ता एडिट करता है, एजेंट देखता है। एजेंट बदलता है, उपयोगकर्ता देखता है।

A2UI Google का स्पेक है जो एजेंटों द्वारा UI को स्कीमा के रूप में उत्सर्जित करने के लिए है। यह AG-UI पर सवार होता है। CopilotKit इसे प्रोडक्शन में शिप करता है।

आप इनमें से किसी के लिए पार्सर नहीं लिखते। CopilotKit एक AG-UI क्लाइंट है और आपके लिए स्ट्रीम को डीकोड करता है।

तीन पैटर्न जिन्हें ज़्यादातर टीमें भ्रमित करती हैं

दस डेवलपर्स से पूछें कि जनरेटिव UI क्या है। आपको दस जवाब मिलेंगे। उनमें से ज़्यादातर उस पैटर्न का वर्णन कर रहे होंगे जो उनका वर्तमान फ्रेमवर्क शिप करता है।

केवल तीन हैं। स्पेक्ट्रम अधिक नियंत्रण से अधिक लचीलेपन तक चलता है।

• नियंत्रित (Controlled): आप कंपोनेंट पहले से बनाते हैं। एजेंट चुनता है कि कौन सा रेंडर करना है।
• घोषणात्मक (Declarative): एजेंट एक स्कीमा उत्सर्जित करता है। आपका ऐप इसे कंपोनेंट में मैप करता है।
• खुला (Open-ended): एजेंट कच्चा HTML लिखता है। आपका ऐप इसे सैंडबॉक्स में रेंडर करता है।

2026 का हर Gen UI फ्रेमवर्क इस रेखा पर कहीं न कहीं रहता है। अंतर आर्किटेक्चरल हैं, सौंदर्यपूर्ण नहीं। प्रत्येक पैटर्न आपके ऐप को स्केल पर एक अलग तरीके से तोड़ता है।

मैंने अलग-अलग स्टैक आज़माए। ज़्यादातर एक पैटर्न को अच्छी तरह से कवर करते हैं। मैं CopilotKit पर आ गया क्योंकि यह एक ही रनटाइम पर, AG-UI पर सवार होकर, तीनों का समर्थन करता है। वह स्टैक है जिस पर नीचे सब कुछ चलता है।

पैटर्न 1: नियंत्रित (Controlled), फ्रंटएंड का UI पर स्वामित्व

अधिकांश टीमें यहीं से शुरू करती हैं। यह वह जगह भी है जहाँ अधिकांश टीमें फंस जाती हैं।

आप एक React कंपोनेंट पहले से बनाते हैं। आप इसे एक टूल नाम से बाइंड करते हैं। एजेंट उस टूल को चुनता है और कंपोनेंट एजेंट के आर्ग्स को प्रॉप्स के रूप में लेकर चैट में इनलाइन रेंडर होता है।

एक फ्रंटएंड हुक। शून्य एजेंट कोड। बस इतना ही।

1"use client";
2import { z } from "zod";
3import { useComponent } from "@copilotkit/react-core/v2";
4
5const expenseChartSchema = z.object({
6  title: z.string(),
7  data: z.array(z.object({ label: z.string(), value: z.number() })),
8});
9
10function ExpenseChart({ title, data }: z.infer<typeof expenseChartSchema>) {
11  return (
12    <section className="rounded-xl border p-4">
13      <h3 className="text-sm font-medium">{title}</h3>
14      <ul className="mt-2 grid gap-1">
15        {data.map((d) => (
16          <li key={d.label} className="flex justify-between text-sm">
17            <span>{d.label}</span>
18            <span>${d.value}</span>
19          </li>
20        ))}
21      </ul>
22    </section>
23  );
24}
25
26export function ExpensesCopilot() {
27  useComponent({
28    name: "showExpenseChart",
29    description: "Render a breakdown of expenses by category.",
30    parameters: expenseChartSchema,
31    render: ExpenseChart,
32  });
33
34  return null;
35}

हुक CopilotKit के रनटाइम के साथ टूल को पंजीकृत करता है। रनटाइम इसे AG-UI पर एजेंट को विज्ञापित करता है। जब एजेंट इसे कॉल करता है, तो आर्ग्स स्ट्रीम में आते हैं और आपका कंपोनेंट इनलाइन रेंडर होता है। लिखने के लिए कोई Python टूल नहीं, वायर करने के लिए कोई स्कीमा नहीं, जोड़ने के लिए कोई API रूट नहीं।

आपका डिज़ाइन सिस्टम प्रभारी रहता है।

वह खर्च चार्ट कोई मॉकअप नहीं है। AI Financial Coach Agent वास्तविक बजट, बचत योजनाओं और ऋण भुगतान के लिए ठीक ऐसे ही कार्ड रेंडर करता है।

पहले बेयर हुक चाहिए? वह 'use-generative-ui-examples.tsx' है Generative UI Starter Project में।

टोकन कर

आपके द्वारा पंजीकृत प्रत्येक कंपोनेंट उपयोगकर्ता के कुछ कहने से पहले ही एजेंट के कॉन्टेक्स्ट विंडो में बैठ जाता है। एक सामान्य टूल विवरण अपने JSON स्कीमा के साथ लगभग 400 टोकन चलाता है। 25 कंपोनेंट हर बारी पर 10,000 टोकन हैं। आप वह कर प्रति अनुरोध चुकाते हैं।

एजेंट गलत कंपोनेंट भी चुनता है। बहुत सारे एक जैसे दिखते हैं। पाई चार्ट और डोनट चार्ट दोनों "अनुपात दिखाते हैं।" यह अनुमान लगाता है।

एजेंट-साइड स्टेट कब जोड़ें

साझा स्टेट एकमात्र मामला है जहाँ Python टूल लिखना इसके लायक है। एजेंट सत्र स्टेट में लिखता है। UI के अन्य भाग सब्सक्राइब करते हैं और बिना दूसरे LLM कॉल के फिर से रेंडर करते हैं। एक मीट्रिक पिन करें, डैशबोर्ड अपडेट हो जाता है। एक पंक्ति जोड़ें, टेबल फिर से बन जाती है।

1from google.adk.agents import LlmAgent
2from google.adk.tools import ToolContext
3
4def pin_metric(tool_context: ToolContext, label: str, value: float) -> dict:
5    """Pin a metric to the user's dashboard."""
6    pinned = tool_context.state.get("pinnedMetrics", [])
7    tool_context.state["pinnedMetrics"] = pinned + [{"label": label, "value": value}]
8    return {"status": "pinned"}
9
10agent = LlmAgent(name="dashboard_agent", model="gemini-3.5-flash", tools=[pin_metric])

फ्रंटएंड CopilotKit के शेयर्ड-स्टेट हुक के माध्यम से पिन की गई मीट्रिक पढ़ता है। चैट कंपोनेंट अभी भी इनलाइन रेंडर करता है क्योंकि वही टूल नाम फ्रंटएंड हुक से वायर्ड है।

चैट में एक मीट्रिक पिन करें। पैनल बिना दूसरे मॉडल कॉल के फिर से बन जाता है। वह है AI Dashboard Canvas Agent।

AI Deep Research Agent इसे और आगे ले जाता है। योजना, प्रत्येक खोज, प्रत्येक फ़ाइल लेखन, यह सब लाइव कार्ड के रूप में स्ट्रीम होता है। बाकी सब कुछ के लिए, फ्रंटएंड हुक ही पूरी कहानी है।

नियंत्रित (Controlled) कब शिप करें: दस या उससे कम उच्च-मूल्य वाले फ्लो। डिज़ाइन सटीकता मायने रखती है। आप जानते हैं कि आपको किन सटीक UI की आवश्यकता है।

कब न करें: आपका कोडबेस उपयोग के मामलों के साथ रैखिक रूप से बढ़ता है। 25 कंपोनेंट का मतलब है 25 टूल परिभाषाएँ प्रत्येक एजेंट बारी पर बैठी हैं।

क्या टूटता है: एजेंट गलत कंपोनेंट चुनता है। दो टूल विवरण शब्दार्थ रूप से ओवरलैप करते हैं। 15 टूल से अधिक, उनमें से दो शायद "डेटा प्रदर्शित करता है" जैसे पढ़ते हैं। समाधान: दृश्य के बजाय उपयोगकर्ता के इरादे का नाम देने के लिए विवरण फिर से लिखें। "जब उपयोगकर्ता किसी पूर्ण के अनुपातों की तुलना करने के लिए कहे तो उपयोग करें" "पाई चार्ट रेंडर करता है" से बेहतर है।

पैटर्न 2: घोषणात्मक (Declarative) (A2UI), एजेंट स्कीमा उत्सर्जित करता है

यह वह पैटर्न है जिसकी अधिकांश उत्पादन एजेंट ऐप्स को अंततः आवश्यकता होती है।

एजेंट UI का वर्णन करने वाला एक JSON स्कीमा उत्सर्जित करता है। आपके ऐप में कंपोनेंट की एक सूची है जो स्कीमा नोड्स को React (या Svelte, Flutter, कुछ भी) में मैप करती है। एक टूल। कई UI।

A2UI मानक स्पेक है। CopilotKit रनटाइम शिप करता है। ADK एजेंट चलाता है। AG-UI तार है।

एजेंट टूल क्रम में तीन ऑपरेशन लौटाता है: एक सतह बनाएं, कंपोनेंट ट्री को धकेलें, डेटा को धकेलें।

1def search_flights(flights: list[Flight]) -> dict[str, Any]:
2    """Search flights and display them as rich cards."""
3    return {
4        "a2ui_operations": [
5            {"type": "create_surface", "surfaceId": SURFACE_ID, "catalogId": CATALOG_ID},
6            {"type": "update_components", "surfaceId": SURFACE_ID, "components": FLIGHT_SCHEMA},
7            {"type": "update_data_model", "surfaceId": SURFACE_ID, "data": {"flights": flights}},
8        ]
9    }

यह वास्तविक फ़ंक्शन है, स्यूडोकोड नहीं। रनटाइम मिडलवेयर टूल परिणाम में a2ui_operations कंटेनर देखता है और सतहों को फ्रंटएंड पर अग्रेषित करता है। होटल जोड़ रहे हैं? नई स्कीमा फ़ाइल। एक अलग सतह ID के साथ एक और फ़ंक्शन। शून्य अतिरिक्त फ्रंटएंड काम।

फिक्स्ड स्कीमा बनाम डायनामिक स्कीमा

ऊपर का कंपोनेंट ट्री flights.json में रहता है। आपने इसे लिखा था। एजेंट केवल डेटा भरता है। यह एक फिक्स्ड स्कीमा है।

डायनामिक स्कीमा इसे उलट देता है: एक द्वितीयक LLM बातचीत के संदर्भ से प्रति बारी कंपोनेंट ट्री लिखता है। अंत में वही a2ui_operations कंटेनर। Google ADK शोकेस दोनों को शिप करता है।

कैटलॉग अनुबंध है

परिभाषाएँ उन कंपोनेंट्स को सूचीबद्ध करती हैं जिन्हें एजेंट को उत्सर्जित करने की अनुमति है, प्रॉप्स के लिए Zod स्कीमा के साथ। रेंडरर React में भरते हैं। टाइपो ब्लैंक स्क्रीन के बजाय बिल्ड एरर बन जाते हैं।

1const renderers: CatalogRenderers<TravelDefinitions> = {
2  FlightCard: ({ props }) => (
3    <article className="rounded-xl border p-4">
4      <header className="flex justify-between">
5        <span>{(props as any).airline}</span>
6        <span>{(props as any).price}</span>
7      </header>
8      <div className="text-sm text-muted-foreground">
9        {(props as any).origin} → {(props as any).destination} · {(props as any).departureTime}
10      </div>
11    </article>
12  ),
13};
14
15export const travelCatalog = createCatalog(travelDefinitions, renderers, {
16  catalogId: "copilotkit://travel-catalog",
17  includeBasicCatalog: true,
18});

दोनों हिस्से Generative UI Starter Project में रहते हैं, वायर्ड और मैच किए हुए। search_flights in 'a2ui_fixed_schema.py', FlightCard कैटलॉग in 'renderers.tsx'। फ़्लाइट के लिए पूछें। चैट में कार्ड्स को स्ट्रीम होते देखें।

बटन और अन्य इंटरैक्टिव कंपोनेंट स्कीमा में एक क्रिया रखते हैं। बेसिक कैटलॉग इसे onClick से वायर करता है। क्लिक AG-UI पर एजेंट को एक इवेंट वापस भेजता है। एजेंट तय करता है कि आगे क्या रेंडर करना है। शून्य क्लिक हैंडलर।

टोकन गणित

50 कार्ड प्रकार या 500, एजेंट एक फ़ंक्शन देखता है। प्रति बारी टोकन आपकी कंपोनेंट लाइब्रेरी के बढ़ने पर स्थिर रहते हैं।

किसी भी रेंडरिंग फ्रेमवर्क के लिए विस्तार योग्य क्योंकि यह केवल JSON है। कोई भी एजेंट जो पहले से AG-UI बोलता है, दिन शून्य पर A2UI चला सकता है। इसे वायर अप करने के लिए आप एजेंट कोड को नहीं छूते।

ट्रेड-ऑफ: LLM के पास लेआउट का स्वामित्व है। आउटपुट आपके कैटलॉग के भीतर रन दर रन बदलता रहता है। यदि आप कानूनी प्रकटीकरण, मार्केटिंग सतहें, या कुछ भी जहाँ सटीक पिक्सेल प्लेसमेंट मायने रखता है, शिप कर रहे हैं, तो यह आपका बकेट नहीं है।

डिक्लेरेटिव लंबी पूंछ के लिए बनाया गया पैटर्न है। डैशबोर्ड, परिणाम, फॉर्म, कार्ड, विजेट।

घोषणात्मक (Declarative) कब शिप करें: आपके पास पहले से बनाने के समय से अधिक उपयोग के मामले हैं। आप प्रोटोटाइप चरण के बाद टोकन अर्थशास्त्र की परवाह करते हैं।

क्या टूटता है: एक कस्टम FlightCard बनाया। प्रत्येक फ्लाइट बेसिक कैटलॉग के सामान्य कार्ड के रूप में रेंडर होती है। कंसोल में कोई त्रुटि नहीं। एजेंट पर CATALOG_ID और फ्रंटएंड पर createCatalog में catalogId मेल नहीं खाते। फ्रंटएंड एजेंट द्वारा लक्षित कैटलॉग को नहीं पहचानता, बेसिक पर वापस आ जाता है। दोनों तरफ स्ट्रिंग्स का बिल्कुल मिलान करें।

पैटर्न 3: खुला (Open-ended), कोई कैटलॉग नहीं, कोई नियम नहीं

तीसरा पैटर्न विपरीत चरम है। कोई कैटलॉग नहीं। कोई स्कीमा नहीं। बस एक खाली कैनवास।

इस बकेट में दो उप-पैटर्न रहते हैं।

MCP Apps

एक MCP सर्वर UI सतहों को उजागर करता है जिसे एजेंट संचालित करता है। Excalidraw वह उदाहरण है जो मेरे साथ अटक गया। एजेंट को कैनवास का पूरा नियंत्रण मिलता है। आपके संदर्भ से आरेख बनाता है। बोर्ड पर हर पिक्सेल का मालिक होता है।

क्लाइंट प्रोटोकॉल को खरोंच से लागू करना दर्दनाक है, इसलिए CopilotKit एक MCPAppsMiddleware शिप करता है। इसे अपने एजेंट से संलग्न करें और इसे किसी भी MCP Apps सर्वर पर इंगित करें।

1const agent = new BuiltInAgent({
2  model: "openai/gpt-5.5",
3  prompt: "You are a helpful assistant.",
4}).use(
5  new MCPAppsMiddleware({
6    mcpServers: [{ type: "http", url: "https://mcp.excalidraw.com/mcp", serverId: "my-server" }],
7  }),
8);

MCP Apps Showcase को स्पिन अप करें और आप चैट विंडो के अंदर ही फ़्लाइट बुक कर रहे हैं और होटल आरक्षित कर रहे हैं। वही मिडलवेयर, वास्तविक MCP सर्वर। या और आगे बढ़ें।

AI MCP App Builder एजेंट को एक E2B सैंडबॉक्स में एक बिल्कुल नया ऐप लिखने देता है, फिर इसे लाइव रेंडर करता है।

0:45

सैंडबॉक्स्ड HTML

एजेंट कच्चा HTML लिखता है। आपका ऐप इसे सैंडबॉक्स्ड iframe के अंदर रेंडर करता है ताकि यह सत्र को हाईजैक न कर सके।

रनटाइम एक HTML रेंडरिंग टूल पंजीकृत करता है और इसे AG-UI पर एजेंट को भेजता है। एजेंट इसे जो भी मार्कअप चाहता है, उसके साथ कॉल करता है। एजेंट पक्ष पर परिभाषित करने के लिए कोई HTML टूल नहीं है। रनटाइम इसे इंजेक्ट करता है।

एजेंट-साइड निर्देश वास्तविक काम कर रहा है:

1canvas_agent = LlmAgent(
2    name="canvas_agent",
3    model="gemini-3.5-flash",
4    instruction=(
5        "You are a visualization assistant. When the user asks to see, "
6        "draw, or visualize anything, generate an interactive HTML UI. "
7        "Use Tailwind classes only. No external fonts. Stick to neutral "
8        "colors unless the user names one."
9    ),
10)

उन शैली नियमों के बिना, मॉडल उस सप्ताह अपने प्रशिक्षण डेटा में जो भी सौंदर्य सबसे जोरदार था, उस पर डिफ़ॉल्ट हो जाता है। उनके साथ, आपको ज्यादातर समय अपने ब्रांड के करीब कुछ मिलता है। हमेशा नहीं।

ब्रांड असंगति समस्या

मैंने एक एजेंट के लिए प्राथमिक UI के रूप में ओपन-एंडेड शिप करने की कोशिश की। इसे एक सप्ताह में वापस खींच लिया।

मंगलवार को "नव-असभ्यतावादी।" बुधवार को "iOS 4 क्लोन।" प्रॉम्प्ट में शैली नियम एजेंट को आपके ब्रांड की ओर ले जाते हैं। वे इसकी गारंटी नहीं देते। ब्रांड बदलता रहा। उत्पाद अविश्वसनीय लगा।

ओपन-एंडेड बेकार नहीं है। यह गलत तरीके से लागू किया गया है।

एक चीज़ के लिए सही कॉल: डिस्पोजेबल इंटरैक्शन जहां उपयोगकर्ता को इस बात से कोई फर्क नहीं पड़ता कि इंटरफ़ेस कैसा दिखता है और इसे फिर कभी नहीं देखेगा। "मुझे दिखाओ कि इलेक्ट्रॉन कैसे काम करते हैं।" "मुझे मेरे पिछले 10 प्रश्नों का एक अजीब बार चार्ट दो।" "इस API प्रतिक्रिया की कल्पना करें।" उस तरह की चीज़ जो आप Google AI अवलोकनों में देखते हैं।

खुला (Open-ended) कब शिप करें: एक-शॉट क्वेरी। डिस्पोजेबल विज़ुअलाइज़ेशन। सैंडबॉक्स्ड प्रयोग। प्राथमिक सतह के रूप में कभी नहीं।

क्या टूटता है: iframe रेंडर होता है। बटन क्लिक नहीं करते। फॉर्म सबमिट नहीं होते। सैंडबॉक्स फ़्लैग बहुत तंग हैं, या बहुत ढीले हैं जिसे ब्राउज़र अस्वीकार कर देता है। iframe सैंडबॉक्स को scripts और forms की अनुमति देने के लिए सेट करें। और कुछ नहीं। कभी allow-same-origin की अनुमति न दें।

कैसे चुनें

कोड लिखने से पहले निर्णय वृक्ष चलाएँ।

डिज़ाइनर के पास इस फ्लो के लिए पिक्सेल-परफेक्ट मॉकअप हैं? नियंत्रित (Controlled)।

शिप करने के लिए दर्जनों कार्ड प्रकार या विजेट? घोषणात्मक (Declarative)।

एक-शॉट, डिस्पोजेबल विज़ुअलाइज़ेशन जो उपयोगकर्ता दो बार कभी नहीं देखेगा? खुला (Open-ended)।

निर्णय नहीं कर सकते? डिफ़ॉल्ट रूप से घोषणात्मक (Declarative) चुनें। शीर्ष 3 फ्लो के लिए नियंत्रित (Controlled) में अपग्रेड करें। डिफ़ॉल्ट के रूप में कभी खुला (Open-ended) न चुनें।

यदि आप पहले से ही शिप कर रहे हैं और सुनिश्चित नहीं हैं कि आप कहाँ उतरे हैं, तो रेंडर टूल गिनें। 15 से अधिक, आप नियंत्रित (Controlled) में हैं और दीवार करीब है। इस सप्ताह A2UI वायर करना शुरू करें।

तीन पैटर्न। तीन दांव।

नियंत्रित (Controlled) आप पर दांव लगाता है। पूर्व-निर्मित कंपोनेंट, पिक्सेल-परफेक्ट। उनमें से 25 के बाद महंगा।

घोषणात्मक (Declarative) स्कीमा पर दांव लगाता है। स्कीमा अनुबंध है। एजेंट इसे भरता है। सपाट पैमाना।

खुला (Open-ended) मॉडल पर दांव लगाता है। कोई कैटलॉग नहीं, कोई स्कीमा नहीं, कच्चा HTML। डिस्पोजेबल के लिए अच्छा। किसी भी चीज़ के लिए भंगुर जो दो बार शिप होती है।

गलती गलत पैटर्न चुनना नहीं है। यह न जानना है कि आपने एक चुना है।

अधिकांश टीमें नियंत्रित (Controlled) पर डिफ़ॉल्ट होती हैं क्योंकि फ्रेमवर्क नियंत्रित (Controlled) पर डिफ़ॉल्ट होता है। वे 25 कंपोनेंट पर दीवार से टकराते हैं और ओपन-एंडेड की ओर बढ़ते हैं क्योंकि यह डेमो में आकर्षक लगता है। दोनों में से कोई भी निर्णय नहीं था। दोनों बहाव थे।

जानबूझकर चुनें। पैटर्न को समस्या से मिलाएँ। उन फ्लो के लिए नियंत्रित (Controlled) जिन्हें सटीक होने की आवश्यकता है। लंबी पूंछ के लिए घोषणात्मक (Declarative)। डिस्पोजेबल के लिए खुला (Open-ended)।

ओपन सोर्स जनरेटिव UI एजेंट टेम्पलेट

तीनों के लिए संदर्भ awesome-llm-apps के नए Generative UI Agents सेक्शन में रहता है। अपनी ज़रूरत की चीज़ को क्लोन करें। जो नहीं चाहिए उसे हटा दें।

मैं प्रोडक्शन में एजेंट शिप करने, AG-UI, और स्केल करने वाले पैटर्न के बारे में और अधिक प्रकाशित करूँगा। अपडेट रहने के लिए मुझे @Saboo_Shubham_ पर फॉलो करें।

कृपया बताएं कि क्या आपको किसी विशिष्ट भाग में और सुधार की आवश्यकता है।