---
title: "Quickstart for AI Gateway"
description: "Get started with AI Gateway quickly."
---

> For the complete documentation index for AI agents, see [llms.txt](https://docs.netlify.com/llms.txt). Markdown versions of any documentation page are available by appending `.md` to its docs.netlify.com URL.

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](https://react.dev/learn/build-a-react-app-from-scratch#vite), the [OpenAI client library](https://www.npmjs.com/package/openai), and a [Netlify Function](/build/functions/get-started/?data-tab=JavaScript).

## 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](/manage/accounts-and-billing/billing/billing-for-credit-based-plans/billing-faq-for-credit-based-plans/#how-can-i-update-my-legacy-pricing-plan-to-the-new-credit-based-pricing-plan) to one of our current plans (free or paid) to run this example.
1. 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:

```shell
npm install -g netlify-cli@latest
```

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

```shell
netlify login
```

## 1. Create and deploy a project

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

```shell
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.

```shell
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.

```shell
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:

```shell
npm install openai
```

Create a directory for Netlify Functions:

```shell
mkdir -p netlify/functions
```

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

```js
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:

```jsx
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

You can run your project locally using either the Netlify CLI or the Netlify Vite plugin:

### Tabs Component:

<TabItem label="Using Netlify CLI">

Run:

```shell
netlify dev
```

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

</TabItem>

<TabItem label="Using Netlify Vite Plugin">

If you prefer to use your framework's native dev command instead of the Netlify CLI, you can install the [Netlify Vite plugin](/build/frameworks/framework-setup-guides/vite/#vite-plugin):

1. Install the plugin:

```shell
npm install @netlify/vite-plugin
```

2. Add it to your existing `vite.config.js`:

```js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import netlify from "@netlify/vite-plugin";

export default defineConfig({
  plugins: [
    react(), 
    netlify()
  ],
})
```

3. Run your Vite dev server:

```shell
npm run dev
```

The Vite plugin automatically provides access to AI Gateway and other Netlify platform features in your local dev server.

</TabItem>

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 publish your site and make the AI-enabled changes go live. This allows you to share your AI-enabled site live on the internet.