What is AI Writer? 

AI Writer (ok_ai_writer) is a TYPO3 extension that brings AI-powered text generation directly into CKEditor. Editors can generate, preview, and iteratively refine SEO-optimized HTML content using Azure OpenAI or OpenAI (ChatGPT) — all without leaving the rich text editor.

The extension provides three CKEditor 4 plugins:

AI Text Generator

Opens a chat-style dialog where editors describe the content they need. The AI generates well-structured HTML that can be refined through follow-up prompts before inserting it into the editor.

AI Translate

Translates the full editor content into a selected target language while preserving all HTML tags and formatting.

Lorem Ipsum

Opens a dialog to choose a paragraph count (1–20) and inserts placeholder text at the cursor position — useful during development and layout prototyping.

Features 

• Conversational AI dialog — Chat-style interface with full conversation history for iterative content refinement.
• SEO-optimized output — The AI generates well-structured HTML with semantic headings (<h2> – <h4>) and paragraphs.
• AI translation — Translate the full editor content into any language while preserving all HTML tags and formatting.
• Dual provider support — Works with both Azure OpenAI and OpenAI (ChatGPT) APIs. Switch between providers via extension configuration.
• Centralized or per-user credentials — API credentials can be configured server-side by an administrator (displayed blinded to editors) or per-user in the browser's localStorage when developer mode is enabled.
• Token usage tracking — Displays cumulative input/output token counts per session so editors stay aware of API consumption.
• Localized UI — Ships with English and German translations.
• Lorem Ipsum helper — Additional CKEditor plugin for quick placeholder text insertion (configurable paragraph count) during development.
• Backend proxy — API requests are routed through the TYPO3 backend, avoiding browser CORS restrictions.

Requirements 

Install via Composer 

composer require oliverkroener/ok-ai-writer

This pulls the extension and its dependencies into your TYPO3 project.

Install from a local path 

If you develop the extension locally (e.g. in a packages/ directory), add it as a path repository in your project's composer.json:

{
    "repositories": [
        {
            "type": "path",
            "url": "packages/*"
        }
    ],
    "require": {
        "oliverkroener/ok-ai-writer": "@dev"
    }
}

Then run:

composer update oliverkroener/ok-ai-writer

Activate the extension 

After installing, set up and activate the extension:

vendor/bin/typo3 extension:setup
vendor/bin/typo3 cache:flush

Verify the installation 

After activation, confirm the extension is loaded:

vendor/bin/typo3 extension:list | grep ok_ai_writer

You should see ok_ai_writer in the output. The CKEditor plugins are now available for configuration.

Extension configuration 

Open Admin Tools > Settings > Extension Configuration > ok_ai_writer to set the following options:

Developer mode 

When devMode is enabled:

• Editors see a full settings panel in the AI dialog with editable fields for mode, endpoint URL, API key, and model.
• Client-entered credentials are saved in localStorage and override the server-side configuration.
• Server-configured values are shown as blinded hints below each field (e.g. http****************2001).
• If no client credentials are entered, the server-side config is used as fallback.

Step 1: Register the CKEditor plugins 

The extension ships an RTE preset at EXT:ok_ai_writer/Configuration/RTE/Default.yaml that registers all three CKEditor 4 external plugins and adds an ai toolbar group. You can either use it directly or import it into your own preset.

imports:
    - { resource: 'EXT:rte_ckeditor/Configuration/RTE/Default.yaml' }
    - { resource: 'EXT:ok_ai_writer/Configuration/RTE/Default.yaml' }

editor:
  config:
    toolbarGroups:
      - { name: 'ai', groups: ['ai'] }
    toolbar:
      - AiText
      - AiTranslate
      - LoremIpsum

$GLOBALS['TYPO3_CONF_VARS']['RTE']['Presets']['my_preset']
    = 'EXT:site_package/Configuration/RTE/MyPreset.yaml';

RTE.default.preset = my_preset

RTE.default.preset = ok_ai_writer

Step 2: Set up your AI provider 

AI Text Generator 

The AI Text Generator lets you create and iteratively refine content through a conversational interface.

