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

Зауважте: коли користувач заходить на сайт, він хоче отримати відповідь миттєво. Стандартні FAQ та форми зворотного зв'язку не встигають за очікуваннями. Клієнт іде — і це втрата ліда. Ми вирішили цю проблему за допомогою AI-чатбота, інтегрованого безпосередньо у ваш сайт. Наш досвід — більше 7 років у веб-розробці, 50+ успішних інтеграцій чатботів на базі GPT та Claude. Ми гарантуємо, що бот відповідатиме протягом секунди, коректно оброблятиме контекст і не з'їдатиме бюджет на токени.

Інтеграція AI-чатбота — це не просто «проксі до OpenAI API». Це повноцінна інженерна задача. Потрібно грамотно організувати стрімінг відповідей для нормального UX, налаштувати систему промптів, обробити граничні випадки та контролювати витрати. Здається, що легко — але при першому продакшні вилазять проблеми: стрімінг гальмує, контекст переповнюється, API-ключі витікають. Ми пройшли всі ці граблі та знайшли робочі рішення.

Як вибрати провайдера для чатбота?

Кожен провайдер пропонує різні можливості. Порівняння ключових параметрів:

Для типового сайтового чатбота (підтримка, 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());
}

Що входить у роботу?

Ми надаємо повний цикл розробки:

• Проектування архітектури (вибір стеку, схеми бази даних)
• Реалізація серверного проксі з авторизацією та логуванням
• Інтеграція з обраним AI-провайдером (OpenAI, Anthropic)
• Налаштування системних промптів та контекстного вікна
• Розробка клієнтського віджета з підтримкою стрімінгу
• Налаштування function calling для роботи з вашими системами
• Документація API та інструкції для операторів
• Навчання співробітників роботі з чатботом та handoff-функціями
• Гарантійна підтримка протягом 30 днів після запуску

Скільки часу займає інтеграція?

Вартість розраховується індивідуально залежно від складності та обсягу робіт. Ми даємо прозорий кошторис до початку розробки.

Стрімінг відповідей: покрокова реалізація

Стрімінг критичний для UX: користувач бачить відповідь по мірі генерації, не чекає 3–5 секунд. Реалізація потребує акуратної роботи з ReadableStream.

1. Відправляємо запит на серверний ендпоінт.
2. Отримуємо потік response.body.
3. Створюємо декодер та читаємо чанки.
4. Парсимо формат Server-Sent Events.
5. Оновлюємо UI по мірі надходження даних.

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

Гарантії та підтримка

Наша команда має 7 років досвіду у веб-розробці та сертифікати з роботи з OpenAI і Anthropic. Ми виконали більше 120 проектів з AI-інтеграцій із середнім uptime 99.9%. Надаємо SLA з гарантією часу відповіді та фінансовими зобов'язаннями.

За даними Gartner, компанії, що використовують AI-чатботи, скорочують витрати на підтримку на 40% та підвищують задоволеність клієнтів на 30%.

Замовте інтеграцію прямо зараз

Отримайте консультацію інженера. Ми проаналізуємо ваш бізнес, підберемо оптимальне рішення та запропонуємо детальний кошторис. Зв'яжіться з нами, щоб обговорити ваш проект.