AI SDK 5 UIMessage Streaming Example

A monorepo demonstrating how to use AI SDK 5's UIMessage for streaming chat responses between frontend and backend applications.

Overview

This example showcases:

• Backend: Express server streaming AI responses using streamText() and pipeUIMessageStreamToResponse()
• Frontend: Next.js app with useChat() hook and DefaultChatTransport consuming the streamed responses
• Proper handling of UIMessage format across the full stack

Project Structure

ai-sdk-streaming-example/
├── apps/
│   ├── backend/     # Express API server with AI streaming
│   └── frontend/    # Next.js chat interface
└── package.json     # Root monorepo config

Prerequisites

• Node.js 22+
• pnpm 10.18.0+
• OpenAI API key

Getting Started

1. Install dependencies

   pnpm install

2. Configure backend environment

   cd apps/backend
   cp .env.example .env
   # Add your OPENAI_API_KEY to .env

3. Start the backend and frontend (using turbo)

   pnpm turbo dev

   The API server will start on http://localhost:3001

   The Next.js app will start on http://localhost:3000

4. Open your browser to http://localhost:3000 and start chatting!

Key Implementation Details

Backend (apps/backend)

• Uses streamText() from AI SDK to generate streaming responses
• Converts UIMessage[] to model messages with convertToModelMessages()
• Streams responses using pipeUIMessageStreamToResponse() for Express

Frontend (apps/frontend)

• Uses useChat() hook from @ai-sdk/react
• Configures DefaultChatTransport to connect to the backend API
• Handles message streaming, loading states, and errors

Tech Stack

• Frameworks: Next.js 16, Express 5
• AI SDK: Vercel AI SDK 5.0
• Language: TypeScript
• Package Manager: pnpm with workspaces

Learn More

• Vercel AI SDK Documentation
• AI SDK UIMessage API