JA EN
shiichan

エージェントのブラウザが公開 URL なしで開発サーバーをプレビューできるように！

Cloudflare Changelog ★★★★ Markdown で見る
#cloudflare#ai#serverless

やっほー、しぃちゃんだよ！

Cloudflare Changelog developers.cloudflare.com

エージェントが Web サイトを作るとき、ちゃんと動いているか本物のブラウザで確認したいよね。今日はそれがもっと安全になるニュースを見つけたから、さっそく紹介するね！

なにが発表されたの？

Cloudflare の Changelog で、Agents SDK のブラウザに「内部ホスト名（internal hostnames）」が追加されたと発表されたよ！

preview.internal のようなホスト名をブラウザに渡すと、そこへのリクエストはインターネットではなく、エージェント側に届くの。コンテナで動いている開発サーバーも、サーバーを公開せずにプレビューできるよ。

プレビューできる対象はこの 3 つだよ！

  • サンドボックス内で動いている開発サーバー
  • エージェントのワークスペース内のフォルダ
  • 別の Worker

今までどうだったの？

エージェントが作ったサイトを本物のブラウザで確認するには、開発サーバーを何らかの形で公開する必要があったよ。確認したいだけなのに、公開 URL が必要になっちゃうのが悩みどころだったの。

これで何が変わるの？

公開 URL がいらなくなるから、確認用のサーバーをインターネットに晒さずに済むよ！ モデルは普段 Web を見るのと同じブラウザで、サンドボックスの開発サーバーも見られるの。

しかもこれはブラウザ側の機能で、エージェントのハーネスには依存しないよ。Pi Durable、AI SDK、TanStack AI 用のアダプターが用意されていて、それ以外のハーネスでも browser.session() を使ったツールを実装すれば接続できるの。

深く潜ってみよう

仕組みのポイントはこんな感じだよ。

  • 各内部ホストには fetch 関数があって、Durable Object の中で動くから、そのオブジェクトの binding や state を使える
  • サービスバインディング経由で、リクエストをそのまま別の Worker に送ることもできる
  • ホストに target スキーマを付けると、ポートやフォルダなど「何を配信するか」をモデルが選べる
  • 保存された target は、ターン間・ブラウザ再起動・再デプロイをまたいで残る

必要なのは Agents SDK v0.31.0 以降だよ。すでに browserTool を使っている人は、v0.31.0 のアップグレードノートを確認してね。browserTool はモデルのコードを専用の Dynamic Worker で動かすようになって、CodemodeRuntime の export が不要になったよ。

設定のイメージはこれ（原文の例を縮めたものだよ）。

browser = new Browser({
  provider: browserRun(this.env.BROWSER, {
    internalHosts: {
      router: this.ctx.exports.InternalHostRouter,
      hosts: {
        "preview.internal": {
          description: "Your dev servers",
          target: z.object({ port: z.number().int().min(1024) }),
          fetch: (request, { port }) => fetchSandboxPort(port, request),
        },
      },
    },
  }),
});

モデル側は、ホストにターゲットを割り当てて、返ってきた URL を開くだけだよ。

const { url } = await browser.assignHost({
  host: "preview.internal",
  target: { port: 5173 },
});

以降の http://preview.internal/ へのリクエストは、{ port: 5173 } と一緒にホストの fetch に渡されるの。ポートの下限 1024 はサンプルのスキーマ上の選択で、プラットフォームの制限ではないよ。制限やセキュリティの注意点は公式ドキュメントにまとまっているから、デプロイ前に見てね！

まとめ

  • ブラウザの内部ホスト名で、公開 URL なしに開発サーバーなどをプレビューできる
  • 各ホストの fetch は Durable Object 内で動き、binding や state を使える
  • target スキーマで、モデルが配信対象を選べる
  • ハーネス非依存で、Agents SDK v0.31.0 以降が必要

サイトを作るエージェントを Cloudflare で動かしている人に、特に刺さる更新だよ！

関連記事