AI Gateway Playground

An open-source playground for Vercel AI Gateway that serves as a starting point for creating an AI-ready platform.

Prerequisites

• Node.js 18+
• npm, yarn, or pnpm
• Vercel account with AI Gateway access

🚀 Getting Started

1. Clone the Repository

git clone https://github.com/byte3-it/ai-gateway-playground.git
cd ai-gateway-playground

2. Install Dependencies

npm install
# or
yarn install
# or
pnpm install

3. Environment Setup

Create a .env file in the root directory:

AI_GATEWAY_API_KEY=your_vercel_ai_gateway_api_key_here

How to get your API key:

1. Go to Vercel AI Gateway
2. Create a new project or select an existing one
3. Generate an API key from the dashboard
4. Copy the key to your .env file

4. Run the Development Server

npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 in your browser to see the application.

Available Models

The project comes with some pre-configured AI models. You can view and edit the available models in src/lib/constants.ts:

export const AVAILABLE_MODELS = [
  {
    id: "openai/gpt-5-nano",
    name: "OpenAI GPT-5 Nano",
  },
  {
    id: "xai/grok-4",
    name: "XAI Grok 4",
  },
  {
    id: "anthropic/claude-3-haiku",
    name: "Anthropic Claude 3 Haiku",
  },
  {
    id: "google/gemini-embedding-001",
    name: "Google Gemini Embedding 001",
  },
];

To add more models visit Vercel AI Gateway Models to see all available models

Tech Stack

• Framework: Next.js 15 with App Router
• Language: TypeScript
• Styling: Tailwind CSS
• UI Components: the great shadcn components
• State Management: React Query (TanStack Query)
• AI Integration: Vercel AI SDK

📚 Resources

• Vercel AI Gateway Documentation
• Vercel AI SDK Documentation