Інтеграція 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%.

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

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