feat(agents): add TanStack AI browserTool for a persistent browser

[ben-reitz]

TL;DR: Adds browserTool to agents/browser/tanstack-ai, the TanStack AI version of the persistent browser tool from agents/browser/ai-sdk.

import { browserTool } from "agents/browser/tanstack-ai";

chat({
  adapter,
  tools: [browserTool({ browser: this.browser, loader: this.env.LOADER })],
  messages
});

What changed

• Shared core. The setup code behind browserTool (connector, codemode runtime, browser report) moved into an internal browser/browser-tool.ts. Both ai-sdk.ts and tanstack-ai.ts build on it, so they behave the same: active tab, newTabs, restarted / notice, runtime name.
• TanStack adapter. Takes the same options as the AI SDK tool, plus an optional name (default "browser"). Returns a ServerTool, and the name's type follows name.
• Output. TanStack AI gives the host and the model the same output, so the tool returns what the model should see: no calls log and capped logs. Screenshots aren't supported yet: a returned screenshot is replaced by a note saying it was left out (restart notices and newTabs still come through), and the tool's cdp hint tells the model to read the page with Runtime.evaluate instead. Each adapter now supplies its own screenshot hint to the shared core, so the AI SDK tool keeps its "the UI keeps the image" wording.
• codemode. The codemode tool's input schema now declares ~standard.types (type-only), so TanStack AI types the input as { code: string } without a cast.
• The old TanStack createBrowserTools is still there and not deprecated.

Tests

• browser-capability.test.ts: tool name, reuse of the same persistent browser plus restart reporting, the screenshot note and hint, and the restart notice kept alongside the screenshot note.
• browser-tool.test-d.ts: it's a ServerTool, and the name type follows name.

Docs and changesets

• Short TanStack paragraph in the "Persistent browser" section of docs/agents/browse-the-web.md, plus packages/agents/AGENTS.md.
• agents patch and @cloudflare/codemode patch.

[changeset-bot]

🦋 Changeset detected

Latest commit: ad902a4

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@cloudflare/codemode	Patch
agents	Patch
@cloudflare/agent-think	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[agent-think]

🟡 agents import sizes: 1 entry point grew

	Entry point	Exports	Largest gzip change	Size now
🟡	agents/browser/tanstack-ai	1 resized, 1 new	+1 KiB (+0.61%)	164.2 KiB

Changed exports (2)

	Import	Gzip change	Size now
🟡	agents/browser/tanstack-ai#createBrowserTools	+1 KiB (+0.61%)	164.2 KiB
🆕	agents/browser/tanstack-ai#browserTool	—	156.6 KiB

How this works

Each runtime export is bundled on its own, minified, and gzipped. Changes smaller than 100 B, or smaller than 1% and 1 KiB, are ignored. Growth over 10% or 5 KiB is marked 🔴. This report is informational and does not fail CI. The workflow artifact contains every measurement.

_{Compared 0c297171 → ad902a41 · workflow run · reported by agent-think[bot]}

[pkg-pr-new]

Open in StackBlitz

agents

npm i https://pkg.pr.new/agents@2428

@cloudflare/ai-chat

npm i https://pkg.pr.new/@cloudflare/ai-chat@2428

@cloudflare/codemode

npm i https://pkg.pr.new/@cloudflare/codemode@2428

hono-agents

npm i https://pkg.pr.new/hono-agents@2428

@cloudflare/shell

npm i https://pkg.pr.new/@cloudflare/shell@2428

@cloudflare/think

npm i https://pkg.pr.new/@cloudflare/think@2428

@cloudflare/voice

npm i https://pkg.pr.new/@cloudflare/voice@2428

@cloudflare/worker-bundler

npm i https://pkg.pr.new/@cloudflare/worker-bundler@2428

commit: ad902a4

[devin-ai-integration]

Devin Review found 1 new potential issue.

[devin-ai-integration]

🔍 Documentation uses a contraction

The screenshot explanation says “doesn't,” while the documentation style guide requires “does not.”

---

Was this helpful? React with 👍 or 👎 to provide feedback.