TypeUI MCP Server

Documentation Menu

MCP Server

TypeUI MCP is the recommended way to use TypeUI. It gives your AI coding tool access to design skills, UI prompts, setup guidance, and usage status from one connection.

Add the server

Add this MCP server URL in your AI coding tool:

Server URL

Copy

https://mcp.typeui.sh/mcp

Then sign in with your TypeUI account if your tool asks.

Create a draft

Start from a theme, a markdown ZIP, or a Figma import. TypeUI creates an editable draft design system in your workspace.

Choose a themeUse a TypeUI theme as your starting point.Import markdown filesBring existing design-system docs into TypeUI.Beta preview Import from FigmaGenerate markdown from a Figma file.

Review the markdown

Open View markdown source files and review them before publishing.

Files to review

SKILL.mdThe main entry file. It tells AI tools how to use this design system and where to look next.components/brand.mdLogo and brand asset guidance. Colors, typography, and spacing stay in their own files.components/colors.mdColor tokens and usage guidance for brand, surfaces, text, borders, and states.components/typography.mdFont families, sizes, weights, line heights, headings, labels, and body text rules.components/layout.mdSpacing, grids, containers, responsive behavior, and layout structure rules.components/buttons.mdButton sizes, variants, states, icon spacing, focus behavior, and accessibility rules.+14 more

Edit the source files

Adjust the markdown when you need clearer rules, stronger component guidance, or product-specific language. After publishing, TypeUI MCP uses your saved edits when it helps your AI tool build UI.

Publish for MCP

Publish when ready so your MCP-connected AI tool can use it.

Set up the project

TypeUI works best when your project has one active visual direction. Use one TypeUI design system at a time so your agent gets consistent instructions.

Tip: We recommend removing other UI-related skills and MCPs from this project so they do not give your agent conflicting design instructions.

Start building UI

Build me a landing page.

You can now ask your MCP-connected AI tool to build any UI in plain language. TypeUI supplies the design system, prompt context, and layout guidance behind the scenes.

Review and refine

Review the result in your app and ask for changes:

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.

TypeUI

CardsToggleCompare

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

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

Check usage

Try another request from the same shared prompt style:

Make this dashboard easier to scan.

You can also ask your agent to show TypeUI usage. TypeUI access is required for MCP resources, including design skills and prompt workflows.

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

Next steps

• Use a tool-specific guide: Codex, Claude, Cursor, Grok, Mistral, OpenCode, VS Code, Antigravity, Windsurf, JetBrains, Zed, GitHub Copilot, Cline, Qwen Code, Amp, Goose, Lovable, Replit, or v0.
• Learn how design skills shape the visual direction.
• Learn how UI prompts shape pages and sections.

Getting StartedDesign Systems

TypeUI subscription

Unlock every design system and UI prompt

Get TypeUI access for the full library of curated design systems, UI prompts, downloads, and MCP resources in your AI coding tools.

Full library

Get TypeUI access

Get every current and future design system, UI prompt, and download.

View pricing

Newsletter

Get TypeUI updates in your inbox

Get new TypeUI prompts, design skills, launch notes, and practical AI UI workflows.

Get updates

No spam, you have our word.