हमने ChatGPT Intelligent UI का रिवर्स इंजीनियरिंग किया। जानिए यह वास्तव में कैसे काम करता है

ChatGPT ने आखिरकार Generative UI लॉन्च कर दिया और रातों-रात इस फील्ड का नाम बदलकर Intelligent UI रख दिया। हमें देखना था कि उन्होंने इसे कैसे लागू किया है।

https://x.com/OpenAI/status/2107894997538525580

यह पोस्ट इस बात की गहराई से की गई स्टडी है कि OpenAI ने अपने फ्लैगशिप Intelligent UI को कैसे लागू किया — Web और Mobile दोनों पर इसके लेयर्स, फॉर्मेट्स और नेटिव रेंडरिंग कैसे काम करते हैं।

बिल्डिंग ब्लॉक्स

ChatGPT का इम्प्लीमेंटेशन काम को मॉडल, बैकएंड सर्वर और क्लाइंट के बीच बांटता है:

• Inference format: मॉडल इंटरफेस को DIL में लिखता है, जो Markdown को JSX जैसे टैग्स और JavaScript के साथ जोड़ता है।
• Server-side compilation: सर्वर हर पार्टियल रिस्पॉन्स को एक JavaScript प्रोग्राम और टेक्स्ट व डेटा वाले JSON डॉक्यूमेंट में बदल देता है।
• Client runtime: एक सैंडबॉक्स्ड रनटाइम प्रोग्राम को चलाता है और UI ऑपरेशंस तैयार करता है।
• Rendering: ChatGPT इन ऑपरेशंस को अपने खुद के नेटिव कंपोनेंट्स पर लागू करता है।
• Design system and catalog: वे कंपोनेंट्स, प्रॉपर्टीज़ और डिज़ाइन टोकन्स जो मॉडल के लिए उपलब्ध हैं।

ChatGPT Intelligent UI Architecture Diagram

Inference format

मॉडल यही लिखता है। ChatGPT में यह एक ऐसी भाषा है जिसे OpenAI ने DIL नाम दिया है: साधारण टेक्स्ट के लिए Markdown, कंपोनेंट्स के लिए JSX जैसे टैग्स, और state व logic के लिए JavaScript। आइए एक छोटे से रिस्पॉन्स को हर लेयर से गुज़रते हुए देखते हैं:

1## Team plan estimate
2अपनी टीम की **मासिक कीमत** देखने के लिए स्लाइडर खींचें।
3{@body const [seats,setSeats] = DIL.useState(8)}
4{@body const price = seats*29}
5<box border padding={3} gap={2}>
6  <slider min={1} max={50} value={seats} onChange={setSeats}/>
7  <title size="xl">${price}/mo</title>
8</box>

हेडिंग और पैराग्राफ सामान्य Markdown हैं। टैग्स ChatGPT के कैटलॉग से लिए गए कंपोनेंट्स हैं। दो {@body …} लाइनें JavaScript हैं: पहली एक state (seats) को डिक्लेयर करती है, और दूसरी उससे price निकालती है। स्लाइडर seats से बंधा हुआ है, इसलिए इसे हिलाने पर price अपडेट हो जाती है।

एक अलग फॉर्मेट की ज़रूरत इसलिए पड़ती है क्योंकि मॉडल इंटरफेस को टोकन-दर-टोकन लिखता है।

• इसे भरोसेमंद तरीके से लिखना आसान होना चाहिए, इसलिए इसे उन नोटेशन्स से बनाया गया है जिन्हें मॉडल पहले से अच्छी तरह जानता है।
• आधा लिखा होने पर भी इसे काम करना चाहिए। स्टेटमेंट्स अपनी अलग लाइनों में होते हैं, और कोई भी खुला एलिमेंट अपने आप बंद किया जा सकता है। इससे सर्वर किसी पार्टियल रिस्पॉन्स को उसके आखिरी पूरे कंस्ट्रक्ट पर काटकर भी उसे कंपाइल कर सकता है।

Server-side compilation

क्लाइंट कभी भी मॉडल के आउटपुट को वैसा-का-वैसा नहीं चलाता। OpenAI का सर्वर इसे एक JavaScript प्रोग्राम और एक JSON डॉक्यूमेंट में कंपाइल करता है, जिन्हें मैसेज के साथ (model_dil_v2 के रूप में) स्टोर किया जाता है। रिस्पॉन्स कुछ इस तरह कंपाइल होता है (पढ़ने में आसानी के लिए फॉर्मेट किया गया):

