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

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

Подготовка

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

Реализация

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

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

   tsxtsxКопировать

   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), читаем тело как поток и дописываем текст по мере поступления — так ответ «печатается»:

   tsxtsxКопировать

   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));}}

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

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

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