Dieser Artikel zeigt, wie du Claude über das Model Context Protocol (MCP) mit Onepage verbindest.
MCP ist die Schnittstelle zwischen Onepage und externen KI-Assistenten und ermöglicht es, Seiten, Inhalte und Website-Strukturen direkt über diese Tools zu verwalten. Die detaillierte Erklärung zu MCP findest du in diesem Artikel.
📌 Hinweise:
Für die Nutzung der MCP-Funktion ist eine aktive Onepage AI-Mitgliedschaft im Hintergrund erforderlich.
Bei der Erstellung einer Onepage-Website über MCP werden keine Onepage-KI-Credits verbraucht. Stattdessen nutzt du die Tokens des jeweiligen KI-Tools (z. B. ChatGPT, Claude oder Cursor), das mit Onepage verbunden ist.
Onepage mit Claude verbinden (Schritt-für-Schritt-Anleitung)
Schritt 1
Öffne Claude.
Schritt 2
Klicke unten links auf dein Profil und gehe zu „Einstellungen“ → „Konnektoren“.
Klicke anschließend auf „Anpassen“.
Schritt 3
Klicke auf das Plus-Symbol und wähle „Benutzerdefinierten Connector hinzufügen“ aus.
Trage anschließend folgende Daten ein:
Name: Onepage
Remote MCP Server URL: https://mcp.onepage.io/
Schritt 4
Nun erscheint Onepage in deiner Konnektoren-Liste.
Klicke auf „Verbinden“ und melde dich mit deinem Onepage-Account an.
Danach wirst du automatisch zu Claude weitergeleitet, wo folgende Nachricht erscheint: „Claude möchte auf Ihr Konto zugreifen.“
Klicke nun auf „Zulassen“.
Schritt 5
Klicke auf „Immer erlauben“ und erteile die Berechtigung für alle Optionen.
Dadurch kann Claude mit Onepage arbeiten und eigenständig Websites erstellen, bearbeiten und verwalten.
Video-Tutorial: Onepage MCP in Claude verbinden
Bitte sieh dir das folgende Video mit dem gesamten Ablauf an. Du kannst auf das Vollbild-Symbol (die 4 Pfeile unten rechts) oder direkt auf den Titel des Videos klicken, damit sich das Video im Vollbildmodus öffnet.
🎉 Jetzt ist alles eingerichtet!🎉
Du kannst nun einen Chat in Claude starten und einen Prompt eingeben, um mit dem Erstellen zu beginnen.
Prompt-Beispiel 1:
„Erstelle ein neues Projekt in Onepage und designe eine Dark-Mode-Homepage mit 8 Bereichen für eine Premium-Growth-Marketing-Agentur, die Kurse anbietet. Der Stil soll ultramodern mit elektrisch-blauen Akzenten sein, inklusive interaktiven Hover-Animationen und weichen Scroll-Fade-ins. Erforderlich sind eine Hero-Section mit fetter Headline und zwei CTAs, eine vertrauenswürdige Logo-Leiste, ein 3-spaltiges Pain-Point-Layout und ein großes, auffälliges Statistik-Raster. Lass darauf dynamische Kursplan-Karten, eine Zielgruppen-Übersicht, ein Testimonial-Masonry-Grid und ganz unten ein kontrastreiches CTA-Anmeldeformular folgen.“
Seite erstellt mit dem oben genannten Prompt:
Prompt-Beispiel 2:
"Erstelle ein neues Onepage-Projekt für eine futuristische Luxus-Immobilienagentur namens „Nova Living“.
Erstelle eine moderne Premium-Landingpage mit 10–11 Bereichen, darunter Hero-Sektion, Immobilien, Vorteile, Über uns, Testimonials, Team, Statistiken, Prozess, FAQ, Kontaktformular und Footer.
Verwende moderne Layouts, flüssige Animationen, Glassmorphism-Elemente, Farbverläufe, Hover-Effekte und responsives Design. Der Stil soll elegant, futuristisch und conversion-optimiert wirken.
Füge bei Bedarf Platzhaltertexte und Bilder hinzu und gestalte die Website visuell beeindruckend und hochprofessionell."
Seite erstellt mit dem oben genannten Prompt:
⚠️ Wichtig: Wenn du eine Seite über den MCP-Workflow mit Claude generierst, ist der Editor während der Beta-Phase ausschließlich über beta.onepage.io erreichbar. Der reguläre Link app.onepage.io funktioniert in diesem Fall nicht und kann zu einem unendlichen Ladebildschirm führen.
Bitte nutze daher immer den Beta-Link, um deine generierten Inhalte zu öffnen oder zu bearbeiten.
💡Du hast Feedback zu diesem Hilfe-Artikel? Teile es gerne mit uns über den Live-Chat oder an support@onepage.io, damit wir ihn auf dem neuesten Stand halten können. 🙂