Erstelle ein Traumtagebuch mit Craft

In diesem Beispiel verwenden wir Craft, um ein persönliches Traumtagebuch zu führen. Wir erstellen eine kleine Web-App, mit der wir unsere Träume erfassen und dann ChatGPT oder Claude bitten können, jedem Traum eine Deutung hinzuzufügen.

Schritt 1 — Erstelle dein Dokument

Das Dokument für unser Traumtagebuch ist ganz einfach: Wir fügen jeden neuen Traum oben hinzu, mit dem Datum als Überschrift und einigen zusätzlichen Informationen darunter.

Verwende die Vorlage, um ein neues Dokument für dein Traumtagebuch zu erstellen:

Traumtagebuch

Vorschau anzeigen Vorlage anwenden

Schritt 2 — API-Zugriff aktivieren

Aktiviere den API-Zugriff für dein Dokument, um eine eindeutige URL zu erhalten, über die dein Dokument gelesen und ergänzt werden kann – zum Beispiel von der Web-App, die wir unten erstellen.

Schritt 1

Öffne den Tab „Imagine“

Schritt 2

Klicke auf „Add Your First API Connection“

Schritt 3

Konfiguriere deine API-Verbindung mit einem Namen. Für dieses Projekt muss die API nur in deine Dokumente schreiben. Setze die API-Berechtigungen auf „Write“.

Schritt 4

Klicke auf „Add Document“ und wähle dein Dokument „Dream Journal“ aus.

Schritt 5

Die API-URL, über die mit deinem Dokument interagiert wird, wird jetzt oben angezeigt

Schritt 6

Klicke auf die Schaltfläche „Download AI Bundle“. Dadurch wird ein Ordner mit der API-Dokumentation und dem Inhalt deines Dokuments heruntergeladen.

Schritt 3 — Auf Lovable erstellen

Jetzt erstellen wir die eigentliche Website für unser Dashboard auf Lovable. Für die oben gezeigte Beispielseite haben wir folgenden Prompt verwendet:

I am creating a dream journal to log and analyze my dreams.

The information is stored in Craft. Please check the attached file including an example of the current state of my Dream Journal Craft doc, as well as information on the API you should use to save my dreams.

I want you to create a website displaying an input form to record my dreams and sleep quality.

The site should display at the center a form with a slider for sleep quality (from very bad to excellenct). Above their slider there should be an emoji for each quality level, that gets updated as the slider is moved. Below there should be a text input for dream itself.

The design should calming and soft. Use moody colors and round shapes, with a soft gradient for the background.

Gehe zu Lovable und füge den Prompt in das Eingabefeld ein. Vergiss nicht, das AI Bundle für dein Dokument anzuhängen, das wir gerade heruntergeladen haben.

Lovable beginnt zu arbeiten, analysiert den Inhalt des Bundles, um die Dokumentstruktur und die Nutzung der API zu verstehen. Dann erstellt es die Website gemäß unserem Prompt.

Jetzt haben wir eine schöne Website, mit der wir Träume in unser Traumtagebuch eintragen können! Wenn du möchtest, kannst du diese Web-App auf deinem Startbildschirm speichern, damit du jeden Morgen schnell darauf zugreifen kannst.

Schritt 4 — MCP-Zugriff aktivieren

Aktiviere den MCP-Zugriff für dein Dokument, um eine eindeutige URL zu erhalten, über die KI-Clients dein Dokument lesen und ergänzen können:

Schritt 1

Öffne den Tab „Imagine“

Schritt 2

Klicke auf „Create Your First MCP Connection“

Schritt 3

Konfiguriere deine MCP-Verbindung mit einem Namen.

Schritt 4

Klicke auf „Add Document“ und wähle dein Dokument „Dream Journal“ aus.

Schritt 5

Die MCP-URL, über die mit deinem Dokument interagiert wird, wird jetzt oben angezeigt.

Schritt 5 — MCP-Verbindung einrichten

Jetzt verwenden wir die MCP-URL, um das Dokument mit einem Client zu verbinden:

Ein Claude Pro- oder Max-Abonnement ist erforderlich, um benutzerdefinierte Konnektoren hinzuzufügen.

Schritt 1

Gehe zu den Einstellungen

Schritt 2

Wähle den Abschnitt „Connectors“ aus und klicke auf die Schaltfläche „Add custom connector“

Schritt 3

Gib dem Konnektor einen aussagekräftigen Namen und füge die MCP-URL ein. Lass die Felder „OAuth Client ID“ und „Client Secret“ in den erweiterten Einstellungen leer – Claude übernimmt die Authentifizierung bei Bedarf automatisch.