블랙프라이데이: 지금 바로 Craft를 평생 40% 할인된 가격으로 만나보세요!

Imagine With Craft

Dream Journal

Dream JournalDream Journal

Capture your dreams and uncover their hidden meanings. Log each dream through a custom web app and use ChatGPT or Claude to interpret the symbolism and emotions behind them.

Build It Yourself

In this example, we will use Craft to keep a personal dream journal. We will build a small web app that we can use to capture our dreams and then ask ChatGPT or Claude to add interpretations to each dream.

Step 1Create Your Doc

The doc for our dream journal is super simple: We just add each new dream to the top, with the date as the headline and some additional information below.

Use the template to create a new doc for your dream journal:

Step 2Enable API Access

Enable API Access for your doc to get a unique URL that can be used to read from and add to your doc, for example by the web app we will build below.

Click the “Imagine” tab in the sidebar

Step 1

Open the “Imagine” tab
Click “Add Your First API Connection” button

Step 2

Click “Add Your First API Connection”
Configure API connection settings

Step 3

Configure your API connection with a name. 이 프로젝트를 위해서는 API가 문서에 "쓰기" 권한이 필요합니다. API 권한을 "쓰기"로 선택해주세요.
"문서 추가" 버튼을 클릭하세요

Step 4

"문서 추가"를 클릭한 뒤 Dream Journal 문서를 선택하세요.
API URL이 상단에 표시됩니다

Step 5

문서와 연결되는 API URL이 이제 상단에 표시됩니다
"AI 번들 다운로드" 버튼을 클릭하세요

Step 6

"AI 번들 다운로드" 버튼을 클릭하세요. API 문서와 해당 문서의 내용이 담긴 폴더가 다운로드됩니다.

Step 3Build on Lovable

Now lets go on and build the actual website for our dashboard on Lovable. For the example site shown above, we used this prompt:

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.

Go to Lovable and paste the prompt into the prompt box. Make sure to attatch the AI Bundle for your document that we just downloaded.

Dream Journal 5

Lovable gets to work, analyzing the content of the bundle to understand the doc structure and how to use the API. Then it starts to build the website according to our prompt.

Dream Journal 6

Now we have a beautiful site we can use to add dreams to our dream journal! If you want to, you could save this web app on your home screen, so you can quickly access it every morning.

Step 4Enable MCP Access

Enable MCP Access for your doc to get a unique URL that can be used to read from and add to your doc by AI clients:

사이드바에서 "상상해보기" 탭을 클릭하세요

Step 1

"상상해보기" 탭을 열어보세요
"첫 번째 MCP 생성" 버튼을 클릭하세요

Step 2

"첫 번째 MCP 생성"을 클릭하세요
MCP 연결 설정하기

Step 3

MCP 연결에 이름을 설정하세요.
"문서 추가" 버튼 클릭하기

Step 4

"문서 추가"를 클릭한 뒤 Dream Journal 문서를 선택하세요.
상단 MCP URL 표시

Step 5

문서와 연결되는 MCP URL이 이제 상단에 표시됩니다.

Step 5Set up the MCP Connection

Now let’s use the MCP URL to connect to the doc from a client:

A Claude Pro or Max subscription is required to add custom connectors.
Open Claude’s Settings

Step 1

Go to Settings
Select the Connectors section

Step 2

Select the “Connectors” section and click the “Add custom connector” button
Add a new custom connector

Step 3

Give the connector a meaningful name and paste the MCP URL from Craft
Confirm and create the connector

Step 4

After confirming, your connector is now set up and you can start using it in your chats

To learn more, take a look at Claude’s documentation: “Getting Started with Custom Connectors Using Remote MCP”.

Step 6Start Interacting with Your Doc

You can now ask Claude to check out our dream journal and add interpretations to our latest dreams:

Click an example to copy the prompt to your clipboard

More Ideas For You To Try

Back to the Gallery