---
title: "Vercel AI Gateway Demo"
description: "An open-source AI chatbot built with Next.js, the AI SDK, and the AI Gateway."
url: "https://vercel.com/templates/next.js/vercel-ai-gateway-demo"
links:
  repository: "https://github.com/vercel-labs/ai-sdk-gateway-demo"
  demo: "https://ai-sdk-gateway-demo.labs.vercel.dev/"
  deploy: "https://vercel.com/new/clone?demo-title=Vercel+AI+Gateway+Demo&demo-description=An+open-source+AI+chatbot+built+with+Next.js%2C+the+AI+SDK%2C+and+the+AI+Gateway.&demo-url=https%3A%2F%2Fai-sdk-gateway-demo.labs.vercel.dev%2F&project-name=Vercel+AI+Gateway+Demo&repository-name=vercel-ai-gateway-demo&repository-url=https%3A%2F%2Fgithub.com%2Fvercel-labs%2Fai-sdk-gateway-demo&demo-image=%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2F5mz2JCK2z8hNLIiV0PkKux%2F4f4345c6d0a73e27d765a57c9cf1c44a%2Flight.png"
---

# Vercel AI Gateway Demo

An open-source AI chatbot built with Next.js, the AI SDK, and the AI Gateway.

A simple [Next.js](https://nextjs.org) chatbot app to demonstrate the use of the Vercel AI Gateway with the [AI SDK](https://sdk.vercel.ai).

## Getting Started

### One-time setup

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel-labs%2Fai-sdk-gateway-demo)

1. Clone this repository with the Deploy button above
1. Install the [Vercel CLI](https://vercel.com/docs/cli) if you don't already have it
1. Clone the repository you created above: `git clone <repo-url>`
1. Link it to a Vercel project: `vc link` or `vc deploy`

### Usage
1. Install packages with `pnpm i` (or `npm i` or `yarn i`) and run the development server with `vc dev`
1. Open http://localhost:3000 to try the chatbot

### FAQ

1. If you prefer running your local development server directly rather than using `vc dev`, you'll need to run `vc env pull` to fetch the project's OIDC authentication token locally
   1. the token expires every 12h, so you'll need to re-run this command periodically.
   1. if you use `vc dev` it will auto-refresh the token for you, so you don't need to fetch it manually
1. If you're linking to an existing, older project, you may need to enable the OIDC token feature in your project settings.
   1. visit the project settings page (rightmost tab in your project's dashboard)
   1. search for 'OIDC' in settings
   1. toggle the button under "Secure Backend Access with OIDC Federation" to Enabled and click the "Save" button

## Authors

This repository is maintained by the [Vercel](https://vercel.com) team and community contributors. 

Contributions are welcome! Feel free to open issues or submit pull requests to enhance functionality or fix bugs.

## Related Templates

### [Fal Image Generator](https://vercel.com/templates/next.js/fal-image-generator)

An open-source AI image generator built with Next.js, the AI SDK, and Fal.

### [Vercel x DeepInfra Chatbot](https://vercel.com/templates/next.js/vercel-x-deepinfra-chatbot)

An open-source AI chatbot built with Next.js, the AI SDK, and DeepInfra.

### [Vercel x Groq Chatbot](https://vercel.com/templates/next.js/vercel-x-groq-chatbot)

An open-source AI chatbot built with Next.js, the AI SDK, and Groq.

---

## 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.