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

✍️ OpenClawRadar📅 Veröffentlicht: 16. März 2026🔗 Source
Claude-gestütztes MCP-Tool erzeugt interaktive HTML-Komponenten ohne Build-Tools
Ad

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.

Ad

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.

📖 Den vollständigen Source lesen: r/ClaudeAI

Ad

👀 Siehe auch

MCP-India-Stack: Offline-fähiger Server für indische Finanzdaten in KI-Agenten
Werkzeuge

MCP-India-Stack: Offline-fähiger Server für indische Finanzdaten in KI-Agenten

MCP-India-Stack ist ein offline-first MCP-Server, der indische Finanz- und Regierungs-API-Funktionalität ohne Authentifizierung oder externe API-Aufrufe bereitstellt. Er bündelt Datensätze lokal für Steuerberechnungen, Validierungstools und Abfragen.

OpenClawRadar
Repo-Tokens: GitHub-Aktion fügt Token-Zählbadge für LLM-Kontextfenster-Bewusstsein hinzu
Werkzeuge

Repo-Tokens: GitHub-Aktion fügt Token-Zählbadge für LLM-Kontextfenster-Bewusstsein hinzu

Repo Tokens ist eine GitHub-Aktion, die die Größe Ihres Codebestands in Tokens mit tiktoken zählt und ein Badge in Ihrer README anzeigt, das angibt, wie viel Prozent des Kontextfensters eines LLM es ausfüllt. Das Badge verwendet Grün für unter 30 %, Gelb für 50–70 % und Rot für 70 %+.

OpenClawRadar
Freestyle startet Sandboxes für KI-Codierungsagenten mit Live-Forking
Werkzeuge

Freestyle startet Sandboxes für KI-Codierungsagenten mit Live-Forking

Freestyle bietet Cloud-Sandboxes für KI-Coding-Agenten, die in etwa 500 ms starten und Live-Forking mit weniger als 400 ms Pause ermöglichen, wodurch vollständige VM-Klone einschließlich Speicherzustand erstellt werden können. Sie laufen mit vollständigem Debian und Hardware-Virtualisierung auf Bare-Metal-Infrastruktur.

OpenClawRadar
OpenClaw PARA-Fähigkeit organisiert KI-Assistentendateien automatisch
Werkzeuge

OpenClaw PARA-Fähigkeit organisiert KI-Assistentendateien automatisch

Ein Entwickler hat eine OpenClaw-Fähigkeit erstellt, die die PARA-Methode (Projekte, Bereiche, Ressourcen, Archive) für die Dateiorganisation durchsetzt und Dateien automatisch in vier strukturierte Ordner sortiert, anstatt alles im Stammverzeichnis abzulegen.

OpenClawRadar