Platform Template

The Platform Template serves as a comprehensive reference for constructing an AI application builder on Vercel. It integrates multiple platform capabilities including sandboxed code execution, LLM routing through AI Gateway, live app previewing, production deployment, and user project ownership transfer.

The template demonstrates five key Vercel platform features working together:

• Vercel Sandbox: Agents generate code and run development servers for app previews.
• AI Gateway: Secure LLM access using OIDC authentication, proxied from sandboxes that lack credential storage.
• Vercel Deployments: Push sandbox contents to production using the Vercel SDK.
• Vercel Apps: OAuth installation that lets users maintain app updates through the claim flow.
• Project Transfers: Let users receive deployed websites and later assume ownership.

The application is built as a Next.js system with five major subsystems: a Chat UI (React), a Preview UI (iframe), an oRPC Router, an AI Proxy Route, and a Sandbox containing the Agent CLI plus a Dev Server. These components interact with AI Gateway (OIDC authentication) and the Vercel API (deployment and claim operations).

Users enter prompts through the chat interface, triggering rpc.chat.send, a streaming oRPC procedure that manages the complete workflow. For new sessions, Vercel Sandbox provisioning occurs, installing bun, scaffolding the selected template (Next.js, Vite, TanStack Start), installing the agent CLI, and launching the development server.

Native agent coding CLIs execute within the sandbox environment. The configuration redirects API calls to the platform's proxy using short-lived session identifiers instead of persistent credentials.

Agent CLI base URLs target the platform's proxy route, which validates sessions, obtains Vercel OIDC tokens, and forwards requests to AI Gateway. This proxy layer enables user token spend tracking and other monitoring features.

The sandbox development server displays through an iframe. Deployment involves reading sandbox files and creating a Vercel deployment. For unsigned users, deployments initially belong to the partner team until the user completes the claim process through OAuth.

The AI Gateway proxy pattern addresses sandbox credential constraints through short-lived capability tokens. Sandboxes never access actual OIDC tokens or API keys. Redis stores proxy sessions with a one-hour TTL. The proxy forwards only accept, content-type, and anthropic-version headers while rejecting cross-origin requests.

Three authorization tiers exist:

• Partner tier: Unsigned users deploy to the partner team using VERCEL_PARTNER_TOKEN.
• User tier: Signed-in users deploy to their accounts via OAuth session.
• Project tier: Post-claim users deploy to their account using stored per-project tokens (in Redis, JWE-encrypted).

Priority follows this order: project tokens override user sessions, which override partner tokens. Users claiming projects deploy to their accounts even across different browser sessions.

The claim process merges OAuth authorization with project transfer:

1. The user initiates a claim on a partner-owned deployment.
2. The platform requests a transfer code via projects.createProjectTransferRequest().
3. The user authorizes at Vercel OAuth with the transfer_code parameter.
4. Vercel transfers the project and returns an authorization code.
5. The callback exchanges the code for tokens, storing them encrypted in Redis.
6. The user returns with ?sandboxId=xxx for session restoration.

The usePersistedChat() hook restores messages, preview URL, and deployment state from Redis automatically.

Clone the repository and install dependencies:

git clone https://github.com/vercel/platform-template
cd platform-template
pnpm install

• Next.js 16 with App Router
• oRPC for type-safe streaming RPC
• Vercel Sandbox for code execution
• Vercel SDK for deployments
• Zustand and SWR for state management
• Upstash Redis for session persistence

Required environment variables include:

• PROXY_BASE_URL: Proxy endpoint
• VERCEL_PARTNER_TOKEN and VERCEL_PARTNER_TEAM_ID: Deployment credentials
• VERCEL_CLIENT_ID and VERCEL_CLIENT_SECRET: OAuth configuration
• SESSION_SECRET: Session encryption
• UPSTASH_REDIS_REST_URL and UPSTASH_REDIS_REST_TOKEN: Session storage

Start the server with pnpm dev and navigate to http://localhost:3000. The interface includes chat, agent selection, template selection, live preview, file explorer, and deployment controls.

Claude Code and Codex generate different output formats. A unified StreamChunk protocol standardizes both, allowing new agents to integrate without UI modifications by implementing the AgentProvider interface.

The RPC layer employs async function* generators for streaming, providing typed chunks to clients as they're yielded and enabling progressive updates throughout the workflow.

Each template provides setup generators and framework-specific agent instructions. Setup handles scaffolding via create-next-app and create-vite, component installation, styling configuration, and server initialization. Agents receive framework-targeted instructions for idiomatic code generation.

The Platform Template shows integrated use of Vercel's infrastructure, including sandboxes, AI Gateway, deployments, and project transfers, to create a cohesive platform where AI generates code, users preview it live, and deploy to production.