AI SDK + AI Gateway

app/api/chat/route.ts

import {
  convertToModelMessages,
  createUIMessageStreamResponse,
  streamText,
  toUIMessageStream,
  type UIMessage,
} from 'ai';

// Give slow answers room to finish streaming (seconds).
export const maxDuration = 60;

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

  const result = streamText({
    model: 'anthropic/claude-sonnet-5', // "provider/model" string = routed via AI Gateway
    instructions: 'You are a friendly support assistant for Taco Tracker. Keep answers short.',
    messages: await convertToModelMessages(messages),
  });

  return createUIMessageStreamResponse({
    stream: toUIMessageStream({ stream: result.stream }),
  });
}

app/chat/page.tsx

'use client';

import { useChat } from '@ai-sdk/react';
import { DefaultChatTransport } from 'ai';
import { useState } from 'react';

export default function ChatPage() {
  const [input, setInput] = useState('');
  const { messages, sendMessage, status } = useChat({
    transport: new DefaultChatTransport({ api: '/api/chat' }),
  });

  return (
    <main>
      {messages.map((message) => (
        <div key={message.id}>
          <strong>{message.role === 'user' ? 'You' : 'AI'}:</strong>{' '}
          {message.parts.map((part, i) =>
            part.type === 'text' ? <span key={i}>{part.text}</span> : null,
          )}
        </div>
      ))}

      <form
        onSubmit={(e) => {
          e.preventDefault();
          if (!input.trim()) return;
          sendMessage({ text: input });
          setInput('');
        }}
      >
        <input value={input} onChange={(e) => setInput(e.target.value)} />
        <button type="submit" disabled={status !== 'ready'}>
          Send
        </button>
      </form>
    </main>
  );
}

Terminal / .env.local

npm install @ai-sdk/anthropic
# .env.local
ANTHROPIC_API_KEY=sk-ant-...

scripts/haiku.ts

import { anthropic } from '@ai-sdk/anthropic';
import { generateText } from 'ai';

// Reads ANTHROPIC_API_KEY from the environment. No gateway involved.
const { text } = await generateText({
  model: anthropic('claude-sonnet-5'), // Anthropic API ID (dashes, not dots)
  prompt: 'Write a haiku about deploy previews.',
});
console.log(text);