Zum Inhalt springen
Christian Igel· Entwicklungstagebuch
← Entwicklungstagebuch

Etappe 02 / 06 · Dokumente sichtbar machen

Ein Dokument ist mehr als sein Quelltext

Die Dokumentenwerkstatt bekam eine echte Vorschau. Erst damit konnte man im KI-Chat beurteilen, wie eine Seite tatsächlich aussieht.

01

Die Idee

Die KI kann eine Überschrift ändern oder einen Absatz überarbeiten. Aber wie sieht das Ergebnis auf der Seite aus? Für eine Dokumentenwerkstatt ist diese Frage entscheidend. Eine Liste von Dateien und ein Textfeld reichen dafür nicht.

Die damalige MCP-Ansicht des Editors bot genau das: Dateiauswahl und Quelltext. Eine gerenderte Dokumentvorschau fehlte. Der nächste Schritt war deshalb sehr konkret: das Dokument direkt in der App sichtbar machen.

Quelltext<h1>Unser Angebot</h1>
<p>Eine klare Einleitung.</p>
VorschauUnser Angebot

Eine klare Einleitung.

Schematische Darstellung · Dokumente sichtbar machen

02

Wo es hakte

Die Vorschau musste HTML und Gestaltung gemeinsam anzeigen, ohne beim bloßen Anschauen etwas zu speichern. Ein Entwurf sollte ein Entwurf bleiben.

Gleichzeitig darf ein geöffnetes Dokument nicht beliebige Programme in der App ausführen. Die Darstellung brauchte einen geschützten Bereich. Einige Bilder und besondere Schriften wurden außerdem vom damaligen Host blockiert – diese Grenze ließ sich nicht durch einen hübscheren Editor wegdesignen.

03

Wie es weiterging

Die App erhielt nummerierte, anklickbare Seiten und drei Ansichten: Vorschau, Quelltext und eine geteilte Ansicht. Einpassen und Zoom halfen beim Beurteilen der Seite. Entwurf, Speichern und Verwerfen wurden klar voneinander getrennt.

Die Dokumentvorschau blieb scriptlos. Lokale Gestaltungsdateien wurden mit dem Dokument zusammengeführt; gesperrte Bild- und Schriftfunktionen wurden sichtbar erklärt. Die Bedienung wurde auf großen und schmalen Ansichten sowie bei vergrößerter Darstellung geprüft.

04

Was heute davon bleibt

Du kannst eine Seite auswählen, ihre Darstellung sehen und den Quelltext daneben bearbeiten. Dafür musst du weder das Layout im Kopf zusammensetzen noch das Dokument in ein weiteres Programm übertragen.

Der Schritt zeigte, was eine MCP App leisten soll: Die KI bekommt passende Werkzeuge, und der Mensch bekommt eine Oberfläche, an der er das Ergebnis selbst beurteilen kann. Eine Vorschau ist dabei ausdrücklich noch kein gespeicherter Stand.

MCP Apps & Workspaces entdecken →