Wiring the Edge Stream with Vercel AI SDK & Claude

Overview
We move away from traditional, sluggish API wrappers and dive into edge-native architecture. You will learn how to create a Next.js route handler utilizing the Vercel AI SDK and Anthropic's Claude Haiku model, optimized to run securely on global edge infrastructure.

Key Takeaways

• runtime = 'edge' Demystified: Why running code on lightweight V8 isolates cuts out network trips across the ocean and completely eliminates serverless cold starts.

• Server-Sent Events (SSE): Transitioning from standard API responses to real-time streaming, pushing text chunks to the front end pixel-by-pixel.

• Secure Environment Variables: Safely mapping ANTHROPIC_API_KEY or OPENAI_API_KEY within the backend layer without exposing keys to the client side.

💻 Core Edge API Code (app/api/completion/route.ts)

import { streamText } from "ai";
import { anthropic } from "@ai-sdk/anthropic";

export const runtime = "edge";

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

  const result = streamText({
    model: anthropic("claude-haiku-4-5-20251001"),
    system: "You are a helpful AI writing assistant. Generate well-structured markdown content based on the user's prompt. Use headings, lists, code blocks, and other markdown formatting where appropriate.",
    prompt,
  });

  return result.toTextStreamResponse();
}

🔗 Lesson Resources

• Module 2 Code Branch: Repo