Mit KI eine Website erstellen und veröffentlichen

Zuvor haben Sie in Statische Seiten mit KI migrieren den Ablauf kennengelernt, wie eine bereits erstellte statische Seite in einen von WEEGLOO verwalteten, inhaltsbasierten Dienst überführt wird. Diesmal behandeln wir einen umfassenderen Ablauf, der auch den Schritt einschließt, eine Seite von Grund auf neu zu erstellen.

In dieser Anleitung nutzen Sie einen LLM-Agenten und WEEGLOO MCP, um ausgehend von einem leeren Stand fünf Aufgaben nacheinander durchzuführen. Zunächst schließen Sie mit einem KI-gestützten Designwerkzeug Design und Umsetzung der Seite ab, analysieren anschließend die erzeugte Seite, um automatisch einen Content Type zu definieren, und laden danach die in der Seite enthaltenen Daten als Content. Daraufhin passen Sie den Code so an, dass die Seite ihre Daten über CDA bezieht, und veröffentlichen die Seite schließlich mit dem Web Hosting von WEEGLOO nach außen.

Auf diese Weise lässt sich der gesamte Ablauf vom Design über die Inhaltsverwaltung bis zur Veröffentlichung allein mit einem LLM-Agenten und WEEGLOO abschließen, ohne dass Sie eine eigene Infrastruktur aufbauen müssen.

Vorbereitung

Bevor Sie beginnen, müssen drei Dinge bereitstehen.

Erstens muss in WEEGLOO ein neuer, leerer Space angelegt sein. Alle Content Type und Content, die Sie künftig erstellen, werden innerhalb dieses Space verwaltet. Ausführliche Informationen zu Organization und Space finden Sie unter Zugriff und Berechtigungen.

Zweitens muss der LLM-Agent mit WEEGLOO MCP verbunden sein. Diese Anleitung orientiert sich an der Cursor IDE, aber in jeder Umgebung, die MCP unterstützt, etwa Claude Desktop, lässt sich derselbe Ablauf durchführen. Die Installation wird unter MCP behandelt.

Drittens benötigen Sie ein KI-Werkzeug, das Design und Umsetzung der Seite automatisch erstellt. Diese Anleitung verwendet der Einfachheit halber Vercel v0, aber jedes Werkzeug eignet sich, das aus einer reinen Anfrage in natürlicher Sprache Design und Code zusammen erstellt, etwa Lovable oder Bolt.new. Wenn Ihnen eine Umgebung vertrauter ist, in der Sie den Code selbst schreiben, können Sie auch einen LLM-Agenten wie die Cursor IDE, den Sie ohnehin nutzen, mit Design und Umsetzung zugleich beauftragen.

Design und Umsetzung der Seite

Der erste Schritt besteht darin, Design und Umsetzung der Seite abzuschließen. In diesem Schritt formulieren Sie in natürlicher Sprache, welche Seite Sie erstellen möchten, und übergeben dies unverändert an das KI-Werkzeug.

In dieser Anleitung dient eine API-Dokumentationsseite für einen fiktiven Analytics-API-Dienst als Beispiel. Viele Entwicklungsteams führen für den Betrieb ihrer API-Dokumentation eigene Dokumentationswerkzeuge oder externe Vorlagen ein, doch bei diesem Vorgehen sind Form und Inhalt der Dokumentation oft eng miteinander verknüpft, sodass eine freie Strukturänderung oder ein an den Teamablauf angepasster Betrieb häufig schwerfällt. Diesmal gestalten Sie den gesamten Ablauf vom Design bis zur Inhaltsverwaltung selbst und schaffen so eine Form, die sich nach Bedarf frei betreiben lässt.

Die Seite enthält Informationen über die API selbst (Name, Tagline, kurze Einführung) sowie Informationen zu jedem Endpunkt (HTTP-Methode, Pfad, Zusammenfassung, Beschreibung). Die konkrete Form der Seite oder die Anzahl der behandelten Endpunkte können Sie frei nach Ihrer betriebenen API festlegen und im Betrieb beliebig erweitern. Solche Anforderungen formulieren Sie in natürlicher Sprache wie folgt und übergeben sie an das KI-Werkzeug.

