AI Content Assistant Integration for CMS Editors

Editors spend up to 70% of their working time on routine tasks: writing meta tags, alt texts, and drafts. According to research, in a newsroom with 10 authors, this is equivalent to the salary of three additional employees. For example, an online store editor spends 30 minutes on alt tags for 20 products — AI does it in 2 minutes. Our AI assistant automates these tasks, reducing time on meta tags by 10x and on drafts by 8x. Integrating AI content generation into the CMS editor automates routine without context switching and with quality control. The result: content is published faster, editors focus on creativity, and the business saves budget. In the first week, editors save up to 70% of time on routine tasks. Savings on content management: with an editor salary of $2000, AI saves up to $1400 per month per employee. The integration cost varies but pays off within 2–3 months.

Why an AI assistant is essential in a modern CMS?

Without AI, an editor manually writes every alt text, picks headlines, and rephrases paragraphs. This is slow and does not scale. With an AI assistant, the editor gets a draft article from a headline and keywords in 10 seconds, can rephrase selected text (shorten, simplify, make formal), generate SEO meta (title, description, OG tags considering brand rules), choose from five headline options, automatically get alt text for uploaded images via Vision API, and a summary (excerpt) from the body of the article.

Here's how metrics change:

How AI generation improves your site's SEO?

Quality meta tags and alt text directly affect ranking. AI helps meet search engine requirements: generates relevant descriptions, avoids duplication, and considers keywords. Implementing an AI assistant reduces SEO optimization costs by up to 3x.

Comparison of AI models for your tasks

GPT-4o-mini for simple tasks (alt text, meta descriptions) works 5x faster and costs 10x less than GPT-4o, with comparable quality.

How we integrate AI without performance loss?

We connect to the editor via custom extensions. For TipTap — an Extension with a floating AI command menu. For Lexical — a plugin with similar functionality. All code is in your repository, data does not go to third parties. We use streaming responses: the editor sees the result as it is generated, without UI blocking. An integration example with OpenAI API and TipTap is shown below.

// 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: technical 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: 'Shorten the text by half, keeping the meaning.',
    formal: 'Rewrite in official business style.',
    casual: 'Rewrite in conversational, friendly style.',
    simpler: 'Simplify the text, replace complex terms with understandable 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 (max 60 chars), meta_description: string (max 160 chars), og_title: string, og_description: string, focus_keyword: string }',
      },
      {
        role: 'user',
        content: `Title: ${title}\n\nText:\n${body?.slice(0, 2000)}`,
      },
    ],
  });

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

Integration into TipTap / Lexical editor

For TipTap — custom Extension with floating menu:

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;

        // Start streaming directly into the editor
        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'),
        // Show menu when text is selected
      }),
    ];
  },
});

Floating menu with AI commands:

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

  const actions = [
    { label: 'Make shorter', action: () => rephrase('shorter') },
    { label: 'Formal tone', action: () => rephrase('formal') },
    { label: 'Simplify', action: () => rephrase('simpler') },
    { label: 'Fix grammar', 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 } }),
    });

    // Streaming into editor
    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 generation via 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: 'Describe the image for the alt attribute (up to 125 characters). Only description, no introductory words.',
          },
        ],
      },
    ],
    max_tokens: 60,
  });

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

Quality control and moderation

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(`Content violates rules: ${flaggedCategories.join(', ')}`);
  }

  return text;
}

Prompts are tailored to brand voice: we develop a prompt system that considers brand style, forbidden words, and tone requirements. Prompts are stored in configuration and can be changed by the editor.

How AI assistant integration works: step-by-step guide

1. Audit current CMS and editor — determine editor type (TipTap, Lexical, other), version, customizations.
2. Feature selection — discuss which AI actions are needed: drafts, meta, alt-text, rephrasing.
3. AI model configuration — select model (GPT-4o, Claude, etc.), design prompts and filters.
4. Extension development — write custom extension/plugin for the editor with floating menu and streaming.
5. Backend integration — set up API routes for AI calls, configure error handling and moderation.
6. Testing and training — perform load testing, train editors, adjust prompts.

Contact us for a project estimate — we will prepare an integration plan within 24 hours.

What is included in the work

• API and editor extension documentation
• Integration code in your repository (GitHub)
• AI model access (your key or ours)
• Editor training (1 hour online)
• 2 weeks of post-launch support
• 30-day guarantee on correct operation

Order a pilot integration — evaluate the result in a week.

Approximate timelines

• SEO meta + headline variants in CMS — 1–2 days
• AI panel in editor (rephrasing, draft) — 3–4 days
• Alt-text via Vision API on image upload — 1 day
• Draft article generation with streaming — 2–3 days

The cost is calculated individually depending on the editor complexity and number of features. According to the journal "SEO Today", AI generation reduces meta-tag writing time by 70%.

