Legan Studio
Все статьи
~ 6 мин чтения

AI-чат на сайте: подключаем GPT/Claude

Как интегрировать AI-чат на сайт с использованием OpenAI или Claude — архитектура, стриминг, ограничения, стоимость и приватность данных.

  • сайт
  • AI
  • интеграции

AI-чат на сайте — уже не «вау», а ожидаемая функция в B2B и продуктовых сайтах. Расскажу, как это собирается на стеке Next.js плюс OpenAI или Claude, и какие моменты на старте часто упускают.

Архитектура: фронт, бэк, провайдер

Базовая схема: пользователь пишет в виджет на сайте, фронт шлёт запрос на ваш API-роут, ваш сервер обращается к OpenAI/Anthropic API, ответ стримом возвращается на фронт.

Прямой запрос с фронта в OpenAI — большая ошибка. Это утечка API-ключа и неконтролируемые расходы. Всегда промежуточный слой на вашем сервере.

В Next.js это API-роут или Server Action, который проксирует запросы. Стриминг — через Web Streams API или Server-Sent Events. Vercel AI SDK даёт удобные обёртки и для бэка, и для UI.

Стриминг ответа

LLM-ответы могут идти 5-30 секунд. Без стриминга пользователь видит спиннер всё это время и часто закрывает чат.

const stream = await openai.chat.completions.create({
  model: "gpt-4o-mini",
  messages,
  stream: true,
});

for await (const chunk of stream) {
  const content = chunk.choices[0]?.delta?.content || "";
  // отправляем чанк на фронт
}

На фронте — useChat из ai/react или собственная реализация с EventSource. UX становится мгновенным: первые слова приходят за 0.5-1 секунду.

Контекст и память

Чат без памяти — раздражает. Минимально: храните последние 10-20 сообщений диалога. Передавайте их в каждом запросе как часть messages.

Долговременная память — отдельная тема. Можно делать через summarization (после N сообщений сжимаем диалог в краткое резюме) или через RAG (индексируем предыдущие диалоги в pgvector, при новом сообщении ищем релевантное).

Для сайта обычно хватает короткой памяти и хорошего системного промпта.

Системный промпт и ограничения

Системный промпт — главное место настройки. В нём вы:

  1. Задаёте роль (например, «Ты — помощник по нашему продукту»).
  2. Описываете границы (что отвечать, что не отвечать).
  3. Прикладываете контекст о компании (FAQ, описание услуг).

Для длинного контекста (FAQ, документация) — RAG. Не пихайте всё в системный промпт: это дорого, и качество падает.

Безопасность и злоупотребления

AI-чат на публичном сайте — мишень для злоупотреблений. Что делаем:

  • Rate limit по IP: 10-20 сообщений в минуту, 100-200 в час.
  • Лимит длины сообщения: 2000-4000 символов.
  • Лимит токенов в ответе: 500-1000.
  • Фильтрация по словарю (запрос про цены конкурента → стандартный ответ).
  • Капча после 5 сообщений от анонима.

Без этого один скрипт за ночь спалит вам 50 000 рублей на API.

RAG для базы знаний

Если у вас 50-500 страниц документации/FAQ — RAG почти обязателен. Архитектура:

  1. Разбиваете контент на чанки (500-1000 токенов с overlap 100).
  2. Получаете эмбеддинги через OpenAI text-embedding-3-small.
  3. Кладёте в pgvector или Qdrant с метаданными.
  4. На запрос пользователя — генерируете эмбеддинг, ищете top-5 чанков, вставляете их в промпт.

Это даёт ответы, основанные на ваших данных, без галлюцинаций.

Стоимость

Прикидки на gpt-4o-mini (актуальные цены меняются — сверяйтесь с OpenAI):

  • Сообщение пользователя 100 токенов плюс контекст 2000 токенов плюс ответ 300 токенов = 2400 токенов на запрос.
  • 1000 диалогов в месяц по 5 сообщений = 12 миллионов токенов.

Дёшево, пока не подключили GPT-4 или большие контексты. С Claude Sonnet или GPT-4o цена выше в 5-10 раз.

Приватность и 152-ФЗ