Hey, I want to build a docs site for an analytics API called Pulse.
Standard API reference layout — an overview area with the API's name,
tagline, and a short intro, plus an endpoint reference section showing
the HTTP method, path, summary, and description for each. Clean,
dev-friendly, not too colorful — think Stripe-style readable.

Das KI-Werkzeug erstellt nach Erhalt der Anfrage einen Designentwurf und schreibt dazu passendes Markup samt Stil. Zu diesem Zeitpunkt ist noch kein Content-Management-System angebunden, sodass alle auf der Seite sichtbaren Daten direkt im Code stehen.

Den Code der so erstellten Seite laden Sie herunter und übernehmen ihn in eine LLM-Agenten-Umgebung wie die Cursor IDE. Alle folgenden Arbeiten bauen auf diesem Code auf und durchlaufen dieselben Schritte wie der Ablauf in Statische Seiten mit KI migrieren.

Inhaltsmodellierung

In diesem Schritt definieren Sie die Datenstruktur der zuvor erzeugten Seite als Content Type. Ein Content Type ist wie ein Bauplan der Daten und legt im Voraus fest, welche Field die in WEEGLOO verwalteten Daten besitzen.

Im Code der Seite stehen Informationen über die API selbst und Informationen zu jedem Endpunkt zusammen, wobei die beiden Datenarten eine Eins-zu-viele-Beziehung bilden. Daher teilt sich diese Seite auf natürliche Weise in zwei Content Type auf: einen, der die API-Informationen aufnimmt, und einen, der die Endpunktinformationen aufnimmt.

Diese Analyse und die Erstellung des Content Type erfolgen automatisch, indem Sie den LLM-Agenten lediglich wie folgt beauftragen.

Hey, I just dropped the page from v0 into the project.
The data's all hardcoded for now (the API info up top, the endpoints down
below).
 
I want to migrate it over to Weegloo so the page can pull its content from
a CMS instead of having it all baked in. Let's take it step by step rather
than doing the whole thing in one go.
 
To kick things off, could you take a look and figure out
what content types would make sense for it, then go ahead and create them
in Weegloo? We'll deal with the actual content and the API wiring in the
following steps.

Der LLM-Agent untersucht nach Erhalt der Anfrage die Struktur des Codes, leitet daraus die Datenarten und ihre Beziehungen ab, legt für jedes Field einen passenden Typ fest und erstellt anschließend über WEEGLOO MCP die Content Type.

Wenn die Arbeit abgeschlossen ist und Sie die Content Type-Seite der WEEGLOO-Content-Studio aufrufen, sehen Sie, dass zwei neue Content Type angelegt wurden: einer für die API und einer für die Endpunkte. Der API-Content Type enthält Field wie Name, Tagline und Einführung, der Endpunkt-Content Type enthält neben HTTP-Methode, Pfad, Zusammenfassung und Beschreibung ein Verweis-Field (Reference), das angibt, zu welcher API der Endpunkt gehört.

Sobald die Content Type auf diese Weise definiert sind, ist die Vorbereitung abgeschlossen, um auf Basis dieser Struktur die tatsächlichen Daten zu laden. Ausführliche Informationen zu Content Type finden Sie unter Content-Modellierung.

Erstellung von Content

Ein Content Type definiert nur das Format der Daten und enthält selbst keine Daten. In diesem Schritt überführen Sie auf Basis des zuvor definierten Content Type die im Seitencode stehenden tatsächlichen Daten als Content.

Wenn Sie den LLM-Agenten wie folgt beauftragen, analysiert er die Daten im Code, erstellt den zum Content Type passenden Content und übernimmt auch die Veröffentlichung.

Alright, the content types look good. Now let's move on to actually loading
the data.
 
Could you go through project again, pull out the actual content
that's hardcoded in there, and create entries in Weegloo using the content
types we just made? Once everything's in, go ahead and publish them too
so they're ready to be served.

Der LLM-Agent analysiert nach Erhalt der Anfrage den Code erneut, teilt die Daten nach Einträgen auf und registriert anschließend über WEEGLOO MCP nacheinander die API-Informationen und die einzelnen Endpunktinformationen. Der registrierte Content wird mitveröffentlicht, damit er von außen abgefragt werden kann.

