Реалізація AI-генерації контенту для CMS сайту

Реалізація AI-генерації контенту для CMS сайту

AI-генерація в CMS — це не «кнопка написати статтю». Це асистентські інструменти для редактора: чернетка за брифом, переформулювання абзацу, SEO-оптимізація мета-тегів, переклад, генерація варіантів заголовків. Інтегрується прямо в редактор без переключення контексту.

Що реалізуємо в CMS

• Генерація чернетки статті за заголовком та ключовими словами
• Переформулювання виділеного тексту (зробити коротше / офіційніше / простіше)
• Генерація SEO-мета: title, description, OG-теги
• Варіанти заголовків (5 варіантів на вибір)
• Автоматичний alt-text для зображень
• Генерація витягу (excerpt) з тіла статті

Серверний API для генерації

// 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: `Згенеруй SEO для статті:\nЗаголовок: ${title}\nТекст:\n${body.slice(0, 1000)}...`,
      },
    ],
  });

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

async function generateHeadlines(data) {
  const { body, count = 5 } = data;

  const response = await openai.chat.completions.create({
    model: 'gpt-4o-mini',
    response_format: { type: 'json_object' },
    messages: [
      {
        role: 'system',
        content: 'Поверни JSON: { headlines: [ { title: string, reason: string } ] }',
      },
      {
        role: 'user',
        content: `Згенеруй ${count} альтернативних заголовків для:\n${body.slice(0, 500)}`,
      },
    ],
  });

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

Інтеграція редактора

function AIContentTools() {
  const { text, setText } = useEditor();
  const [loading, setLoading] = useState(false);

  async function callAPI(action, data) {
    setLoading(true);
    const response = await fetch('/api/ai-content', {
      method: 'POST',
      body: JSON.stringify({ action, content: data }),
    });

    const reader = response.body.getReader();
    let result = '';

    while (true) {
      const { done, value } = await reader.read();
      if (done) break;
      result += new TextDecoder().decode(value);
    }

    setLoading(false);
    return result;
  }

  return (
    <div className="ai-tools">
      <button onClick={() => callAPI('rephrase', { text, tone: 'shorter' })}>
        Зробити коротше
      </button>
      <button onClick={() => callAPI('seo_meta', { title: text, body: text })}>
        Згенерувати SEO
      </button>
      <button onClick={() => callAPI('headlines', { body: text })}>
        Альтернативні заголовки
      </button>
    </div>
  );
}

Терміни

• Базова генерація чернетки + переформулювання — 2–3 дні
• SEO мета + варіанти заголовків — плюс 1–2 дні
• Генерація alt-text для зображень — плюс 1 день
• Мультимовна підтримка — плюс 2–3 дні
• Повна інтеграція з UI редактора + A/B тестування — 2–3 тижні