Claude-gestütztes MCP-Tool erzeugt interaktive HTML-Komponenten ohne Build-Tools

Architektur und Workflow

Ein Entwickler hat daub.dev erstellt, ein System, in dem Claude als Gehirn eines MCP-Servers (Model Context Protocol) fungiert, der interaktive HTML-Komponenten bei Bedarf generiert. Das Setup umfasst, dass Claude sich mit dem MCP-Server verbindet und ein generate_ui-Tool mit einer natürlichen Sprachbeschreibung dessen aufruft, was benötigt wird.

Das Tool gibt einen eigenständigen HTML+CSS+JS-Snippet zurück, der bereit ist, in jede Seite eingefügt zu werden, ohne React, einen Bundler oder eine Build-Pipeline zu benötigen.

Warum Claude für diesen Anwendungsfall gut geeignet ist

Laut dem Entwickler ist Claudes Befolgung von Anweisungen bei strukturierten Tool-Schemata bemerkenswert konsistent. Das generate_ui-Tool hat ein enges Eingabeschema mit Parametern für Komponententyp, Daten und Stilbeschränkungen, und Claude halluziniert selten Felder oder ignoriert Einschränkungen.

Bei anderen Modellen musste der Entwickler erhebliche defensive Parsing-Logik hinzufügen, aber mit Claude ist die Ausgabe vorhersehbar sauber. Zudem ist Claudes Verständnis von semantischem HTML stark genug, dass die erzeugten Komponenten standardmäßig barrierefrei sind – mit korrekten Landmark-Rollen, Label-Zuordnungen und Tastaturnavigation – ohne explizite Anweisungen.

Tool-Ausgabeformat

Das MCP-Tool gibt eine render_spec aus – ein JSON-Objekt, das Layout, Slots und Komponentendaten beschreibt –, das der Client in HTML hydratisiert. Dieser Ansatz ist sauberer als die Rückgabe roher HTML-Strings, da er sich leichter vergleichen, zwischenspeichern und bei Zustandsänderungen aktualisieren lässt, ohne ein vollständiges Neu-Rendering zu erfordern.

Der Entwickler erwähnt, dass er für Diskussionen über das Tool-Schema-Design, den Render-Pipeline oder die Funktionsweise der 7-stufigen selfCheck-Validierung verfügbar ist. Ein Playground zum Ausprobieren des Systems ist unter daub.dev/playground verfügbar.