Інтеграція OpenAI API: AI-чат, семантичний пошук, контент

Вступ

Уявіть: інтернет-магазин з тисячами товарів, менеджери витрачають 80% часу на питання «де замовлення?», «як повернути?», а клієнти йдуть через повільні відповіді. Ми зіткнулися з цим на проєкті, де впровадили AI-чат на GPT-4o mini — час відповіді впав з 5 хвилин до 5 секунд, а навантаження на підтримку скоротилося на 70%. Інтеграція OpenAI API вирішує такі задачі: від чат-бота до семантичного пошуку по каталогу. Наш досвід — 5+ років у розробці та 30+ проєктів з AI на сайтах різного масштабу. Ми маємо понад 5 років на ринку, а наші сертифіковані інженери гарантують якість інтеграції. Замовте консультацію — розберемо ваш кейс.

Проблеми, які вирішуємо

Перевантаження підтримки

Кожен день — сотні однотипних питань. Ми налаштовуємо GPT-4o mini з системним промптом за вашою базою знань. Результат: клієнт отримує відповідь за секунди, людина підключається лише до складних кейсів. Вартість одного запиту до GPT-4o mini становить приблизно $0.00015 (за 1000 токенів), що дозволяє обробляти тисячі запитів за копійки. Наприклад, для магазину з 10 000 запитів на місяць витрати на GPT-4o mini складуть лише $1.5, а економія на заробітній платі операторів підтримки — до $5 000.

Складний пошук по контенту

Звичайний повнотекстовий пошук не розуміє синоніми та контекст. Впроваджуємо семантичний пошук через text-embedding-3-small і PostgreSQL з pgvector: пошук за змістом, а не за точним збігом. Наприклад, на запит «як підключити WiFi» знаходяться статті про налаштування роутера. Семантичний пошук базується на косинусній подібності векторів ембеддінгів, що забезпечує врахування семантичного контексту.

Ручна генерація контенту

Описи товарів, мета-теги, новини — написання вручну забирає години. DALL-E 3 створює зображення за текстом за секунди. Ми інтегруємо генерацію прямо в адмінку CMS.

Як ми це робимо

Використовуємо Laravel 11 на backend і React 18 на frontend. OpenAI SDK для PHP обробляє запити до моделей. Для стрімінгу — Server-Sent Events. У цьому розділі ми детально розглянемо процес інтеграції OpenAI API.

Базова інтеграція чату

use OpenAI\Client;

$openai = OpenAI::client(config('services.openai.api_key'));

$response = $openai->chat()->create([
    'model'    => 'gpt-4o-mini',
    'messages' => [
        ['role' => 'system', 'content' => 'Ви помічник служби підтримки компанії X. Відповідайте коротко і по суті.'],
        ['role' => 'user',   'content' => $userMessage],
    ],
    'temperature' => 0.3,
    'max_tokens'  => 500,
]);

$answer = $response->choices[0]->message->content;

Стрімінг відповідей (Server-Sent Events)

// PHP: сервер надсилає токени по мірі генерації
Route::get('/api/chat/stream', function (Request $request) {
    $message = $request->query('message');
    return response()->stream(function () use ($message) {
        $openai = OpenAI::client(config('services.openai.api_key'));
        $stream = $openai->chat()->createStreamed([
            'model'    => 'gpt-4o-mini',
            'messages' => [['role' => 'user', 'content' => $message]],
        ]);
        foreach ($stream as $response) {
            $chunk = $response->choices[0]->delta->content ?? '';
            if ($chunk) {
                echo "data: " . json_encode(['content' => $chunk]) . "\n\n";
                ob_flush(); flush();
            }
        }
        echo "data: [DONE]\n\n";
    }, 200, [
        'Content-Type'  => 'text/event-stream',
        'Cache-Control' => 'no-cache',
    ]);
});

// TypeScript: клієнт читає SSE-потік і відображає текст поступово
async function streamChat(message: string, onChunk: (text: string) => void) {
  const resp = await fetch(`/api/chat/stream?message=${encodeURIComponent(message)}`);
  const reader = resp.body!.getReader();
  const decoder = new TextDecoder();
  while (true) {
    const { done, value } = await reader.read();
    if (done) break;
    const lines = decoder.decode(value).split('\n');
    for (const line of lines) {
      if (line.startsWith('data: ') && line !== 'data: [DONE]') {
        const data = JSON.parse(line.slice(6));
        onChunk(data.content);
      }
    }
  }
}

Embeddings для семантичного пошуку

// Індексація контенту
$response = $openai->embeddings()->create([
    'model' => 'text-embedding-3-small',
    'input' => $article->title . "\n" . $article->content,
]);
$embedding = $response->embeddings[0]->embedding; // вектор 1536 вимірів

