У цій статті показано, як підключити Codex до Onepage через Model Context Protocol (MCP).
MCP — це інтерфейс між Onepage та зовнішніми AI-асистентами, який дає змогу керувати сторінками, вмістом і структурою вебсайту безпосередньо через ці інструменти. Детальне пояснення про MCP ви знайдете в цій статті.
📌 Примітка: під час створення вебсайту Onepage через MCP AI-кредити Onepage не витрачаються. Натомість використовуються токени відповідного AI-інструмента (наприклад, ChatGPT, Claude чи Cursor), підключеного до Onepage.
Як підключити Onepage до Codex (покрокова інструкція)
📌 Примітка: наведені нижче кроки та знімки екрана відповідають стану на момент створення цієї статті. Інтерфейс або назви елементів інструмента могли відтоді змінитися. Якщо ви помітите розбіжності, радимо звірятися з актуальними інструкціями в самому інструменті, переглянути довідковий центр постачальника або звернутися до його служби підтримки.
Крок 1. Завантажте та налаштуйте Codex
Завантаження застосунку: спершу завантажте застосунок Codex та встановіть його на своєму пристрої.
Вхід: увійдіть у застосунок. Для цього ви можете скористатися наявним акаунтом ChatGPT або іншим доступним способом входу.
Підтвердження: введіть свій номер телефону, щоб отримати код підтвердження в SMS. Введіть код у застосунку, щоб завершити вхід.
Так це виглядає, коли ви входите в Codex через ChatGPT після підтвердження коду.
Крок 2. Додайте MCP-сервер у Codex
У Codex натисніть у лівому нижньому куті на іконку вашого профілю і перейдіть до налаштувань.
У меню виберіть пункт Сервери-MCP.
Натисніть Додати сервер і виберіть тип Streamable HTTP.
Потім введіть такі дані:
Ім'я: Onepage
URL-адреса: https://mcp.onepage.io/
Крок 3. Налаштуйте дозволи
Важливо: щоб Codex міг виконувати команди та скрипти для Onepage, вам потрібно надати застосунку відповідні права.
У налаштуваннях сервера Onepage переконайтеся, що дозволи на виконання скриптів/команд надано. Без цього кроку спроба входу завершиться невдало.
У відео ви бачите приклад наданих дозволів. Це лише приклад. Вирішуйте самостійно, що найкраще підходить у вашому випадку, і змінюйте дозволи на власний розсуд.
Крок 4. Зв’яжіть Codex з Onepage
Відкрийте новий чат у Codex.
Введіть у чат таку команду:
«run codex mcp login onepage»
Крок 5. Керуйте Onepage через Codex (введення промптів)
Після успішного входу ви можете просто в тому самому чаті дати Codex команду створити ваш вебсайт.
Для цього найкраще використовувати чіткий, цілеспрямований промпт. Ось два приклади, якими ви можете скористатися:
Для окремої секції:
«Створи сучасну Hero-секцію в Onepage для коучингового бізнесу з помітним заголовком і кнопкою із закликом до дії.»Для повного вебсайту:
«Побудуй повноцінний лендинг в Onepage для місцевого фітнес-клубу. Додай секцію "Про нас", огляд послуг і контактну форму.»
Codex автоматично виконає команду через інтерфейс MCP безпосередньо у вашому акаунті Onepage.
💡 Порада для ідеальних результатів: як формулювати команди ще точніше, щоб отримати максимум від AI, ви дізнаєтеся в нашому гайді «Vibe-Coding: як писати ефективні промпти для кращих результатів».
Приклад промпту:
/create-project name="neon-agency" template="onepage" /add-section type="hero" theme="dark-neon-purple". Макет: Split-Layout.Ліворуч: захопливий заголовок для маркетингового агентства («We Turn Noise Into Market Dominance»), короткий підзаголовок, основна яскраво-фіолетова CTA-кнопка та другорядна CTA-кнопка у стилі ghost.Праворуч: абстрактний елемент, що плаває, у стилі glassmorphism.Тло: темний обсидіаново-чорний (#0B0B0F) із делікатним пульсуючим ефектом радіального розмиття у неоново-фіолетовому кольорі. Анімації: почергова поява тексту знизу вгору (staggered slide-up + fade-in) під час завантаження; плавний плаваючий ефект для правого елемента; збільшення масштабу + неоновий ефект світіння box-shadow під час наведення на CTA.
Наступний промпт:
/update-section type="hero"
Ціль: правий абстрактний візуальний елемент
Доповнення:
Візуальні ефекти: посиль ефект glassmorphism на головній кулі (main orb) та її менших супутникових частинках. Збільш backdrop-blur, додай чітку напівпрозору білу внутрішню рамку (1px solid rgba(255,255,255,0.15)) і максимально підвищ яскравість внутрішніх неоново-фіолетових та блакитних градієнтних смуг, щоб вони сильно вирізнялися на темному тлі.
Основна анімація: застосуй плавну багатовісну анімацію плавання до головної кулі. Вона має повільно рухатися вгору та вниз (зміщення по осі Y на 15px) і водночас делікатно змінювати кут повороту в нескінченному 6-секундному циклі (infinite ease-in-out loop) (поворот: від -3deg до 3deg).
Анімація глибини: нехай менші навколишні супутникові елементи плавають незалежно один від одного в дещо швидшому, почерговому циклі (4 секунди) з мінімальними зміщеннями по осях X та Y, щоб створити переконливу ілюзію 3D-паралаксу.
Результат:
💡Бажаєте залишити відгук до цієї статті? Будь ласка, напишіть у наш чат або за адресою support@onepage.io, і ми зможемо її покращити. Дякуємо! 🙂