CatchUI — a UI pattern MCP server: "what is this UI element called?"

A hosted MCP server that tells Claude, ChatGPT, Cursor and any MCP client the proper name of a UI element from a plain-language description — "the bar at the bottom of an app", "the three dots in the corner", "the black bar at the top of iPhone", 「底部的导航栏」 — from a hand-curated, bilingual (English / 简体中文) catalog of 50 UI patterns, including the phone and computer system UI around apps.

It's hosted: nothing to clone, install or build. Add one URL.

• Server URL (no account, no API key): https://catchui.com/api/mcp · transport: streamable-http
• Setup guide: https://catchui.com/mcp (中文: https://catchui.com/zh/mcp)
• Catalog: https://catchui.com/catalog
• Privacy: https://catchui.com/legal/privacy.html (section 5 covers the MCP server)

This repository is the public manifest for the hosted CatchUI MCP server — see server.json. It is published to the official MCP registry as com.catchui/ui-patterns. The server's source is not in this repository.

Tools

All six are read-only lookups of public catalog data.

Tool	What it returns
search_ui_patterns	Pattern names (English and Chinese), definitions, the matching Q&A and the catalog URL for a plain-language description or question.
get_ui_pattern	The full entry for one pattern id: definitions, aliases, how people describe it, component names, an implementation prompt, Q&A, related patterns.
list_ui_patterns	The whole catalog, grouped by family, optionally one family.
compare_ui_patterns	How 2–4 look-alikes differ — modal vs popover vs bottom sheet, tabs vs segmented control, Dynamic Island vs notch.
get_ui_component_names	A pattern's names in SwiftUI, UIKit, Jetpack Compose, Android Views, Flutter and HTML — or from a component such as UISegmentedControl back to the pattern and its equivalents.
get_implementation_prompt	Ready-to-use build instructions for 1–6 patterns, in English or Chinese, for Claude Code, Cursor or any AI coding tool.

Connect

Claude (claude.ai / Claude Desktop)

Settings → Connectors → Add custom connector → paste https://catchui.com/api/mcp.

Claude Code

claude mcp add --transport http catchui https://catchui.com/api/mcp

Cursor, VS Code and other clients that read .mcp.json

{
  "mcpServers": {
    "catchui": { "type": "http", "url": "https://catchui.com/api/mcp" }
  }
}

ChatGPT

Settings → Apps & Connectors → enable Developer mode → Create → server URL https://catchui.com/api/mcp, authentication "No authentication".

Try asking

• "What is the bar at the bottom of an app called?"
• "Modal, popover or bottom sheet — which should a share menu be?"
• "What is UISegmentedControl called in Flutter?"
• "Give me build instructions for a search field with filter chips and pagination."
• 「iPhone 顶部的黑条叫什么？」

Privacy

No account, no cookies. The server only reads the public catalog; it never receives screenshots, libraries or account data and cannot read your assistant's conversations, memory or files. Tool arguments are used to answer the request and are not stored. Full policy: https://catchui.com/legal/privacy.html

Support

[email protected] · https://catchui.com