AI-чат на React через AI Gateway: запросы к своему бэкенду

Чат-компонент на React не должен обращаться к API модели напрямую: код фронтенда виден пользователю, и ключ утечёт. Правильная схема — React шлёт сообщение в ваш собственный backend-прокси, а тот уже ходит в AI Gateway с ключом. Ниже — компонент и вариант с потоковым выводом ответа.

Подготовка

На стороне сервера настройте эндпоинт (/api/chat), который принимает текст, обращается к https://ai-gatewey.ru/v1 с ключом из окружения и возвращает ответ. Готовые примеры прокси: Next.js и FastAPI. Компонент ниже работает с любым таким эндпоинтом.

Реализация

1. 1
   Простой чат-компонент

   Отправляем сообщение на свой прокси /api/chat и показываем ответ. Ключа здесь нет — только вызов собственного бэкенда:

   tsx Копировать

   import { useState } from "react";
   
   export function Chat() {
     const [input, setInput] = useState("");
     const [reply, setReply] = useState("");
     const [loading, setLoading] = useState(false);
   
     async function send() {
       setLoading(true);
       const res = await fetch("/api/chat", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({ message: input }),
       });
       const data = await res.json();
       setReply(data.reply);
       setLoading(false);
     }
   
     return (
       <div>
         <textarea value={input} onChange={(e) => setInput(e.target.value)} />
         <button onClick={send} disabled={loading}>
           Отправить
         </button>
         <p>{reply}</p>
       </div>
     );
   }

2. 2
   Потоковый вывод ответа

   Если прокси стримит ответ (text/plain или SSE), читаем тело как поток и дописываем текст по мере поступления — так ответ «печатается»:

   tsx Копировать

   async function sendStream() {
     const res = await fetch("/api/chat", {
       method: "POST",
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify({ message: input }),
     });
   
     const reader = res.body!.getReader();
     const decoder = new TextDecoder();
     setReply("");
     for (;;) {
       const { value, done } = await reader.read();
       if (done) break;
       setReply((prev) => prev + decoder.decode(value));
     }
   }

Какие модели подойдут

Модель выбирается на сервере, а не в компоненте. Для интерактивного чата важна скорость первого токена — обычно берут быструю модель, оставляя флагман для сложных запросов:

Частые вопросы