
I've recently jumped into prompt engineering with both feet, but found myself rewriting a lot of the same
boilerplate code when engineering new prompts. If you take a look at 2 of the tools I've added to this site:

1. [TailwindCSS + React Hook Form Generator](/tools/tailwindcss-forms-ai-generator)
2. [AI Spec Generator](/tools/ai-spec-generator)

They are pretty close to the same UI, but the API code for them was almost identical. So? DRY.

# tldr;

Vercel AI + Open AI makes building new AI experiences fast. Adding a little abstraction makes it even faster. 💥

### The Original Vercel AI API Route

To get started with Vercel AI, I basically just ripped their code from the docs [here](https://sdk.vercel.ai/docs/concepts/caching). No biggie. I added a little
training data, and some code examples, so that my first attempt at a streaming AI API route looked like this:

```js:/api/ai/code/index.js
import { OpenAIStream, StreamingTextResponse } from 'ai'
import OpenAI from 'openai'
import { kv } from '@vercel/kv'

const DEV = process.env.NODE_ENV === 'development'

const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
})

const modelOptions = {
  model: 'gpt-3.5-turbo',
  stream: true,
}

const training = [
  { role: 'system', content: '...' },
  { role: 'user', content: '...' },
  { role: 'assistant', content: '...' },
  { role: 'user', content: '...' },
  { role: 'assistant', content: '...' },
];

export default async function handler(req) {
  const { messages } = await req.json()
  const key = `${prefix}-${JSON.stringify(messages)}`

  // Check if we have a cached response in production
  const cached = DEV ? null : await kv.get(key)

  if (cached) {
    const chunks = cached.split(' ')
    // Emulate the "stream" interface, even if we're cached
    const stream = new ReadableStream({
      async start(controller) {
        for (const chunk of chunks) {
          const bytes = new TextEncoder().encode(chunk + ' ')
          controller.enqueue(bytes)
          await new Promise((r) =>
            setTimeout(
              r,
              // get a random number between 10ms and 50ms to simulate a random delay
              Math.floor(Math.random() * 40) + 10
            )
          )
        }
        controller.close()
      },
    })
    return new StreamingTextResponse(stream)
  }

  const response = await openai.chat.completions.create({
    ...modelOptions,
    messages: [...training, ...messages],
  })

  const stream = OpenAIStream(response, {
    async onCompletion(completion) {
      // Cache the response. Note that this will also cache function calls.
      if (DEV) {
        return;
      }

      await kv.set(key, completion)
      await kv.expire(key, 60 * 60)
    },
  })

  return new StreamingTextResponse(stream)
}

```

Not bad, considering it even implements caching for cost savings on responses.  But then,
when I went to build the second AI API route (the one for my [spec tool](/tools/ai-spec-generator)), I realized I was
basically identically copying all the meat of this handler, with the exception of the training
data.

There are a couple of ways you could handle this:

1.  Add the training data in an api request to a single ChatGPT completion endpoint
2.  Abstract the creation of AI api handlers into a function that accepts additional training data

Ultimately, I opted for #2, simply because having all that training data in React components
seemed like a weird place for it to live, and I like the flexibility of different API endpoints per bot 🤖.

Maybe I want to extend them, or chain them... who knows.  This is all new to me.

Anyway, here's the simple abstraction, and a sample implementation, for your reusing pleasure.

```js:/lib/createAIHandler.js
import { OpenAIStream, StreamingTextResponse } from 'ai'
import OpenAI from 'openai'
import { kv } from '@vercel/kv'

const DEV = process.env.NODE_ENV === 'development'

const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
})

const defaultModelOptions = {
  model: 'gpt-3.5-turbo',
  stream: true,
}

export default function createAIHandler({
  prefix,
  training = [],
  modelOptions = defaultModelOptions,
}) {
  // Return a function, that is the handler
  return async function (req) {
    const { messages } = await req.json()
    const key = `${prefix}-${JSON.stringify(messages)}`
    // Check if we have a cached response
    const cached = DEV ? null : await kv.get(key)

    if (cached) {
      const chunks = cached.split(' ')
      const stream = new ReadableStream({
        async start(controller) {
          for (const chunk of chunks) {
            const bytes = new TextEncoder().encode(chunk + ' ')
            controller.enqueue(bytes)
            await new Promise((r) =>
              setTimeout(
                r,
                // get a random number between 10ms and 50ms to simulate a random delay
                Math.floor(Math.random() * 40) + 10
              )
            )
          }
          controller.close()
        },
      })
      return new StreamingTextResponse(stream)
    }

    const response = await openai.chat.completions.create({
      ...modelOptions,
      messages: [...training, ...messages],
    })

    const stream = OpenAIStream(response, {
      async onCompletion(completion) {
        // Cache the response. Note that this will also cache function calls.
        if (DEV) {
          return;
        }
        
        await kv.set(key, completion)
        await kv.expire(key, 60 * 60)
      },
    })

    return new StreamingTextResponse(stream)
  }
}
```

Pretty simple wrapper, eh?

Now, here's how you use it in a sample AI route for generating animal names:

```js:/api/ai/animal-names/index.js
import createAIHandler from '@/lib/createAIHandler'

export const runtime = 'edge'

const training = [
  { role: 'system', content: `
You are a bot that can ONLY respond with made up animal names.
Include a person's name, an adjective, a color, and an animal name.

<example>
Bart, the Slippery Green Walrus.
</example>
` },
  { role: 'user', content: 'Give me an animal name'  },
  { role: 'assistant', content: 'Sue, the Hilarious Yellow Antelope.' },
  { role: 'user', content: 'How are you?'  },
  { role: 'assistant', content: 'Jeff, the Angry Red Hare.' },
]

export default createAIHandler({
  prefix: 'animal-bot',
  training,
})
```

Lastly, wire it up in your component:

```jsx:/pages/animal-name-generator.jsx
import { useChat } from 'ai/react'

export default function Page() {
  
  const { messages, handleSubmit, input, handleInputChange } = useChat({
    api: '/api/ai/animal-names',
  });

  return (
    <>
      // Your chat UX
    </>
  )
}
```

I'm not gonna go into building forms and chat UX here, but good starting places are:

- [TailwindUI Feeds](https://tailwindui.com/components/application-ui/lists/feeds)
- [How I build forms](/articles/react-fast-performant-forms)
- [My AI Tailwind Form Generator](/tools/tailwindcss-forms-ai-generator)

Hope this helps you ramp up on your AI skillz, and happy coding! 😎

Learn how to abstract a Vercel OpenAI handler to quickly build and deploy AI-powered tools and applications.

Abstracting a Vercel OpenAI Handler for Quick AI Tools


A lifetime ago, I was primarily a UX designer.  Nothing was more fun than openeing my design tool of choice and creating a beautiful, shareable image for a blog post.

Nowawdays, with engineering as the priority, I don't have time to create these image manually, but I still want them to look good.

Enter [@vercel/og]().  🚀

With this library from [Vercel](), we'll get set up to dynamically generate nice-looking shareable images for our posts.

## Getting Started

First, we'll need to install the package.

```bash
$ yarn add @vercel/og
```

## Building the base API Route

To start, we'll create a file at `/pages/api/og.js`.  This will be our base API route for generating our images.

```js:/src/pages/api/og.js
import { ImageResponse } from '@vercel/og';
 
export const config = {
  runtime: 'experimental-edge',
};
 
export default async function handler() {
  return new ImageResponse(
    (
      <div
        style={{
          display: 'flex',
          background: '#fff',
          width: '100%',
          height: '100%',
          flexDirection: 'column',
          justifyContent: 'center',
          alignItems: 'center',
        }}
      >
        <p>Hello world</p>
      </div>
    ),
    {
      width: 1200,
      height: 630,
    },
  );
}
```

Visiting [http://localhost:3000/api/og](http://localhost:3000/api/og) should now render a simple image with the text "Hello world".  Like this:

> Note: Image generation can be slow...

![OG Sample 1](/images/og-sample-1.png)

## Adding a custom background image

I use [TailwindCSS]() for my styling, and `@vercel/og` has [experimental support](https://vercel.com/docs/concepts/functions/edge-functions/og-image-generation/og-image-examples#using-tailwind-css---experimental) for it, so let's try it out.

```js:src/pages/api/og.js {20,23-25}

import { ImageResponse } from '@vercel/og';
 
export const config = {
  runtime: 'experimental-edge',
};
 
export default async function handler() {
  return new ImageResponse(
    (
      <div
        style={{
          display: 'flex',
          background: '#fff',
          width: '100%',
          height: '100%',
          flexDirection: 'column',
          justifyContent: 'center',
          alignItems: 'center',
          background: `linear-gradient( 135deg, #FD6585 10%, #0D25B9 100%)`
        }}
      >
        <div tw="flex relative w-[100%] h-[100%]">
          <p tw="text-white text-7xl tracking-tighter top-10 right-10 absolute text-right max-w-4xl">Hello World</p>
        </div>
      </div>
    ),
    {
      width: 1200,
      height: 630,
    },
  );
}

