feat(examples): switch sandbox-web's fixed stack to Claude Code on docker

Swap the durable-runs demo from Grok Build (grok-4.5) to Claude Code
(claude-opus-4-8): claudeCodeText adapter, ANTHROPIC_API_KEY auth, npm CLI
install in the container, and session resume via the claude-code.session-id
event. Claude Code's one spawn path is the journaling NDJSON stream, so the
streaming-json protocol override (and the ACP port) go away. Docs that
described sandbox-web as Grok-on-Docker are corrected to match.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: tombeckenham

docs/adapters/claude-code.md

@@ -24,7 +24,7 @@ The Claude Code adapter runs [Claude Code](https://docs.anthropic.com/en/docs/cl
 npm install @tanstack/ai-claude-code
 ```
 
-A runnable demo lives at [`examples/sandbox-cloudflare`](https://github.com/TanStack/ai/tree/main/examples/sandbox-cloudflare) — pick Claude Code, Codex, or Grok Build in the UI, with session resume, the harness tool timeline, and tool bridging, wired into a TanStack Start app on Workers. For the same wiring on plain Node with durable, refresh-surviving runs (Grok Build on Docker), see [`examples/sandbox-web`](https://github.com/TanStack/ai/tree/main/examples/sandbox-web) — swapping in this adapter is a one-line change (`src/sandbox-agent.ts`).
+A runnable demo lives at [`examples/sandbox-cloudflare`](https://github.com/TanStack/ai/tree/main/examples/sandbox-cloudflare) — pick Claude Code, Codex, or Grok Build in the UI, with session resume, the harness tool timeline, and tool bridging, wired into a TanStack Start app on Workers. For the same wiring on plain Node with durable, refresh-surviving runs (this adapter on Docker), see [`examples/sandbox-web`](https://github.com/TanStack/ai/tree/main/examples/sandbox-web).
 
 ## Authentication
 

docs/adapters/codex.md

@@ -24,7 +24,7 @@ The Codex adapter runs [OpenAI Codex](https://developers.openai.com/codex) (via
 npm install @tanstack/ai-codex
 ```
 
-A runnable demo lives at [`examples/sandbox-cloudflare`](https://github.com/TanStack/ai/tree/main/examples/sandbox-cloudflare) — pick Claude Code, Codex, or Grok Build in the UI, with session resume, the harness tool timeline, and tool bridging, wired into a TanStack Start app on Workers. For the same wiring on plain Node with durable, refresh-surviving runs (Grok Build on Docker), see [`examples/sandbox-web`](https://github.com/TanStack/ai/tree/main/examples/sandbox-web) — swapping in this adapter is a one-line change (`src/sandbox-agent.ts`).
+A runnable demo lives at [`examples/sandbox-cloudflare`](https://github.com/TanStack/ai/tree/main/examples/sandbox-cloudflare) — pick Claude Code, Codex, or Grok Build in the UI, with session resume, the harness tool timeline, and tool bridging, wired into a TanStack Start app on Workers. For the same wiring on plain Node with durable, refresh-surviving runs (Claude Code on Docker), see [`examples/sandbox-web`](https://github.com/TanStack/ai/tree/main/examples/sandbox-web) — swapping in this adapter is a one-line change (`src/sandbox-agent.ts`).
 
 ## Authentication
 

docs/adapters/opencode.md

@@ -30,7 +30,7 @@ npm install -g opencode-ai
 opencode auth login
 ```
 
-A runnable demo lives at [`examples/sandbox-cloudflare`](https://github.com/TanStack/ai/tree/main/examples/sandbox-cloudflare) — pick Claude Code, Codex, or Grok Build in the UI, with session resume, the harness tool timeline, and tool bridging, wired into a TanStack Start app on Workers. For the same wiring on plain Node with durable, refresh-surviving runs (Grok Build on Docker), see [`examples/sandbox-web`](https://github.com/TanStack/ai/tree/main/examples/sandbox-web) — swapping in this adapter is a one-line change (`src/sandbox-agent.ts`).
+A runnable demo lives at [`examples/sandbox-cloudflare`](https://github.com/TanStack/ai/tree/main/examples/sandbox-cloudflare) — pick Claude Code, Codex, or Grok Build in the UI, with session resume, the harness tool timeline, and tool bridging, wired into a TanStack Start app on Workers. For the same wiring on plain Node with durable, refresh-surviving runs (Claude Code on Docker), see [`examples/sandbox-web`](https://github.com/TanStack/ai/tree/main/examples/sandbox-web) — swapping in this adapter is a one-line change (`src/sandbox-agent.ts`).
 
 ## Models
 

docs/sandbox/overview.md

@@ -133,7 +133,7 @@ from the UI — see
 
 For a **web** chat where the agent builds and runs an app inside a sandbox and
 hands back a live preview URL — with durable, refresh-surviving runs — see
-`examples/sandbox-web` (Grok Build on Docker; the stack is fixed in one file
+`examples/sandbox-web` (Claude Code on Docker; the stack is fixed in one file
 and swappable).
 
 > **Durable instance resume:** bookkeeping defaults to in-memory (single-process).

docs/sandbox/quick-start.md

@@ -156,11 +156,11 @@ Because local-process inherits your host environment, you can drop the
 
 A complete, runnable app ships at
 [`examples/sandbox-web`](https://github.com/TanStack/ai/tree/main/examples/sandbox-web)
-— a "build me an app" agent where you pick the harness (Claude Code, Codex,
-OpenCode, Grok Build) and provider (Docker, local-process, Vercel, Daytona) per
-run from the UI; it scaffolds an app in the sandbox, runs the dev server, and
-streams back a live preview URL and the diff. For a coding agent running at the
-edge, see
+— a "build me an app" agent (Claude Code on a Docker sandbox) with durable,
+refresh-surviving runs; it scaffolds an app in the sandbox, runs the dev
+server, and streams back a live preview URL. For a coding agent running at the
+edge — with the harness (Claude Code, Codex, Grok Build) picked per run from
+the UI — see
 [`examples/sandbox-cloudflare`](https://github.com/TanStack/ai/tree/main/examples/sandbox-cloudflare).
 
 From here:

examples/sandbox-web/.env.example

@@ -1,7 +1,7 @@
-# Grok Build — xAI API key (GROK_API_KEY accepted as an alias). The key is
-# injected into the sandbox as a secret so the in-sandbox `grok` CLI can
-# authenticate headlessly. https://console.x.ai/
-XAI_API_KEY=
+# Claude Code — Anthropic API key. The key is injected into the sandbox as a
+# secret so the in-sandbox `claude` CLI can authenticate headlessly.
+# https://console.anthropic.com/
+ANTHROPIC_API_KEY=
 
 # Optional: override the Docker base image (must ship node + npm + git).
 # SANDBOX_IMAGE=node:22

examples/sandbox-web/README.md

@@ -4,8 +4,8 @@ A web chat where an AI coding agent builds and runs a real app **inside a
 sandbox**, then hands back a live preview URL — and the run is **durable**: it
 survives a refresh, a closed tab, and a lost connection.
 
-The stack is deliberately fixed — **Grok Build** (the `grok` CLI, model
-`grok-4.5`) in a **Docker** sandbox — because this app is the runnable demo of
+The stack is deliberately fixed — **Claude Code** (the `claude` CLI, model
+`claude-opus-4-8`) in a **Docker** sandbox — because this app is the runnable demo of
 the [durable runs](../../docs/sandbox/durable-runs.md) journal-only tier, and
 durability's one hard requirement is that a run be reconstructible from its
 `runId` alone (the takeover route and the reaper have nothing else). One
@@ -21,7 +21,7 @@ Durable-Object sibling, running Claude Code, Codex, or Grok Build).
 2. The route runs `chat({ adapter, middleware: [withPersistence, withLocks,
 withSandbox(sandbox, { runs, durability })], … })` — see
    [`src/run-durable.ts`](./src/run-durable.ts) for the one shared assembly.
-3. `withSandbox` resumes-or-creates the thread's sandbox; the `grok` CLI runs
+3. `withSandbox` resumes-or-creates the thread's sandbox; the `claude` CLI runs
    inside it and streams its events back out through the journal.
 4. The agent scaffolds a self-contained TanStack Start app, runs its dev server
    on port **5173**, and mints the preview URL via the bridged `exposePreview`
@@ -62,7 +62,7 @@ Object) plus durable `RunStore`/`LockStore` backends.
 ## Prerequisites
 
 - a running **Docker daemon**
-- `XAI_API_KEY` (or `GROK_API_KEY`) — see [`.env.example`](./.env.example)
+- `ANTHROPIC_API_KEY` — see [`.env.example`](./.env.example)
 
 ## Run
 
@@ -72,7 +72,7 @@ pnpm install
 pnpm build
 
 cd examples/sandbox-web
-cp .env.example .env   # set XAI_API_KEY
+cp .env.example .env   # set ANTHROPIC_API_KEY
 pnpm dev               # http://localhost:3002
 ```
 
@@ -81,15 +81,15 @@ drag-and-drop and localStorage, then give me the preview URL."_ — and refresh
 the page mid-build.
 
 > The first message per thread is slow: it pulls `node:22` (once) and installs
-> the `grok` CLI in the fresh container. Pre-bake an image with the CLI and set
-> `SANDBOX_IMAGE=<your-image>` to skip that.
+> the `claude` CLI in the fresh container. Pre-bake an image with the CLI and
+> set `SANDBOX_IMAGE=<your-image>` to skip that.
 
 ## Swapping the stack
 
 The fixed choices live in one file, [`src/sandbox-agent.ts`](./src/sandbox-agent.ts):
 `buildAdapter()` (the harness), `buildSandbox()` (the provider + CLI install +
-secrets), and `missingEnv()` (the auth check). Swap `grokBuildText` for
-`claudeCodeText` / `codexText` and `dockerSandbox` for another provider and the
+secrets), and `missingEnv()` (the auth check). Swap `claudeCodeText` for
+`codexText` / `grokBuildText` and `dockerSandbox` for another provider and the
 durable wiring is unchanged — it only ever sees the definitions. If you make
 the stack a **per-request browser choice** instead, every route that arrives
 with only a `runId` (takeover, reaper) needs that choice stored server-side —

examples/sandbox-web/package.json

@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@tanstack/ai": "workspace:*",
-    "@tanstack/ai-grok-build": "workspace:*",
+    "@tanstack/ai-claude-code": "workspace:*",
     "@tanstack/ai-persistence": "workspace:*",
     "@tanstack/ai-react": "workspace:*",
     "@tanstack/ai-sandbox": "workspace:*",

examples/sandbox-web/src/routes/index.tsx

@@ -22,12 +22,12 @@ import {
 import type { StreamChunk } from '@tanstack/ai'
 import type { UIMessage } from '@tanstack/ai-react'
 
-/** CUSTOM event Grok Build emits so follow-up runs can resume its session. */
-const GROK_SESSION_ID_EVENT = 'grok-build.session-id'
+/** CUSTOM event Claude Code emits so follow-up runs can resume its session. */
+const CLAUDE_CODE_SESSION_ID_EVENT = 'claude-code.session-id'
 
 function readSessionId(chunk: StreamChunk): string | undefined {
   if (chunk.type !== EventType.CUSTOM) return undefined
-  if (chunk.name !== GROK_SESSION_ID_EVENT) return undefined
+  if (chunk.name !== CLAUDE_CODE_SESSION_ID_EVENT) return undefined
   const value = chunk.value
   if (value === null || typeof value !== 'object' || !('sessionId' in value)) {
     return undefined
@@ -405,7 +405,7 @@ function SandboxAgentChat({ initialThreadId }: { initialThreadId: string }) {
           </span>
         </div>
         <div className="ml-auto flex items-center gap-2 text-sm">
-          <span className="text-xs text-gray-500">grok-4.5 on docker</span>
+          <span className="text-xs text-gray-500">opus-4.8 on docker</span>
           <button
             onClick={newThread}
             disabled={isLoading}

examples/sandbox-web/src/run-durable.ts

@@ -12,7 +12,7 @@
  * - `ensureReaper`, the scheduled sweep durable runs require (a detached run
  *   nobody rejoins must not keep its sandbox alive forever).
  *
- * The whole module is small because the stack is FIXED (Grok Build on Docker):
+ * The whole module is small because the stack is FIXED (Claude Code on Docker):
  * takeover requires rebuilding a run's chat() from its `runId` alone, and with
  * one adapter and one provider the rebuild is just `threadId` → sandbox +
  * transcript. Make the stack a per-request browser choice and every route that
@@ -109,7 +109,7 @@ export function buildRunStream(input: {
   abortController: AbortController
   attach: boolean
   durability: StreamDurability
-  /** Grok session to resume for a follow-up turn (fresh runs only). */
+  /** Claude Code session to resume for a follow-up turn (fresh runs only). */
   sessionId?: string
 }): AsyncIterable<StreamChunk> {
   const { threadId, runId, abortController, attach, durability, sessionId } =