Skip to content


This is an example of using the AI SDK and OpenAI's completion service within Nuxt.


Create a new file in server/api/chat.ts with the following contents:

import OpenAI from 'openai';
import { OpenAIStream } from 'ai';
import { ChatCompletionMessageParam } from 'openai/resources/chat';
export default defineLazyEventHandler(async () => {
  const apiKey = useRuntimeConfig().openaiApiKey;
  if (!apiKey) throw new Error('Missing OpenAI API key');
  const openai = new OpenAI({
    apiKey: apiKey,
  return defineEventHandler(async event => {
    // Extract the `prompt` from the body of the request
    const { messages } = (await readBody(event)) as {
      messages: ChatCompletionMessageParam[];
    // Ask OpenAI for a streaming chat completion given the prompt
    const response = await{
      model: 'gpt-3.5-turbo',
      stream: true,
      messages: => ({
        content: message.content,
        role: message.role,
    // Convert the response into a friendly text-stream
    return OpenAIStream(response);

It creates a new API endpoint that accepts a POST request with a messages array in the body. It then uses the AI SDK to ask OpenAI for a streaming chat completion given the messages.

UI Component

On the client-side, we'll create a simple chat UI that sends messages to the endpoint we created above and displays the responses. Create a new file in app.vue with the following contents:

<script setup lang="ts">
import { useChat } from 'ai/vue';
const { messages, input, handleSubmit } = useChat();
  <div class="flex flex-col w-full max-w-md py-24 mx-auto stretch">
    <div v-for="m in messages" key="" class="whitespace-pre-wrap">
      {{ m.role === 'user' ? 'User: ' : 'AI: ' }}
      {{ m.content }}
    <form @submit="handleSubmit">
        class="fixed bottom-0 w-full max-w-md p-2 mb-8 border border-gray-300 rounded shadow-xl"
        placeholder="Say something..."

It uses the useChat API from the ai/vue package to manage the state of the chat. It also uses the handleSubmit and handleInputChange methods to send messages to the endpoint and update the input field.

To see the full list of options for useChat, see the API reference.


© 2023 Vercel Inc.