How does Nuxt 4 integrate Vercel AI SDK for streaming AI chat interfaces?

npm install ai @ai-sdk/openai
      

// nuxt.config.ts
export default defineNuxtConfig({
  runtimeConfig: {
    aiApiKey: process.env.OPENAI_API_KEY
  }
})
      

// server/api/chat.post.ts
import { generateText } from 'ai'
import { openai } from '@ai-sdk/openai'

export default defineEventHandler(async (event) => {
  const { messages } = await readBody(event)
  const config = useRuntimeConfig()
  
  const { textStream } = await generateText({
    model: openai('gpt-4o-mini'),
    messages,
    stream: true
  })
    return textStream.toAIStreamResponse()
})
      

<template>
  <div class="chat">
    <div v-for="message in messages" :key="message.id" class="message">
      {{ message.role }}: {{ message.content }}
    </div>
    <form @submit.prevent="handleSubmit" class="input-form">
      <input v-model="input" placeholder="Type message..." />
      <button type="submit">Send</button>
    </form>
  </div>
</template>

<script setup lang="ts">
const { messages, input, handleSubmit, isLoading } = useChat({
  api: '/api/chat',
  initialMessages: [
    { role: 'assistant', content: 'Hello! How can I help?' }
  ]
})
</script>

<!-- pages/chat.vue -->
<template>
  <div class="chat-page">
    <ChatBox />
  </div>
</template>