This article shows you how to connect Codex to Onepage via the Model Context Protocol (MCP).
MCP is the interface between Onepage and external AI assistants, allowing you to manage pages, content, and website structures directly through these tools. You can find a detailed explanation of MCP in this article.
📌 Note: When creating a Onepage website via MCP, no Onepage AI credits are consumed. Instead, you use the tokens of the respective AI tool (e.g., ChatGPT, Claude, or Cursor) that is connected to Onepage.
Connecting Onepage with Codex (Step-by-Step Guide)
📌 Please note: The following steps and screenshots reflect the tool’s interface at the time this article was created. Interfaces or labels may have changed since then. If you notice any differences, we recommend checking the current instructions in the tool, visiting the provider’s help center, or contacting their support team.
Step 1: Download and Set Up Codex
Download the App: First, download the Codex app and install it on your device.
Log In: Log into the app. You can use your existing ChatGPT account or any other available login method.
Verification: Enter your phone number to receive a confirmation code via SMS. Enter the code in the app to complete the login process.
This is what it looks like when you log into Codex with ChatGPT after confirming the code.
Step 2: Add MCP Server in Codex
Navigate to "your profile" in the bottom left corner of Codex, and click on "Settings".
Select "MCP servers" from the menu.
Click on "Add Server" and select "Streamable HTTP" as the type.
Then, enter the following details:
Name: Onepage
Remote MCP Server URL:
https://mcp.onepage.io/
Step 3: Adjust Permissions
Important: To allow Codex to execute commands and scripts for Onepage, you must grant the app the appropriate permissions.
In the Onepage server settings, make sure that the Permissions for executing scripts/commands are set to "Allow". Without this step, the login attempt will fail.
In the video, you can see an example of granted permissions. This is only an example. Please decide for yourself what works best in your case and change the permissions according to your preferences.
Step 4: Link Codex with Onepage
Open a new chat in Codex.
Enter the following command into the chat:
"run codex mcp login onepage"
Step 5: Control Onepage via Codex (Enter Prompts)
After a successful login, you can give Codex commands to design your website directly within the same chat.
It is best to use a clear, targeted prompt. Here are two examples you can use:
For a single section:
"Create a modern hero section in Onepage for a coaching business with a catchy headline and a call-to-action button."
For a complete website:
"Build me a complete landing page in Onepage for a local gym. Include an about us section, a services overview, and a contact form."
Codex will then automatically execute the command via the MCP interface directly inside your Onepage account.
💡 Tip for perfect results: To learn how to formulate your commands even more precisely and get the most out of the AI, check out our guide Vibe-Coding: How to write effective prompts for better results.
Prompt Example:
/create-project name="neon-agency" template="onepage" /add-section type="hero" theme="dark-neon-purple" Layout: Split-Layout. Left: A catchy headline for a marketing agency ("We Turn Noise Into Market Dominance"), a short subheadline, a primary, glowing purple CTA button, and a secondary ghost CTA button. Right: A floating, abstract element in glassmorphism style. Background: Dark obsidian black (#0B0B0F) with a subtle, pulsing radial blur effect in neon purple. Animations: Staggered slide-up + fade-in for the text on load; gentle floating effect for the right element; expand scale + neon box-shadow glow effect on hover over the CTA.
Follow-up Prompt:
/update-section type="hero" Target: Right abstract visual element Enhancements: 1. Visual Effects: Intensify the glassmorphism effect on the main orb and its smaller satellite particles. Increase the backdrop blur, add a crisp, semi-transparent white inner border (1px solid rgba(255,255,255,0.15)), and maximize the brightness of the internal neon-purple and cyan gradient streaks so they pop sharply against the dark background. 2. Primary Animation: Apply a smooth, multi-axis floating animation to the main orb. It should drift slowly up and down (Y-axis displacement by 15px) while subtly shifting its rotation angle (rotate: -3deg to 3deg) in an infinite ease-in-out loop of 6 seconds. 3. Depth Animation: Have the smaller surrounding satellite elements float independently in a slightly faster, staggered loop (4 seconds) with minimal X and Y-axis displacements to create a convincing 3D parallax illusion.
Result:
💡 Do you have feedback on this help article? Feel free to share it with us via live chat or at support@onepage.io so we can keep it up to date. 🙂