TanStack AI with Vercel Sandbox

Run TanStack AI coding agents in Vercel Sandbox using the @tanstack/ai-sandbox-vercel provider. The provider manages the microVM, while a harness adapter selects the coding agent that runs inside it.

Use a JavaScript or TypeScript project with Node.js 22 or later and a Vercel account with a team and project. This example uses the Codex harness, which requires an OpenAI API key.

Install TanStack AI, the sandbox packages, and the Codex adapter:

pnpm i @tanstack/ai @tanstack/ai-sandbox @tanstack/ai-sandbox-vercel @tanstack/ai-codex

yarn add @tanstack/ai @tanstack/ai-sandbox @tanstack/ai-sandbox-vercel @tanstack/ai-codex

npm i @tanstack/ai @tanstack/ai-sandbox @tanstack/ai-sandbox-vercel @tanstack/ai-codex

bun add @tanstack/ai @tanstack/ai-sandbox @tanstack/ai-sandbox-vercel @tanstack/ai-codex

Save your credentials in a .env file:

VERCEL_TOKEN=your_access_token_here
VERCEL_TEAM_ID=your_team_id_here
VERCEL_PROJECT_ID=your_project_id_here
CODEX_API_KEY=your_openai_api_key_here

Create a Vercel access token scoped to your team and find your team and project IDs using the Sandbox authentication instructions.

The provider uses the Vercel credentials to manage sandboxes. Pass the agent's CODEX_API_KEY as a workspace secret so the agent can authenticate inside the microVM.

Create an entry file and replace your_org/your_repo with a public GitHub repository. The example clones that repository into the sandbox and asks Codex to list its files:

import { chat } from '@tanstack/ai';
import { codexText } from '@tanstack/ai-codex';
import {
  createSecrets,
  defineSandbox,
  defineSandboxPolicy,
  defineWorkspace,
  githubRepo,
  withSandbox,
} from '@tanstack/ai-sandbox';
import { vercelSandbox } from '@tanstack/ai-sandbox-vercel';
 
const apiKey = process.env.CODEX_API_KEY;
if (!apiKey) {
  throw new Error('Set CODEX_API_KEY in your .env file.');
}
 
const sandbox = defineSandbox({
  id: 'vercel-agent',
  provider: vercelSandbox({ runtime: 'node24' }),
  workspace: defineWorkspace({
    source: githubRepo({ repo: 'your_org/your_repo' }),
    setup: [
      'sudo -n npm install -g @openai/codex --include=optional && codex --version',
    ],
    secrets: createSecrets({ CODEX_API_KEY: apiKey }),
  }),
  policy: defineSandboxPolicy({ default: 'allow' }),
});
 
const stream = chat({
  adapter: codexText('gpt-6-astra', {
    codexPathOverride: 'codex',
    sandboxMode: 'danger-full-access',
    approvalPolicy: 'never',
  }),
  messages: [{ role: 'user', content: 'List the project files.' }],
  middleware: [withSandbox(sandbox)],
});
 
for await (const chunk of stream) {
  console.log(chunk);
}

The workspace setup installs the Codex CLI inside the microVM and checks that it runs before starting the agent. --include=optional includes its platform-specific binary. The adapter uses that executable through codexPathOverride. See installing an agent CLI for setup behavior.

The danger-full-access mode uses the Vercel microVM as the isolation boundary. Together with approvalPolicy: 'never' and the default: 'allow' policy, it lets Codex execute commands without approval prompts inside that microVM. See TanStack AI policies for harness-specific enforcement.

Run the TypeScript example with tsx, loading credentials from .env:

pnpm dlx tsx --env-file=.env index.mts

For JavaScript, run node --env-file=.env index.mjs. Your terminal displays stream events with the agent's command activity and response listing the repository files.

• Authenticate OAuth-protected MCP tools with TanStack AI and Vercel Connect.
• Follow the Using TanStack AI with Vercel Sandbox guide for setup commands, resuming sandboxes, preview ports, and limitations.
• Explore the Vercel provider reference and workspace configuration.
• Connect model requests to TanStack AI with AI Gateway.