WebPreview

Agent sandbox で動く Web アプリを、localhost リンクから外部アクセス可能な Buda プレビュー URL として開きます。

WebPreview は、Agent sandbox 内で実行されている Web アプリを確認するための機能です。自然言語で Agent にアプリの起動とプレビューリンクの提示を依頼し、そのリンクを Local Browser で開きます。

WebPreview を使う場面

Agent が Web ページ、デモ、ゲーム、ダッシュボード、フロントエンドプロジェクトを作成または編集し、実際の画面をブラウザーで確認したいときに使います。

次のように自然言語で依頼できます。

Start the dev server and give me the preview link.

Please use /buda-web-preview to check the process and give me a working preview link.

Open the page in your Local Browser and check whether it works.

基本の流れ

Agent に Web アプリまたはプレビューサービスの起動を依頼します。
Agent が localhost リンクを出力するまで待ちます。例:

http://localhost:3000

Buda ページ上でそのリンクをクリックするか、Local Browser (AI Browser は使用しないでください) を開いてアドレスバーに入力します。
Buda は localhost リンクを外部アクセス可能なプレビュー URL に変換します。通常は *.budaapps.com で終わる URL です。
ブラウザーでその *.budaapps.com URL が開くまで待つと、プレビューを確認できます。

他のポートでも同じです。たとえば Local Browser に次の URL を入力します。

http://localhost:4000

Buda は port 4000 用の外部アクセス可能なプレビュー URL を取得して開きます。

プレビューが表示されない場合

ページが空白のまま、読み込み中のまま、またはエラーが表示される場合は、サービスが実行中かどうかを Agent に確認させ、最新のリンクを返すよう依頼してください。

使える依頼文:

Please check whether the preview service is running and give me the preview link.

Please use /buda-web-preview to check the process and give me a preview link.

The preview did not load. Please check the dev server on port 3000 and give me a working link.

Local Browser に起動ボタンが表示されている場合は、それをクリックできます。Buda は確認または再起動の依頼を Agent に送り、サービスが復旧したあとにプレビューを更新します。

プレビュー中のアプリからエージェントに続きを依頼する

この節は、プレビューされるアプリを作る人向けです——App-in-Skill アプリ、またはあらゆるローカル Web アプリ。

ローカルブラウザで開いているページから、現在のエージェントに作業の続きを依頼できます。利用者はチャットに戻って同じ内容を説明し直す必要がありません。ページにできるのは依頼するところまでです。Buda が自前の確認バーで依頼内容を表示し、利用者が エージェントに送信 をクリックするまで、エージェントには何も届きません。

親ウィンドウにメッセージを 1 通送ります。

window.parent.postMessage(
  {
    type: "buda:agent-action-request",
    version: 1,
    requestId: "my-app:generate:7",
    prompt: "drama/episode-7.json を読み、このエピソードの制作を続けてください。",
  },
  "*",
);

利用者に見えるもの

プレビュー上部に確認バーが出ます。1 行目は Buda 自身の文言——このアプリがエージェントに作業の続行を要求しています——2 行目に prompt の原文、右側に エージェントに送信 ボタンと閉じるボタンが並びます。エージェントに送信 をクリックすると、その prompt が利用者自身のメッセージとして現在のチャットに送信されます。

メッセージが満たすべき条件

1 つでも満たさないメッセージは黙って無視されます。画面には何も出ず、エラーも出ません。

条件	内容
送信元	プレビューに直接読み込まれているページであること。入れ子の iframe から `window.top.postMessage` を呼んでも拒否されます。
オリジン	プレビューが現在読み込んでいる URL のオリジンと完全に一致すること。
`type` / `version`	ちょうど `buda:agent-action-request` と `1` であること。
`requestId`	`a-z A-Z 0-9 _ . : -` から成る 1〜128 文字。使い切り——利用者が送信または閉じた後、同じ id は二度と表示されません。
`prompt`	トリム後に空でなく、4000 文字以下。この原文が、利用者が読む内容であり、実際に送信される内容です。
同時に 1 件	確認待ちの依頼がある間、後から来た依頼は無視されます。バーが消えてから次を送ってください。
ナビゲーション	プレビューを別の URL に移すと、確認待ちの依頼と使用済み id の一覧がクリアされます。

確認バーの文言をアプリ側で決めることはできません。余分なフィールド——初期の草案で送られていた label フィールドを含む——は無視され、バーには常に Buda の見出しと prompt の原文が表示されます。これは意図的な設計です。プレビューの内容は信頼できない入力なので、利用者は承認する前に実際の指示を目で見る必要があります。

Q&A

`*.budaapps.com` を開いたら `Unauthorized` と表示されました。どうすればよいですか？

Local Browser に戻り、元の localhost URL をもう一度入力してください。例:

http://localhost:3000

Buda が新しい署名付きプレビュー URL を取得して、再度ページを開きます。

`Gateway Error` が表示されます。どうすればよいですか？

アプリのプロセスが動いていないか、別のポートで動いている可能性があります。Agent に次のように依頼してください。

Please use /buda-web-preview to check the process and give me a preview link.

Local Browser の起動ボタンをクリックして、同じ復旧フローを実行することもできます。buda-web-preview スキルページを開いて、このシステム管理スキルの詳細を確認できます。

起動コマンドを知っている必要がありますか？

通常は不要です。次のように自然言語で目的を伝えます。

Please start this project and show me the web preview.

Agent がプロジェクト構成を確認し、適切なサービスを起動して、プレビューリンクを出力します。

WebPreview

On this page