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
Create a design system
Start from a theme, a markdown ZIP, or a Figma import. TypeUI creates an editable design system and publishes version 1 in your workspace.
Review the markdown
Open Markdown files and review the generated source.
Files to review
Edit the source files
Adjust the markdown when you need clearer rules, stronger component guidance, or product-specific language. TypeUI MCP uses your latest saved project package when it helps your AI tool build UI.
Use the latest package
After edits, ask your MCP-connected AI tool to use the project again. TypeUI will pull the latest saved brand kit, design skill, and markdown files.
Install TypeUI
Choose the guide for your AI coding tool:
Choose your AI tool
Codex
Connect TypeUI to Codex.
Claude
Connect TypeUI to Claude.
Cursor
Connect TypeUI to Cursor.
Grok
Connect TypeUI to Grok.
Open guide
Z.ai
Connect TypeUI to Z.ai.
Open guide
Hermes
Connect TypeUI to Hermes.
Open guide
OpenClaw
Connect TypeUI to OpenClaw.
Open guide
Eve
Connect TypeUI to Eve.
Open guide
Mistral
Connect TypeUI to Mistral.
Open guide
OpenCode
Connect TypeUI to OpenCode.
Open guide
VS Code
Connect TypeUI to VS Code.
Open guide
Antigravity
Connect TypeUI to Antigravity.
Open guide
Windsurf
Connect TypeUI to Windsurf.
Open guide
JetBrains
Connect TypeUI to JetBrains.
Open guide
Zed
Connect TypeUI to Zed.
Open guide
GitHub Copilot
Connect TypeUI to GitHub Copilot.
Open guide
Cline
Connect TypeUI to Cline.
Open guide
Qwen
Connect TypeUI to Qwen.
Open guide
Amp
Connect TypeUI to Amp.
Open guide
Goose
Connect TypeUI to Goose.
Open guide
Lovable
Connect TypeUI to Lovable.
Open guide
Replit
Connect TypeUI to Replit.
Open guide
v0
Connect TypeUI to v0.
Open guideIf you use another MCP-compatible tool, add the TypeUI MCP server manually:
https://mcp.typeui.sh/mcp
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.
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.
TypeUIAfter 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 design system, ask for the interface you need, review the generated variations, and tell your agent which direction to continue with.
Resources
- MCP Server explains the main MCP workflow.
- Design skills explains visual systems.
- UI prompts explains section and page prompts.
Next steps
Start with your tool guide, then ask your agent to use TypeUI in the current project.