Розробка AI-плагіна для WordPress під ключ: від REST API до чат-віджету

Розробка AI-плагіна для WordPress

Інтеграція ChatGPT через iframe в WordPress часто призводить до помилок CORS. Чат-віджет на jQuery гальмує при 10 000 відвідувачів, а latency p99 зашкалює. Типова ситуація: плагін працює, але контекстне вікно обривається на половині діалогу, а генерація контенту в Gutenberg займає хвилини. Ми, як AI/ML інженери, стикаємося з цим щодня.

Ми розробляємо AI-плагіни для WordPress під ключ, які вирішують такі проблеми на рівні архітектури: PHP бекенд + JavaScript фронтенд, що працюють через WordPress Plugin API. Наш досвід — понад 50 успішних проектів з інтеграції LLM в CMS, включаючи RAG-пайплайн, чат-віджети та автоматичну генерацію метаданих. Розберемо, як ми будуємо AI-рішення: від вибору моделі до деплою.

Які проблеми вирішує AI-плагін?

Генерація контенту. Копірайтери витрачають 30–40 хвилин на SEO-метадані та структуру кожної статті. Плагін з REST API та Gutenberg-блоком скорочує цей час на 45%: AI генерує чернетку, meta title та description за секунди.

Чат-віджет для користувачів. Відвідувачі хочуть миттєвих відповідей. Чат на базі LLM з контекстним вікном 8K токенів обробляє питання, не навантажуючи підтримку. Ми використовуємо streaming для низького latency — відповідь з'являється у міру генерації.

Автоматизація SEO. AI-плагін може генерувати meta-описи до 160 символів, підбирати ключові слова (LSI) та створювати сумаризації для featured snippets. Це підвищує CTR органічного трафіку.

Як AI-плагін прискорює роботу копірайтерів?

Практичний кейс: контент-агентство публікує 30+ статей на тиждень. Копірайтери витрачали 30–40 хвилин на SEO-метадані та структуру кожної статті. Ми впровадили кнопку «AI-помічник» в Gutenberg для генерації структури, чернетки, meta title та description. Використовували модель Claude Haiku для швидкості та GPT-4o для складних чернеток.

Результат: час підготовки однієї статті знизився на 45%. SEO-метадані тепер генеруються на 100% AI, але залишаються під ручним контролем. Витрати на API мінімальні — менше $0.02 за статтю.

Чому REST API, а не прямий виклик зовнішнього API?

Прямий виклик з JavaScript розкриває API-ключ у браузері. REST API на PHP виступає проксі: ключ зберігається на сервері, а клієнт отримує лише результат. Це безпечно і дозволяє впровадити кешування, валідацію та логування. Крім того, обробка запиту на сервері в 2 рази швидше, ніж iframe-рішення: ми вимірювали latency p99 «з коробки».

Що важливо враховувати при виборі моделі?

Як це працює: архітектура та код

REST API endpoint для генерації

Плагін реєструє кастомний REST маршрут (/ai-assistant/v1/generate), захищений правами на редагування. У функції обробляються різні типи запитів: post — чернетка статті, meta — SEO-опис, summary — коротке резюме. Системний промпт вибирається залежно від типу.

<?php /** * Plugin Name: AI Assistant * Version: 1.0.0 */ // Запобігання прямому доступу if (!defined('ABSPATH')) exit; class AIAssistant { private string $api_key; public function __construct() { $this->api_key = get_option('ai_assistant_api_key', ''); // Реєструємо REST API endpoint add_action('rest_api_init', [$this, 'register_endpoints']); // Додаємо блок Gutenberg add_action('init', [$this, 'register_block']); // Сторінка налаштувань add_action('admin_menu', [$this, 'add_settings_page']); } public function register_endpoints(): void { register_rest_route('ai-assistant/v1', '/generate', [ 'methods' => 'POST', 'callback' => [$this, 'generate_content'], 'permission_callback' => function() { return current_user_can('edit_posts'); }, ]); register_rest_route('ai-assistant/v1', '/chat', [ 'methods' => 'POST', 'callback' => [$this, 'chat_response'], 'permission_callback' => '__return_true', // Публічний endpoint для чату ]); } public function generate_content(\WP_REST_Request $request): \WP_REST_Response { $prompt = sanitize_text_field($request->get_param('prompt')); $type = sanitize_key($request->get_param('type')); // 'post', 'meta', 'summary' if (empty($this->api_key)) { return new \WP_REST_Response(['error' => 'API key not configured'], 400); } $system_prompts = [ 'post' => 'Ти — копірайтер. Пиши SEO-оптимізований контент для блогу.', 'meta' => 'Створи SEO meta description до 160 символів.', 'summary' => 'Створи коротке резюме статті для featured snippet.', ]; $response = $this->call_anthropic_api( $system_prompts[$type] ?? $system_prompts['post'], $prompt ); return new \WP_REST_Response(['content' => $response]); } private function call_anthropic_api(string $system, string $user_message): string { $response = wp_remote_post('https://api.anthropic.com/v1/messages', [ 'headers' => [ 'x-api-key' => $this->api_key, 'anthropic-version' => '2023-06-01', 'content-type' => 'application/json', ], 'body' => json_encode([ 'model' => 'claude-haiku-4-5', 'max_tokens' => 1024, 'system' => $system, 'messages' => [['role' => 'user', 'content' => $user_message]], ]), 'timeout' => 30, ]); if (is_wp_error($response)) { throw new \RuntimeException($response->get_error_message()); } $body = json_decode(wp_remote_retrieve_body($response), true); return $body['content'][0]['text'] ?? ''; } } new AIAssistant(); 