We guarantee that the integration will be performed taking into account your business processes and without downtime. Our engineers are certified in OpenAI API and have experience with large CMS. Get a detailed plan for AI integration into your CMS.

AI Integration: Chatbots, RAG, Semantic Search, Recommendations

In 8 out of 10 projects, an "AI chatbot" turns out to be an expensive wrapper over GPT-4o with a system prompt. Without access to real company data. The user asks "how much does the Premium plan cost?" — the bot hallucinates a price out of thin air. Asks "when will my order arrive?" — gets a polite "contact support." This is not integration — it's imitation. We have implemented RAG solutions in 30+ projects over 5 years: from e-commerce stores to medical portals. We guarantee: useful AI assistance begins where the model reads your documents, not generic answers.

How do we build RAG systems?

Retrieval-Augmented Generation — standard architecture: query → find relevant fragments in a vector DB → insert found context → model response. But the devil is in the implementation details. Let's break down key components that determine quality.

Chunking. Cutting a document into 500-token pieces without regard for structure is a guarantee of losing meaning. If the cut lands in the middle of a paragraph, context breaks. Solution — recursive RecursiveCharacterTextSplitter with 10–15% overlap for documentation. For contracts and instructions, we use a semantic splitter: extract headings, lists, code blocks — each section becomes an independent chunk. Difference in search quality: on a medical project, precision increased from 0.55 to 0.84 just by proper chunking.

Embedding model. For Russian-language texts, intfloat/multilingual-e5-large gives a noticeable accuracy boost over outdated text-embedding-ada-002. In our measurements, NDCG@10 on a test set of 10,000 query-document pairs is 12% higher. OpenAI text-embedding-3-large is good for English content, but for Russian we recommend BAAI/bge-m3 or the mentioned e5-large.

Vector DB. If you already have PostgreSQL — pgvector saves resources. Install extension CREATE EXTENSION vector, add column vector(1024), create HNSW index. On a project with 80,000 support articles, p95 search time was 12 ms. That's enough. For catalogs with millions of items — Qdrant or Weaviate: native hybrid search and sharding out of the box.

What does hybrid search give?

Vector-only search is blind to exact matches: SKUs like "ABC-123", proper names, abbreviations are lost. Full-text-only search doesn't catch synonyms and paraphrasing. Combining via RRF (Reciprocal Rank Fusion) gives the best of both worlds: BM25 + vector search, results merged. In practice, recall@20 increases from 0.65 to 0.92 — the difference is noticeable to the user.

Reranking — final filter: top-20 candidates from hybrid search are run through a cross-encoder cross-encoder/ms-marco-MiniLM-L-6-v2. It adds 50–100 ms to response time, but relevance improves by another 5–10%. Without reranking, the chatbot may show irrelevant documents.

How to implement semantic search on a site?

A search for "comfortable leather armchairs" should find products described as "soft chairs made of natural leather" — ordinary LIKE search cannot do this. Our architecture: when adding a product/post, automatically generate an embedding via multilingual-e5-large, store it in pgvector. On query, embed it with the same model, search nearest neighbors via cosine distance with HNSW index. For a catalog of 100,000 items, index builds in 3 minutes, memory ~400 MB (1536-dimensional vectors). Average search time: 20 ms.

What about recommendation systems?

Collaborative filtering ("users like you bought X") requires history — at least 2–3 months of data with 1000+ active users. For startups or small projects, we use content-based: embedding of current product → search nearest neighbors by cosine similarity. When enough statistics accumulate (usually 15–20 interactions per user), we switch to a hybrid LightFM model. It combines behavior and product features. In our e-commerce project with 50,000 SKUs, the hybrid model increased conversion in the recommendation block by 18% (A/B test lasted 2 weeks).

How does streaming work?

Users shouldn't wait for the entire text to be generated — it kills UX. Server-Sent Events (SSE) is the protocol for token streaming. OpenAI SDK supports stream: true, returning an AsyncIterator. On frontend — Vercel AI SDK (useChat) or custom EventSource. Typical mistake: using WebSocket for unidirectional streaming — SSE is simpler (less code, built-in reconnect). Stack: Node.js + SSE + React.

How to orchestrate agents?

A simple chatbot answers. An agent performs actions: creates a Jira ticket, checks order status in CRM, books a calendar slot. For orchestration, we use LangGraph: state graph where each node is a model or tool call. Vercel AI SDK useChat + tools for Next.js allows adding integration in 10 lines of code. Main challenge — reliability: the model sometimes calls the wrong tool or passes malformed parameters. Protection — Zod schemas for each tool and structured outputs to guarantee JSON.

What does the work include?

Additionally: we hand over vectorizer source code, monitoring dashboards (Langfuse), admin panel access for knowledge base updates. Post-production support — 1 month free.

What are the timelines?

Pricing is calculated individually after project discovery. We'll evaluate your project in 1 day. Contact us — we'll show how to turn AI from a toy into a profit-driving tool.