Минимальный AI-чат на Claude API

1// app/api/chat/route.ts2import Anthropic from "@anthropic-ai/sdk";3 4const claude = new Anthropic({ apiKey: process.env.ANTHROPIC_API_KEY });5 6export async function POST(req: Request) {7  const { messages, systemPrompt } = await req.json();8 9  const stream = claude.messages.stream({10    model: "claude-sonnet-4-6",11    max_tokens: 2048,12    system: systemPrompt ?? "Ты helpful AI-ассистент.",13    messages,14  });15 16  const encoder = new TextEncoder();17  const readable = new ReadableStream({18    async start(controller) {19      for await (const event of stream) {20        if (event.type === "content_block_delta" && event.delta.type === "text_delta") {21          controller.enqueue(encoder.encode(event.delta.text));22        }23      }24      controller.close();25    },26  });27 28  return new Response(readable, {29    headers: { "content-type": "text/plain; charset=utf-8" },30  });31}32 33// components/Chat.tsx34"use client";35import { useState } from "react";36 37export function Chat() {38  const [messages, setMessages] = useState<{ role: string; content: string }[]>([]);39  const [input, setInput] = useState("");40  const [streaming, setStreaming] = useState(false);41 42  async function send() {43    if (!input.trim()) return;44    const newMessages = [...messages, { role: "user", content: input }];45    setMessages(newMessages);46    setInput("");47    setStreaming(true);48 49    const res = await fetch("/api/chat", {50      method: "POST",51      headers: { "content-type": "application/json" },52      body: JSON.stringify({ messages: newMessages }),53    });54 55    const reader = res.body!.getReader();56    const decoder = new TextDecoder();57    let acc = "";58    setMessages(m => [...m, { role: "assistant", content: "" }]);59 60    while (true) {61      const { done, value } = await reader.read();62      if (done) break;63      acc += decoder.decode(value, { stream: true });64      setMessages(m => {65        const next = [...m];66        next[next.length - 1] = { role: "assistant", content: acc };67        return next;68      });69    }70    setStreaming(false);71  }72 73  return (74    <div>75      {messages.map((m, i) => (76        <div key={i}><b>{m.role}:</b> {m.content}</div>77      ))}78      <input value={input} onChange={e => setInput(e.target.value)} disabled={streaming} />79      <button onClick={send} disabled={streaming}>Send</button>80    </div>81  );82}