Technology

Streaming AI Responses with Next.js and the Vercel AI SDK

How to stream AI responses in Next.js using Server-Sent Events (SSE), the Vercel AI SDK, and OpenAI's GPT-4o — from raw HTTP streaming fundamentals to real-time structured JSON objects validated with Zod schemas.

Wayne Cheng

8 min read

Published

Get the Full Source Code on GitHub

This article is a summary. The full, runnable tutorial — complete with all four streaming demos, API routes, and step-by-step setup instructions — lives in the audoir/streaming-ai-tutorial repository.

View the Repository on GitHub

Introduction

Streaming AI responses has become a cornerstone of modern AI-powered applications. Rather than waiting for a complete response before displaying anything to the user, streaming delivers content incrementally — token by token — creating a responsive, engaging experience that feels alive and immediate.

The streaming-ai-tutorial repository walks through four progressive streaming techniques, starting from the fundamentals of HTTP streaming with Server-Sent Events (SSE) and building up to streaming structured JSON objects validated by Zod schemas using OpenAI's GPT-4o and the Vercel AI SDK. This post summarizes what each tutorial covers — head to the repo for the full, runnable code.

Tech Stack

Next.js 16 — App Router and API Routes for server-side streaming endpoints

Vercel AI SDK (ai, @ai-sdk/openai, @ai-sdk/react) — streamlined streaming primitives and React hooks

OpenAI GPT-4o — the AI model powering the text and object streaming tutorials

Zod — schema validation for streamed JSON objects

partial-json — incremental JSON parsing for real-time structured data rendering

Tailwind CSS v4 and TypeScript — styling and type safety throughout

Four Progressive Streaming Tutorials

Each tutorial in the repository builds on the last, taking you from raw HTTP streaming all the way to schema-validated structured output from GPT-4o.

Tutorial 1

HTTP Streaming with SSE

Learn the fundamentals of streaming data from server to client — no AI involved — using Server-Sent Events and the Web Streams API. See exactly how a ReadableStream is built on the server and consumed word-by-word in the browser.

Tutorial 2

Structured JSON with partial-json

Parse incomplete JSON in real-time as it streams token by token using the partial-json library, rendering a live UI as each field of a character profile arrives.

Tutorial 3

Stream Text from GPT-4o

Connect to OpenAI with the Vercel AI SDK's streamText function on the server and the useCompletion hook on the client to stream GPT-4o responses token-by-token with minimal boilerplate.

Tutorial 4

Stream Objects with a Zod Schema

Combine streamText with Output.object and the experimental_useObject hook to stream a nested RPG hero character profile, validated field-by-field by a Zod schema as it arrives.

Every tutorial has its own route and API endpoint in the project — see the repository README for the exact routes, full source code, and setup instructions (clone, add your OpenAI API key, npm install, npm run dev).

Key Benefits of Streaming AI

Instant Perceived Performance

Users see content immediately rather than staring at a loading spinner, dramatically improving perceived responsiveness.

Progressive Rendering

Structured data can be rendered field-by-field as it arrives, enabling rich, dynamic UIs that update in real-time.

Type-Safe Streaming

Zod schema validation ensures streamed objects conform to your expected shape, catching errors at the boundary.

Minimal Boilerplate

The Vercel AI SDK abstracts the complexity of streaming protocols, letting you focus on building features.

Learning Outcomes

By working through the tutorials in the repository, you will gain hands-on experience with:

• Building SSE streaming endpoints with the Web Streams API
• Consuming event streams on the client with the Fetch API
• Parsing incomplete JSON in real-time using the partial-json library
• Streaming GPT-4o text responses with the Vercel AI SDK's streamText
• Using the useCompletion React hook for minimal boilerplate streaming
• Streaming structured JSON objects validated by Zod schemas
• Progressive UI rendering as structured data arrives token by token
• TypeScript and type safety throughout the streaming stack

Conclusion

Streaming is no longer a nice-to-have — it is the expected behavior for AI-powered applications. Users have come to expect immediate feedback, and streaming delivers exactly that by showing content as it is generated rather than after a long wait.

This tutorial collection provides a progressive path from the raw fundamentals of SSE to production-ready AI streaming with schema validation. Each technique builds on the last, giving you a deep understanding of how streaming works at every layer of the stack.

Ready to Build It Yourself?

Clone the repository, add your OpenAI API key, and run all four streaming demos locally in minutes.

Clone streaming-ai-tutorial on GitHub

About the Author

Wayne Cheng is the founder and AI app developer at Audoir, LLC. Prior to founding Audoir, he worked as a hardware design engineer for Silicon Valley startups and an audio engineer for creative organizations. He holds an MSEE from UC Davis and a Music Technology degree from Foothill College.

Further Exploration

Experiment with extending the streaming patterns in the streaming-ai-tutorial repository . Consider adding chat history, tool calls, or multi-modal inputs to deepen your understanding of the Vercel AI SDK's capabilities.

For more AI-powered development tools and tutorials, visit Audoir .