Nuxt

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

December 4, 2025

download ready
Thank You
Your submission has been received.
We will be in touch and contact you soon!

Nuxt 4 combines Vercel AI SDK's useChat composable with Nitro server routes for real-time streaming responses. Server actions process messages via generateText with streaming enabled. Clients receive tokens instantly with full TypeScript support and conversation history.

Step-by-Step Implementation:-

Step 1: Install Dependencies

Code

npm install ai @ai-sdk/openai

Step 2: Configure Runtime API Key

Code

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

Step 3: Create Server Action

Code

// 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()
})

Step 4: Build Chat Component

Code

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

Step 5: Use in Page

Code

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

Previous

Next

Arrow icon
Hire Now!

Need Help with Nuxt Development ?

Work with our skilled nuxt developers to accelerate your project and boost its performance.
**Hire now**Hire Now**Hire Now**Hire now**Hire now

Related Q&A

blog-banner-img
calender
March 19, 2026

How do you securely manage private/public config variables in Nuxt 4, and what's the difference between runtimeConfig vs app.config?

Nuxt
All
Ready to Build
Something Amazing?
Got an Idea?
We got you.
Need a Tech Partner
You Can Trust?
Got Challenges?
We’ve Got Solutions.
Your Vision,
Our Mission.
Let’s talk.
Project Inquiry
Email iconhello@zignuts.com
Call icon+49 3056837888
Call icon+1 4088728242
Career Inquiry
Email icontalent@zignuts.com
Call icon+91 9427726620
India
A-409, Siddhraj Zori, Gandhinagar, 382421, Gujarat, India
Germany
Rheinsberger Str. 76,10115 Berlin, Germany
USA
611 Gateway Blvd, South San francisco, CA 94080, USA
Company Deck

Company Deck

PDF, 3MB

© 2026 Zignuts Technolab. All Rights Reserved.

Facebook iconTwitter iconInstagram iconYoutube iconLinkedIn iconSocial icon

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

Nuxt 4 combines Vercel AI SDK's useChat composable with Nitro server routes for real-time streaming responses. Server actions process messages via generateText with streaming enabled. Clients receive tokens instantly with full TypeScript support and conversation history.

Step-by-Step Implementation:-

Step 1: Install Dependencies

Code

npm install ai @ai-sdk/openai

Step 2: Configure Runtime API Key

Code

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

Step 3: Create Server Action

Code

// 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()
})

Step 4: Build Chat Component

Code

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

Step 5: Use in Page

Code

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