ライブデモ
この実際の例は、CraftドキュメントとLovableアプリの外観を示しています。
このデモでは書き込み操作が無効になっています
Craft, LovableとChatGPT または Claudeで構築
自分で構築する
この例では、Craftを使用して個人の夢日記を管理します。夢を記録し、その後ChatGPTやClaudeに各夢の解釈を追加してもらうための小さなウェブアプリを構築します。
ステップ1 — ドキュメントを作成
夢日記の書き方はとてもシンプルです。新しい夢を毎回一番上に追加し、日付をタイトルにして、その下に追加情報を記入するだけです。
テンプレートを使用して、夢日記用の新しい文書を作成しましょう。
ステップ2 — APIアクセスを有効にする
ドキュメントのAPIアクセスを有効化すると、一意のURLが取得できます。このURLを使用すると、例えば以下で構築するWebアプリからドキュメントの読み取りや追加が可能です。
ステップ1
ステップ2
ステップ3
ステップ4
ステップ5
ステップ6
ステップ3 — Lovableで構築
それでは、Lovable上でダッシュボードの実際のウェブサイトを構築していきましょう。上記のサンプルサイトでは、以下のプロンプトを使用しました：
夢日記を作成し、夢を記録・分析しています。
情報はCraftに保存されています。現在のCraftドキュメントの状態例と、夢を保存する際に使用するAPIに関する情報は添付ファイルをご確認ください。
夢と睡眠の質を記録するための入力フォームを表示するウェブサイトを作成してください。
サイトの中心には、睡眠の質（非常に悪い～非常に良い）をスライダーで選択できるフォームを表示してください。スライダーの上部には各品質レベルに対応する絵文字を配置し、スライダー操作に合わせて更新されるようにします。下部には夢の内容を入力するテキストフィールドを配置してください。
デザインは落ち着いた柔らかい印象にしてください。落ち着いた色調と丸みを帯びた形状を使用し、背景には柔らかなグラデーションを施してください。
Lovable にアクセスし、プロンプトをプロンプトボックスに貼り付けてください。先ほどダウンロードしたドキュメント用の AI バンドルを必ず添付してください。
Lovableは作業を開始し、バンドルの内容を分析してドキュメント構造とAPIの使用方法を理解します。その後、入力したプロンプトに従ってウェブサイトの構築を開始します。
これで、夢日記に夢を追加できる素敵なサイトができました！お好みで、このウェブアプリをホーム画面に保存しておけば、毎朝すぐにアクセスできます。
ステップ4 — MCPアクセスを有効にする
あなたのドキュメントに対してMCPアクセスを有効にすると、AIクライアントがそのドキュメントを読み取ったり、追記したりできる一意のURLが取得できます。
ステップ1
ステップ2
ステップ3
ステップ4
ステップ5
ステップ5 — MCP接続を設定する
クライアントからドキュメントに接続するために MCP URL を使いましょう。
ステップ1
ステップ2
ステップ3
ステップ4
詳しくは、Claudeのドキュメントをご覧ください：「Getting Started with Custom Connectors Using Remote MCP」。
ステップ6 — ドキュメントの操作を始める
Claude を使って、夢日記の最新の夢に解釈を追加してもらいましょう。
サンプルをクリックすると、プロンプトがクリップボードにコピーされます。
