TypeUI logoTypeUI

Use TypeUI with Codex

Follow this guide to connect Codex to TypeUI MCP and use TypeUI when Codex builds or changes UI.

Open Codex

Open the project you want Codex to work on.

Add TypeUI to Codex

In Codex MCP settings, add the TypeUI server:

Server URL
https://mcp.typeui.sh

Sign in with TypeUI if Codex asks you to authorize the connection.

Choose a theme

Browse the Design Skills page to compare available themes.

Paper theme previewPaperBento theme previewBentoEnterprise theme previewEnterpriseNeobrutalism theme previewNeobrutalismClean theme previewCleanMono theme previewMonoGlassmorphism theme previewGlassmorphismMinimal theme previewMinimalVibrant theme previewVibrantPremium theme previewPremium

After you choose a theme, ask Codex to use it:

I like the Bento style. Let's use it.

Start building UI

Build me a checkout page.

Tell Codex what to build. TypeUI helps it choose the right style and layout.

Review and refine

Run your app and review the page. Ask Codex for targeted improvements:

I don't like this pricing section, give me more variations.

TypeUI will now create three pricing variations so you can compare different layouts before choosing one.

Three pricing cards prompt preview
TypeUITypeUIPro

After you choose a direction, tell Codex which one to use:

I like the comparison one. Let's use it.

Once Codex is connected to TypeUI MCP, you can keep working in the same flow: choose a theme, ask for the interface you need, review the generated variations, and tell Codex which direction to continue with.

MCP ServerClaude