```

This should land you with something that looks like this:

![OG Sample 2](/images/og-sample-2.png)

## Handling custom sizes

Now, not all platforms want the same size image, so we'll want to customize the returned size based on the platforms we're targeting.  Let's go ahead and make that dynamic.

```js:src/pages/api/og.js {10-11,33-34}
import { ImageResponse } from '@vercel/og';
 
export const config = {
  runtime: 'experimental-edge',
};
 
export default async function handler(req) {
  const { searchParams } = req.nextUrl;

  const width = searchParams.get('w') ? parseInt(searchParams.get('w'), 10) : 1200;
  const height = searchParams.get('h') ? parseInt(searchParams.get('h'), 10) : 630;

  return new ImageResponse(
    (
      <div
        style={{
          display: 'flex',
          background: '#fff',
          width: '100%',
          height: '100%',
          flexDirection: 'column',
          justifyContent: 'center',
          alignItems: 'center',
          background: `linear-gradient( 135deg, #FD6585 10%, #0D25B9 100%)`
        }}
      >
        <div tw="flex relative w-[100%] h-[100%]">
          <p tw="text-white text-7xl tracking-tighter top-10 right-10 absolute text-right max-w-4xl">Hello World</p>
        </div>
      </div>
    ),
    {
      width,
      height,
    },
  );
}

