はじめに

始める前に

次のいずれかのプロバイダーのAPIキーが必要です。どのプロバイダーにも、無料または低コストで試せる方法があります。

• Google Gemini：Google AI Studioでキーを取得します。無料枠のキーはFlashモデルで使用できます。Proモデルには課金の有効化が必要です。
• OpenAI：OpenAIのダッシュボードでシークレットキーを作成します。
• Anthropic：Anthropic Consoleでキーを作成します。

有料アカウントでは、下書き1つは通常数セントです。キーのダイアログに、選んだモデルでの目安が表示されます。

まだキーがない場合はサンプルを試す

初めての訪問時、ウェルカム画面にキーなしでサンプルを試すがあります。完成したプロトタイプ3つがライブラリに追加され、最初のものが開きます。カフェのトップページ、そのメニュー画面、運用ダッシュボードです。要素の選択、バージョンの比較、全サイズ表示、計測、メモ、再生、エクスポートなど、モデルを呼ばない機能はすべて使えます。リクエストでサンプルを変更するにはキーを追加してください。キーを保存するまでは、キーのダイアログからもサンプルを開いてみることができます。

キーを追加する

1. 上部のバーにある［AIプロバイダー］でプロバイダーを選択します。
2. ［キーを追加］を選択します。ダイアログには選択したプロバイダー名が表示されます。
3. キーを貼り付けて［キーを保存］を選択します。ボタンの表示が［キー設定済み］に変わります。

Vibrは、貼り付けた内容を保存前にチェックします。シークレットではなくキーIDを貼り付けた場合、別のプロバイダーのキー、AnthropicのAdminキー、余分なスペースなど、よくある間違いを検出し、修正方法を表示します。キーはプロバイダー（Gemini、OpenAI、Anthropic）ごとに保存でき、いつでも切り替えられます。プロバイダーのすべてのモデルで同じキーが使われます。別のキーを設定するには、そのプロバイダーを選択して、もう一度［キーを追加］を選択します。［このキーを削除］は、現在のプロバイダーのキーだけを削除します。［すべてのキーを削除］は、このブラウザーに保存されたすべてのキーを削除します。

デザインシステムとモデルを選ぶ

• ［デザインシステム］では、すべての下書きの構築に使うコンポーネントライブラリを設定します。下書きの途中でライブラリを切り替えることはできないため、変更すると新しいセッションが始まります。対応しているデザインシステムの一覧と、独自のnpmパッケージの使い方については、デザインシステムとモデルをご覧ください。
• ［AIプロバイダー］と［モデル］では、下書きを構築するモデルを設定します。プロバイダーごとに適切なデフォルトがあり、選択内容はこのブラウザーに記憶されます。

Vibrを自分の言語で使う

ブラウザーの言語が英語、アラビア語、中国語（簡体字）、オランダ語、フランス語、ドイツ語、ヘブライ語、イタリア語、日本語、韓国語、ポルトガル語（ブラジル）、スペイン語のいずれかであれば、Vibrはその言語で開きます。それ以外の場合は英語で開きます。言語を自分で選ぶには、上部のバーにある［表示言語］ボタン（地球儀のアイコン）を使います。スマートフォンでは、設定内のデザインシステムの下にあります。ブラウザーの言語に戻すには、［自動（ブラウザーの言語）］を選択します。

アラビア語とヘブライ語では、Vibrは右から左に表示されます。レイアウトが反転し、矢印も逆向きになります。この設定で変わるのはVibr自体の表示だけです。下書きを別の言語で確認するには、キャンバスの別の言語でプレビューを使います。ドキュメントも同じ言語で提供しています。各ページ上部の言語メニューで切り替えられます。

最初の画面を構築する

チャット下部の入力欄に作りたいものを入力するか、「3つのプランと年払い切り替えを備えた料金ページ」などの例を選択します。Enterを押すか、［送信］を選択します。

チャットには各ステップが進行に合わせて表示され、キャンバスにはコードが書かれている途中から画面が描かれ始めます。ほとんどの画面は1分以内に完成します。

次にすること

• 変更を普段の言葉で依頼します。例：「概要カードを固定表示にして」「クーポン入力欄を追加して」
• ［保存］を選択して、ライブラリに保存します。
• キャンバスのツールを試します。スマートフォンやタブレットの幅、バージョン、比較などがあります。