AI Content Generation for CMS

Implementing AI Content Generation for Website CMS

AI content generation in CMS is not a "write article button". It's assistant tools for editors: draft from brief, rephrase paragraph, SEO meta-tag optimization, translation, headline variants. Integrated directly in editor without context switching.

What to Implement in CMS

• Generate article draft from title and keywords
• Rephrase selected text (make shorter / formal / simpler)
• Generate SEO meta: title, description, OG-tags
• Headline variants (5 options to choose from)
• Auto alt-text for images
• Generate excerpt from article body

Server API for Generation

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

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

const BRAND_VOICE = `
Brand style: professional, no fluff, concrete facts.
Forbidden: words "unique", "innovative", "revolutionary".
Target audience: tech specialists 25-45 years old.
`;

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}\nGenerate content in Markdown. Use H2, H3, lists, bold text.`,
      },
      {
        role: 'user',
        content: `Write an article (~${wordCount} words).
Title: ${title}
Keywords: ${keywords?.join(', ')}
${outline ? `Structure:\n${outline}` : ''}`,
      },
    ],
  }).then(s => s.toReadableStream());
}

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

  const toneInstructions = {
    shorter: 'Cut text in half, preserve meaning.',
    formal: 'Rewrite in formal business style.',
    casual: 'Rewrite in conversational, friendly style.',
    simpler: 'Simplify text, replace complex terms with clear ones.',
  };

  return openai.chat.completions.create({
    model: 'gpt-4o-mini',
    stream: true,
    messages: [
      { role: 'system', content: toneInstructions[tone] || 'Rephrase the text.' },
      { 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: 'Return JSON: { meta_title: string (up to 60 chars), meta_description: string (up to 160 chars), og_title: string, og_description: string, focus_keyword: string }',
      },
      {
        role: 'user',
        content: `Generate SEO for article:\nTitle: ${title}\nBody:\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: 'Return JSON: { headlines: [ { title: string, reason: string } ] }',
      },
      {
        role: 'user',
        content: `Generate ${count} alternative headlines for:\n${body.slice(0, 500)}`,
      },
    ],
  });

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

Editor Integration

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' })}>
        Make shorter
      </button>
      <button onClick={() => callAPI('seo_meta', { title: text, body: text })}>
        Generate SEO
      </button>
      <button onClick={() => callAPI('headlines', { body: text })}>
        Alternative titles
      </button>
    </div>
  );
}

Timeline

• Basic draft generation + rephrase — 2–3 days
• SEO meta + headline variants — plus 1–2 days
• Alt-text generation for images — plus 1 day
• Multi-language support — plus 2–3 days
• Full integration with editor UI + A/B testing — 2–3 weeks