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 design system 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.
Z.ai
Connect TypeUI to Z.ai.
Hermes
Connect TypeUI to Hermes.
OpenClaw
Connect TypeUI to OpenClaw.
Eve
Connect TypeUI to Eve.
Mistral
Connect TypeUI to Mistral.
OpenCode
Connect TypeUI to OpenCode.
VS Code
Connect TypeUI to VS Code.
Antigravity
Connect TypeUI to Antigravity.
Windsurf
Connect TypeUI to Windsurf.
JetBrains
Connect TypeUI to JetBrains.
Zed
Connect TypeUI to Zed.
GitHub Copilot
Connect TypeUI to GitHub Copilot.
Cline
Connect TypeUI to Cline.
Qwen
Connect TypeUI to Qwen.
Amp
Connect TypeUI to Amp.
Goose
Connect TypeUI to Goose.
Lovable
Connect TypeUI to Lovable.
Replit
Connect TypeUI to Replit.
v0
Connect TypeUI to v0.
If 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.