Jak začít s Claude API v Next.js — streaming a TypeScript

Claude API od Anthropic je jedním z nejpokročilejších AI rozhraní dostupných vývojářům. V tomto průvodci ti ukážu, jak ho integrovat do Next.js aplikace — včetně streamování odpovědí v reálném čase.

Instalace

npm install @anthropic-ai/sdk

Přidej API klíč do .env.local:

ANTHROPIC_API_KEY=sk-ant-...

Základní API route s streamingem

Vytvoř soubor app/api/chat/route.ts:

import Anthropic from '@anthropic-ai/sdk'

const client = new Anthropic({ apiKey: process.env.ANTHROPIC_API_KEY })

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

  const encoder = new TextEncoder()
  const stream = new ReadableStream({
    async start(controller) {
      const messageStream = await client.messages.stream({
        model: 'claude-opus-4-6',
        max_tokens: 1024,
        messages,
      })

      for await (const event of messageStream) {
        if (event.type === 'content_block_delta' && event.delta.type === 'text_delta') {
          controller.enqueue(
            encoder.encode(`data: ${JSON.stringify({ text: event.delta.text })}\n\n`)
          )
        }
      }

      controller.enqueue(encoder.encode('data: [DONE]\n\n'))
      controller.close()
    },
  })

  return new Response(stream, {
    headers: { 'Content-Type': 'text/event-stream' },
  })
}

Klientská komponenta pro čtení streamu

'use client'

async function sendMessage(content: string) {
  const res = await fetch('/api/chat', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      messages: [{ role: 'user', content }]
    }),
  })

  const reader = res.body!.getReader()
  const decoder = new TextDecoder()

  while (true) {
    const { done, value } = await reader.read()
    if (done) break

    const lines = decoder.decode(value).split('\n')
    for (const line of lines) {
      if (line.startsWith('data: ') && line !== 'data: [DONE]') {
        const { text } = JSON.parse(line.replace('data: ', ''))
        // Zobraz text postupně
        console.log(text)
      }
    }
  }
}

Výběr správného modelu

Model	Použití	Cena
claude-opus-4-6	Složité úlohy, analýzy	Nejvyšší
claude-sonnet-4-6	Vyvážený výkon	Střední
claude-haiku-4-5-20251001	Rychlé odpovědi, klasifikace	Nejnižší

Tipy pro produkci

1. Vždy ošetři chyby — API může vrátit rate limit nebo jiné chyby
2. Nastav timeout — dlouhé požadavky mohou blokovat UI
3. Cachuj opakované požadavky — ušetříš náklady
4. Nepřidávej API klíč do klienta — vždy přes server-side route

Kompletní starter projekt najdeš na github.com/aidevelopers-cz/claude-api-starter.