// Зберігаємо в PostgreSQL з pgvector
DB::statement('UPDATE articles SET embedding = ? WHERE id = ?', [json_encode($embedding), $article->id]);

// Пошук за векторною подібністю
$queryEmbedding = getEmbedding($searchQuery); // ваш метод отримання ембеддінгу
$results = DB::select(
    'SELECT *, (embedding <=> ?) AS distance FROM articles ORDER BY distance LIMIT 5',
    [json_encode($queryEmbedding)]
);

Модерація контенту

$moderation = $openai->moderations()->create([
    'input' => $userComment,
]);
if ($moderation->results[0]->flagged) {
    throw new ContentModerationException('Коментар порушує правила сайту');
}

Порівняння моделей: GPT-4o mini vs GPT-4o

GPT-4o mini у 20 разів дешевше при майже тій самій якості. Для 90% задач його достатньо.

Рекомендації щодо вибору моделі та стрімінгу

Чому стрімінг покращує користувацький досвід?

Користувач чекає відповідь не більше 2 секунд. Повна генерація тексту займає 5-15 секунд. Стрімінг надсилає токени по мірі їх появи — ефект живого друку знижує сприйняту затримку. Стрімінг знижує сприйнятий час очікування у 3–5 разів порівняно з повним завантаженням відповіді. Ми реалізуємо SSE, як у прикладі вище, і UI показує текст поступово.

Як вибрати модель для чат-бота?

Якщо потрібен швидкий і дешевий чат — беріть GPT-4o mini (temperature 0.3-0.5, до 500 токенів). Якщо діалог вимагає аналізу контексту або перекладу — GPT-4o. Для семантичного пошуку використовуйте text-embedding-3-small — він створює вектор за 200 мс.

Обсяг робіт та етапи

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

• Документація щодо інтеграції та структури промптів
• Доступ до репозиторію з кодом (GitLab/GitHub)
• Навчання команди роботі з AI-функціями
• Технічна підтримка протягом 30 днів після запуску
• Моніторинг і дашборди ключових метрик

Етапи інтеграції

1. Аудит поточної архітектури сайту, аналіз бази знань.
2. Проєктування BFF (Backend For Frontend) для безпечного виклику API.
3. Реалізація middleware-прошарку з кешуванням і рейт-лімітами.
4. Написання та тестування промптів під ваші сценарії.
5. Інтеграція з обраною CMS (Laravel, WordPress, Drupal та ін.).
6. Моніторинг та ітеративне покращення якості відповідей.

Моніторинг та усунення помилок

Ключові метрики моніторингу

Типові помилки та як їх уникнути

• OpenAI рекомендує обрізати історію діалогу до 10-20 повідомлень, щоб уникнути перевищення лімітів токенів.
• N+1 запити: кожен виклик API — витрати. Кешуйте часті відповіді (Redis, Cache).
• Витік контексту: system promt втрачається при перезапуску. Додайте його в кожен запит.
• Ігнорування модерації: без неї сайт ризикує отримати токсичний контент. Включайте moderation endpoint.

Терміни та вартість

Орієнтовні терміни:

• AI-чат зі стрімінгом: 3–4 дні
• Семантичний пошук з pgvector: +2 дні
• Генерація зображень DALL-E 3: 1–2 дні

Вартість розраховується індивідуально під ваш проєкт. Економія на підтримці після впровадження може досягати 70% щомісячних витрат. Зв'яжіться з нами, щоб отримати попередню оцінку та демонстрацію на ваших даних. Ми проаналізуємо задачу і запропонуємо оптимальну архітектуру під ключ. Жодної води, лише робочий код і підтримка на всіх етапах.

Готові почати? Замовте консультацію — обговоримо деталі вашого проєкту.

Інтеграція AI у веб-додатки: чат-боти, RAG, семантичний пошук

У 8 з 10 проектів «AI-чат-бот» виявляється дорогою обгорткою над GPT-4o з системним промптом. Без доступу до реальних даних компанії. Користувач питає «скільки коштує тариф Преміум» — бот галюцинує ціну з повітря. Питає «коли прийде замовлення» — отримує ввічливе «напишіть у підтримку». Це не інтеграція AI у веб-додатки — це імітація. Ми за 5 років впровадили RAG-рішення в 30+ проектах: від інтернет-магазинів до медичних порталів. Гарантуємо: корисна AI-допомога починається там, де модель читає ваші документи, а не загальні відповіді. Закажіть консультацію, щоб отримати план інтеграції для вашого проекту.

Побудова RAG-систем: чанкінг, ембедінги, векторна БД

Retrieval-Augmented Generation — стандартна архітектура: запит → пошук релевантних фрагментів у векторній БД → вставка знайденого в контекст → відповідь моделі. Але диявол у деталях реалізації.

