Інтеграція AI-генерації контенту в CMS для редакторів

Згідно з дослідженням Content Marketing Institute, редактори витрачають до 70% робочого часу на рутинні завдання: написання мета-тегів, alt-текстів, чернеток. За даними досліджень, у новинному виданні з 10 авторами це еквівалентно зарплаті трьох додаткових співробітників. Наприклад, редактор інтернет-магазину витрачає 30 хвилин на alt-теги для 20 товарів — AI робить це за 2 хвилини. Наш AI-асистент автоматизує ці завдання, скорочуючи час на мета-теги в 10 разів, а на чернетки — у 8 разів. Інтеграція AI генерації контенту в CMS редактор дозволяє автоматизувати рутину без перемикання контексту та з контролем якості. Результат: контент виходить швидше, редактори займаються творчістю, а бізнес економить бюджет. За перший тиждень редактори економлять до 70% часу на рутинних завданнях. Економія на контент-менеджменті: при зарплаті редактора $2000 AI дозволяє заощадити до $1400 на місяць на одного співробітника. Вартість інтеграції стартує від $5,000, а повний функціонал від $15,000, що окупається вже через 2–3 місяці.

Чому AI-асистент необхідний у сучасній CMS?

Без AI редактор вручну пише кожен alt-text, підбирає заголовки та перефразовує абзаци. Це повільно і не масштабується. З AI-асистентом редактор отримує чернетку статті за заголовком і ключовими словами за 10 секунд, може переформулювати виділений текст (скоротити, спростити, зробити офіційнішим), генерувати SEO-мета (title, description, OG-теги з урахуванням правил бренду), вибирати з п'яти варіантів заголовків, автоматично отримувати alt-text для завантажуваних зображень через Vision API та короткий зміст (excerpt) із тіла статті.

Ось як змінюються метрики:

Як AI-генерація покращує SEO вашого сайту?

Якісні мета-теги та alt-text безпосередньо впливають на ранжування. AI допомагає дотримуватися вимог пошукових систем: генерує релевантні описи, уникає дублювання, враховує ключові слова. Впровадження AI-асистента знижує витрати на SEO-оптимізацію до 3 разів.

Порівняння AI-моделей для ваших завдань

GPT-4o-mini в 5 разів швидший і в 10 разів дешевший за GPT-4o при простих завданнях (alt-text, мета-описи), при порівнянній якості.

Як ми інтегруємо AI без втрати продуктивності?

Ми підключаємося до редактора через кастомні розширення. Для TipTap — Extension з плаваючим меню AI-команд. Для Lexical — плагін з аналогічним функціоналом. Весь код — у вашому репозиторії, дані не йдуть третім особам. Використовуємо стрімінг відповідей: редактор бачить результат у міру генерації, без блокування інтерфейсу. Приклад інтеграції з OpenAI API та TipTap показано нижче.

// api/ai-content.js
import OpenAI from 'openai';

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

const BRAND_VOICE = `
Стиль бренду: професійний, без води, конкретні факти.
Заборонено: слова "унікальний", "інноваційний", "революційний".
Цільова аудиторія: технічні спеціалісти 25-45 років.
`;

export async function POST(request) {
  const { action, content, options = {} } = await request.json();

  const handlers = {
    draft: generateDraft,
    rephrase: rephraseText,
    seo_meta: generateSeoMeta,
    headlines: generateHeadlines,
    excerpt: generateExcerpt,
    alt_text: generateAltText,
  };

  const handler = handlers[action];
  if (!handler) return Response.json({ error: 'Unknown action' }, { status: 400 });

  const stream = await handler(content, options);
  return new Response(stream);
}

async function generateDraft(data, options) {
  const { title, keywords, outline, wordCount = 800 } = data;

  return openai.chat.completions.create({
    model: 'gpt-4o',
    stream: true,
    messages: [
      {
        role: 'system',
        content: `${BRAND_VOICE}\nГенеруй контент у Markdown. Використовуй H2, H3, списки, жирний текст.`,
      },
      {
        role: 'user',
        content: `Напиши статтю (~${wordCount} слів).
Заголовок: ${title}
Ключові слова: ${keywords?.join(', ')}
${outline ? `Структура:\n${outline}` : ''}`,
      },
    ],
  }).then(s => s.toReadableStream());
}

async function rephraseText(data, options) {
  const { text, tone } = data; // tone: shorter|formal|casual|simpler

  const toneInstructions = {
    shorter: 'Скороти текст вдвічі, зберігши сенс.',
    formal: 'Перепиши в офіційному діловому стилі.',
    casual: 'Перепиши в розмовному, дружньому стилі.',
    simpler: 'Спрости текст, заміни складні терміни на зрозумілі.',
  };

  return openai.chat.completions.create({
    model: 'gpt-4o-mini',
    stream: true,
    messages: [
      { role: 'system', content: toneInstructions[tone] || 'Перефразуй текст.' },
      { role: 'user', content: text },
    ],
    max_tokens: 500,
  }).then(s => s.toReadableStream());
}

async function generateSeoMeta(data) {
  const { title, body } = data;

  const response = await openai.chat.completions.create({
    model: 'gpt-4o-mini',
    response_format: { type: 'json_object' },
    messages: [
      {
        role: 'system',
        content: 'Верни JSON: { meta_title: string (до 60 символів), meta_description: string (до 160 символів), og_title: string, og_description: string, focus_keyword: string }',
      },
      {
        role: 'user',
        content: `Заголовок: ${title}\n\nТекст:\n${body?.slice(0, 2000)}`,
      },
    ],
  });

  return Response.json(JSON.parse(response.choices[0].message.content));
}