AI Translate 

The AI Translate plugin translates the full editor content into a target language while preserving all HTML tags and formatting.

Lorem Ipsum 

The Lorem Ipsum plugin inserts placeholder text for layout prototyping.

1. Place the cursor where you want the text inserted.
2. Click the Lorem Ipsum toolbar button (text lines icon).
3. In the dialog, choose the number of paragraphs (1–20).
4. Click Insert. The selected number of Lorem Ipsum paragraphs are inserted at the cursor position.

Request flow 

Browser (CKEditor Plugin)
    │
    │  User types prompt in the AI dialog
    │
    ▼
TYPO3 AJAX Route
    POST /typo3/ajax/ok-ai-writer/generate
    Body: { messages[] }              (production mode)
    Body: { endpoint, apikey, mode,   (dev mode — optional overrides)
            model, messages[] }
    │
    ▼
AiTextController::generateAction()
    │  Reads extension configuration (mode, apiUrl, apiKey, model)
    │  In devMode: client values override server config
    │  Prepends SEO system prompt
    │
    ├── mode=azure ──▶  Azure OpenAI API  (api-key header)
    │
    └── mode=openai ──▶  OpenAI API  (Bearer token + model in body)
    │
    │  Returns: choices[].message.content (HTML)
    │           usage.prompt_tokens / completion_tokens
    │
    ▼
Response flows back to CKEditor
    │  Displayed in preview area
    │  Added to conversation history
    ▼
Editor clicks "Insert into Editor"
    Content inserted at cursor position

System prompt 

The controller prepends a system message (identical for both providers) that instructs the AI to:

• Generate well-structured, SEO-optimized HTML content
• Use semantic headings (<h2>, <h3>, <h4>) and paragraphs
• Not include <h1> tags (the page already has one)
• Not include markdown formatting, code fences, or explanations
• Return only clean HTML

Provider modes 

The controller supports two AI providers, selected via the mode extension configuration:

Azure OpenAI (mode = azure)

Authenticates via api-key HTTP header. The model is determined by the deployment name in the endpoint URL. No model parameter is sent in the request body.

OpenAI / ChatGPT (mode = openai)

Authenticates via Authorization: Bearer <key> header. The model parameter (e.g. gpt-4o) is included in the JSON request body.

Conversation mode 

The plugin supports two message modes:

Conversation mode (default)

The browser sends the full messages[] array (user + assistant turns). The controller prepends the system prompt and forwards the entire history to the AI API. This enables iterative refinement.

Legacy single-prompt mode

If no messages[] array is sent, the controller falls back to using a single prompt string. This mode exists for backwards compatibility.

Key files 

Classes/
├── Controller/
│   └── AiTextController.php         AJAX endpoint — proxies to AI API
└── Middleware/
    └── AddLanguageLabels.php        Injects XLIFF labels + config into backend JS

Configuration/
├── Backend/
│   └── AjaxRoutes.php               Registers /ok-ai-writer/generate + /translate
├── RequestMiddlewares.php           Registers AddLanguageLabels middleware
├── RTE/
│   └── Default.yaml                CKEditor 4 external plugin registration
└── Services.yaml                    Symfony DI autowiring

Resources/
├── Private/Language/
│   ├── locallang.xlf                English labels
│   └── de.locallang.xlf             German labels
└── Public/CKEditor/Plugins/
    ├── AiText/plugin.js             CKEditor 4 AI Text plugin
    ├── AiTranslate/plugin.js        CKEditor 4 AI Translate plugin
    └── LoremIpsum/plugin.js         CKEditor 4 Lorem Ipsum plugin

Component details 

Localization 

The extension ships with two language files:

Labels are loaded into the backend via the AddLanguageLabels middleware and accessed in JavaScript through TYPO3.lang['label.key'].

To add a new translation, create a file named <language-code>.locallang.xlf (e.g. fr.locallang.xlf) following the XLIFF 1.2 format.

License 

This extension is licensed under the GNU General Public License v2.0 or later.

Author

Oliver Kroener <ok@oliver-kroener.de>