```

This should let you query your image with new parameters.  For example if you wanted and `800x800` image, simply query the url [http://localhost:3000/api/og?w=800&h=800](http://localhost:3000/api/og?w=800&h=800), and you should get this:

![OG Sample 3](/images/og-sample-3.png)

See where we're going with this?  😎

## Enabling dynamic text in your OG images

Now that we're familiar with adding parameters, let's add dynamic text to our image.  While we're at it, let's add a little `textShadow` to make it pop.


```js:src/pages/api/og.js {10,33-38}
import { ImageResponse } from '@vercel/og'

export const config = {
  runtime: 'experimental-edge',
}

export default async function handler(req) {
  const { searchParams } = req.nextUrl

  const text = searchParams.get('c') || 'Check out tybarho.com!'
  const width = searchParams.get('w')
    ? parseInt(searchParams.get('w'), 10)
    : 1200
  const height = searchParams.get('h')
    ? parseInt(searchParams.get('h'), 10)
    : 630

  return new ImageResponse(
    (
      <div
        style={{
          display: 'flex',
          background: '#fff',
          width: '100%',
          height: '100%',
          flexDirection: 'column',
          justifyContent: 'center',
          alignItems: 'center',
          background: `linear-gradient( 135deg, #FD6585 10%, #0D25B9 100%)`,
        }}
      >
        <div tw="flex relative w-[100%] h-[100%] p-8">
          <p
            tw="text-white text-7xl tracking-tighter text-right"
            style={{ textShadow: '1px 1px 30px #00000070' }}
          >
            {text}
          </p>
        </div>
      </div>
    ),
    {
      width,
      height,
    }
  )
}
```

That should give you something that looks like this:

![OG Sample 4](/images/og-sample-4.png)

## Adding a friendly avatar

I'd also like my ugly mug to show up on these posts, to give them a little more personality.  Let's add that in.

We'll be a little fancy, and use a dynamic Github username to pull the current profile pic from Github.

```js:src/pages/api/og.js {12,41-43}
import { ImageResponse } from '@vercel/og'

