Vercel AI SDK Not Working? Fix Streaming, useChat & Edge Runtime Errors

Provider API key not configured

The Vercel AI SDK does not use a single API key — each provider reads its own environment variable. Set all keys you need in .env.local:

# .env.local — one var per provider
OPENAI_API_KEY=sk-...
ANTHROPIC_API_KEY=sk-ant-...
GOOGLE_GENERATIVE_AI_API_KEY=AIza...
MISTRAL_API_KEY=...
GROQ_API_KEY=gsk_...

Streaming broken — wrong response type

The most common mistake is returning a plain Response or calling the wrong method. Your App Router route must call result.toDataStreamResponse():

// ✅ Correct — returns a streaming response
import { streamText } from 'ai';
import { openai } from '@ai-sdk/openai';

export async function POST(req: Request) {
  const { messages } = await req.json();
  const result = await streamText({
    model: openai('gpt-4o'),
    messages,
  });
  return result.toDataStreamResponse(); // ← must use this
}

// ❌ Wrong — breaks streaming
return new Response(JSON.stringify(result)); // sends once, no streaming
return result.toTextStreamResponse();       // wrong format for useChat

Also note: if using generateText (not streamText), you get a complete response — use streamText for streaming.

useChat hook not working

Correct React client component setup with error handling:

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

export default function Chat() {
  const { messages, input, handleInputChange, handleSubmit, isLoading, error } = useChat({
    api: '/api/chat',          // must match your route path
    onError: (e) => console.error('Stream error:', e),
  });

  return (
    <div>
      {messages.map(m => (
        <div key={m.id}>
          <b>{m.role}:</b> {m.content}
        </div>
      ))}
      {error && <p style={{color:'red'}}>Error: {error.message}</p>}
      <form onSubmit={handleSubmit}>
        <input value={input} onChange={handleInputChange} disabled={isLoading} />
        <button type="submit" disabled={isLoading}>Send</button>
      </form>
    </div>
  );
}

• Missing 'use client': useChat is a React hook — the component must be a client component.
• Wrong api path: the default is /api/chat — if your route is elsewhere, pass it explicitly via the api prop.
• Not handling the error state: always add an onError callback and render the error value to surface server errors to users.

Edge Runtime vs Node.js Runtime

Control the runtime with an export at the top of your route file:

// Add to your route file to control runtime
export const runtime = 'edge';    // no timeout for streaming, no fs access
// OR
export const runtime = 'nodejs';  // default, 10s hobby / 60s pro timeout

export const maxDuration = 60;    // Pro/Enterprise only — extend Node timeout

Provider Edge Runtime support:

• ✅ Edge compatible: openai, anthropic, google, mistral, groq
• ⚠️ May need Node.js runtime: AWS Bedrock, Azure OpenAI
• Crypto error: if you see "The Edge Runtime does not support Node.js crypto module", switch to runtime = 'nodejs'.

Tool calls / structured output not working

The most common mistake with tool calls is forgetting maxSteps, which is required for multi-step tool use:

import { streamText, tool } from 'ai';
import { z } from 'zod';

const result = await streamText({
  model: openai('gpt-4o'),
  messages,
  tools: {
    getWeather: tool({
      description: 'Get weather for a location',
      parameters: z.object({
        location: z.string().describe('City name'),
      }),
      execute: async ({ location }) => {
        return { temperature: 22, condition: 'sunny' };
      },
    }),
  },
  maxSteps: 5, // ← required for multi-step tool use (default: 1)
});

Common issue: tool results not appearing — add maxSteps: 5 to allow the model to continue after tool execution.