Use Loora as a design canvas in Codex.
Codex keeps MCP servers in TOML rather than JSON, and it separates registering a server from authenticating against it: codex mcp add writes the entry, codex mcp login runs the OAuth flow. Doing them as two steps means a failed login never leaves you with a half-written config to clean up.
Configuration
~/.codex/config.toml, under a [mcp_servers.loora] table.
codex mcp add loora --url https://mcp.loora.design/mcp
codex mcp login looraThe equivalent written out, if you would rather edit it by hand:
[mcp_servers.loora]
url = "https://mcp.loora.design/mcp"Steps
- Run codex mcp add loora --url … to write the entry into ~/.codex/config.toml.
- Run codex mcp login loora; the browser opens for the OAuth handshake.
- Approve the connection on loora.design and close the tab.
- Run codex mcp list to check that loora is present and authenticated.
- Ask Codex for getDesignContext on a design before it starts editing.
Worth knowing
- The entry is a TOML table, not a JSON object — hand-editing it means [mcp_servers.loora] with url = "…" underneath.
- codex mcp login is a separate step from codex mcp add; adding the server alone leaves every call returning 401.
- codex mcp logout loora drops the token without removing the server, which is the quickest way to re-run a failed handshake.
What you can ask for
Once the server is connected, Codex has the same vocabulary as every other client. Every call commits a validated canvas transaction, so it is inspectable, undoable, and safe to make on a branch.
| Group | Tools |
|---|---|
| Read | listDesigns, getDesignContext, readNode, readTree, searchNodes, listAssets, listVersions |
| Write | createPage, insertNodes, patchNodes, moveNodes, deleteNodes |
| Reuse | createComponent, createInstance, setTokens |
| Motion | setAnimations, animateNodes |
| Look | viewCanvas, viewPage, viewNode, getScreenshot |
| Branches | listBranches, createBranch, proposeBranch, compareBranch, applyBranch, reopenBranch, closeBranch |
| Designs | createDesign, renameDesign, deleteDesign, exportCode |
A good first prompt: ask for listDesigns, then getDesignContext on the one you want, then have it call setTokens before it draws anything. Why that order matters →
Codex and Loora: questions
Where does Codex store the Loora MCP server?
In ~/.codex/config.toml, as a [mcp_servers.loora] table with a url key. codex mcp add writes it for you; editing the file by hand does the same thing.
Why does Codex return 401 from every Loora tool?
The server is registered but not authenticated. Run codex mcp login loora and complete the browser handshake. If it was working before, the token expired — codex mcp logout loora followed by a fresh login clears it.
Can Codex export the design as code?
Yes. exportCode returns HTML and CSS, React/TSX, plain JSX, Tailwind utilities, or the raw JSON document. The export is one-way: edited code never comes back into the canvas.