Wenn die Arbeit abgeschlossen ist und Sie die Content-Liste der WEEGLOO-Content-Studio aufrufen, sind sowohl die API- als auch die Endpunktinformationen im veröffentlichten Zustand registriert. Ab diesem Zeitpunkt können Sie die Daten frei über das Content-Studio oder den LLM-Agenten ändern, ohne den Seitencode selbst anpassen zu müssen.

Ausführliche Informationen zum Erstellen und Veröffentlichen von Content finden Sie unter Content erstellen und veröffentlichen.

CDA-Anbindung

Sind auch die Daten vorbereitet, passen Sie nun den Code so an, dass die Seite ihre Daten nicht aus dem direkt im Code stehenden Bestand, sondern über die CDA von WEEGLOO bezieht. CDA ist eine schreibgeschützte API, die bereitgestellt wird, damit externe Dienste veröffentlichten Content abfragen können, und ermöglicht es Webseiten oder mobilen Apps, die Daten von WEEGLOO direkt abzurufen und zu verwenden.

Auch diese Arbeit erfolgt automatisch, wenn Sie den LLM-Agenten wie folgt beauftragen.

Okay, almost there. The content's all in Weegloo and published, so now
let's hook the page up to actually use it.
 
Could you update project so that instead of having all that data
hardcoded in the markup, it fetches from Weegloo's CDA on load and
renders the page from the response? Basically the same page as before,
just pulling from the API now.

Der LLM-Agent entfernt nach Erhalt der Anfrage die statischen Daten, die im Code festgeschrieben waren, und füllt an deren Stelle Code ein, der den CDA-Aufruf vornimmt und die Antwortdaten auf der Seite darstellt. An die Stelle der Endpunktinformationen tritt ein CDA-Aufruf, der die Liste der Endpunkt-Content abfragt, an die Stelle der API-Informationen ein Aufruf, der den API-Content als Einzeldatensatz abfragt.

Wenn Sie die angepasste Seite lokal ausführen und im Browser den Tab „Network“ der Entwicklerwerkzeuge öffnen, können Sie beobachten, wie beim Laden der Seite tatsächliche Anfragen an die CDA von WEEGLOO gesendet werden und die Antworten eintreffen. Ausführliche Informationen zu CDA finden Sie unter Content Delivery API.

Web Hosting

Der letzte Schritt besteht darin, die bisher erstellte Seite nach außen zu veröffentlichen. WEEGLOO stellt mit der Funktion Web Hosting die Möglichkeit bereit, die Seite direkt zu hosten. Damit können Sie die fertige Seite für jeden zugänglich machen, ohne eine eigene Hosting-Infrastruktur aufbauen zu müssen.

Beauftragen Sie den LLM-Agenten wie folgt.

Last thing — let's get this live.
 
Could you set up a WebHosting in Weegloo for this project and deploy the
page to it?

Der LLM-Agent lädt nach Erhalt der Anfrage das Build-Ergebnis der Seite in das Web Hosting hoch und stellt die Seite so bereit, dass sie über eine automatisch ausgestellte Subdomain von außen zugänglich ist.

Nach Abschluss der Bereitstellung können Sie die Seite von überall über die ausgestellte Subdomain-Adresse aufrufen. Ab diesem Zeitpunkt genügt es, Content in der WEEGLOO-Content-Studio zu ändern, damit die geänderten Inhalte sofort auf der Live-Website erscheinen, ohne dass Sie erneut bauen oder neu bereitstellen müssen. Auch Arbeiten, die beim Betrieb einer API-Dokumentation häufig anfallen, etwa das Hinzufügen eines neuen Endpunkts oder das Ändern der Beschreibung eines bestehenden Endpunkts, lassen sich ohne Codeänderung erledigen.

Wenn Sie später im Betrieb eine eigene Domain verwenden möchten, können Sie in der WEEGLOO-Content-Studio eine Custom Domain verbinden. Ausführliche Informationen zu Web Hosting und Custom Domain finden Sie unter Website-Bereitstellung.

Sie haben nun ausgehend von einem leeren Stand den gesamten Ablauf vom Design über die Umsetzung und die Inhaltsverwaltung bis zur Bereitstellung allein mit einem LLM-Agenten und WEEGLOO abgeschlossen. Derselbe Ablauf lässt sich unverändert auch auf komplexere Websites anwenden, und auch das Hinzufügen neuer Content Type im Betrieb oder das Erhöhen der Content-Menge können Sie auf dieselbe Weise nahtlos fortführen.