export const config = {
  runtime: 'experimental-edge',
}

export default async function handler(req) {
  const { searchParams } = req.nextUrl

  
  const text = searchParams.get('c') || 'Check out tybarho.com!'
  const username = searchParams.get('username') || 'tbarho'
  const width = searchParams.get('w')
    ? parseInt(searchParams.get('w'), 10)
    : 1200
  const height = searchParams.get('h')
    ? parseInt(searchParams.get('h'), 10)
    : 630

  return new ImageResponse(
    (
      <div
        style={{
          display: 'flex',
          background: '#fff',
          width: '100%',
          height: '100%',
          flexDirection: 'column',
          justifyContent: 'center',
          alignItems: 'center',
          background: `linear-gradient( 135deg, #FD6585 10%, #0D25B9 100%)`,
        }}
      >
        <div tw="flex relative w-[100%] h-[100%] p-8">
          <p
            tw="text-white text-7xl tracking-tighter text-right"
            style={{ textShadow: '1px 1px 30px #00000070' }}
          >
            {text}
          </p>
          <div tw="bg-white rounded-full w-64 h-64 absolute bottom-8 left-8 flex justify-center items-center shadow-xl">
            <img tw="w-60 h-60 rounded-full" src={`https://www.github.com/${username}.png`} />
          </div>
        </div>
      </div>
    ),
    {
      width,
      height,
    }
  )
}

```

This should result in something that looks like this...

![OG Sample 5](/images/og-sample-5.png)

## Adding automatic OG Images to our blog route

Finally, let's add these images to our blog route.

I need a number of different sizes to be generated for different social networks, 
so I'm going to create a little helper function that I can import into my pages.

```js:src/lib/ogSizes.js
const BASE_URL = __DEV__ ? 'http://localhost:3000' : 'https://www.mysite.com'

export const ogSizes = [
  {
    path: 'Facebook',
    width: 940,
    height: 788,
  },
  {
    path: 'Instagram',
    width: 1080,
    height: 1080,
  },
  {
    path: 'LinkedIn',
    width: 1200,
    height: 1200,
  },
  {
    path: 'Twitter',
    width: 1600,
    height: 900,
  },
  {
    path: 'Pinterest',
    width: 1000,
    height: 1500,
  },
];
```

The `path` attribute is really just there for my own reference.

Next, let's update the layout file for our blog posts.  If you haven't set up `next-seo` yet, check out [this article on setting up NextSeo on your site](https://www.tybarho.com/articles/adding-next-sitemap-to-your-nextjs-site).


```js:src/pages/blog/[slug].js {2,7-9,12-17, 29}
// ... other imports
import { ogSizes, BASE_URL } from '../../lib/ogSizes'

export default function Page({ meta }) {
  // ... other code

  const title = `${meta.title} - ${meta.author}`;
  const description = meta.description;
  const canonical = `https://www.tybarho.com${router.asPath}`;

  // Map our images helper
  const images = ogSizes.map(({ width, height }) => ({
    url: `${BASE_URL}/api/og?c=${encodeURIComponent(meta.title)}&username=[your_gh_username]&w=${width}&h=${height}`,
    width,
    height,
    type: 'image/png'
  }));

  return (
    <>
      <NextSeo
        title={title}
        description={description}
        canonical={canonical}
        openGraph={{
          url: canonical,
          title,
          description,
          images,
        }}
      />
      {/* ... other page code*/}
    </>
  );
}
```

Now, if you check out the developer console in your browser, you should see the OG image tags being added to your `<head>` tag.

![OG Images Tags](/images/og-images-tags.png)

## Wrap Up

So there you go.  Automatic, "fancy," OG images on your NextJS site.  Feel free to experiment and go as hog-wild as you want.

I recommend checking out the [`@vercel/og` docs](https://vercel.com/docs/concepts/functions/edge-functions/og-image-generation/og-image-examples#using-an-external-dynamic-image) for more interesting things you can do.

Happy coding! ✨


Tired of having to build nice looking OG images for every platform manually?  Automatically create shareable OG images for every blog post with @vercel/og.