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

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

エージェントが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 が不要になったよ。

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

```ts
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を開くだけだよ。

```ts
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 で動かしている人に、特に刺さる更新だよ！