このページは AI により自動翻訳されています。技術的な詳細は原文をご確認ください。 原文を見る
MCP server for AI-powered UI component discovery on ui-layouts.com — search, docs, metadata, and TSX source in one pipeline.
概要
@ui-layouts/mcp provides AI assistants with several valuable tools to help them from ui-layouts.com. Each tool can be used independently, but they are designed to work together as a complete "component exploration pipeline." - >=20.10.0 - Claude Desktop, Cursor, or compatible MCP client Run @ui-layouts/mcp without installing it globally using npx. This is the recommended way to get started: 💡 npx will automatically download and run the latest version of @ui-layouts/mcp when needed. No global installation required! This registers the MCP server under the CLI-safe name ui-layouts-mcp while still using the @ui-layouts/mcp npm package. Search through the component registry by component name, key, group, tags, or href. It performs intelligent matching to find components that meet your criteria and returns detailed information about each match.
README
以下は原文 README の抜粋です。原文を見る。
@ui-layouts/mcp
@ui-layouts/mcp provides AI assistants with several valuable tools to help them search, understand, and retrieve UI components from ui-layouts.com.
Each tool can be used independently, but they are designed to work together as a complete “component exploration pipeline.”
📦 Installation & MCP Setup
Requirements
- Node.js: >=20.10.0
- MCP Client: Claude Desktop, Cursor, or compatible MCP client
Quick Start
Run @ui-layouts/mcp without installing it globally using npx. This is the recommended way to get started:
{
"mcpServers": {
"ui-layouts-mcp": {
"type": "stdio",
"command": "npx",
"args": ["@ui-layouts/mcp"]
}
}
}
💡 Note:
npxwill automatically download and run the latest version of@ui-layouts/mcpwhen needed. No global installation required!
Using with Claude Code (CLI)
claude mcp add ui-layouts-mcp --scope user -- npx -y @ui-layouts/mcp
This registers the MCP server under the CLI-safe name ui-layouts-mcp while still using the @ui-layouts/mcp npm package.
🛠️ Tools
🔍 search_components
Search through the ui-layouts.com component registry by component name, key, group, tags, or href. It performs intelligent matching to find components that meet your criteria and returns detailed information about each match.
When it’s useful
- To find a specific UI component by name or tag
- To explore available components by category
- To discover components with particular design or functional features
📘 get_docs
Fetch the complete documentation for a component from ui-layouts.com. You can choose how much content to return, including:
raw_html— the original HTML of the documentation pagetext— plain text extracted from HTMLsnippet— the main section (e.g.orcontent only)
When it’s useful
- To read implementation guides and examples
- To view a component’s structure, props, or variants
- To extract technical explanations for AI-assisted reasoning or integration
🧩 get_component_meta
Fetch structured HTML metadata for a specific component from ui-layouts.com.
It includes fields such as title, description, keywords, Open Graph, Twitter card,
and even custom metadata like component-names and available-components.
When it’s useful
- To understand a component’s intent or SEO context
- To generate previews or summaries automatically
- To retrieve linked
componentNamesfor source code lookup
💾 get_source_code
インストール
npx @ui-layouts/mcp設定
{
"mcpServers": {
"ui-layouts-mcp": {
"type": "stdio",
"command": "npx",
"args": ["@ui-layouts/mcp"]
}
}
}