DAUB MCP Server ermöglicht es Claude, Benutzeroberflächen über JSON-Spezifikationen zu generieren und darzustellen

DAUB ist ein speziell für Claude entwickelter MCP-Server, der den traditionellen UI-Entwicklungsprozess umgeht, bei dem Claude Code (wie JSX/HTML) generiert, den Entwickler dann kopieren, einfügen, kompilieren und debuggen müssen. Stattdessen kann Claude direkt vollständige Benutzeroberflächen erzeugen und rendern.

So funktioniert es

Bei der Verwendung von Claude mit DAUB läuft der Workflow wie folgt ab:

• Claude ruft generate_ui("Ich brauche ein Dashboard mit einem Ausgabendiagramm, Filtern und einer Datentabelle") auf
• DAUBs MCP-Server erzeugt eine strukturierte JSON-Spezifikation
• DAUB rendert diese Spezifikation sofort als Live-Interface – keine Kompilierung oder Kopieren-Einfügen erforderlich
• Claude kann dann validate_spec oder render_spec aufrufen, um das Design über mehrere Gesprächsrunden hinweg zu verbessern

MCP-Server-Werkzeuge

Der MCP-Server, der auf Cloudflare Edge läuft, bietet vier spezifische Werkzeuge:

• generate_ui: Wandelt natürliche Sprachbeschreibungen in gerenderte Interfaces um
• render_spec: Nimmt eine JSON-Spezifikation und liefert ein Live-Rendering zurück
• validate_spec: Ermöglicht Claude, seine eigene Ausgabe vor dem Rendering zu überprüfen
• get_component_catalog: Lässt Claude 76 Komponenten in 34 Kategorien durchsuchen, um passende UI-Elemente auszuwählen

Technische Details

Das JSON-Spezifikationsformat ist bewusst einfach gehalten, um sicherzustellen, dass Claude es zuverlässig erzeugen kann. Es umfasst Layout, Typografie, Formulare, Tabellen, Navigation, Datenanzeige und Overlays. Claude kann Spezifikationen über mehrere Runden hinweg vergleichen und iterieren, ohne von vorne beginnen zu müssen.

Die Rendering-Seite benötigt nur zwei CDN-Dateien: daub.css und daub.js. Es enthält 20 visuelle Themenfamilien und erfordert keinen Build-Schritt.

Das gesamte Projekt wurde während der Entwicklung mit Claude Code erstellt, wobei das Spezifikationsformat intensiv mit Claude iteriert wurde, um eine konsistente Generierung ohne Halluzination von Komponentennamen zu gewährleisten.

Verfügbarkeit

DAUB ist kostenlos nutzbar. Das GitHub-Repository ist verfügbar unter https://github.com/sliday/daub, und es gibt einen Playground unter https://daub.dev/playground.html, wo man es ohne Claude ausprobieren kann. Ein Roadmap ist verfügbar unter https://daub.dev/roadmap.