Build a Dream Journal with Craft

W tym przykładzie użyjemy Craft do prowadzenia osobistego dziennika snów. Zbudujemy małą aplikację webową, której użyjemy do zapisywania naszych snów, a następnie poprosimy ChatGPT lub Claude o dodanie interpretacji do każdego snu.

Step 1 — Create Your Doc

Dokument naszego dziennika snów jest bardzo prosty: po prostu dodajemy każdy nowy sen na górze, z datą jako nagłówkiem i dodatkowymi informacjami poniżej.

Użyj szablonu, aby utworzyć nowy dokument dla swojego dziennika snów:

Dream Journal

Preview Template Use This Template

Step 2 — Enable API Access

Włącz dostęp API dla swojego dokumentu, aby uzyskać unikalny adres URL, który umożliwia odczyt i dodawanie treści do dokumentu, na przykład przez aplikację webową, którą zbudujemy poniżej.

Step 1

Open the “Connections” tab

Step 2

Click “Add Your First API Connection”

Step 3

Skonfiguruj swoje połączenie API, nadając mu nazwę. W tym projekcie API potrzebuje tylko zapisu do Twoich dokumentów. Ustaw uprawnienia API na „Write”.

Step 4

Kliknij „Add Document” i wybierz swój dokument Dream Journal.

Step 5

Adres URL API, który będzie używany do interakcji z Twoim dokumentem, jest teraz wyświetlany na górze

Step 6

Kliknij przycisk „Download AI Bundle”. Spowoduje to pobranie folderu zawierającego dokumentację API oraz treść Twojego dokumentu.

Step 3 — Build on Lovable

Teraz przejdźmy dalej i zbudujmy właściwą stronę internetową dla naszego panelu w Lovable. Do stworzenia przykładowej strony pokazanej powyżej użyliśmy tego promptu:

Tworzę dziennik snów do zapisywania i analizowania moich snów.

Informacje są przechowywane w Craft. Sprawdź załączony plik zawierający przykład aktualnego stanu mojego dokumentu Dream Journal w Craft, a także informacje o API, którego należy użyć do zapisywania moich snów.

Chcę, abyś stworzył stronę wyświetlającą formularz do rejestrowania snów i jakości snu.

Strona powinna wyświetlać na środku formularz z suwakiem jakości snu (od bardzo złej do doskonałej). Nad suwakiem powinno być emoji dla każdego poziomu jakości, aktualizowane wraz z przesuwaniem suwaka. Poniżej powinno być pole tekstowe na sam sen.

Design powinien być uspokajający i delikatny. Użyj nastrojowych kolorów i zaokrąglonych kształtów, z delikatnym gradientem w tle.

Przejdź do Lovable i wklej prompt w pole tekstowe. Upewnij się, że załączasz AI Bundle dla swojego dokumentu, który właśnie pobraliśmy.

Lovable zabiera się do pracy, analizując zawartość pakietu, aby zrozumieć strukturę dokumentu i sposób korzystania z API. Następnie zaczyna budować stronę zgodnie z naszym promptem.

Teraz mamy piękną stronę, której możemy używać do dodawania snów do naszego dziennika snów! Jeśli chcesz, możesz zapisać tę aplikację webową na ekranie głównym, aby mieć do niej szybki dostęp każdego ranka.

Step 4 — Enable MCP Access

Włącz dostęp MCP dla swojego dokumentu, aby uzyskać unikalny adres URL, który umożliwia odczyt i dodawanie treści do dokumentu przez klientów AI:

Step 1

Open the “Connections” tab

Step 2

Click “Create Your First MCP Connection”

Step 3

Skonfiguruj swoje połączenie MCP, nadając mu nazwę.

Step 4

Kliknij „Add Document” i wybierz swój dokument Dream Journal.

Step 5

Adres URL MCP, który będzie używany do interakcji z Twoim dokumentem, jest teraz wyświetlany na górze.

Step 5 — Set up the MCP Connection

Teraz użyjmy adresu URL MCP, aby połączyć się z dokumentem z poziomu klienta:

A Claude Pro or Max subscription is required to add custom connectors.

Step 1

Go to Settings

Step 2

Wybierz sekcję „Connectors” i kliknij przycisk „Add custom connector”

Step 3

Nadaj konektorowi znaczącą nazwę i wklej adres URL MCP. Pozostaw pola OAuth Client ID i Client Secret w ustawieniach zaawansowanych puste — Claude automatycznie obsłuży uwierzytelnianie, jeśli będzie to konieczne.