1function __dilSafe(evaluate, failureValue) {
2  try { return evaluate(); } catch { return failureValue; }
3}
4
5DIL.render(__dil.jsx(() => {
6  const __dilConstants = DIL.useConstants();
7  const __dilModelDataBindings = DIL.useAppData((appData) => appData.opGenui?.modelDataBindings ?? {});
8  const [seats, setSeats] = DIL.useState(8, { key: "seats" });
9  const price = __dilSafe(() => seats * 29, undefined);
10  return __dil.jsx(__dil.Fragment, null,
11    __dil.jsx("title", { size: "lg" }, __dilConstants["0"]),
12    __dil.jsx("text", null, __dilConstants["1"], __dil.jsx("bold", null, __dilConstants["2"]), __dilConstants["3"]),
13    __dil.jsx("box", { border: true, padding: 3, gap: 2 },
14      __dilSafe(() => __dil.jsx("slider", { min: 1, max: 50, value: seats, onChange: setSeats }), null),
15      __dil.jsx("title", { size: "xl" }, __dilConstants["4"], __dilSafe(() => price, null), __dilConstants["5"])));
16}, { key: "body:2" }));

1{
2  "constants": {
3    "0": "Team plan estimate",
4    "1": "अपनी टीम की ",
5    "2": "मासिक कीमत",
6    "3": " देखने के लिए स्लाइडर खींचें।",
7    "4": "$",
8    "5": "/mo"
9  },
10  "appData": { "opGenui": { "componentResults": {}, "modelDataBindings": {} } }
11}

Markdown को कंपोनेंट्स वाले ही ट्री में कंपाइल किया जाता है। हेडिंग title बन जाती है, पैराग्राफ text बन जाता है जिसके अंदर bold होता है, और उनके शब्द constants टेबल में चले जाते हैं।

कंपाइलेशन वह काम करता है जो अन्यथा हर क्लाइंट को बार-बार दोहराना पड़ता:

• साधारण फंक्शन कॉल्स। मार्कअप __dil.jsx की कॉल्स में बदल जाता है, ताकि JavaScript रनटाइम बिना DIL के पार्सर के प्रोग्राम को चला सके।
• एरर आइसोलेशन। एक्सप्रेशन्स को __dilSafe में लपेटा जाता है, ताकि अगर कोई एक्सप्रेशन क्रैश हो तो पूरा रेंडर रुकने के बजाय सिर्फ एक एलिमेंट हट जाए।
• टेक्स्ट अलग टेबल में। स्टैटिक टेक्स्ट constants टेबल में चला जाता है, ताकि जब रिस्पॉन्स स्ट्रीम हो रहा हो, तो बढ़ता हुआ टेक्स्ट प्रोग्राम को नहीं बल्कि डेटा को बदले।
• स्थिर state keys। हर state को एक key मिलती है ({ key: "seats" }), ताकि हर री-कंपाइलेशन में भी उसकी वैल्यू बनी रहे।
• रिपेयर और वैलिडेशन। अधूरे स्टेटमेंट्स और टैग्स हटा दिए जाते हैं, न बंद हुए एलिमेंट्स बंद कर दिए जाते हैं, और कैटलॉग के खिलाफ वैलिडेशन में फेल होने वाली प्रॉपर्टीज़ को हटाकर diagnostics के रूप में दर्ज कर लिया जाता है।

JSON डॉक्यूमेंट में टेक्स्ट कॉन्स्टेंट्स और वह डेटा होता है जिसे सर्वर रिस्पॉन्स के लिए रेज़ॉल्व करता है, जैसे इमेज सर्च रिज़ल्ट्स (Data सेक्शन देखें)।

Client runtime

क्लाइंट को कंपाइल किया गया प्रोग्राम और JSON डॉक्यूमेंट मिलता है। इसका काम दो हिस्सों में बंटा होता है — एक रनटाइम जो प्रोग्राम चलाता है, और एक रेंडरर जो नतीजा दिखाता है।

प्रोग्राम मॉडल द्वारा लिखा गया कोड है, इसलिए यह सीधे ChatGPT पेज पर नहीं चलता। ChatGPT एक छुपा हुआ iframe (runner.html) लोड करता है, जिसे allow-scripts और default-src 'none' वाली content security policy के साथ सैंडबॉक्स किया जाता है, और यह एक Web Worker शुरू करता है।

