Интеграция AI-чат-бота на сайт (ChatGPT/Claude)

Интеграция AI-чат-бота на сайт (ChatGPT/Claude)

Интеграция AI-чатбота — это не просто «прокси к OpenAI API». Задача включает управление контекстом разговора, стриминг ответов для нормального UX, систему промптов, обработку граничных случаев и контроль расходов на токены.

Выбор провайдера

Для типового сайтового чатбота (поддержка, FAQ, консультант) — GPT-4o-mini или Claude 3.5 Haiku достаточны по качеству и значительно дешевле флагманов.

Серверный прокси: зачем нужен

API-ключи никогда не идут в браузер. Серверный эндпоинт необходим для:

• Авторизации (только залогиненные пользователи)
• Rate limiting (не более X сообщений в сутки)
• Логирования диалогов
• Добавления системного промпта (пользователь не видит)
• Контроля расходов

// api/chat.js (Next.js Route Handler)
import OpenAI from 'openai';

const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });

const SYSTEM_PROMPT = `Ты ассистент интернет-магазина "Техника Pro".
Отвечай только на вопросы о продуктах, доставке и возвратах.
Если вопрос не по теме — вежливо перенаправь к оператору.
Отвечай на том же языке, что и пользователь.`;

export async function POST(request) {
  const session = await getSession(request);
  if (!session) return Response.json({ error: 'Unauthorized' }, { status: 401 });

  const { messages } = await request.json();

  // Rate limiting
  const count = await redis.incr(`chat:${session.userId}:${today()}`);
  if (count > 50) return Response.json({ error: 'Limit reached' }, { status: 429 });

  // Ограничиваем историю последними 10 сообщениями
  const recentMessages = messages.slice(-10);

  const stream = await openai.chat.completions.create({
    model: 'gpt-4o-mini',
    stream: true,
    messages: [
      { role: 'system', content: SYSTEM_PROMPT },
      ...recentMessages,
    ],
    max_tokens: 500,
    temperature: 0.3, // Ниже = более предсказуемый ответ
  });

  return new Response(stream.toReadableStream());
}

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

Стриминг критичен для UX: пользователь видит ответ по мере генерации, не ждёт 3–5 секунд:

async function sendMessage(userMessage) {
  setMessages(prev => [...prev, { role: 'user', content: userMessage }]);
  setIsStreaming(true);

  const response = await fetch('/api/chat', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ messages: [...messages, { role: 'user', content: userMessage }] }),
  });

  const reader = response.body.getReader();
  const decoder = new TextDecoder();
  let assistantMessage = '';

  // Добавляем пустое сообщение ассистента
  setMessages(prev => [...prev, { role: 'assistant', content: '' }]);

  while (true) {
    const { value, done } = await reader.read();
    if (done) break;

    const chunk = decoder.decode(value);
    // OpenAI streaming format: data: {"choices":[{"delta":{"content":"..."}}]}
    const lines = chunk.split('\n').filter(l => l.startsWith('data: '));

    for (const line of lines) {
      if (line === 'data: [DONE]') break;
      const json = JSON.parse(line.slice(6));
      const delta = json.choices[0]?.delta?.content || '';
      assistantMessage += delta;

      // Обновляем последнее сообщение
      setMessages(prev => [
        ...prev.slice(0, -1),
        { role: 'assistant', content: assistantMessage },
      ]);
    }
  }

  setIsStreaming(false);
}

Управление контекстом разговора

Модели имеют контекстное окно. При длинных диалогах нужна стратегия:

Скользящее окно — просто последние N сообщений:

const contextMessages = messages.slice(-10);

Summarization — сжатие старой части диалога:

async function compressHistory(messages) {
  if (messages.length <= 10) return messages;

  const toCompress = messages.slice(0, -6);
  const recent = messages.slice(-6);

  const summary = await openai.chat.completions.create({
    model: 'gpt-4o-mini',
    messages: [
      {
        role: 'user',
        content: `Summarize this conversation briefly:\n${toCompress.map(m => `${m.role}: ${m.content}`).join('\n')}`,
      },
    ],
    max_tokens: 200,
  });

  return [
    { role: 'system', content: `Previous conversation summary: ${summary.choices[0].message.content}` },
    ...recent,
  ];
}

Функции и инструменты (Function Calling)

Чатбот может вызывать функции — проверять статус заказа, искать товары, записывать на консультацию:

const tools = [
  {
    type: 'function',
    function: {
      name: 'get_order_status',
      description: 'Получить статус заказа по номеру',
      parameters: {
        type: 'object',
        properties: {
          order_number: { type: 'string', description: 'Номер заказа' },
        },
        required: ['order_number'],
      },
    },
  },
  {
    type: 'function',
    function: {
      name: 'search_products',
      description: 'Поиск товаров по запросу',
      parameters: {
        type: 'object',
        properties: {
          query: { type: 'string' },
          max_price: { type: 'number' },
        },
        required: ['query'],
      },
    },
  },
];

// Обработка вызова функции
const response = await openai.chat.completions.create({
  model: 'gpt-4o',
  messages,
  tools,
  tool_choice: 'auto',
});

const message = response.choices[0].message;
if (message.tool_calls) {
  const toolResults = await Promise.all(
    message.tool_calls.map(async (call) => {
      const result = await executeFunction(call.function.name, JSON.parse(call.function.arguments));
      return {
        role: 'tool',
        tool_call_id: call.id,
        content: JSON.stringify(result),
      };
    })
  );

  // Отправляем результаты обратно для финального ответа
  const finalResponse = await openai.chat.completions.create({
    model: 'gpt-4o',
    messages: [...messages, message, ...toolResults],
  });
}

Сроки

• Базовый чатбот с системным промптом и стримингом — 2–3 дня
• С function calling (заказы, поиск, запись) — плюс 2–3 дня
• Виджет с историей диалогов, лид-захватом, handoff к оператору — 5–7 дней
• Мультиязычный бот с routing по намерению — плюс 2–3 дня