У цій статті показано, як підключити Claude до Onepage через Model Context Protocol (MCP).
MCP — це інтерфейс між Onepage та зовнішніми ШІ-асистентами, який дає змогу керувати сторінками, вмістом і структурами вебсайтів безпосередньо через ці інструменти. Детальне пояснення щодо MCP ви знайдете в цій статті.
📌 Примітка: Під час створення вебсайту Onepage через MCP кредити Onepage AI не витрачаються. Натомість ви використовуєте токени відповідного ШІ-інструмента (наприклад, ChatGPT, Claude або Cursor), підключеного до Onepage.
Підключення Onepage до Claude (покрокова інструкція)
📌 Зверніть увагу: наведені нижче кроки та знімки екрана відображають інтерфейс інструменту на момент створення цієї статті. З того часу інтерфейс або назви елементів могли змінитися. Якщо ви помітите будь-які відмінності, радимо ознайомитися з актуальною інструкцією в самому інструменті, відвідати центр допомоги постачальника або звернутися до його служби підтримки.
Крок 1
Відкрийте Claude.
Крок 2
Натисніть унизу ліворуч на свій профіль і перейдіть до Settings (Налаштування) → Connectors (Конектори).
Крок 3
Натисніть на значок «плюс» і виберіть Browse connectors (Переглянути конектори).
Крок 4
Знайдіть та оберіть «Onepage»
Тепер натисніть Connect (Підключити).
Ви будете перенаправлені на іншу сторінку, де потрібно буде увійти в Onepage.
Після успішного введення облікових даних Onepage ви автоматично перейдете на сторінку Claude, де з’явиться таке повідомлення: «Claude wants to access your account» (Claude хоче отримати доступ до вашого облікового запису).
Тепер натисніть «Allow» (Дозволити).
Крок 5
Натисніть Always allow (Завжди дозволяти) та надайте дозвіл для всіх опцій.
Завдяки цьому Claude зможе працювати з Onepage та самостійно створювати, редагувати вебсайти й керувати ними.
Відеоінструкція: підключення Onepage MCP до Claude
Перегляньте, будь ласка, наведене нижче відео з усім процесом. Ви можете натиснути на значок повноекранного режиму (4 стрілки внизу праворуч) або безпосередньо на назву відео, щоб воно відкрилося в повноекранному режимі.
🎉 Тепер усе налаштовано! 🎉
Тепер ви можете розпочати чат у Claude та ввести промпт, щоб почати створення.
💡 Порада для ідеальних результатів: як сформулювати свої команди ще точніше, щоб отримати максимум від ШІ, ви дізнаєтесь у нашому гайді «Vibe-Coding: Як писати ефективні промпти для кращих результатів».
Усунення несправностей, пов’язаних з авторизацією
Якщо під час підключення з’являється повідомлення про помилку «Authorization failed» (Помилка авторизації), це зазвичай означає, що термін дії вашої сесії закінчився, ваші облікові дані неправильні або відсутні необхідні дозволи.
Швидке виправлення:
Від’єднайтеся та повторно пройдіть авторизацію у своєму обліковому записі.
Переконайтеся, що ви входите в систему за допомогою правильного облікового запису Onepage.
Переконайтеся, що Claude не відкрито кілька разів (наприклад, у кількох вкладках або вікнах браузера). За необхідності закрийте всі вкладки Claude та спробуйте підключитися знову.
Практичні приклади та підказки
Ознайомтеся з наведеними нижче прикладами, щоб краще зрозуміти, що саме можна створити та як правильно сформулювати інструкції для Claude. Ви можете використовувати їх як джерело натхнення або просто скопіювати, щоб випробувати їх на практиці!
Приклад промпту 1: Преміум-агенція
«Створи новий проєкт в Onepage і розроби домашню сторінку в темному режимі з 8 секціями для преміум-агенції growth-маркетингу, яка пропонує курси. Стиль має бути ультрасучасним з електрично-синіми акцентами, включно з інтерактивними hover-анімаціями та плавними scroll-fade-in ефектами. Потрібні: hero-секція з жирним заголовком і двома CTA, панель логотипів для довіри, 3-колонковий макет із больовими точками (pain points) та велика, помітна сітка статистики. Після цього додай динамічні картки розкладу курсів, огляд цільової аудиторії, masonry-сітку з відгуками, а в самому низу — контрастну CTA-форму реєстрації.»
Сторінка, створена за наведеним вище промптом:
https://growthforge-academy.onepage.me/
Приклад промпту 2: Елітна нерухомість преміум-класу
«Створи новий проєкт Onepage для футуристичної люкс-агенції нерухомості під назвою „Nova Living". Створи сучасну преміум лендинг сторінку з 10–11 секціями, зокрема: hero-секція, нерухомість, переваги, про нас, відгуки, команда, статистика, процес, FAQ, контактна форма та футер. Використовуй сучасні макети, плавні анімації, елементи glassmorphism, градієнти, hover-ефекти й адаптивний дизайн. Стиль має бути елегантним, футуристичним та оптимізованим під конверсію. За потреби додай тексти-заповнювачі та зображення й зроби вебсайт візуально вражаючим і високопрофесійним.»
Сторінка, створена за наведеним вище промптом:
https://nova-living-gg6.onepage.me/
Приклад промпту 3: Сучасна компанія у сфері сонячної енергетики
«Створи новий проєкт Onepage для преміум-компанії зі встановлення сонячних електростанцій під назвою „VoltSolar". Розроби сучасну, орієнтовану на конверсію лендингову сторінку з 8–9 секціями: яскрава hero-секція з двома CTA, панель логотипів партнерів, сітка функцій із демонстрацією переваг (економія, екологічність), слоти для якісної презентації проєктів, деталі інтеграції з додатками розумного будинку, чітка таблиця цін/пакетів із трьома варіантами, відгуки клієнтів, FAQ та фінальний контактний CTA. Використовуй чистий макет із насиченими смарагдово-зеленими й темно-сірими акцентами, плавні scroll-анімації та повністю адаптивний дизайн.»
Сторінка, створена за наведеним вище промптом:
https://solarpanels.onepage.me
Примітка щодо захисту даних
Після поєднання Claude та Onepage через MCP дані обробляються відповідно до наших правил захисту даних. Усі подробиці ви знайдете в нашій Декларації про конфіденційність.
Кілька облікових записів Claude: Ви можете прив’язати кілька облікових записів Claude до одного облікового запису Onepage за допомогою OAuth. Однак зверніть увагу, що історії розмов та «Спогади» є індивідуальними для кожного облікового запису Claude і не можуть бути спільними для різних облікових записів.
💡Бажаєте залишити відгук до цієї статті? Будь ласка, напишіть у наш чат або за адресою support@onepage.io, і ми зможемо її покращити. Дякуємо! 🙂