Dieser Artikel zeigt, wie du Codex ü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 Codex verbinden (Schritt-für-Schritt-Anleitung)
Schritt 1: Codex herunterladen und einrichten
App herunterladen: Lade dir zuerst die Codex-App herunter und installiere sie auf deinem Gerät.
Anmelden: Melde dich in der App an. Du kannst dafür deinen bestehenden ChatGPT-Account oder eine andere verfügbare Login-Methode nutzen.
Verifizierung: Gib deine Telefonnummer ein, um einen Bestätigungscode per SMS zu erhalten. Gib den Code in der App ein, um den Login-Prozess abzuschließen.
So sieht es aus, wenn du dich mit ChatGPT bei Codex anmeldest, nachdem du den Code bestätigt hast
Schritt 2: MCP-Server in Codex hinzufügen
Navigiere in Codex unten links auf „Einstellungen“ und klicke erneut auf „Einstellungen“.
Wähle im Menü den Punkt „MCP Server“ aus.
Klicke auf „Server hinzufügen“ (Add Server) und wähle als Typ „Streamable HTTP“.
Trage anschließend folgende Daten ein:
Name: Onepage
Remote MCP Server URL: https://mcp.onepage.io/
Schritt 3: Berechtigungen anpassen
Wichtig: Damit Codex Befehle und Skripte für Onepage ausführen kann, musst du der App die entsprechenden Rechte erteilen.
Stelle in den Einstellungen des Onepage-Servers sicher, dass die Berechtigungen für die Ausführung von Skripten/Befehlen (Permissions) auf „Erlauben“ (Allow) gesetzt sind. Ohne diesen Schritt schlägt der Login-Versuch fehl.
In dem Video siehst du ein Beispiel für erteilte Berechtigungen. Das ist nur ein Beispiel. Bitte entscheide selbst, was in deinem Fall am besten ist, und ändere die Berechtigungen ganz nach deinen Wünschen.
Schritt 4: Codex mit Onepage verknüpfen
Öffne einen neuen Chat in Codex.
Gib den folgenden Befehl in den Chat ein:
"run codex mcp login onepage"
Schritt 5: Onepage über Codex steuern (Prompts eingeben)
Nach dem erfolgreichen Login kannst du direkt im selben Chat Codex den Befehl geben, deine Website zu gestalten.
Verwende dazu am besten einen klaren, zielgerichteten Prompt. Hier sind zwei Beispiele, die du nutzen kannst:
Für eine einzelne Sektion:
"Erstelle eine moderne Hero-Sektion in Onepage für ein Coaching-Business mit einer auffälligen Überschrift und einem Call-to-Action-Button."
Für eine komplette Website:
"Baue mir eine vollständige Landingpage in Onepage für ein lokales Fitnessstudio. Integriere eine Sektion über uns, eine Leistungsübersicht und ein Kontaktformular."
Codex führt den Befehl dann automatisch über die MCP-Schnittstelle direkt in deinem Onepage-Konto aus.
💡 Tipp für perfekte Ergebnisse: Wie du deine Befehle noch präziser formulierst, um das Maximum aus der KI herauszuholen, erfährst du in unserem Guide Vibe-Coding: So schreibst du effektive Prompts für bessere Ergebnisse.
Prompt-Beispiel:
/create-project name="neon-agency" template="onepage" /add-section type="hero" theme="dark-neon-purple" Layout: Split-Layout. Links: Eine packende Headline für eine Marketing-Agentur ("We Turn Noise Into Market Dominance"), eine kurze Subheadline, ein primärer, leuchtend lilaner CTA-Button und ein sekundärer Ghost-CTA-Button. Rechts: Ein schwebendes, abstraktes Element im Glassmorphism-Stil. Hintergrund: Dunkles Obsidian-Schwarz (#0B0B0F) mit einem subtilen, pulsierenden radialen Unschärfe-Effekt (radial blur) in Neon-Lila. Animationen: Versetztes Einblenden nach oben (staggered slide-up + fade-in) für den Text beim Laden; sanfter Schwebe-Effekt für das rechte Element; Vergrößerung des Maßstabs (expand scale) + neonfarbener Box-Shadow-Glüheffekt beim Hovern über den CTA.
Folge-Prompt:
/update-section type="hero"
Target: Rechtes abstraktes visuelles Element
Erweiterungen:
1. Visuelle Effekte: Verstärke den Glassmorphism-Effekt auf der Hauptkugel (main orb) und ihren kleineren Satelliten-Partikeln. Erhöhe den Backdrop-Blur, füge einen klaren, halbtransparenten weißen Innenrahmen hinzu (1px solid rgba(255,255,255,0.15)) und maximiere die Helligkeit der internen neon-lila und cyanfarbenen Farbverlaufstreifen, damit sie sich stark vom dunklen Hintergrund abheben.
2. Haupt-Animation: Wende eine sanfte, mehrachsige Schwebe-Animation auf die Hauptkugel an. Sie soll langsam auf und ab treiben (Y-Achsen-Verschiebung um 15px) und dabei ihren Rotationswinkel in einer 6-sekündigen Endlosschleife (infinite ease-in-out loop) subtil verändern (rotate: -3deg bis 3deg).
3. Tiefen-Animation: Lass die kleineren, umgebenden Satelliten-Elemente unabhängig voneinander in einer etwas schnelleren, versetzten Schleife (4 Sekunden) mit minimalen X- und Y-Achsen-Verschiebungen schweben, um eine überzeugende 3D-Parallaxe-Illusion zu erzeugen.
Ergebnis:
⚠️ Wichtig: Wenn du eine Seite über den MCP-Workflow mit Codex 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. 🙂