ブロックライブラリから「Vibe」ブロックをページに追加してください。「その他」カテゴリ、またはZero Blockすぐ下のカテゴリ一覧から見つけることができます。

入力欄にプロンプトを入力して、ブロックを生成してください。プロンプトの入力が完了したら、「送信」ボタンをクリックするか、キーボードのEnterキーを押してください。

コード生成用のAIモデルを選択するには、入力フィールドの下にあるモデル名をクリックしてください。

生成時にAIが参照する画像を添付するには、クリップのアイコンをクリックしてください。

疑問符のアイコンをクリックすると、ブロックを生成するためのプロンプト例が表示されます。また、これらを参考に、独自のプロンプトを作成する際の出発点として活用することもできます。

例として挙げたプロンプトをクリックすると、そのプロンプトを使用できます。

また、表紙の例など、別のページでサンプルプロンプトをライブデモとしてプレビューすることもできます。

生成されたブロックコードをコピーするには、「コードを取得」をクリックしてください。すると、そのブロックがページに自動的に追加されます。

「プロンプトを適用」をクリックしてエディタを開き、リクエストを編集してください。エディタでは、画像を添付したり、生成に使用するAIモデルを変更したりすることもできます。

ブロックが生成されると、AIチャットに「完了！」というメッセージが表示され、ブロックが使用可能になったことが示されます。プロンプトの下には、コピー、再生成、削除のオプションが表示されます。

チャット内で、AIの回答を展開してコードを表示したりコピーしたりできます。

コード全体を確認するには、上部パネルの「コード」をクリックしてエディタを開き、そこで手動で編集してブロックをさらにカスタマイズしてください。

最良の結果を得るには、元のプロンプトを調整してブロックコードを再生成するか、まったく新しいリクエストを入力してください。

例えば、ブロック内で変更が必要な箇所を記述するだけで、AIがそれに応じてコードを更新してくれます。

デフォルトでは、ブロックには最新バージョンが表示されます。以前のバージョンを表示するには、目のアイコンをクリックしてください。適用するには、「適用」をクリックしてください。

このオプションを使用すると、ブロックの異なるバージョンを切り替えることができます。結果を保存するには、AIチャットウィンドウを閉じるだけです。

チャットを閉じた後にブロックを再度編集するには、「ブロックエディタ」ボタンをクリックしてください。

生成されたブロック内の要素を編集するには、その要素をクリックすると、コンテンツ編集用のポップアップが表示されます。

コンテンツフィールドにテキストを入力し、変更を保存すると、その内容がブロックに表示されます。

特定の要素のコードを表示または編集するには、矢印アイコンをクリックしてください。

ブロックコードの編集をより便利に行いたい場合は、コードアイコンをクリックしてエディタを開いてください。

Vibe Blockでは、すべての料金プランにデフォルトで無料リクエスト枠が含まれています。以下の表は、各料金プランごとに12時間ごとおよび1か月あたりに利用できるリクエスト数を示しています。