On this page
अवलोकन
Hexode एक ब्राउज़र-आधारित, क्लाउड-समर्थित कोलैबोरेटिव IDE है जिसे AI-नेटिव विकास और रीयल-टाइम सहयोग को सीधे ब्राउज़र में लाने के लिए डिज़ाइन किया गया है।
यह कई उपयोगकर्ताओं को बिना किसी स्थानीय इंस्टॉलेशन के एक साथ मल्टी-फ़ाइल प्रोजेक्ट्स को संपादित करने, कोड चलाने और एक एकीकृत AI कोडिंग असिस्टेंट से परामर्श करने में सक्षम बनाता है। Hexode तकनीकी साक्षात्कारों और DSA अभ्यास के लिए शून्य-सेटअप ब्राउज़र कोडिंग प्लेग्राउंड के रूप में भी कार्य करता है।
मैंने Hexode क्यों बनाया
"मुझे एक ऐसा विकास वातावरण चाहिए था जो पूरी तरह से ब्राउज़र में हो: कोई स्थानीय सेटअप नहीं, कोड लिखने और चलाने की जगह, साक्षात्कार और DSA समस्याओं का अभ्यास करने, वास्तविक समय में अन्य लोगों के साथ सहयोग करने और उसी वर्कफ़्लो के अंदर AI का उपयोग करने की सुविधा।"
आर्किटेक्चर
- LevelDB is used for CRDT persistence.
- Clerk provides authentication.
- Vercel hosts the frontend.
रीयल-टाइम सहयोग
Monaco serves as the primary editing surface, while Yjs provides CRDT-based shared document state. File contents are represented as Y.Text, and project files are tracked using a Y.Map. Synchronization is transported over WebSocket, with Awareness providing real-time presence and cursor state. Chat messages are also persisted within the shared Yjs document.
Crucially, the server implements the Yjs binary synchronization and awareness protocol directly using y-protocols/sync, y-protocols/awareness, and lib0 encoding/decoding.
By avoiding the standard y-websocket server package, the HTTP and WebSocket state live together in the same Node.js process. This means the server already has access to the live Yjs documents, allowing the AI endpoint to access that state without requiring the browser to resend the full code context.
Hard Problem Callout
सिंक्रनाइज़ेशन बग: इनिशियलाइज़ेशन रेस कंडीशन को हल करना
In the original approach, a simple setTimeout was used before initializing a project. This risked overwriting the state before the CRDT synchronization had fully completed.
The final approach waits for the Websocket/Yjs provider to emit a 'synced' event. By combining provider.on('synced') with a check to ensure yFilesMap.size === 0, the project initializes only when appropriate. This is a correctness and race-condition fix, ensuring reliable document state.
setTimeout(() => init(), 1000)provider.on("synced", ...) + yFilesMap.size === 0मल्टी-फ़ाइल कोड निष्पादन
Hexode supports multi-file projects, but Judge0 receives a single source_code string. This central mismatch requires a language-specific transformation pipeline.
For Java, public classes are renamed to Main, packages are stripped, access modifiers are handled, and Main collisions are managed.
For JavaScript, a custom require() shim is injected, resolving relative modules through an in-memory registry.
For C, C++, and Python, files are merged via ordered concatenation.
HexodeAI
When a user sends a message, it hits the /api/ai/chat endpoint. After rate limiting, the server reads the current Yjs document state directly from memory. It builds the context (capped at 2000 characters) and sends it to the Gemini API (gemini-3-flash-preview).
The response is streamed back via SSE (Server-Sent Events) and consumed by the client using a ReadableStream for incremental React rendering.
The AI endpoint enforces limits of 5 requests per minute and 20 requests per day. Additionally, a keyword-based query firewall blocks unrelated queries before they even reach the Gemini API.
इंजीनियरिंग चुनौतियाँ
1. CRDT इनिशियलाइज़ेशन रेस कंडीशन
Problem: Initializing default project files could overwrite remote state if synchronization hadn't finished.
Approach: Listen to the Yjs provider's 'synced' event and check if the document is empty before initializing.
Result: Removed the initialization race that could overwrite synchronized project state.
2. मल्टी-फ़ाइल प्रोजेक्ट निष्पादन
Problem: Executing multi-file code against a single-string execution API (Judge0).
Approach: Implement language-specific merging pipelines (e.g., custom require shims, class renaming, concatenation).
Result: Enables multi-file execution across 5 supported languages.
3. मैनुअल Yjs WebSocket प्रोटोकॉल
Problem: Need to share HTTP and WebSocket state without running separate processes.
Approach: Implement the Yjs binary sync protocol directly on the Express server using lib0 and y-protocols.
Result: Unified server state, enabling the AI to read live documents from memory.
4. SSE मिड-स्ट्रीम एरर हैंडलिंग
Problem: HTTP status codes cannot be changed once headers are sent during a Server-Sent Events stream.
Approach: Stream specialized error event payloads that the client interprets and renders gracefully.
Result: Robust UI error states even when the LLM API fails mid-generation.
5. Monaco/Yjs री-बाइंडिंग
Problem: Switching files in the IDE left lingering CRDT bindings on the editor instance.
Approach: Destroy the previous MonacoBinding and rebind on file name changes.
Result: Clean transitions between files with correct cursor and edit tracking.
तकनीकी निर्णय
Manual Yjs Server
Sharing the HTTP and WebSocket server provides direct access to the server-side document state in memory.
Sync-Event Initialization
Prevents premature default initialization that would corrupt incoming CRDT state.
Server-Side Yjs Context for AI
Avoids sending the full document contents over the network from the browser with every AI request.
Derived WebSocket URL
Deriving the WebSocket URL from the API URL reduces frontend deployment configuration surface.
समझौते और सीमाएँ
- इन-मेमोरी Yjs डॉक्स सीधे क्षैतिज स्केलिंग (horizontal scaling) को रोकते हैं।
- प्राधिकरण (Authorization) वर्तमान में केवल क्लाइंट-साइड है।
- Judge0 CE सार्वजनिक API का उपयोग किया जाता है, जिसकी अपनी दर और SLA सीमाएँ हैं।
- कोई स्वचालित परीक्षण सुइट नहीं है।
- कोडबेस बिना TypeScript के JavaScript है।
- टर्मिनल एक सच्चे PTY के बजाय सिम्युलेटेड है।
- कोई समर्पित संघर्ष-समाधान (conflict-resolution) UI नहीं है, क्योंकि Yjs स्वचालित रूप से CRDT संघर्षों को संभालता है।
मैंने क्या सीखा
रीयल-टाइम सिस्टम मौलिक रूप से सिंक्रनाइज़ेशन की समस्याएँ हैं।
CRDT स्थिति यह बदल देती है कि दृढ़ता (persistence) और इनिशियलाइज़ेशन के बारे में कैसे सोचा जाना चाहिए। अब आप केवल डेटाबेस से स्थिति लोड नहीं कर सकते; आपको इसे सुरक्षित रूप से मर्ज करना होगा।
मल्टी-फ़ाइल AI संदर्भ एक आर्किटेक्चर समस्या है, न कि केवल 'LLM API को कॉल करना'। सिस्टम को इस तरह डिज़ाइन करना ताकि सर्वर के पास लाइव दस्तावेज़ों तक पहुंच हो, क्लाइंट पेलोड के बोझ को पूरी तरह से हटा देता है।
विश्वसनीय निष्पादन के लिए निष्पादन सेवा की बाधाओं के चारों ओर डिज़ाइन करने की आवश्यकता होती है।
आज मैं अलग तरीके से क्या बनाता
"अगर मैं आज Hexode शुरू करता, तो मैं प्लेटफ़ॉर्म को मौजूदा IDE में जोड़े गए सहायक के रूप में मानने के बजाय आर्किटेक्चर स्तर से AI-नेटिव बनाता। मैं पहले के Piston-आधारित दृष्टिकोण से जाने के बजाय शुरुआत से ही Judge0 को चुनता।"
टेक्नोलॉजी स्टैक
| Technology | Role |
|---|---|
| React | फ्रंटएंड UI लाइब्रेरी |
| Vite | फ्रंटएंड टूलिंग और बंडलर |
| Monaco | कोड एडिटर इंटरफ़ेस |
| Yjs | रीयल-टाइम सहयोग के लिए CRDT |
| WebSocket | रीयल-टाइम सिंक्रनाइज़ेशन ट्रांसपोर्ट |
| Node.js | बैकएंड रनटाइम वातावरण |
| Express | बैकएंड API और WebSocket होस्ट |
| MongoDB Atlas | उपयोगकर्ता और प्रोजेक्ट मेटाडेटा के लिए प्राथमिक डेटाबेस |
| Mongoose | MongoDB ऑब्जेक्ट मॉडलिंग |
| LevelDB | CRDT दस्तावेज़ अपडेट के लिए स्थायी संग्रहण |
| Gemini | HexodeAI को शक्ति प्रदान करने वाला LLM |
| Judge0 | कोड निष्पादन इंजन |
| Clerk | उपयोगकर्ता प्रमाणीकरण |
| Framer Motion | UI एनिमेशन |
| Tailwind | यूटिलिटी-फर्स्ट CSS स्टाइलिंग |