Update v5.0 - Preline MCP, AI Prompts, Animated Icons and more. Visit Changelog

........ Github
Figma X (Twitter)

Codex Preline MCP Setup

Connect Preline UI MCP to Codex CLI or the Codex desktop app, then ask Codex to build with real Preline components, blocks, documentation, and framework guidance.

Setup overview

The hosted Preline UI MCP server is ready to use from Codex. It uses Streamable HTTP and requires an API key, sent as a bearer token.

MCP endpoint
https://mpc.preline.co
Transport
Streamable HTTP
Authentication
Authorization: Bearer TOKEN_KEY

Once connected, Codex can discover Preline catalog items, fetch the matching source, and place HTML, CSS, scripts, and init code in the right files. For broader MCP prompting guidance, see the Preline UI MCP Server guide.

For the most up-to-date instructions for adding MCP servers, see the official guides for Codex CLI and the ChatGPT desktop app.

Setup

Choose the Codex surface you use. Both surfaces share the same MCP configuration, so you only need to complete one setup path.

  1. Export your API key

    Codex sends the bearer token from an environment variable rather than a literal value in the configuration file, so export your key first:

    Terminal 
                              
                            export PRELINE_MCP_TOKEN="TOKEN_KEY"

  2. Add the Preline MCP server

    Add the server with the CLI:

    Terminal 
                          
                        codex mcp add preline --url https://mpc.preline.co --bearer-token-env-var PRELINE_MCP_TOKEN

  3. Verify the connection

    Confirm Codex sees the server:

    Terminal 
                          
                        codex mcp list

    You should see preline listed.

Install Preline Agent Skills

MCP gives Codex access to the Preline catalog. Agent Skills add Preline-specific workflow instructions, so Codex is more likely to follow the right discovery, placement, theming, and validation habits.

Install the Preline skills from your project root:

Terminal 
                      
                        npx skills add htmlstreamofficial/preline

For Codex this installs into .codex/skills/ (project) or ~/.codex/skills/ (user). For the full skills workflow and supported agent paths, see How to set up Agent Skills.

Advanced configuration

Codex reads MCP servers from ~/.codex/config.toml by default, or from a project-scoped .codex/config.toml in trusted projects. To configure Preline without the CLI, add the server directly:

~/.codex/config.toml 
                      
                        [mcp_servers.preline]
                        url = "https://mpc.preline.co"
                        bearer_token_env_var = "PRELINE_MCP_TOKEN"

Prefer a literal header instead of an env var? Codex also accepts a static http_headers map, for example http_headers = { "Authorization" = "Bearer TOKEN_KEY" }. Avoid this in a project-scoped file committed to version control; the environment-variable approach keeps the token out of the file.

Build with Preline

Prompt Codex in plain language. Name Preline, describe the component or block you want, and mention the file or framework context when it matters.

Prompt 
                      
                        Using Preline, add a pricing comparison section to app/pricing.html.
                        Use the default theme and keep the existing page header.
Prompt 
                      
                        Use Preline MCP to add a modal with a form.
                        Wire the required scripts into the existing layout.
                        Keep my current Tailwind setup.
Prompt 
                      
                        Show me the Preline dropdown JavaScript API.
                        Then update this dropdown to close after item selection.

Troubleshooting

Codex fails to start, or errors immediately with "failed to load configuration".

This means config.toml has a TOML syntax error (an unclosed table or missing quote is enough to break the whole file) - Codex can't start at all until it's fixed, not just the preline entry. The error message includes the exact line and column.

Codex says the server is unreachable or times out.

Run codex mcp list or codex mcp get preline to confirm the entry and URL are what you expect - but note neither command checks live connectivity, only the saved config. To actually test the connection, ask Codex to use a Preline tool and watch for the error, or curl the endpoint directly (below).

The server responds with "Missing API key".

The request reached the server without an Authorization: Bearer TOKEN_KEY header. Confirm PRELINE_MCP_TOKEN is exported in the same shell session that launches Codex, and that bearer_token_env_var in config.toml matches that variable name exactly.

Codex writes generic Tailwind CSS instead of using Preline.

Make the instruction explicit: say Use Preline MCP or Using Preline, then name the component, block, theme, and target file.

© 2026 Preline Labs.