Quickstart for AI Gateway

Here is an example of how to quickly set up a simple, modern web app with AI features. Unfortunately, the web app uses its powers to generate dad jokes.

This example uses the public Vite + React starter template, the OpenAI client library, and a Netlify Function.

Prerequisites

1. 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.
2. To develop locally, you need the Netlify CLI installed and up-to-date.

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

1. Create and deploy a project

1. Create a new Vite and React project using this template:

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

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

netlify init

3. Deploy your site to production on Netlify using the Netlify CLI. Note that AI Gateway requires that your Netlify project have at least one production deploy.

netlify deploy --prod --open

Once the deploy is ready, the browser should automatically navigate to your new live site.

Now, let’s add some AI.

2. Add an AI-powered function

In the project root directory, install the OpenAI client library:

npm install openai

Create a directory for Netlify Functions:

mkdir -p netlify/functions

Create the netlify/functions/joke.js file for generating AI jokes, with this content:

import process from "process";
import OpenAI from "openai";

const dadJokeTopics = [
  "Coffee", "Elevators", "Fishing", "Math class", "Computers", "Socks",
];

const setupMessage =
  "For the AI Gateway to work, ensure you have a credit-based plan" +
  " and a linked project that you deployed live at least once";

export default async () => {
  if (!process.env.OPENAI_BASE_URL)
    return Response.json({ error: setupMessage });

  const randomTopic =
    dadJokeTopics[Math.floor(Math.random() * dadJokeTopics.length)];

  try {
    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 ${randomTopic}`,
        },
      ],
      reasoning: { effort: "minimal" },
    });
    const joke = res.output_text?.trim() || "Oops! I'm all out of jokes";

    return Response.json({
      topic: randomTopic,
      joke,
      model: res.model,
      tokens: {
        input: res.usage.input_tokens,
        output: res.usage.output_tokens,
      },
    });
  } catch (e) {
    return Response.json({ error: `${e}` }, { status: 500 });
  }
};

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

When running locally with the Netlify CLI, or deploying live, your new function will be accessible via the route /api/joke.

3. Add a simple user interface

Replace the default contents of src/App.jsx with:

import { useState } from "react";
import "./App.css";

export default function App() {
  const [joke, setJoke] = useState();
  const [loading, setLoading] = useState(false);

  const getJoke = async () => {
    setLoading(true);
    try {
      const res = await fetch("/api/joke");
      setJoke(res.ok ? await res.json() : { error: res.status });
    } finally {
      setLoading(false);
    }
  };

  return (
    <>
      <h1>Tell me a dad joke</h1>
      <button onClick={getJoke} disabled={loading}>
        {loading ? "Dad is thinking..." : "Get joke"}
      </button>
      <pre style={{ border: "solid", textAlign: "left", padding: "1em" }}>
        {JSON.stringify(joke, null, 2)}
      </pre>
    </>
  );
}

4. Run locally

Run:

netlify dev

The homepage of your new web app should open automatically, and you can start generating jokes.

Note that you did not need to create an OpenAI account or set any keys, because the AI Gateway is automatically used.

Finally, if you want, you can deploy to Netlify again to make your new AI-enabled site go live on the internet and to share your site.