AI チャット
AI チャットでは、会話を通じてサイトを作成・変更できます。作りたいものを伝えると、AI がコードを読み、変更を加えながらキャンバスを更新します。
チャットを開く
- 左サイドバーの AI アシスタントをクリックします。
- 何も選択していない状態で
⌘K/Ctrl+Kを押します。 - 要素を選択した状態で
⌘K/Ctrl+Kを押すと、代わりに AI で編集バーが開きます。AI に質問の行を選ぶと、その要素を添えてチャットに依頼を送れます。
メッセージを送る
WebTwizz に質問の入力欄に入力し、Enter を押すと送信できます。改行するには Shift+Enter を押します。
AI の作業中は、送信ボタンが停止ボタンに変わります。クリックすると実行が止まり、チャットに応答を停止しましたと表示されます。
返信の後、入力欄の上に次の質問や依頼の候補が表示されることがあります。クリックして入力欄に入れ、編集するか、そのまま送信できます。
モード
+ の横にあるモードボタンで、次のメッセージに対する AI の動作を設定できます。
| モード | 動作 |
|---|---|
| 自動 | 既定のモードです。メッセージごとにエンジンを選びます。新しいサイトの初回作成や、大きな機能の追加、不具合の修正には、通常、より深く考えるエンジンを使います。日常的な編集には標準エンジンを使います。質問だけの場合は、何も変更せずに回答します。 |
| 標準 | 標準エンジンでサイトを作成・編集します。 |
| Max | すべてのメッセージで、より深く考えるエンジンを使います。大規模な作成や難しい不具合に対応し、標準より多くのクレジットを使います。 |
| チャット | 相談や計画のためのモードです。AI はコードの読み取り、スクリーンショットの撮影、エラーの確認、ウェブ検索を行えますが、サイトは変更できません。チャットの回答は、作成より少ないクレジットで利用できます。 |
実際に動作したエンジンの分だけ課金されます。自動モードで標準エンジンが使われた場合は、標準の料金になります。
チャットモードで計画が決まったら、自動、標準、Max のいずれかに切り替えて、AI に作成を依頼してください。選んだモードは、ブラウザー内でサイトごとに記憶されます。ダッシュボードのプロンプト入力欄では、新しいサイトの初回作成に自動、標準、Max を選べます。
スキル、MCP、モード：/ を入力
入力欄に / を入力すると、メッセージの動作を指定する項目が表示されます。続けて入力すると絞り込めます。Enter を押すか、クリックして選びます。
- スキル：ダッシュボードの作成や文章の改善など、特定の作業で繰り返し使える指示です。スキルはメッセージ内にチップとして追加され、最大 4 つ添付できます。スキルとして保存を選ぶと、このチャットで依頼した内容を新しいスキルにできます。スキルをご覧ください。
- MCP：このサイトに接続した各 MCP サーバーやアプリです。開くとツールが表示されます。ツールを選ぶと、このメッセージでそのツールを使うよう AI に指示できます。MCP サーバーを追加を選ぶと、リンクでサーバーを接続する画面が開きます。
- このメッセージのみ：チャットは、このメッセージだけに何も変更せず回答します。Max は、より深く考えるエンジンでこのメッセージを処理します。それ以降のチャットのモードは変わりません。
- メモリ：覚えるは、このサイトのすべてのチャットで AI が参照するメモを保存します。
/rememberの後にメモを入力し、Enter を押します。忘れるでメモを削除できます。
公開、元に戻す、バージョン履歴などのサイト操作には、専用のキーボードショートカットがあります。
メンション：@ を入力
@ を入力すると、AI に対象を示して、何を指しているかを正確に伝えられます。続けて入力すると、すべての対象をまとめて検索できます。選んだ対象は、スキルと同じようにメッセージ内にチップとして表示されます。外すにはチップを削除します。
| メンションできる対象 | AI の動作 |
|---|---|
| Stripe や Notion などの接続済みサービス | 依頼にそのサービスを使います |
| このページのセクション、またはページ | サイトのその部分を編集します |
| データテーブル | 列と数行のデータを確認します |
| このサイトの別のチャット | そこでの会話や決定事項を読みます |
| バージョン | その時点のサイトを確認します |
| ドキュメントなど、AI が作成したもの | そのファイルを開きます |
| 自分の別のサイト | 変更やコピーをせずに、そのサイトのファイルを読みます |
メンションはチャットに保持されるので、「次はフッターも同じようにして」と続けても、対象が伝わります。一覧は開くたびに取得されるため、追加したばかりのサービス、チャット、テーブルも表示されます。
添付
+ をクリックして、メッセージに添付できます。
- 画像をアップロード：スクリーンショット、参考にするデザイン、ロゴなど、AI にサイトへ配置してほしい画像を追加します。
- ファイルをアップロード：20MB までのコード、ドキュメント、スプレッドシート、PDF、または 100MB までの
.zipを追加します。 - 要素を選択：キャンバス上の対象を指定します（下記参照）。
- メンションとスキルと MCP：
@と/を入力したときと同じメニューです。
スマートフォンでは、+ を押すとシートが開きます。キーボードで @ や / を探すより、メンションとスキルと MCPからそれぞれのメニューを開く方が簡単です。
入力欄にファイルをドラッグしたり、画像を貼り付けたりすることもできます。
要素を指定する
要素を選択を選び、キャンバス上の要素をクリックします。入力欄のチップにファイルと行番号が表示され、AI に対象が正確に伝わります。外すには、チップの × をクリックします。
プロンプトの改善と音声入力
- 電球（プロンプトを改善）は、送信前のメッセージを、より詳しい内容に書き直します。
- マイク（音声入力）を使うと、文字を入力する代わりに話して入力できます。もう一度クリックすると停止します。音声入力に対応したブラウザーで表示されます。
作業の進行を確認する
AI の作業中はキャンバスがリアルタイムで更新され、チャットには作業内容が行ごとに表示されます。
- 各ステップには専用のパネルがあります。 実行中は「page.tsx を読み取り中」や「Hero.tsx に書き込み中」などの行が表示されます。ステップが終わると、「3 ファイルを編集 · 5 ファイルを読み取り · 1 コマンドを実行」のような 1 行に折りたたまれ、追加・削除された行数も表示されます。クリックすると再び開きます。
- ファイルの行には、作成済みまたは編集済み、ファイル名、
+24 -3のような追加・削除された行数が表示されます。ファイルへの書き込み中は、その下に最新の行が順次表示されます。行をクリックすると変更内容を確認できます。 - コマンドの行には、実行した内容がわかりやすく表示されます。クリックすると出力を確認できます。
- 計画。 大きな作業では、AI が計画を提示します。入力欄の上のバーに、ステップ 2 / 5 のように現在のステップが表示されます。バーをクリックすると計画全体を確認できます。
- ステータス行には、プロジェクトを準備しています... や**すべてが動作するか確認しています...**など、作業の合間に行っている処理が表示されます。
AI から質問されたとき
好みのデザインや使うサービスなど、AI が判断を求めることがあります。質問と、クリックできる選択肢が表示されます。
- 選択肢をクリックして回答します。
- 自分で回答を入力するには、その他をクリックします。
- AI に選んでもらうには、希望がなければおまかせをクリックします。
操作の承認
一部の操作には承認が必要です。サイトの公開（サイトを公開しますか？）、ファイルの削除・移動やダウンロードなど通常のビルドを超えるコマンド、データやテーブルを削除するデータベースの変更、スキルの削除が該当します。AI が行おうとしている内容がカードに表示されます。受け入れるをクリックするまで、操作は実行されません。見送るには拒否をクリックします。
リンク、キー、接続ボタン
返信には、エディター内の該当箇所を開くボタンが含まれることがあります。
- 場所へのリンクは、設定 / ドメインやページ / ホーム設定のように、エディターの該当箇所を開きます。バージョン履歴へのリンクはバージョン履歴を開きます。
- 接続カードは、Resend を接続のように、チャットから直接サービスを接続できます。別のプロジェクトですでにアカウントを接続している場合は、そのアカウントが候補に表示されます。チャット内のコネクタをご覧ください。
- ライブカードには、Stripe の売上や Google Analytics の訪問者数など、接続済みサービスの数値が表示されます。設定と開くのリンクもあります。数値はサービスから直接取得されます。
RESEND_API_KEYなどのキー名はクリックできます。クリックするとシークレットの該当キーが開き、値を入力できます。- サイトにデータベースが必要なときは、データソースを接続が表示されます。チャット内で接続ウィンドウが開きます。まずサンプルデータで作成（または今はしない）を選ぶと、AI はデータベースなしで作業を続けます。後からデータパネルで接続できます。
返信には、色見本、コピーボタン付きのコード、コンポーネントのライブプレビューが表示されることもあります。
画像とファイル
- ストック写真：すべてのプランで、AI が Unsplash の写真を探せます。
- 生成画像：有料プランでは AI が画像を作成できます。無料プランでは、代わりにストック写真や別の方法を提案します。
- 保存できるファイル：AI はドキュメント、CSV や JSON などのデータエクスポート、画像を作成できます。ファイルはカードとして表示され、開くを選ぶと新しいタブで開きます。カードの ⋯ をクリックするか右クリックすると、リンクをコピー、ダウンロード、名前を変更、削除を選べます。ドキュメントは Markdown ファイルとしてダウンロードされます。ファイルは最終更新から 90 日間利用でき、
@で再び AI に指定できます。コードファイルのダウンロードには有料プランが必要です。
チャット内の写真や生成画像をキャンバスにドラッグすると、サイトで使えます。
AI ができること
- ページ、コンポーネント、スタイル、コンテンツを作成・変更します。
- プロジェクトにパッケージをインストールし、コマンドを実行します。
- スクリーンショットの撮影、エラーログの読み取り、問題の調査によって、自分の作業を確認します。
- ウェブを検索し、ページを読みます。
- 接続済みデータベースで、テーブルの作成、データの追加・更新・削除・検索を行います。
- Sentry のエラーや Google Analytics の訪問者数など、コネクタの情報を読み取ります。変更する前には確認を求めます。
- 公開中のサイトのアクセス解析、ログのエラー、ジョブとその直近の実行結果、利用者がアップロードしたファイルを確認します。プレビューでジョブを 1 回実行できます。時刻はあなたのタイムゾーンで表示します。
- Stripe アカウントの商品、価格、決済リンク、割引コードを扱います。
- GitHub を接続すると、コミット、プッシュ、プル、ブランチの作成、プルリクエストの作成を行えます。
- ファイルの過去の保存済みバージョンを確認し、復元します。
- 同じサイトの別のチャットをメンションすると、その内容を読みます。
- スキルを作成・更新します。
- 承認を受けてからサイトを公開します。
どのメッセージでも、設定した AI への指示に従います。
AI ができないこと
- チャットモードでサイトを変更すること。ただし、接続済みアプリや MCP サーバーのツールは、事前に確認を求めたうえで実行できます。
- シークレットキーの値を知ること。必要なキー名を示すので、値は自分で入力します。
- 代わりにアカウントを接続すること。接続ボタンを表示するので、接続手続きは自分で完了します。
- 無料プランで画像を生成すること。
- 承認なしで公開、データの削除、リスクのあるコマンドの実行を行うこと。
クレジット
各メッセージは、プランのクレジットを使用します。残りが少なくなると、チャットで通知されます。
- クレジットを 90% 使用すると、クレジットが残りわずかですと表示されます。クレジットを追加でサブスクリプション設定が開きます。
- 今日のクレジットを使い切りましたまたは今月の無料クレジットを使い切りましたは、無料クレジットを使い切り、作成が一時停止していることを示します。作成を続けるでアップグレードできるプランが表示され、使用状況を見るで使用状況が開きます。
- 有料プランでは、今月のクレジットを使い切りましたと表示されます。クレジットを購入で追加できます。
- クレジットがまったくなくなると、ここで止まらないでと表示されます。作成を続けるでプランが表示されます。
メッセージの処理に失敗した場合は、もう一度試すで再送できます。長い処理が途中で止まった場合は、続けるで再開できます。どちらもクレジットを使用することが表示されます。プラン、1 日ごとのクレジット、追加購入については、お支払いと請求をご覧ください。
画面を閉じても実行は継続
AI の作業中にタブを閉じたり、再読み込みしたりしても、実行は続きます。戻ると、チャットに進行中の作業と、離れていた間の処理内容が表示されます。実行中は、画面がスリープしません。
AI の作業中は、編集内容が競合しないように他のパネルが一時停止します。作業が終わると、すぐに使えるようになります。
チャット履歴
パネルのヘッダーには、現在のチャット名が表示されます。+（新しいチャット）をクリックすると新しい会話を始められます。時計（履歴）をクリックすると、過去のチャットを確認できます。
チャット履歴には、このサイトのすべてのチャットが日付付きで表示されます。クリックすると会話を続けられます。ゴミ箱ボタンを押すと、確認なしですぐにチャットが削除されます。
AI の変更を元に戻す
AI は実際のプロジェクトファイルを編集し、実行が終わると作業内容を保存します。変更を取り消すには、⌘Z / Ctrl+Z を押すか、バージョン履歴を開いて以前のサイトに戻します。元の状態に戻すよう AI に頼むこともできます。