> ## Documentation Index
> Fetch the complete documentation index at: https://sferadev.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# VSCode Extension: Vercel AI Gateway

> VS Code extension that provides Vercel AI models via the Language Model API

A VS Code extension that integrates [Vercel AI Gateway](https://vercel.com/docs/ai-gateway) models directly into VS Code's native chat interface, enabling seamless AI-powered development workflows.

## Features

<CardGroup cols={2}>
  <Card title="Multiple AI Models" icon="brain">
    Access all Vercel AI Gateway models including GPT-4o, Claude, Gemini, and more
  </Card>

  <Card title="Native Integration" icon="code">
    Works seamlessly with VS Code's built-in chat interface and Copilot
  </Card>

  <Card title="Streaming Responses" icon="wave-pulse">
    Real-time streaming of AI responses for instant feedback
  </Card>

  <Card title="Tool Calling" icon="wrench">
    Full support for VS Code tool integration and function calling
  </Card>
</CardGroup>

## Installation

Install the extension from the [VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=SferaDev.vscode-extension-vercel-ai):

1. Open VS Code
2. Go to Extensions (`Cmd/Ctrl + Shift + X`)
3. Search for "Vercel AI Gateway"
4. Click Install

Or install via the command line:

```bash theme={null}
code --install-extension SferaDev.vscode-extension-vercel-ai
```

## Authentication

The extension supports two authentication methods:

### API Key Authentication

The simplest way to authenticate is with a Vercel AI Gateway API key:

1. Open Command Palette (`Cmd/Ctrl + Shift + P`)
2. Search for "Vercel AI Gateway: Manage Authentication"
3. Select "API Key"
4. Enter your API key (starts with `vck_`)

<Note>
  You can obtain an API key from the [Vercel AI Gateway dashboard](https://vercel.com/docs/ai-gateway).
</Note>

### OIDC Authentication (Vercel CLI)

For enhanced security, you can use OIDC authentication via the Vercel CLI:

1. Ensure you're logged in to the Vercel CLI (`vercel login`)
2. Open Command Palette (`Cmd/Ctrl + Shift + P`)
3. Search for "Vercel AI Gateway: Manage Authentication"
4. Select "Vercel OIDC"
5. Choose your team and project

OIDC tokens are automatically refreshed when they expire.

## Usage

Once authenticated, the extension automatically registers as a language model provider in VS Code.

### Using with VS Code Chat

1. Open the Chat panel (`Cmd/Ctrl + Shift + I`)
2. Click the model selector dropdown
3. Choose a model from "Vercel AI Gateway"
4. Start chatting!

### Using with GitHub Copilot Chat

The extension integrates with GitHub Copilot Chat, allowing you to use Vercel AI Gateway models as an alternative to the default Copilot models.

## Available Models

The extension dynamically fetches available models from the Vercel AI Gateway. Supported models include:

| Provider    | Models                                           |
| ----------- | ------------------------------------------------ |
| OpenAI      | GPT-4o, GPT-4o Mini, GPT-4 Turbo                 |
| Anthropic   | Claude 3.5 Sonnet, Claude 3 Opus, Claude 3 Haiku |
| Google      | Gemini 1.5 Pro, Gemini 1.5 Flash                 |
| And more... | All models supported by Vercel AI Gateway        |

All models support:

* Text generation with streaming
* Tool calling (where supported by the underlying model)
* Token counting

## Session Management

The extension supports multiple authentication sessions, allowing you to switch between different API keys or OIDC configurations.

### Managing Sessions

1. Open Command Palette (`Cmd/Ctrl + Shift + P`)
2. Search for "Vercel AI Gateway: Manage Authentication"
3. Choose from:
   * **Add new authentication** - Add a new API key or OIDC session
   * **Switch active session** - Switch between existing sessions
   * **Remove session** - Delete a saved session

## Troubleshooting

<AccordionGroup>
  <Accordion title="Models not appearing in the chat panel">
    1. Ensure you're authenticated (check via "Manage Authentication" command)
    2. Try reloading VS Code (`Cmd/Ctrl + Shift + P` → "Reload Window")
    3. Check the Output panel for error messages (select "Vercel AI Gateway" from the dropdown)
  </Accordion>

  <Accordion title="OIDC authentication not working">
    1. Verify you're logged in to the Vercel CLI: `vercel whoami`
    2. If not logged in, run: `vercel login`
    3. Ensure the project you selected has AI Gateway enabled
  </Accordion>

  <Accordion title="API key authentication failing">
    1. Verify your API key starts with `vck_`
    2. Check that your API key has the necessary permissions
    3. Try removing and re-adding the session
  </Accordion>
</AccordionGroup>

## Development

To contribute or run the extension locally:

```bash theme={null}
# Clone the repository
git clone https://github.com/SferaDev/SferaDev.git
cd SferaDev

# Install dependencies
pnpm install

# Build the extension
pnpm --filter vscode-extension-vercel-ai build

# Open in VS Code for debugging
code apps/vscode-ai-gateway
```

Press `F5` to launch the Extension Development Host.

## Source Code

The extension is part of the [SferaDev monorepo](https://github.com/SferaDev/SferaDev) and can be found at:

```
apps/vscode-ai-gateway/
```