Gutenberg-блок для контент-менеджерів

Користувач вводить тему в текстове поле, натискає «Згенерувати» — і отримує чернетку прямо в редакторі. Блок використовує apiFetch для виклику нашого REST endpoint. Після генерації контент редагується через RichText.

// blocks/ai-generator/index.js import { registerBlockType } from '@wordpress/blocks'; import { useBlockProps, RichText } from '@wordpress/block-editor'; import { Button, TextareaControl, Spinner } from '@wordpress/components'; import { useState } from '@wordpress/element'; import apiFetch from '@wordpress/api-fetch'; registerBlockType('ai-assistant/generator', { title: 'AI Content Generator', category: 'text', attributes: { content: { type: 'string', default: '' }, }, edit({ attributes, setAttributes }) { const [prompt, setPrompt] = useState(''); const [loading, setLoading] = useState(false); const blockProps = useBlockProps(); const generateContent = async () => { setLoading(true); try { const response = await apiFetch({ path: '/ai-assistant/v1/generate', method: 'POST', data: { prompt, type: 'post' }, }); setAttributes({ content: response.content }); } catch (error) { console.error('Generation failed:', error); } setLoading(false); }; return ( <div {...blockProps}> <TextareaControl label="Тема або опис контенту" value={prompt} onChange={setPrompt} rows={3} /> <Button isPrimary onClick={generateContent} disabled={loading || !prompt}> {loading ? <Spinner /> : 'Згенерувати'} </Button> {attributes.content && ( <RichText tagName="div" value={attributes.content} onChange={content => setAttributes({ content })} /> )} </div> ); }, save({ attributes }) { return <RichText.Content tagName="div" value={attributes.content} />; }, }); 

Чат-віджет для відвідувачів

Віджет завантажується за допомогою хука wp_footer. Для публічного чату ми використовуємо окремий endpoint без перевірки прав, але із захистом від флуду (rate limiting). AI відповідає у форматі streaming, що покращує UX.

// Додаємо чат-віджет у footer add_action('wp_footer', function() { if (!get_option('ai_assistant_chat_enabled')) return; ?> <div id="ai-chat-widget" style="position:fixed;bottom:20px;right:20px;z-index:9999;"> <button id="ai-chat-toggle">💬 AI Помічник</button> <div id="ai-chat-window" style="display:none;width:350px;height:500px;background:#fff;border:1px solid #ccc;border-radius:8px;"> <div id="ai-chat-messages" style="height:420px;overflow-y:auto;padding:10px;"></div> <div style="padding:10px;display:flex;gap:8px;"> <input type="text" id="ai-chat-input" placeholder="Задайте питання..." style="flex:1;"> <button id="ai-chat-send">→</button> </div> </div> </div> <script> // Вбудований скрипт чату document.getElementById('ai-chat-toggle').addEventListener('click', () => { const win = document.getElementById('ai-chat-window'); win.style.display = win.style.display === 'none' ? 'block' : 'none'; }); // ... логіка відправлення повідомлень </script> <?php }); 

Процес роботи: від задачі до деплою

1. Аналітика — визначаємо, які функції потрібні: генерація контенту, чат, SEO, персоналізація.
2. Проектування — вибираємо модель та архітектуру (API або локальний інференс).
3. Реалізація — пишемо PHP-класи, JS-блоки, налаштовуємо REST endpoints.
4. Тестування — покриваємо кейси: помилки API, довгі промпти, навантажувальне тестування чату.
5. Деплой — встановлюємо плагін на вашому хостингу, налаштовуємо моніторинг та алерти.

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

Що входить у роботу

• Плагін з необхідним функціоналом (REST API, блоки, віджети).
• Документація по API та адмініструванню.
• Вихідний код з коментарями та ліцензією.
• Навчання адміністраторів роботі з AI-функціями.
• Підтримка протягом 6 місяців (баґфікс, оновлення сумісності).

Зв'яжіться з нами для оцінки вашого проекту. Замовте консультацію з інтеграції LLM — ми допоможемо вибрати оптимальне рішення. Наша команда має понад 8 років досвіду розробки WordPress-рішень та понад 50 успішних проектів з AI-інтеграціями. Ми гарантуємо сумісність з останніми версіями WP та безпеку ваших даних.

Корисні ресурси: WordPress REST API, Large Language Model (Wikipedia).