TypeUI logoTypeUI

Getting started

Start with the setup guide for your AI coding tool. After TypeUI is connected, your agent can browse design systems, install the one you choose, and use UI prompts when you ask it to build or improve UI in your project.

Requirements

  • An AI coding tool with MCP support
  • A TypeUI account
  • A project where the agent can edit UI files

Install TypeUI

Choose the guide for your AI coding tool:

Codex logo

Codex

Install TypeUI in Codex.

Open guide
Claude logo

Claude

Install TypeUI in Claude.

Open guide
Cursor logo

Cursor

Install TypeUI in Cursor.

Open guide
xAI logo

Grok

Add TypeUI MCP to Grok.

Open guide
OpenCode logo

OpenCode

Install TypeUI in OpenCode.

Open guide
Visual Studio Code logo

VS Code

Install TypeUI in VS Code.

Open guide
Antigravity logo

Antigravity

Install TypeUI in Antigravity.

Open guide
Windsurf logo

Windsurf

Install TypeUI in Windsurf.

Open guide
Junie logo

JetBrains

Install TypeUI in JetBrains.

Open guide
Zed logo

Zed

Add TypeUI MCP to Zed.

Open guide
Cline logo

Cline

Add TypeUI MCP to Cline.

Open guide
Qwen logo

Qwen Code

Add TypeUI MCP to Qwen Code.

Open guide
Amp logo

Amp

Add TypeUI MCP to Amp.

Open guide
Goose logo

Goose

Add TypeUI MCP to Goose.

Open guide

If you use another MCP-compatible tool, add the TypeUI MCP server manually:

Server URL
https://mcp.typeui.sh

If your tool asks you to sign in, use your TypeUI account.

Open your project

Open the project where you want the agent to build UI.

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

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

Start building UI

Build me a landing page.

You can now ask your AI coding tool to build any UI in plain language. TypeUI supplies the theme, prompt context, and layout guidance behind the scenes.

Review and refine

Run your app, inspect the result, and ask for product-focused changes in plain language:

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 your agent which one to use:

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

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

Resources

Next steps

Start with your tool guide, then ask your agent to use TypeUI in the current project.

IntroductionMCP Server