# Vercel

> Deploy inference shell apps to Vercel with automatic API key management.

**URL:** https://inference.sh/docs/api/sdk/vercel
**Last updated:** 2026-10-11

---

**Deploy inference shell apps to Vercel with automatic API key management.**

---

## Quick Setup with Vercel Integration

The recommended way to connect your Vercel app to inference shell:

1. Go to [Vercel Integrations](https://vercel.com/integrations) and search for **inference shell**
2. Click **Add Integration**
3. Select the projects to connect
4. Follow the authorization flow

Once connected, your `INFERENCE_API_KEY` environment variable is automatically configured.

---

## Manual Setup

If you prefer manual configuration:

### 1. Create an API Key

1. Go to [settings → workspace → api keys](https://app.inference.sh/settings/team/keys)
2. Click **Create API Key**
3. Copy your key (starts with `inf_`)

### 2. Add to Vercel Environment

1. Go to your project in the Vercel dashboard
2. Navigate to **Settings → Environment Variables**
3. Add a new variable:
   - **Name**: `INFERENCE_API_KEY`
   - **Value**: Your API key
   - **Environments**: Production, Preview, Development

### 3. Redeploy

Redeploy your application to pick up the new environment variable.

---

## Project Setup

### Next.js App Router

```bash
# Install the SDK
npm install @inferencesh/sdk
```

Create the proxy route at `app/api/inference/proxy/route.ts`:

```typescript
import { createHandler } from "@inferencesh/sdk/proxy/nextjs";

export const { GET, POST } = createHandler({ allowedEndpoints: ["my-team/*"] });
```

The proxy forwards app runs and agent chats only; `allowedEndpoints` limits them to your apps and agents. See [options](/docs/api/sdk/server-proxy#options).

> [!WARNING]
> Anyone who can reach the proxy route runs apps and agents on your API key. In production set `allowedEndpoints` and `isAuthenticated` (see [what the proxy forwards](/docs/api/sdk/server-proxy#what-the-proxy-forwards)), and use a scoped key from a workspace that holds nothing else.

Configure the client in your frontend:

```typescript
"use client";

import { inference } from "@inferencesh/sdk";

const client = inference({
  proxyUrl: "/api/inference/proxy"
});

export async function generateImage(prompt: string) {
  const result = await client.run({
    app: "infsh/flux",
    input: { prompt }
  });
  
  return result.output;
}
```

### Next.js Page Router

Create the proxy at `pages/api/inference/proxy.ts`:

```typescript
import { createPageHandler } from "@inferencesh/sdk/proxy/nextjs";

export default createPageHandler({ allowedEndpoints: ["my-team/*"] });
```

---

## Edge Runtime

The proxy works with Vercel Edge Functions:

```typescript
// app/api/inference/proxy/route.ts
import { createHandler } from "@inferencesh/sdk/proxy/nextjs";

export const runtime = "edge";
export const { GET, POST } = createHandler({ allowedEndpoints: ["my-team/*"] });
```

---

## Environment Variables

| Variable | Description | Required |
|----------|-------------|----------|
| `INFERENCE_API_KEY` | Your inference shell API key | Yes |

The proxy automatically reads `INFERENCE_API_KEY` from your environment.

---

## Preview Deployments

Each Vercel preview deployment can use the same API key. All requests are authenticated through your server, so there's no exposure risk.

For different keys per environment:

1. Go to **Settings → Environment Variables**
2. Set different values for Production vs Preview

---

## Troubleshooting

### "Missing INFERENCE_API_KEY environment variable"

The proxy couldn't find your API key. Check that:
- The variable is named exactly `INFERENCE_API_KEY`
- You've redeployed after adding the variable
- The environment (Production/Preview) matches your deployment

### CORS Errors

If calling the proxy from a different domain, you may need to add CORS headers:

```typescript
// app/api/inference/proxy/route.ts
import { createHandler } from "@inferencesh/sdk/proxy/nextjs";
import { NextResponse } from "next/server";

export async function OPTIONS() {
  return new NextResponse(null, {
    headers: {
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Methods": "GET, POST, OPTIONS",
      "Access-Control-Allow-Headers": "Content-Type, x-inf-target-url",
    },
  });
}

export const { GET, POST } = createHandler({ allowedEndpoints: ["my-team/*"] });
```

### Timeout Errors

For long-running tasks, consider:
- Using streaming for real-time updates
- Increasing function timeout in `vercel.json`:

```json
{
  "functions": {
    "app/api/inference/proxy/route.ts": {
      "maxDuration": 60
    }
  }
}
```

---

## Example Project

See a complete Next.js + Vercel example:

```bash
npx create-next-app my-inference-app
cd my-inference-app
npm install @inferencesh/sdk
```

Then follow the [Server Proxy](/docs/api/sdk/server-proxy) guide to set up the proxy route.

---

## Next Steps

- [Server Proxy](/docs/api/sdk/server-proxy) — Detailed proxy configuration
- [Running Apps](/docs/api/sdk/running-apps) — Execute AI tasks
- [Streaming](/docs/api/sdk/streaming) — Real-time progress updates