@ui-layouts/mcp предоставляет помощникам ИИ несколько ценных инструментов, которые помогут им ** искать, понимать и извлекать компоненты пользовательского интерфейса ** с ui-layouts.com.

Каждый инструмент может использоваться независимо, но они предназначены для совместной работы в качестве полного «компонентного разведочного трубопровода».

###Установка и настройка MCP

Требования

Node.js: >=20.10.0 **MCP клиент: ** Claude Desktop, Cursor, или совместимый MCP клиент

###Быстрый старт

Запускайте @ui-layouts/mcp без установки его глобально npx. Это рекомендуемый способ начать:

Примечание: ** npx автоматически загружает и запускает последнюю версию @ui-layouts/mcp, когда это необходимо. Глобальная установка не требуется!

Использование кода Клода (CLI)

Это регистрирует MCP-сервер под CLI-безопасным именем ui-layouts-mcp, все еще используя npm-пакет @ui-layouts/mcp.

️ Инструменты

] search_components

Поиск по реестру компонентов 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