• Lockdown। प्रोग्राम चलाने से पहले, वर्कर अपने ग्लोबल स्कोप से नेटवर्क एक्सेस, टाइमर्स, मैसेजिंग और डायनामिक कोड इवैल्यूएशन हटा देता है, और बाकी बचे globals को फ्रीज़ कर देता है।
• Evaluation। फिर यह new Function के ज़रिए प्रोग्राम को चलाता है। रनटाइम ऑब्जेक्ट्स (DIL, __dil, GenUI) और कैटलॉग के कंपोज़िट कंपोनेंट्स पैरामीटर्स के रूप में पास किए जाते हैं।
• Watchdog। अगर कोई प्रोग्राम तय समय (timeout) में रिस्पॉन्स नहीं देता, तो उसे क्वारंटीन कर दिया जाता है और वर्कर को रीस्टार्ट किया जाता है।

रनटाइम React की शैली में एक छोटा reconciler है। यह कंपोनेंट को रेंडर करता है और hook state को keyed slots में रखता है। फिर यह नए बने ट्री की तुलना पिछले वाले से करता है और फर्क को ऑपरेशंस की लिस्ट के रूप में एन्कोड करता है। यह खुद कुछ भी ड्रॉ नहीं करता।

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

1CREATE #1  title   SET size = "lg"                                    PLACE under root at 0
2CREATE #2  text "Team plan estimate"                                  PLACE under #1 at 0
3CREATE #3  text                                                       PLACE under root at 1
4CREATE #4  text "अपनी टीम की "                         PLACE under #3 at 0
5CREATE #5  bold                                                       PLACE under #3 at 1
6CREATE #6  text "मासिक कीमत"                                       PLACE under #5 at 0
7CREATE #7  text " देखने के लिए स्लाइडर खींचें।"                                     PLACE under #3 at 2
8CREATE #8  box     SET border = true, padding = 3, gap = 2            PLACE under root at 2
9CREATE #9  slider  SET min = 1, max = 50, value = 8, onChange = fn#1  PLACE under #8 at 0
10CREATE #10 title   SET size = "xl"                                    PLACE under #8 at 1
11CREATE #11 text "$"                                                   PLACE under #10 at 0
12CREATE #12 text "232"                                                 PLACE under #10 at 1
13CREATE #13 text "/mo"                                                 PLACE under #10 at 2

