@ui-layouts/mcp] ui-layouts.com에서 search, understand, retrieve UI Components를 돕기 위해 몇 가지 귀중한 도구와 AI 조수를 제공합니다.

각 도구는 독립적으로 사용할 수 있지만, 그들은 완전한 "component exploration 파이프라인"으로 작업하도록 설계되었습니다.

☸ 설치 및 MCP 설정

요구 사항

• **Node.js: ** >=20.10.0
• MCP 클라이언트: Claude Desktop, Cursor, 또는 호환 MCP 클라이언트

빠른 시작

npx]를 사용하여 전 세계적으로 설치하지 않고 npx를 실행합니다. 시작하는 것이 좋습니다:

└ 참고: npx] 자동적으로 다운로드하고 필요한 경우 @ui-layouts/mcp의 최신 버전을 실행합니다. 글로벌 설치가 필요 없습니다!

Claude 코드 사용 (CLI)

이것은 CLI-safe name ui-layouts-mcp]에서 MCP 서버를 등록하지만 여전히 @ui-layouts/mcp npm 패키지를 사용하여.

---

672️ 도구

## ## [T7]]

**ui-layouts.com ** 구성 요소 이름, 키, 그룹, 태그 또는 href에 의해 구성 요소 레지스트리. 표준을 충족하고 각 경기에 대한 자세한 정보를 반환하는 구성 요소를 찾는 지능형 일치를 수행합니다.

**이 유용 할 때 **

@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: npx will automatically download and run the latest version of @ui-layouts/mcp when 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 page
• text — plain text extracted from HTML
• snippet — the main section (e.g. or content 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 componentNames for source code lookup

---

💾 get_source_code