Настройка TanStack AI

npm install @tanstack/ai @tanstack/ai-react @tanstack/ai-openai

GONKAGATE_API_KEY=your_api_key_here

import { chat, toServerSentEventsResponse } from "@tanstack/ai";
import { createOpenaiChat } from "@tanstack/ai-openai";

const apiKey = process.env.GONKAGATE_API_KEY;

if (!apiKey) {
  throw new Error("Set GONKAGATE_API_KEY");
}

const gonkagate = createOpenaiChat(apiKey, {
  baseURL: "https://api.gonkagate.com/v1",
});

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

  const stream = chat({
    adapter: gonkagate("qwen/qwen3-235b-a22b-instruct-2507-fp8"),
    messages,
  });

  return toServerSentEventsResponse(stream);
}

"use client";

import { useState } from "react";
import { fetchServerSentEvents, useChat } from "@tanstack/ai-react";

export function Chat() {
  const [input, setInput] = useState("");
  const { messages, sendMessage, isLoading, error } = useChat({
    connection: fetchServerSentEvents("/api/chat"),
  });

  return (
    <div>
      {messages.map((message) => (
        <div key={message.id}>
          {message.parts.map((part, index) =>
            part.type === "text" ? <p key={index}>{part.content}</p> : null
          )}
        </div>
      ))}

      {error ? <p>{error.message}</p> : null}

      <form
        onSubmit={(event) => {
          event.preventDefault();
          if (!input.trim() || isLoading) return;
          void sendMessage(input);
          setInput("");
        }}
      >
        <input value={input} onChange={(event) => setInput(event.target.value)} />
        <button type="submit" disabled={isLoading}>
          Send
        </button>
      </form>
    </div>
  );
}