फंक्शन्स कभी वर्कर से बाहर नहीं जाते; स्लाइडर का हैंडलर सिर्फ एक आइडेंटिफायर (fn#1) के रूप में भेजा जाता है। नेटवर्क पर, ऑपरेशंस को integers के binary sequence के रूप में एन्कोड किया जाता है, और strings को एक अलग टेबल में रखा जाता है।

Rendering

ChatGPT पेज इन ऑपरेशंस को अपने कंपोनेंट ट्री पर लागू करता है। हर CREATE ChatGPT के डिज़ाइन सिस्टम से एक नेटिव कंपोनेंट बनाता है, और पेज बदलावों को आते ही एनिमेट करता है। पेज सिर्फ जाने-पहचाने कंपोनेंट टाइप्स के ऑपरेशंस ही स्वीकार करता है, इसलिए मॉडल का आउटपुट मनमाना मार्कअप या स्टाइल्स नहीं जोड़ सकता। इसमें अपवाद हैं कुछ प्रॉपर्टीज़ द्वारा स्वीकार की जाने वाली raw CSS वैल्यूज़ (Design system and catalog देखें) और AppBlock ऐप्स, जो iframe में चलते हैं (Escape hatch देखें)।

इंटरैक्शन उल्टी दिशा में चलता है। जब यूज़र स्लाइडर को 9 पर खींचता है, तो पेज हैंडलर का आइडेंटिफायर और आर्ग्यूमेंट्स वर्कर को भेजता है। वर्कर setSeats(9) कॉल करता है, फिर से रेंडर करता है, और अपडेट ऑपरेशंस वापस भेजता है। इसमें मॉडल को कोई कॉल नहीं लगती।

Design system and catalog

कैटलॉग तय करता है कि मॉडल क्या मांग सकता है। इसकी ज़रूरत इसलिए है क्योंकि मॉडल कच्चे layout और styling rules से इंटरफेस नहीं बनाता। वह उन कंपोनेंट्स में से चुनता है जिन्हें ड्रॉ करना ChatGPT पहले से जानता है, और उन्हें padding={3} जैसे डिज़ाइन टोकन्स से स्टाइल करता है। pixel widths और hex colours जैसी raw CSS वैल्यूज़ कुछ प्रॉपर्टीज़ के लिए स्वीकार की जाती हैं, लेकिन डिज़ाइन टोकन्स को तरजीह दी जाती है। नतीजतन:

• बने हुए इंटरफेस हर प्लेटफॉर्म पर ChatGPT के बाकी हिस्सों जैसे ही दिखते हैं।
• कंपाइलर के पास आउटपुट को चेक करने के लिए एक schema होता है। अगर कोई प्रॉपर्टी किसी कंपोनेंट पर मौजूद नहीं है, या लिटरल गलत टाइप का है, तो उसे कंपाइलेशन के दौरान हटा दिया जाता है और diagnostic के रूप में दर्ज कर लिया जाता है।

हमने जिस एक रिस्पॉन्स को कैप्चर किया, उसमें कंपाइलर ने दो प्रॉपर्टीज़ हटा दीं: एक icon पर fill (unknown_prop diagnostic) और एक box पर gap="1" (invalid_literal diagnostic)।

कैटलॉग के तीन हिस्से हैं:

• Native components। ChatGPT के क्लाइंट कोड में कंपोनेंट रजिस्ट्री में लगभग 70 कंपोनेंट्स परिभाषित हैं; जिन रिस्पॉन्स को हमने कैप्चर किया उनमें से 39 दिखे।
• Design tokens स्पेसिंग, रेडियस, रंग और साइज़ के लिए।
• Composite components जिन्हें OpenAI ने DIL में लिखा है और सैंडबॉक्स में पहले से बने हुए भेजता है, जैसे image और product कंपोनेंट्स। हमारे कैप्चर्स में, मॉडल ने इन कंपोनेंट्स का इस्तेमाल किया लेकिन कभी अपने खुद के नहीं बनाए।

Streaming

टेक्स्ट की स्ट्रीमिंग आसान है: हर नया टोकन स्क्रीन पर मौजूद टेक्स्ट के आगे जुड़ता जाता है। लेकिन इंटरफेस की स्ट्रीमिंग ज़्यादा मुश्किल है, तीन वजहों से:

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

Server Side Streaming

टोकन्स को जोड़ने वाली साधारण स्ट्रीम इसे संभाल नहीं सकती। इसके बजाय ChatGPT एक स्ट्रक्चर्ड मैसेज में patches स्ट्रीम करता है, जिसमें raw text, कंपाइल किया गया प्रोग्राम और उसका डेटा साथ-साथ होते हैं।

रिस्पॉन्स ब्राउज़र तक server-sent event stream (POST /backend-api/f/conversation) के ज़रिए पहुँचता है। हर इवेंट बन रहे मैसेज में JSON-Patch स्टाइल का अपडेट होता है। एक इवेंट आमतौर पर raw DIL टेक्स्ट और उसके कंपाइल किए गए रूप को एक साथ अपडेट करता है। यह एक कैप्चर किए गए रिस्पॉन्स का एक अपडेट है, जिसे छोटा किया गया है:

1{"o": "patch", "v": [
2  {"p": "/message/content/parts/0", "o": "append", "v": " दोस्तों के साथ रविवार का लैम्ब रोस्ट — भरपूर खाना, …"},
3  {"p": "/message/metadata/model_dil_v2/code", "o": "replace", "v": "DIL.render(__dil.jsx(()=>{…"},
4  {"p": "/message/metadata/model_dil_v2/constants", "o": "append", "v": {"0": "दोस्तों के साथ एक बढ़िया रविवार लैम्ब रोस्ट का प्लान ये रहा — …"}},
5  {"p": "/message/metadata/model_dil_v2/constants", "o": "append", "v": {"1": "चूंकि आप"}},
6  {"p": "/message/metadata/model_dil_v2/fallbackMarkdown", "o": "append", "v": " दोस्तों के साथ रविवार का लैम्ब रोस्ट — …"}
7]}

सर्वर इंक्रीमेंटली कंपाइल नहीं करता। हर कुछ सौ मिलीसेकंड में, संभवतः मॉडल आउटपुट के हर नए chunk के साथ, यह अब तक मॉडल द्वारा लिखी गई हर चीज़ को दोबारा कंपाइल करता है और नतीजा भेजता है। कंपाइलेशन पहले टोकन से ही शुरू हो जाता है, इससे पहले कि कोई टैग आए।

कंपाइलर को इनका ध्यान रखना होता है:

• आधे लिखे रिस्पॉन्स को कंपाइल करना
• टेक्स्ट अपडेट करना
• UI अपडेट करना

टाइमलाइन कुछ इस तरह दिखती है:

GIF

Client Side Streaming

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

फिर पेज हर बदलाव को एनिमेट करता है:

• टेक्स्ट 0.7 s में fade in होता है;
• नई rows और grid items 0.42 s में slide in होते हैं;
• charts 1.8 s में ड्रॉ होते हैं;
• container heights अचानक कूदने के बजाय transition होते हैं।

Escape hatch: AppBlock, iframe में एक ऐप

ChatGPT generated inline app

कुछ रिक्वेस्ट्स ऐसी चीज़ें मांगती हैं जिनके लिए नेटिव कंपोनेंट्स नहीं बने हैं, जैसे Web Audio से आवाज़ बनाने वाला drum machine। इनके लिए, मॉडल एक AppBlock लिख सकता है: HTML, CSS और JavaScript में बना एक पूरी तरह से तैयार web app, जो रिस्पॉन्स में embed होता है। यह ऐसे ही एक AppBlock की शुरुआत है, जिसे छोटा किया गया है:

1<AppBlock title="Drum Lab" icon="app-chatgpt" variant="inline" app_block_id="drum-lab-01">
2<div id="dl" class="w-full min-w-0 space-y-4 text-base">
3  <style>
4    #dl{color:var(--viz-text)}#dl button{touch-action:manipulation}#dl .panel{background:var(--viz-panel);border:1px solid var(--viz-border);border-radius:15px}…
5  </style>
6  …
7      <button id="dl-play" class="btn" style="background:var(--viz-text);color:var(--viz-card);min-width:100px">▶ Play</button>
8  …
9</div>
10<script>
11(function(){
12const root=document.getElementById('dl');if(root.dataset.init)return;root.dataset.init="yes";
13…
14function audioInit(){if(!audio){const C=window.AudioContext||window.webkitAudioContext; if(!C)return false;audio=new C();…
15…
16})();
17</script>
18</AppBlock>

AppBlocks को Intelligent UI कंपोनेंट्स से अलग तरीके से रेंडर किया जाता है।

सबको एक साथ जोड़ना

आप एक prompt टाइप करते हैं। मॉडल इंटरफेस लिखना शुरू करता है, सर्वर उसे ऐसी चीज़ में बदलता है जिसे ChatGPT चला सके, और जैसे-जैसे रिस्पॉन्स स्ट्रीम होता है, पेज उसे टुकड़ा-टुकड़ा बनाता जाता है। एक बार जब यह तैयार हो जाता है, तो स्लाइडर हिलाने या checkbox टिक करने से इंटरफेस लोकली अपडेट हो जाता है, बिना मॉडल से दोबारा पूछे।

एक मॉडल-स्पेसिफिक भाषा, सर्वर कंपाइलेशन स्टेप, नेटिव रेंडरर्स और एक ठोस design system — ये सब मिलकर इसे मुमकिन बनाते हैं। हर हिस्सा एक अहम भूमिका निभाता है और साथ मिलकर ये दुनिया भर में अपने अरबों यूज़र्स के लिए AI native interfaces की अगली पीढ़ी पेश करते हैं। क्या दौर आ गया है!

Screenshots of ChatGPT Intelligent UI

Methodology

ये सभी निष्कर्ष हमारे अपने ChatGPT अकाउंट्स, ChatGPT web app द्वारा जनरेट किए गए ट्रैफ़िक, और उस JavaScript से आए हैं जिसे chatgpt.com सार्वजनिक रूप से सर्व करता है। ये GPT-6 और GPT-6 Thinking के साथ अक्टूबर 2026 में लिए गए थे।

विश्लेषण Codex और Claude की मदद से किया गया। Codex के साथ लिखा गया, Visualisations Claude द्वारा

(ज़्यादा विस्तृत वर्ज़न यहाँ उपलब्ध है: https://www.openui.com/blog/how-chatgpt-intelligent-ui-works