Чанкінг. Різати документ на шматки по 500 токенів без огляду на структуру — гарантія втрати сенсу. Якщо розріз припав на середину абзацу, контекст розривається. Рішення — рекурсивний RecursiveCharacterTextSplitter з overlap 10–15% для документації. Для контрактів та інструкцій використовуємо семантичний спліттер: виділяємо заголовки, списки, блоки коду — кожен розділ стає незалежним чанком. Результат: на медичному проекті precision зріс з 0.55 до 0.84 лише завдяки правильному нарізанню, скорочення витрат на підтримку на 40% заощадило 80 000 грн на місяць.

Модель ембедингів. Для україномовних текстів intfloat/multilingual-e5-large дає помітний приріст точності проти застарілої text-embedding-ada-002. Наші виміри: NDCG@10 на 12% вищий. text-embedding-3-large хороший для англомовного контенту, але для української рекомендуємо BAAI/bge-m3.

Векторна БД. Якщо вже стоїть PostgreSQL — pgvector заощаджує ресурси. Ставимо розширення CREATE EXTENSION vector, додаємо колонку vector(1024), створюємо HNSW-індекс. На проекті з 80 000 статей p95 пошуку — 12 мс. Для каталогів з мільйонами одиниць — Qdrant або Weaviate: нативний гібридний пошук і шардування «з коробки».

Кроки реалізації RAG:

1. Збір та структурування даних (очищення, метадані).
2. Вибір моделі ембедингів (multilingual-e5-large або bge-m3).
3. Створення чанків (семантичний спліт із 10–15% overlap).
4. Індексація в pgvector (або Qdrant).
5. Інтеграція пошуку (гібрид BM25 + векторний через RRF) та реранкінг.

Що дає гібридний пошук?

Лише векторний пошук сліпий до точних збігів: артикули «ABC-123», власні назви, абревіатури губляться. Лише повнотекстовий не вловлює синоніми та перефразування. Комбінація через RRF (Reciprocal Rank Fusion) дає краще з двох світів: BM25 + векторний пошук, результати змішуються. На практиці recall@20 зростає з 0.65 до 0.92 — на 30% вищий за чисто векторний. Реранкінг через cross-encoder cross-encoder/ms-marco-MiniLM-L-6-v2 додає 50–100 мс до відповіді, але relevance піднімає ще на 5–10%.

Як реалізувати семантичний пошук у веб-додатку?

Пошук «зручні шкіряні крісла» має знаходити товари з описом «м'які стільці з натуральної шкіри» — звичайний LIKE-пошук не здатний. Архітектура: при додаванні товару/посту автоматично генеруємо ембединг через multilingual-e5-large, зберігаємо в pgvector. На запиті — ембедимо його тією ж моделлю, шукаємо найближчих сусідів через cosine distance з HNSW-індексом. Середній час пошуку — 20 мс.

Рекомендаційні системи: коли потрібна гібридна модель?

Колаборативна фільтрація («користувачі, схожі на вас, купували X») вимагає історії — мінімум 2–3 місяці даних із 1000+ активних користувачів. Для стартапів або малих проектів використовуємо content-based: ембединг поточного товару → пошук найближчих сусідів. Коли накопичується статистика (15–20 взаємодій на користувача), переключаємося на LightFM. Вона об'єднує поведінку та ознаки товарів. У e-commerce проекті з 50 000 SKU гібридна модель підвищила конверсію в рекомендаційний блок на 18% (A/B‑тест 2 тижні, що додатково принесло 250 000 грн прибутку за місяць).

Стрімінг відповідей через SSE

Користувач не зобов'язаний чекати, поки модель згенерує весь текст — це вбиває UX. Server-Sent Events (SSE) — протокол для стрімінгу токенів. OpenAI SDK підтримує stream: true, повертаючи AsyncIterator. На фронтенді — Vercel AI SDK (useChat) або самописний EventSource. Типова помилка: використовувати WebSocket для односпрямованого стріму — SSE простіше (менше коду, вбудований реконнект). Стек: Node.js + SSE + React.

Оркестрація агентів

Простий чат-бот відповідає. Агент — виконує дії: створює тікет у Jira, перевіряє статус замовлення в CRM, бронює слот у календарі. Для оркестрації використовуємо LangGraph: граф станів, кожен вузол — виклик моделі або інструменту. Vercel AI SDK дозволяє додати інтеграцію в 10 рядків коду. Головна складність — надійність: модель іноді викликає не той інструмент або передає криві параметри. Захист — Zod-схеми на кожен інструмент і structured outputs для гарантії JSON.

Процес роботи

Додатково: передаємо вихідний код векторизатора, дашборди моніторингу (Langfuse), доступ до адмінки для оновлення бази знань. Постпродакшн-підтримка — 1 місяць безкоштовно.

Терміни

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