TypeUI logoTypeUI

Use TypeUI with Claude

Follow this guide to connect Claude to TypeUI MCP and use TypeUI when Claude writes or refactors frontend UI.

Open Claude

Open your project in Claude Code or another Claude-powered coding environment with MCP support.

Add TypeUI to Claude

In your MCP settings, add the TypeUI server:

Server URL
https://mcp.typeui.sh

Sign in with your TypeUI account if Claude asks.

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 Claude to use it:

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

Start building UI

Build me a checkout page.

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

Review and refine

Run your app, inspect the UI, and ask Claude 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 Claude which one to use:

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

Once Claude 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 Claude which direction to continue with.

CodexCursor