OpenGenerativeUI - AI-आधारित Generative UI framework ओपन सोर्स

 (github.com/CopilotKit)
35 पॉइंट द्वारा xguru 2026-03-17 | 3 टिप्पणियां | WhatsApp पर शेयर करें
  • Claude द्वारा जारी की गई interactive visual material generation सुविधा को उसी रूप में लागू किया गया है
  • साधारण text response नहीं, बल्कि chart, diagram, visualization जैसी सामग्री को अपने-आप जनरेट करने वाला Generative UI
    • algorithm visualization: binary search, BFS/DFS, sorting आदि
    • 3D animation: WebGL/CSS3D-आधारित interactive scene
    • chart और diagram: pie chart, bar chart, network diagram आदि
    • widget और simulation: form, math graph, interactive tool आदि
  • सभी visual elements को sandbox iframe के अंदर render किया जाता है, जिससे security और isolation सुनिश्चित होते हैं
    • automatic light/dark theme, progressive animation, responsive resizing का समर्थन
  • CopilotKit और LangGraph के आधार पर conversational visual content को real time में जनरेट करता है
    • Turborepo-आधारित monorepo structure में बनाया गया
    • apps/app: Next.js 16, React 19, Tailwind 4-आधारित frontend
    • apps/agent: LangGraph और CopilotKit middleware का उपयोग करने वाला Python agent
  • यह कैसे काम करता है
    • user CopilotKit chat UI के जरिए prompt इनपुट करता है
    • agent तय करता है कि response text, tool call, या visual component में से किस रूप में होना चाहिए
    • frontend का widgetRenderer hook HTML प्राप्त करके उसे iframe में render करता है
    • Skeleton loading के बाद smooth fade-in और automatic height adjustment किया जाता है
  • visualization decision matrix उपलब्ध
    • request type के अनुसार SVG, HTML, Chart.js, Three.js, D3.js आदि में से उपयुक्त तकनीक अपने-आप चुनी जाती है
    • उदाहरण: process explanation के लिए Flowchart, data comparison के लिए Bar chart, 3D representation के लिए Three.js का उपयोग
  • MIT license

संबंधित पढ़ाई

3 टिप्पणियां

 
beoks 2026-03-17

लगता है कि यह generated HTML को iframe के अंदर render करने का तरीका है।
 
xguru 2026-03-17

Claude ने यह फीचर लॉन्च किए अभी ज़्यादा समय भी नहीं हुआ था, और इसे तुरंत open source में implement भी कर दिया गया।

contributors में Claude का होना भी काफ़ी मज़ेदार है, haha
Claude द्वारा लॉन्च किए गए फीचर को हूबहू implement करने में मदद करने वाला Claude..
 
kissdesty 2026-03-17

सुना है कि अगर Claude Code का इस्तेमाल करके commit किया जाए, तो default setting में वह अपने-आप contributor के तौर पर जुड़कर दिखता है।