Quickstart for AI Gateway

Here is an example of how to quickly set up a simple, modern web-app with AI capabilities from scratch, with a few commands.

This example uses the most up-to-date public Vite + React starter template, the OpenAI client library, and a Netlify Function to generate dad jokes with AI.

If you already have a credit-based plan on Netlify, you’re good to go. If you have a legacy plan, you’ll need to switch to one of our current plans (free or paid) to run this example.

1. Create a new React + Vite project, and add the OpenAI SDK

npm create vite@latest dad-jokes -- --template react
cd dad-jokes
npm install openai

2. Create a new Netlify project.

Make sure you have an up-to-date version of the Netlify CLI:

npm install -g netlify-cli@latest

If you’re not already logged in to your Netlify account from the CLI (or not sure), run:

netlify login

Now, create a new Netlify project. For simplicity’s sake, you don’t even need to create a GitHub repository yet - just confirm all defaults.

netlify init

3. Add a Netlify Function in netlify/functions/joke.js:

Create the directory:

mkdir -p netlify/functions

Create netlify/functions/joke.js with this content:

import OpenAI from "openai";

function randomTopic() {
  const dadJokeTopics = [
    "Coffee",
    "Pizza",
    "Elevators",
    "Fishing",
    "Math class",
    "Vegetables",
    "Computers",
    "Socks",
  ];
  return dadJokeTopics[Math.floor(Math.random() * dadJokeTopics.length)];
}

export default async () => {
  const topic = randomTopic();

  const startTime = Date.now();
  const client = new OpenAI();
  const res = await client.responses.create({
    model: "gpt-5-mini",
    input: [
      {
        role: "user",
        content: `Give me a random short dad joke about ${topic}`,
      },
    ],
    reasoning: { effort: "minimal" },
  });
  const joke = res.output_text?.trim() || "oops, I'm all out of jokes";
  const elapsedTime = ((Date.now() - startTime) / 1000).toFixed(2);

  return Response.json({
    topic,
    joke,
    model: res.model,
    tokens: { input: res.usage.input_tokens, output: res.usage.output_tokens },
    elapsedTime
  });
};

export const config = {
  path: "/api/joke",
};

4. Run locally:

netlify dev

The homepage of your new webapp should open automatically in your browser.

Navigate to http://localhost:8888/api/joke to get a fresh dad joke - and note that you did not need to create an OpenAI account or set any keys, because the AI Gateway is automatically used.

5. Deploy to Netlify:

netlify deploy

This will get you a Deploy Preview with a unique URL. And again, no further configuration needed.