Nuxt + Netlify AI Gateway Starter

This is a Nuxt.js v3 project bootstrapped with create nuxt and set up to be instantly deployed to Netlify! You can take a look at the live version of the site here.

This project is a simple chat app that lets you compare responses from Anthropic's Claude Sonnet, OpenAI's GPT-5, and Google's Gemini 2.5 Pro side by side. It uses Netlify AI Gateway to handle AI inference without requiring you to manage API keys. The app includes 3 server functions that call all three models simultaneously, allowing you to compare their responses to the same prompt.

With Netlify, you'll have access to features like Branch Deploys and Deploy Previews, so we encourage you to deploy this, modify it, learn and have fun!

(If you click this button, it will create a new repo for you that looks exactly like this one, and sets that repo up immediately for deployment on Netlify)

⚠️ Warning ⚠️

This project will deploy a live site available all over the web. If you do not want your Model being hit directly from the public internet, we recommend locking your site on Netlify using Site Protection

Table of Contents:

• Getting Started
• Installation options
• App Images

Getting Started

Make sure to install dependencies:

# npm
npm install

# pnpm
pnpm install

# yarn
yarn install

# bun
bun install

First, run the development server, if you have the Netlify CLI installed, you can run:

netlify dev

If you don't have the Netlify CLI installed, you can run:

npm run dev
# or
yarn dev

Open http://localhost:3001 with your browser to see the result.

You can start editing the page by modifying pages/index.vue. The page auto-updates as you edit the file.

Installation options

Option one: One-click deploy

Option two: Manual clone

1. Clone this repo: git clone https://github.com/Netlify-Moneytronic/ai-gateway-sample.git
2. Navigate to the directory and run npm install
3. Run npm run dev or ntl dev
4. Make your changes

Netlify AI Gateway

This project uses Netlify AI Gateway, which means you don't need to provide your own API keys!

When deployed to Netlify, the AI Gateway automatically:

• Provides API authentication for OpenAI, Anthropic, and Google Gemini
• Handles rate limiting and caching
• Bills your Netlify account based on actual token usage

No environment variables are required - just deploy to Netlify and start chatting!

Supported Models

• OpenAI: GPT-5
• Anthropic: Claude 3.7 Sonnet
• Google: Gemini 2.5 Pro

Note: The AI Gateway is available by default in all credit-based Netlify plans. Your project must have a production deploy for the AI Gateway to activate. ⚠️ Warning ⚠️

This project will deploy a live site available all over the web. If you do not want your Model being hit directly from the public internet, we recommend locking your site on Netlify using Site Protection

App Images

The application using OpenAI's GPT-4o Mini: A screenshot showing the chat interface with a response from the OpenAI model.

The application using Anthropic's Claude 3.7 Sonnet: A screenshot showing the chat interface with a response from the Anthropic model.