Willkommen in der Zukunft des Website-Bauens mit Onepage!
Wir freuen uns, dir das Model Context Protocol (MCP) vorzustellen, das jetzt offiziell als Beta verfügbar ist.
MCP ist eine leistungsstarke Verbindung zwischen Onepage und den KI-Assistenten, die du bereits täglich außerhalb unserer Plattform nutzt. Anstatt ausschließlich im integrierten Editor zu arbeiten, kannst du nun deinen eigenen externen KI-Assistenten verwenden, um Onepage zu steuern, Seiten zu erstellen und Inhalte für dich zu verwalten.
Der Unterschied zur internen KI: Unter der Haube nutzen beide Systeme dasselbe Onepage-KI-Gehirn, aber MCP bietet dir aktuell zwei entscheidende Vorteile:
Seitenweises Denken: Während sich die interne KI meist Bereich für Bereich (section by section) vorarbeitet, kann MCP eine komplette Seite in einer einzigen Anfrage erfassen, aufbauen oder korrigieren.
Schone dein Onepage-Guthaben: Die Text-Tokens werden direkt über dein eigenes, externes KI-Abonnement (z. B. bei Claude oder Cursor) abgerechnet. Deine Onepage AI-Credits bleiben somit komplett unangetastet!
📌 Hinweis: Für die Nutzung der MCP-Funktion ist eine aktive Onepage AI-Mitgliedschaft im Hintergrund erforderlich.
Was kann MCP aktuell?
Während der Beta-Phase kann dein externer KI-Assistent über MCP folgende Aktionen ausführen:
Seiten: Erstellen, veröffentlichen, offline nehmen und archivieren
Vibe Sections: Individuelle Komponenten vollständig erstellen und bearbeiten
Struktur: Bereiche umbenennen, verschieben und neu anordnen
Websites: Neue Websites erstellen, Branding verwalten (Farben & Schriftarten) und Medien hochladen
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:
Onepage mit Cursor verbinden (Schritt-für-Schritt-Anleitung)
Du kannst entweder die Browser-Version von Cursor verwenden oder die App herunterladen.
Die folgenden Anweisungen beziehen sich auf die Nutzung von Cursor im Browser.
Schritt 1
Klicke auf „New Agent“ und anschließend auf „MCPs“.
Schritt 2
Danach klicke auf das +-Symbol und wähle „Custom MCP“ aus.
Trage anschließend folgende Daten ein:
Name: Onepage
Type: URL
Server URL: https://mcp.onepage.io/
Schritt 3
Melde dich nun bei Onepage an.
Schritt 4
Sobald du dich eingeloggt hast, erscheint ein Pop-up mit dem Titel „Cursor möchte auf Ihr Konto zugreifen“.
Klicke dort auf „Zulassen“.
Onepage ist jetzt verbunden und du kannst mit dem Erstellen beginnen.
Hinweis: Wenn du Cursor nutzen willst, um über das Onepage-MCP eine Website in Onepage zu bauen, brauchst du dafür einen kostenpflichtigen Cursor-Account.
Wichtige Beta-Regeln & Best Practices
Die Qualität des Modells ist entscheidend:
MCP hängt stark vom verwendeten KI-Modell ab. Für die besten Ergebnisse empfehlen wir Premium-Modelle wie Claude 3.5 Sonnet. Von kleineren Modellen wie Haiku oder GPT Flash solltest du keine perfekten Ergebnisse erwarten.
Gib immer klaren Kontext:
Teile der KI immer genau mit, an welcher Seite oder welchem Bereich gearbeitet werden soll (z. B. „Füge meiner Startseite einen Kontaktbereich hinzu“).
Seite neu laden, um Änderungen zu sehen:
Die Live-Ansicht befindet sich noch in Entwicklung. Wenn du den Onepage-Editor geöffnet hast, während die KI arbeitet, lade die Seite neu, um die Änderungen zu sehen.
Vorsicht bei großen Änderungen:
Eine erweiterte Versionshistorie ist bereits in Planung. Bis dahin empfehlen wir, bei bestehenden Live-Projekten vorsichtig mit großen oder ungenauen Prompts zu sein, da Inhalte überschrieben werden könnten.
Was passiert, wenn etwas nicht perfekt aussieht?
Wenn ein Layout oder Text beim ersten Versuch nicht genau so aussieht, wie du es dir vorstellst, keine Sorge! Das ist bei der Arbeit mit KI völlig normal. Du musst das nicht manuell korrigieren, sondern kannst deinem KI-Assistenten einfach sagen, was er ändern soll.
Beispiel: Wenn sich eine Überschrift auf deiner neuen Seite überschneidet, kannst du in Claude folgenden Folge-Prompt eingeben:
„Bitte korrigiere den Text 'Menschen hinter Nova Living'. Das Wort 'Living' überschneidet sich mit dem Text darüber.“
Claudes Antwort: „Ich sehe das Problem: Die Überschrift bricht in zwei Zeilen um und überschneidet sich. Ich habe die Schriftgröße und den Zeilenabstand angepasst, sodass sie perfekt in eine Zeile passt, und eine Regel hinzugefügt, damit es auch auf Mobilbildschirmen super aussieht. Die Korrektur ist live!“
Hinweis: Denke daran, deinen Onepage-Editor-Tab neu zu laden, um die Updates der KI live auf deiner Seite zu sehen!
Ergebnis
So erhältst du Zugang zur Beta
MCP ist aktuell nur für Nutzer unserer Beta-Gruppe mit einer aktiven Onepage AI-Mitgliedschaft verfügbar. Alles, was über MCP erstellt wird, erscheint automatisch in deinem Beta-Bereich: https://beta.onepage.io/
Du möchtest einen Kollegen oder Kunden zur Beta einladen? Dann kontaktiere einfach unser Support-Team, um einen Einladungslink zu erhalten.
💡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. 🙂