


現場演示
這個真實的例子展示了 Craft 文件和 Lovable 應用程式的樣子:
演示版已停用寫入操作
自己動手構建
使用Craft, Lovable和ChatGPT或Claude構建
在這個例子中,我們將使用 Craft 來記錄個人夢境。我們將建立一個小型 Web 應用程式來記錄我們的夢境,然後讓 ChatGPT 或 Claude 為每個夢境添加解讀。
步驟1 — 建立您的文檔
我們的夢想日記的文檔非常簡單:我們只需將每個新夢想添加到頂部,以日期作為標題,以下是一些附加資訊。
使用範本為您的夢想日記建立新文件:
步驟2 — 啟用 API 存取
為您的文件啟用 API 存取以取得可用於讀取和新增文件的唯一 URL,例如透過我們將在下方建置的 Web 應用程式。

步驟1

步驟2

步驟3

步驟4

步驟5

步驟6
步驟3 — 以 Lovable 為基礎
現在讓我們繼續在 Lovable 上建立儀表板的實際網站。對於上面顯示的範例網站,我們使用了以下提示:
我正在創建一個夢境日記來記錄和分析我的夢境。 __
這些資訊儲存在 Craft 中。請查看附件,其中展示了我的 Craft 文件的當前狀態範例,以及您應該用來保存我的夢境的 API 資訊
我希望您建立一個網站,其中顯示一個輸入表單,用於記錄我的夢境和睡眠品質。 __
該網站應在中心顯示一個表單,其中包含一個用於調節睡眠品質的滑桿(從非常差到非常好)。在滑桿上方,每個品質等級都應該有一個表情符號,這些表情符號會
應該平靜柔和。使用憂鬱的顏色和圓形,背景為柔和的漸變色。
前往 Lovable 並將提示貼到提示框中。請務必附上我們剛剛下載的文檔 AI Bundle。

Lovable 開始工作,分析 bundle 的內容,了解文件結構以及如何使用 API。然後,它開始根據我們的提示建立網站。

現在我們有了一個漂亮的網站,可以用來把夢境加入我們的夢境日記!如果你願意,可以把這個網頁應用程式儲存到主畫面上,這樣每天早上就能快速造訪了。
步驟4 — 啟用 MCP 訪問
為您的文件啟用 MCP 存取以取得唯一的 URL,AI 用戶端可以使用它來讀取和新增您的文件:

步驟1

步驟2

步驟3

步驟4

步驟5
步驟5 — 設定 MCP 連接
現在讓我們使用 MCP URL 從客戶端連接到文件:

步驟1

步驟2

步驟3

步驟4
要了解更多信息,請查看 Claude 的文檔:“ 使用遠端 MCP 的自訂連接器入門 ”。
步驟6 — 開始與您的文件互動
現在您可以要求Claude查看我們的夢想日記並為我們最新的夢想添加解釋:
點擊範例即可將提示複製到剪貼簿







