在线演示
这个真实示例展示了 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 中。请查看附件，其中包含我的 Dream Journal Craft 文档的当前状态示例，以及你应使用的 API 信息来保存我的梦境。
我希望你创建一个网站，显示一个用于记录梦境和睡眠质量的输入表单。
网站中央应显示一个表单，包含一个睡眠质量滑块（从非常差到非常好）。滑块上方应有对应每个质量等级的表情符号，随着滑块移动而更新。下方应有一个用于输入梦境内容的文本框。
设计应该宁静柔和。使用沉静的色调和圆润的形状，背景采用柔和的渐变效果。
前往 Lovable，将提示词粘贴到提示框中。确保附上我们刚刚下载的文档 AI Bundle。
Lovable 开始工作，分析 bundle 的内容以理解文档结构和 API 的使用方式，然后根据我们的提示词开始构建网站。
现在我们有了一个漂亮的网站，可以用来将梦境添加到梦境日记中！如果你愿意，可以将这个 Web 应用保存到主屏幕，这样每天早上就能快速访问它。
第 4 步 — 启用 MCP 访问
为你的文档启用 MCP Access，获取一个唯一的 URL，AI 客户端可以通过它读取和添加内容到你的文档：
第 1 步
第 2 步
第 3 步
第 4 步
第 5 步
第 5 步 — 设置 MCP 连接
现在让我们使用 MCP URL 从客户端连接到文档：
第 1 步
第 2 步
第 3 步
第 4 步
了解更多信息，请查阅 Claude 的文档：“Getting Started with Custom Connectors Using Remote MCP”。
第 6 步 — 开始与你的文档交互
你现在可以让 Claude 查看我们的梦境日记，并为最近的梦境添加解读：
点击示例即可将提示复制到剪贴板