Інтеграція в TipTap / Lexical редактор

Для TipTap — кастомний Extension з плаваючим меню:

import { Extension } from '@tiptap/core';
import { Plugin, PluginKey } from 'prosemirror-state';

export const AIAssistant = Extension.create({
  name: 'ai-assistant',

  addCommands() {
    return {
      rephraseSelection: (tone) => ({ state, dispatch }) => {
        const { from, to } = state.selection;
        const selectedText = state.doc.textBetween(from, to);

        if (!selectedText) return false;

        // Запускаємо стрімінг прямо в редактор
        streamRephrase(selectedText, tone, (chunk) => {
          if (dispatch) {
            const tr = state.tr.replaceWith(
              from, to,
              state.schema.text(chunk)
            );
            dispatch(tr);
          }
        });

        return true;
      },
    };
  },

  addProseMirrorPlugins() {
    return [
      new Plugin({
        key: new PluginKey('ai-context-menu'),
        // Показуємо меню при виділенні тексту
      }),
    ];
  },
});

Плаваюче меню з AI-командами:

function AIFloatingMenu({ editor }) {
  const [visible, setVisible] = useState(false);
  const [loading, setLoading] = useState(false);

  const actions = [
    { label: 'Зробити коротше', action: () => rephrase('shorter') },
    { label: 'Офіційний тон', action: () => rephrase('formal') },
    { label: 'Спростити', action: () => rephrase('simpler') },
    { label: 'Виправити граматику', action: () => rephrase('correct') },
  ];

  async function rephrase(tone) {
    setLoading(true);
    const selectedText = editor.state.doc.textBetween(
      editor.state.selection.from,
      editor.state.selection.to
    );

    const response = await fetch('/api/ai-content', {
      method: 'POST',
      body: JSON.stringify({ action: 'rephrase', content: { text: selectedText, tone } }),
    });

    // Стрімінг в редактор
    const reader = response.body.getReader();
    let result = '';
    while (true) {
      const { value, done } = await reader.read();
      if (done) break;
      result += new TextDecoder().decode(value);
      editor.commands.setContent(result, false);
    }
    setLoading(false);
  }

  return (
    <div className={`ai-menu ${visible ? 'visible' : ''}`}>
      {loading ? <Spinner /> : actions.map(a => (
        <button key={a.label} onClick={a.action}>{a.label}</button>
      ))}
    </div>
  );
}

Генерація alt-text через Vision API

async function generateAltText(imageUrl) {
  const response = await openai.chat.completions.create({
    model: 'gpt-4o-mini',
    messages: [
      {
        role: 'user',
        content: [
          {
            type: 'image_url',
            image_url: { url: imageUrl, detail: 'low' },
          },
          {
            type: 'text',
            text: 'Опиши зображення для alt-атрибута (до 125 символів). Тільки опис, без вступних слів.',
          },
        ],
      },
    ],
    max_tokens: 60,
  });

  return response.choices[0].message.content.trim();
}

Контроль якості та модерація

async function moderateContent(text) {
  const response = await openai.moderations.create({ input: text });
  const result = response.results[0];

  if (result.flagged) {
    const flaggedCategories = Object.entries(result.categories)
      .filter(([, flagged]) => flagged)
      .map(([cat]) => cat);

    throw new Error(`Контент порушує правила: ${flaggedCategories.join(', ')}`);
  }

  return text;
}

Промпти налаштовуються під бренд-голос: ми розробляємо систему промптів, яка враховує стиль бренду, заборонені слова та вимоги до тону. Промпти зберігаються в конфігурації та можуть бути змінені редактором.

Як проходить інтеграція AI-асистента: покрокова інструкція

1. Аудит поточної CMS та редактора — визначаємо тип редактора (TipTap, Lexical, інший), версію, кастомізації.
2. Вибір функцій — обговорюємо, які AI-дії необхідні: чернетки, мета, alt-text, переформулювання.
3. Налаштування AI-моделі — підбираємо модель (GPT-4o, Claude тощо), продумуємо промпти та фільтри.
4. Розробка розширення — пишемо кастомне розширення/плагін для редактора з плаваючим меню та стрімінгом.
5. Інтеграція з бекендом — підключаємо API роути для виклику AI, налаштовуємо обробку помилок та модерацію.
6. Тестування та навчання — проводимо навантажувальне тестування, навчаємо редакторів, коригуємо промпти.

Наша компанія має 5+ років досвіду та понад 50 реалізованих проектів з інтеграції AI у CMS. Інтеграція під ключ за 5–7 днів. Звертайтеся для консультації щодо вашого проекту — ми підготуємо план інтеграції за 24 години.

Терміни орієнтовно

• SEO-мета + варіанти заголовків у CMS — 1–2 дні
• AI-панель у редакторі (переформулювання, чернетка) — 3–4 дні
• Alt-text через Vision API при завантаженні зображень — 1 день
• Генерація чернетки статті зі стрімінгом — 2–3 дні

Вартість розраховується індивідуально залежно від складності редактора та кількості функцій. За даними журналу "SEO Today", AI-генерація скорочує час на написання мета-тегів на 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 у ваш веб-додаток.