Если в чате собираются персональные данные — это нужно обрабатывать по 152-ФЗ. OpenAI и Anthropic — иностранные сервисы, передача требует уведомления о трансграничном переводе.

Если приватность критична — рассмотрите локальные модели (Llama 3, Mistral, GigaChat, YandexGPT). Качество ниже флагманов OpenAI/Claude, но данные не уходят за границу.

Итого

AI-чат на сайте — это API-прокси с rate limit, стриминг, короткая память и RAG для контекста. На стандартном стеке Next.js плюс OpenAI это собирается за 1-2 недели для MVP. Главные засады: безопасность, контроль расходов и юридические нюансы при персональных данных.

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

Какая базовая архитектура AI-чата на сайте?

Базовая схема: пользователь пишет в виджет на сайте, фронт шлёт запрос на ваш API-роут, ваш сервер обращается к OpenAI/Anthropic API, ответ стримом возвращается на фронт. Прямой запрос с фронта в OpenAI — большая ошибка. Это утечка API-ключа и неконтролируемые расходы. Всегда промежуточный слой на вашем сервере. В Next.js это API-роут или Server Action, который проксирует запросы. Стриминг через Web Streams API или Server-Sent Events. Vercel AI SDK даёт удобные обёртки.

Зачем нужен стриминг в AI-чате?

LLM-ответы могут идти 5-30 секунд. Без стриминга пользователь видит спиннер всё это время и часто закрывает чат. С stream: true в OpenAI или Anthropic API ответ приходит чанками, и каждый чанк отправляется на фронт. На фронте — useChat из ai/react или собственная реализация с EventSource. UX становится мгновенным: первые слова приходят за 0.5-1 секунду. Это критично для удержания пользователя в диалоге — длительный спиннер убивает конверсию.

Как организовать память диалога в AI-чате?

Чат без памяти — раздражает. Минимально: храните последние 10-20 сообщений диалога. Передавайте их в каждом запросе как часть messages. Долговременная память — отдельная тема. Можно делать через summarization (после N сообщений сжимаем диалог в краткое резюме) или через RAG (индексируем предыдущие диалоги в pgvector, при новом сообщении ищем релевантное). Для сайта обычно хватает короткой памяти и хорошего системного промпта. Длинная память увеличивает стоимость токенов в каждом запросе.

Как защитить AI-чат от злоупотреблений?

AI-чат на публичном сайте — мишень для злоупотреблений. Что делаем. Rate limit по IP: 10-20 сообщений в минуту, 100-200 в час. Лимит длины сообщения: 2000-4000 символов. Лимит токенов в ответе: 500-1000. Фильтрация по словарю (запрос про цены конкурента → стандартный ответ). Капча после 5 сообщений от анонима. Без этого один скрипт за ночь спалит вам 50 000 рублей на API. Это типичный сценарий, который стоит закрыть до публичного запуска чата.

Сколько стоит AI-чат на сайте в месяц?

Прикидки на gpt-4o-mini: сообщение пользователя 100 токенов плюс контекст 2000 токенов плюс ответ 300 токенов = 2400 токенов на запрос. 1000 диалогов в месяц по 5 сообщений = 12 миллионов токенов — обычно укладывается в несколько тысяч рублей. Дёшево, пока не подключили GPT-4 или большие контексты. С Claude Sonnet или GPT-4o цена выше в 5-10 раз. Без RAG системный промпт раздувается до десятков тысяч токенов, и стоимость кратно растёт. Кешируйте системный промпт через provider-side caching.

Как соблюсти 152-ФЗ с AI-чатом на сайте?

Если в чате собираются персональные данные — это нужно обрабатывать по 152-ФЗ. OpenAI и Anthropic — иностранные сервисы, передача требует уведомления о трансграничном переводе. Если приватность критична — рассмотрите локальные модели (Llama 3, Mistral, GigaChat, YandexGPT). Качество ниже флагманов OpenAI/Claude, но данные не уходят за границу. Для коммерческой эксплуатации в РФ часто оптимален гибрид: GigaChat или YandexGPT для основной логики, плюс открытая модель для специфических задач.

Похожие статьи