How to Connect Claude AI to Vercel
Two things people mean by this: deploy a Claude-built app on Vercel, and add Claude-powered features to a Vercel app via its API. Here's how to do both — with your Anthropic key safely in env vars and the Vercel AI SDK.
Last updated June 17, 2026
Two paths, step by step
Path A deploys a Claude-built app on Vercel. Path B adds Claude-powered features to a Vercel app via the API. Do one or both.
A1. Deploy a Claude-built app: push to GitHub
If you built your app with Claude or Claude Code, commit it to a GitHub repository (keep secrets out of the repo). This is the bridge to Vercel.
A2. Import the repo into Vercel
In Vercel, Add New → Project → Import Git Repository, pick your repo, confirm the framework preset and build command, and deploy. You get a live URL with auto-deploys on every push.
B1. Integrate the Claude API: get an Anthropic API key
To make your Vercel app talk to Claude, create an API key in the Anthropic Console. You'll add it to Vercel as a secret — never in client-side code.
B2. Add the key as a Vercel environment variable
In Vercel → Settings → Environment Variables (or `vercel env add`), store ANTHROPIC_API_KEY for production and preview. Your server functions read it at runtime; it's never exposed to the browser.
B3. Call Claude with the Vercel AI SDK or AI Gateway
Use the Vercel AI SDK in a server route/function to call Claude — either through the Vercel AI Gateway (a unified API, with model fallbacks and observability) using a 'anthropic/claude-...' model string, or with the Anthropic provider directly. Stream responses back to your UI. Vercel's default Node runtime and Fluid Compute handle the serverless execution.
Frequently asked questions
How do you connect Claude to Vercel?
There are two senses of 'connect Claude to Vercel,' and they're different. (1) Deploy a Claude-built app: if you used Claude or Claude Code to write your app, push it to GitHub and import the repo into Vercel to host it. (2) Use Claude's API inside a Vercel app: create an Anthropic API key, store it as a Vercel environment variable (ANTHROPIC_API_KEY), and call Claude from a server route using the Vercel AI SDK — optionally via the Vercel AI Gateway for unified access, fallbacks, and observability. Most people doing 'connect Claude to Vercel' mean adding Claude-powered AI features to a Vercel-hosted app, which is the second path.
How do I use the Claude API in a Vercel app?
Add your Anthropic API key to Vercel as an environment variable (ANTHROPIC_API_KEY) so it stays server-side, then call Claude from a server route or serverless function using the Vercel AI SDK. You can route the call through the Vercel AI Gateway with a provider/model string (e.g. 'anthropic/claude-...'), which gives you a unified API, model fallbacks, and usage observability, or use the Anthropic provider directly. Stream the response to your front end for a chat-style UX. Keep all Claude calls on the server — never put the API key in the browser.
Where do I put my Anthropic API key on Vercel?
In your Vercel project under Settings → Environment Variables, add a variable named ANTHROPIC_API_KEY with your key, scoped to Production (and Preview if needed). You can also add it with the CLI: `vercel env add ANTHROPIC_API_KEY`. Your server-side code reads it via the environment at runtime, so it's never shipped to the client. Pull env vars locally for development with `vercel env pull`. If Claude calls fail in production, a missing or misnamed key is the most common cause.
What's the difference between the Vercel AI Gateway and calling Anthropic directly?
Calling Anthropic directly uses the Anthropic provider with your API key to hit Claude. The Vercel AI Gateway sits in front of multiple providers and lets you call models with a simple 'provider/model' string (like 'anthropic/claude-...'), adding benefits like automatic model fallbacks, a single billing/observability layer, and easy switching between providers. For a production app where you want resilience and the option to swap or fall back between models, the AI Gateway is convenient; for the simplest setup, the direct Anthropic provider works fine. Both run server-side via the Vercel AI SDK.
Can I deploy an app I built with Claude Code on Vercel?
Yes. Claude Code writes a normal codebase, so deploying it on Vercel is the standard flow: commit the project to GitHub, import the repo into Vercel, set any environment variables your app needs, and deploy. If Claude built a Next.js app, Vercel auto-detects and optimizes it; other frameworks work too with the right build settings. You then get Vercel's CI/CD, preview deployments, and edge network, and you can keep iterating with Claude Code and let Vercel auto-deploy each push.
Related: build mobile apps with Claude, connect Replit to Vercel, and connect Lovable to Vercel.