--- title: "AI SDK Computer Use" description: "An open-source AI agent demonstrating Claude Sonnet's computer use capabilities, built with Next.js, Vercel Sandbox, and the AI SDK." url: "https://vercel.com/templates/next.js/ai-sdk-computer-use" links: repository: "https://github.com/vercel-labs/ai-sdk-computer-use" demo: "https://ai-sdk-computer-use.vercel.app/" deploy: "https://vercel.com/new/clone?demo-title=AI+SDK+Computer+Use+Demo&demo-description=A+chatbot+application+built+with+Next.js+demonstrating+Anthropic+Claude+3.7+Sonnet%27s+computer+use+capabilities&demo-url=https%3A%2F%2Fai-sdk-computer-use.vercel.app%2F&project-name=AI+SDK+Computer+Use+Demo&repository-name=ai-sdk-computer-use&repository-url=https%3A%2F%2Fgithub.com%2Fvercel-labs%2Fai-sdk-computer-use&demo-image=%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2FTozoyC3boXtCFvFardq7f%2Fe6a3689b209202fe219ab0009f307ac1%2Fopengraph-image.png" --- # AI SDK Computer Use An open-source AI agent demonstrating Claude Sonnet's computer use capabilities, built with Next.js, Vercel Sandbox, and the AI SDK.

AI SDK Computer Use Demo

An open-source AI chatbot demonstrating computer use capabilities with Anthropic Claude Sonnet 4.5, Vercel Sandboxes, and the AI SDK by Vercel.

Features · How It Works · Deploy Your Own · Running Locally


## Features - Streaming text responses powered by the [AI SDK](https://sdk.vercel.ai/docs). - Anthropic Claude Sonnet 4.5 with [computer use](https://sdk.vercel.ai/docs/guides/computer-use) and bash tool capabilities. - Remote desktop environment running in a [Vercel Sandbox](https://vercel.com/docs/vercel-sandbox) with Chrome, a window manager, and VNC streaming. - [shadcn/ui](https://ui.shadcn.com/) components for a modern, responsive UI powered by [Tailwind CSS](https://tailwindcss.com). - Built with the latest [Next.js](https://nextjs.org) App Router. ## How It Works The app spins up a Vercel Sandbox from a pre-built snapshot that includes: - **Xvnc** — a virtual X11 display server - **openbox** — a lightweight window manager - **noVNC + websockify** — streams the desktop to the browser via WebSocket - **Google Chrome** — auto-launched so the AI agent has a browser ready - **xdotool + ImageMagick** — for mouse/keyboard control and screenshots When a user sends a message, Claude uses the `computer` tool (screenshot, click, type, scroll) and the `bash` tool (run shell commands) to interact with the sandbox desktop. The noVNC stream is displayed in a resizable iframe alongside the chat. ### Architecture ``` User ↔ Next.js Chat UI ↔ AI SDK ↔ Claude Sonnet 4.5 ↓ Vercel Sandbox ┌─────────────────────┐ │ Xvnc (:99) │ │ openbox │ │ Chrome │ │ websockify → noVNC │ └─────────────────────┘ ↓ noVNC iframe in browser ``` ## Deploy Your Own You can deploy your own version to Vercel by clicking the button below: [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?project-name=AI+SDK+Computer+Use+Demo&repository-name=ai-sdk-computer-use&repository-url=https%3A%2F%2Fgithub.com%2Fvercel-labs%2Fai-sdk-computer-use&demo-title=AI+SDK+Computer+Use+Demo&demo-url=https%3A%2F%2Fai-sdk-computer-use.vercel.app%2F&demo-description=A+chatbot+application+built+with+Next.js+demonstrating+Anthropic+Claude+Sonnet+4.5+computer+use+capabilities+with+Vercel+Sandboxes&env=ANTHROPIC_API_KEY,SANDBOX_SNAPSHOT_ID) ## Running Locally ### Prerequisites - Node.js 18+ - A [Vercel](https://vercel.com) account (for Sandbox access) - An [Anthropic API key](https://console.anthropic.com/) ### 1. Install dependencies ```bash pnpm install ``` ### 2. Set up Vercel credentials Install the [Vercel CLI](https://vercel.com/docs/cli) and link your project: ```bash pnpm install -g vercel vercel link vercel env pull ``` This creates a `.env.local` file with `VERCEL_OIDC_TOKEN` for Sandbox authentication. Alternatively, set `VERCEL_TOKEN`, `VERCEL_TEAM_ID`, and `VERCEL_PROJECT_ID` manually in your `.env.local`. ### 3. Create a sandbox snapshot The snapshot pre-installs the desktop environment (Xvnc, Chrome, openbox, noVNC, xdotool, ImageMagick) so sandboxes boot in seconds. ```bash npx tsx lib/sandbox/create-snapshot.ts ``` This takes ~10 minutes. When done, it outputs a snapshot ID. Add it to your `.env.local`: ``` SANDBOX_SNAPSHOT_ID=snap_xxxxxxxxxxxxx ``` ### 4. Add your Anthropic API key ``` ANTHROPIC_API_KEY=sk-ant-... ``` ### 5. Start the dev server ```bash pnpm dev ``` Open [http://localhost:3000](http://localhost:3000) to use the computer use agent. ## Environment Variables | Variable | Required | Description | |---|---|---| | `ANTHROPIC_API_KEY` | Yes | Anthropic API key for Claude | | `SANDBOX_SNAPSHOT_ID` | Yes | Vercel Sandbox snapshot with the desktop environment | | `VERCEL_OIDC_TOKEN` | Yes* | Auto-set by `vercel env pull` for Sandbox auth | | `VERCEL_TOKEN` | Alt* | Alternative to OIDC — a Vercel personal access token | | `VERCEL_TEAM_ID` | Alt* | Required with `VERCEL_TOKEN` | | `VERCEL_PROJECT_ID` | Alt* | Required with `VERCEL_TOKEN` | \* Either `VERCEL_OIDC_TOKEN` (via `vercel env pull`) or the `VERCEL_TOKEN` + team/project IDs are required for Sandbox authentication. ## Related Templates ### [eve Marketing Team](https://vercel.com/templates/eve/eve-marketing-team) Marketing team in Slack: one lead, five specialists. Blog drafts in Notion, posts in Typefully, campaigns in Resend, on approval. ### [eve Personal Agent](https://vercel.com/templates/nuxt/eve-personal-agent) Fork your own personal agent. One identity across web, Slack, and iMessage, with memory you can import, edit, and approve. ### [eve GitHub Maintainer](https://vercel.com/templates/eve/eve-github-maintainer) GitHub maintainer eve agent for your inbox. Weekly issue digests you reply to, PR summaries, Linear handoffs, and @mention answers. --- ## Additional documentation The [Vercel Knowledge Base](https://vercel.com/kb) contains guides and answers to common questions about Vercel, including deployment, framework configuration, domains, caching, and troubleshooting.