OpenGenerativeUI – Open-Source-Framework für generative UI auf AI-Basis

 (github.com/CopilotKit)
35 Punkte von xguru 2026-03-17 | 3 Kommentare | Auf WhatsApp teilen
  • Originalgetreue Umsetzung der von Claude eingeführten Funktion zur Erzeugung interaktiver visueller Materialien
  • Generative UI, die nicht nur einfache Textantworten liefert, sondern automatisch Charts, Diagramme, Visualisierungen und weitere Inhalte erzeugt
    • Algorithmus-Visualisierung: Binäre Suche, BFS/DFS, Sortierung usw.
    • 3D-Animationen: Interaktive Szenen auf Basis von WebGL/CSS3D
    • Charts und Diagramme: Kreisdiagramme, Balkendiagramme, Netzwerkdiagramme usw.
    • Widgets und Simulationen: Formulare, mathematische Graphen, interaktive Tools usw.
  • Alle visuellen Elemente werden in einer Sandbox-iframe gerendert, um Sicherheit und Isolation zu gewährleisten
    • Unterstützung für automatische Light-/Dark-Themes, schrittweise Animationen und responsives Resizing
  • Erzeugt interaktive visuelle Inhalte in Echtzeit auf Basis von CopilotKit und LangGraph
    • Aufgebaut als Monorepo-Struktur auf Basis von Turborepo
    • apps/app: Frontend auf Basis von Next.js 16, React 19 und Tailwind 4
    • apps/agent: Python-Agent mit LangGraph und CopilotKit Middleware
  • Funktionsweise
    • Nutzer geben Prompts über die CopilotKit Chat-UI ein
    • Der Agent entscheidet, ob Text, ein Tool-Call oder eine visuelle Komponente die passende Antwortform ist
    • Der widgetRenderer-Hook im Frontend nimmt HTML entgegen und rendert es in ein iframe
    • Nach dem Skeleton-Loading erfolgen sanftes Fade-in und automatische Höhenanpassung
  • Bietet eine Entscheidungsmatrix für Visualisierungen
    • Je nach Anfragetyp wird automatisch die passende Technik wie SVG, HTML, Chart.js, Three.js oder D3.js ausgewählt
    • Beispiel: Für Prozessbeschreibungen wird ein Flowchart genutzt, für Datenvergleiche ein Bar chart, für 3D-Darstellungen Three.js
  • MIT-Lizenz

Verwandte Beiträge

3 Kommentare

 
beoks 2026-03-17

Es scheint also eine Methode zu sein, bei der das generierte HTML innerhalb eines iframe gerendert wird.
 
xguru 2026-03-17

Claude hat diese Funktion noch gar nicht vor so langer Zeit veröffentlicht, und schon wurde sie direkt als Open Source umgesetzt.

Interessant ist auch, dass unter den Mitwirkenden Claude auftaucht, haha.

Claude hilft also dabei, die von Claude veröffentlichte Funktion originalgetreu nachzubauen..
 
kissdesty 2026-03-17

Soweit ich gehört habe, wird man bei Commits mit Claude Code in der Standardkonfiguration automatisch als Contributor aufgeführt.