Building a Next.js 15 Streaming Chatbot with Vercel AI SDK

Introduction

When building AI applications, user experience is everything. If your users have to wait 10 seconds staring at a loading spinner while your LLM generates a response, they will abandon your app. The solution is Streaming. By streaming the response chunk-by-chunk using Server-Sent Events (SSE), you create that instant, ChatGPT-style typing effect, reducing the perceived latency to milliseconds.

In this tutorial, we will build a full-stack streaming chatbot using Next.js 15 and the Vercel AI SDK.

The Architecture

The Vercel AI SDK simplifies streaming by handling the complex boundary between the server and the client.

1. Client: A React component calls the useChat hook, which automatically manages state (input, messages, loading).
2. Server: A Next.js API route receives the history, queries the Gemini API, and returns a DataStreamResponse.

Step 1: Setting up the Project

Initialize your Next.js project and install the required AI packages.

npm install ai @ai-sdk/google

Add your GOOGLE_GENERATIVE_AI_API_KEY to your .env.local file.

Step 2: Implementation (The Server API)

Create a new route in app/api/chat/route.ts. The Vercel AI SDK's streamText function handles the heavy lifting.

import { google } from '@ai-sdk/google';
import { streamText } from 'ai';

export const maxDuration = 30;

export async function POST(req: Request) {
  const { messages } = await req.json();

  const result = await streamText({
    model: google('models/gemini-1.5-flash-latest'),
    messages,
    system: "You are a helpful coding assistant."
  });

  return result.toDataStreamResponse();
}

Step 3: Connecting to the Frontend

On the client side (app/page.tsx), the useChat hook maps directly to the /api/chat route we just built.

'use client';
import { useChat } from 'ai/react';

export default function Chat() {
  const { messages, input, handleInputChange, handleSubmit } = useChat();

  return (
    <div>
      {messages.map(m => (
        <div key={m.id}>{m.role}: {m.content}</div>
      ))}
      <form onSubmit={handleSubmit}>
        <input value={input} onChange={handleInputChange} />
      </form>
    </div>
  );
}

Conclusion & Deployment

With just two files and the Vercel AI SDK, you've built a production-ready streaming chatbot. The ai/react library handles all the complex stream parsing on the frontend, allowing you to focus on the UI and prompts.

Check out the full code example in our Github repo.