Nuxt 3 - OpenAi api - Works locally but not when deployed (on Vercel)

Question

What i'm making
A Nuxt 3 app that has a form field where i can enter a prompt, this will make a call to the OpenAi api using the prompt and then show the result from OpenAi. https://zi.netjes-2ertn9n8i-robertbel.vercel.app/

The issue
Locally this works fine, but when i deploy to Vercel and submit the form i get this response: {"error": {"code": "500", "message": "A server error has occurred"}}

What my Nuxt app structure looks like:
pages/index.vue

<template>
  <form @submit.prevent="submitForm">
    <input type="text" v-model="sentence" />
    <button type="submit">Submit</button>
    
  </form>
  <div>
    <p class="data">{{ dataFromApi }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const sentence = ref('')
const dataFromApi = ref('')

function submitForm() {
    formRequest().then((result) => {
        console.log(result)
        dataFromApi.value = result
    }).catch((error) => {
        console.error('Form could not be send', error)
    }); 
}

async function formRequest() {
  return await $fetch('/api/generate', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ sentence: sentence.value }),
  })
}

</script>

server/api/generate.js

import { Configuration, OpenAIApi } from "openai";

export default defineEventHandler(async (event) => {
    const body = await readBody(event)
    const config = useRuntimeConfig()
    
    const configuration = new Configuration({
        apiKey: config.secret,
      });
    const openai = new OpenAIApi(configuration);

    const completion = await openai.createCompletion({
        model: "text-davinci-003",
        prompt: body.sentence,
        temperature: 0.6,
        max_tokens: 420,
      });

    return completion.data.choices[0].text;
})

nuxt.config.ts

export default defineNuxtConfig({
  runtimeConfig: {
    secret: process.env.OPENAI_API_KEY,
  },
  nitro: {
    preset: 'vercel-edge',
  },
});

.env

OPENAI_API_KEY=XXXXX

And in the settings of Vercel i added the Environment Variable:

I feel like this has something to do with en API key and Environment Variable but i have a hard time debugging this.

Does someone has an idea how i can get this to work?

Answer 1

If you are using nextjs add a now.json file in the root of your project

{
    "version": 2,
    "builds": [
      {
        "src": "src/pages/api/**/*.ts",
        "use": "@now/node",
        "config": {
          "timeout": 300000
        }
      }
    ]
  }

The default timeout on vercel is 30 seconds, this will change it to 500 seconds. It is likely timing out if you are using a complicated prompt