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
Section titled “Prerequisites”- 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.
- 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
Section titled “1. Create and deploy a project”- Create a new Vite and React project using this template:
npm create vite@latest dad-jokes -- --template react --no-interactivecd dad-jokesnpm 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
- 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
Section titled “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
Section titled “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
Section titled “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.
Did you find this doc useful?
Your feedback helps us improve our docs.