TypeUI

Design systems, UI prompts, and layout variations for AI coding tools.

Quick Install

Automated & IDE Setup

Copy the AI prompt to install this server into Claude Code, Cursor, or another agent — or use 1-click editor setup below.

Add to Cursor Add to VS Code

Manual Client & Custom JSON ConfigExpand JSON ▾

Client Config & Setup

Choose your client or environment

Target File:~/Library/Application Support/Claude/claude_desktop_config.json

claude_desktop_config.json

{
  "mcpServers": {
    "typeui": {
      "command": "npx",
      "args": [
        "-y",
        "typeui"
      ]
    }
  }
}

💡 Paste the JSON block into your client's configuration file under mcpServers, then restart the application.

Documentation Overview

TypeUI - Build better UI with AI

TypeUI is an AI-first platform where you can use design skills, UI prompts, and other resources to enhance AI capabilities to generate better user interfaces and design when building websites and applications. The resources from this repository will work with any AI provider, given they support markdown files or general prompting.

Getting started

Install TypeUI where you build. Connect your AI coding tool to TypeUI MCP, then ask for UI in plain language while TypeUI supplies design systems, prompts, and layout variation guidance.

Codex _{Connect Codex to TypeUI MCP automatically with the TypeUI Codex plugin.} Install in Codex →	Claude _{Give Claude access to curated design guidance while it writes or refactors UI.} Install in Claude →	Cursor _{Use the TypeUI Cursor plugin while Cursor builds screens, sections, and variations.} Install in Cursor →
Grok _{Add the hosted TypeUI MCP server to Grok.} Open Grok guide →	Z.ai _{Add the hosted TypeUI MCP server to Z.ai ZCode.} Open Z.ai guide →	Hermes _{Install the TypeUI MCP plugin for Hermes Agent.} Open Hermes guide →
OpenClaw _{Add the hosted TypeUI MCP server to OpenClaw.} Open OpenClaw guide →	Eve _{Add TypeUI design skills to Eve agents.} Open Eve guide →	Mistral _{Add the hosted TypeUI MCP server to Mistral.} Open Mistral guide →
OpenCode _{Give OpenCode access to TypeUI design systems and prompts.} Install in OpenCode →	VS Code _{Connect GitHub Copilot in VS Code to TypeUI MCP.} Install in VS Code →	Antigravity _{Connect Antigravity to TypeUI MCP for UI generation workflows.} Open Antigravity guide →
Windsurf _{Connect Windsurf Cascade to TypeUI MCP.} Install in Windsurf →	JetBrains _{Connect JetBrains AI Assistant or Junie to TypeUI MCP.} Install in JetBrains →	Zed _{Add the hosted TypeUI MCP server to Zed.} Open Zed guide →
GitHub Copilot _{Add the hosted TypeUI MCP server to GitHub Copilot.} Open GitHub Copilot guide →	Cline _{Add the hosted TypeUI MCP server to Cline.} Install in Cline →	Qwen _{Add the hosted TypeUI MCP server to Qwen Code.} Open Qwen guide →
Amp _{Add the hosted TypeUI MCP server to Amp.} Open Amp guide →	Goose _{Add the hosted TypeUI MCP server to Goose.} Open Goose guide →	Lovable

Read the full README →View source on GitHub →

Related MCP Servers

View all in Developer Tools View all alternatives

Reviews

No reviews yet — be the first to share how this listing worked for you.

Frequently Asked Questions about TypeUI

Add the following block to your claude_desktop_config.json under mcpServers: "mcpServers": { "typeui": { "command": "npx", "args": ["-y", "TypeUI"] } }

AllMCPs Directory Badge

Full Badge Customizer

Showcase your server listing on GitHub or your project documentation. Embed this dynamic SVG badge to highlight official listing status and live engagement.

Badge Style:

Live Dynamic SVG Preview

Markdown (GitHub README)

[![AllMCPs](https://allmcps.com/api/badge/typeui?style=directory)](https://allmcps.com/mcp/typeui)

HTML Embed

<a href="https://allmcps.com/mcp/typeui"><img src="https://allmcps.com/api/badge/typeui?style=directory" alt="TypeUI on AllMCPs" /></a>

Technical Specs & Signals

CategoryDeveloper Tools

27Quality signal: Emerging · 27/100How this signal is calculated ▾

Server availabilityNot measured

Not scored for repo-hosted servers — we can't reach the running server, only its GitHub page. Hosted MCP endpoints are health-checked live.

Verified ownership8/20

Documentation & tools11/30

Adoption & activity1/15

Community engagement0/10

A guidance signal from public completeness & health data — not a user rating. New listings start lower and rise as they add docs, get verified, and grow adoption. Signals we can't observe for a listing are skipped, not counted against it.

★ Spotlight Slot

Feature Your MCP Server

Get maximum visibility for your server across our directory, search results, and detail pages.

Spotlight Your Server

Own this project?

This directory is pre-filled from public sources. Claim via GitHub README, site badge, or DNS TXT to unlock edit access and the Official badge — proof is checked automatically, then reviewed by our team.

Free dofollow backlink: add your website and place the AllMCPs badge on it — no claim needed. We detect it automatically and keep it verified as long as the badge stays live.

Claim & get free dofollow

Share & Embed

Add our SVG badge (dark/light directory styles) or embeddable widget to your site.

Explore more

More in 💻 Developer Tools →Best MCP servers for Developers →Alternatives to TypeUI →Install in Claude Desktop Install in Cursor Install in VS Code