Shadcn UI MCP Server

by heilgar
129
  • Apple
Integrations
  • Supports using Bun as a package manager when installing shadcn/ui components and blocks

  • Integrates with Windsurf (part of Codeium) through MCP configuration

  • Supports using npm as a package manager when installing shadcn/ui components and blocks

Shadcn UI MCP-сервер

Мощный и гибкий сервер MCP (Model Control Protocol), разработанный для улучшения опыта разработки с компонентами пользовательского интерфейса Shadcn. Этот сервер обеспечивает надежную основу для создания и управления компонентами пользовательского интерфейса с помощью передовых инструментов и функциональности.

Функции

Инструменты

Сервер MCP предоставляет набор инструментов, которые можно использовать через протокол управления моделью:

  • list-components : Получить список доступных компонентов shadcn/ui
  • get-component-docs : Получить документацию для определенного компонента
  • install-component : Установка компонента shadcn/ui
  • list-blocks : Получить список доступных блоков shadcn/ui
  • get-block-docs : Получить документацию для определенного блока
  • install-blocks : Установка блока shadcn/ui

Функциональность

  • Управление компонентами
    • Список доступных компонентов shadcn/ui
    • Получите подробную документацию по конкретным компонентам
    • Установка компонентов с поддержкой нескольких менеджеров пакетов (npm, pnpm, yarn, bun)
  • Управление блоками
    • Список доступных блоков shadcn/ui
    • Получить документацию и код для определенных блоков
    • Установка блоков с поддержкой нескольких менеджеров пакетов
  • Поддержка менеджера пакетов
    • Гибкая поддержка среды выполнения для npm, pnpm, yarn и bun
    • Автоматическое определение предпочитаемого пользователем менеджера пакетов

Установка

Предпосылки

  • Node.js (v18 или выше)
  • менеджер пакетов npm или yarn

Конфигурация рабочего стола Клода

Для использования с Claude Desktop добавьте конфигурацию сервера:

В MacOS: ~/Library/Application Support/Claude/claude_desktop_config.json В Windows: %APPDATA%/Claude/claude_desktop_config.json

{ "mcpServers": { "shadcn-ui-server": { "command": "npx", "args": ["@heilgar/shadcn-ui-mcp-server"] } } }

Конфигурация виндсерфинга

Добавьте это в ваш ./codeium/windsurf/model_config.json :

{ "mcpServers": { "shadcn-ui-server": { "command": "npx", "args": ["@heilgar/shadcn-ui-mcp-server"] } } }

Конфигурация курсора

Добавьте это в ваш .cursor/mcp.json :

{ "mcpServers": { "shadcn-ui-server": { "command": "npx", "args": ["@heilgar/shadcn-ui-mcp-server"] } } }

Разработка и отладка

Местное развитие

  1. Установить зависимости:
npm install
  1. Сборка сервера:
npm run build

Отладка

Поскольку серверы MCP взаимодействуют через stdio, отладка может быть сложной. Мы рекомендуем использовать MCP Inspector для отладки:

npm run inspector

Инспектор предоставит URL-адрес для доступа к инструментам отладки в вашем браузере, что позволит вам:

  • Мониторинг связи MCP
  • Проверка вызовов и ответов инструментов
  • Отладка поведения сервера
  • Просмотр журналов в реальном времени

Связанные проекты и зависимости

Этот проект создан с использованием следующих инструментов и библиотек:

  • Model Context Protocol TypeScript SDK — официальный TypeScript SDK для серверов и клиентов MCP
  • MCP Inspector — инструмент отладки для серверов MCP
  • Cheerio — быстрая, гибкая и экономичная реализация ядра jQuery, разработанная специально для сервера

Лицензия

Лицензия MIT — можете свободно использовать этот проект в своих целях.

Внося вклад

Вклады приветствуются! Пожалуйста, не стесняйтесь отправлять запрос на включение.

You must be authenticated.

A
security – no known vulnerabilities
F
license - not found
A
quality - confirmed to work

Сервер протокола управления моделями, который позволяет пользователям обнаруживать, устанавливать и управлять компонентами и блоками пользовательского интерфейса Shadcn посредством взаимодействия на естественном языке в совместимых инструментах искусственного интеллекта.

  1. Функции
    1. Инструменты
    2. Функциональность
  2. Установка
    1. Предпосылки
    2. Конфигурация рабочего стола Клода
    3. Конфигурация виндсерфинга
    4. Конфигурация курсора
  3. Разработка и отладка
    1. Местное развитие
    2. Отладка
  4. Связанные проекты и зависимости
    1. Лицензия
      1. Внося вклад

        Related MCP Servers

        • A
          security
          F
          license
          A
          quality
          A Model Context Protocol server that allows secure execution of pre-approved commands, enabling AI assistants to safely interact with the user's system.
          Last updated -
          1
          3
          18
          JavaScript
        • -
          security
          A
          license
          -
          quality
          A Model Context Protocol server that enables AI assistants to interact with the Godot game engine, allowing them to launch the editor, run projects, capture debug output, and control project execution.
          Last updated -
          62
          JavaScript
          MIT License
        • -
          security
          F
          license
          -
          quality
          A comprehensive Model Context Protocol server implementation that enables AI assistants to interact with file systems, databases, GitHub repositories, web resources, and system tools while maintaining security and control.
          Last updated -
          16
          TypeScript
        • -
          security
          F
          license
          -
          quality
          A Model Control Protocol server that enables AI assistants to interact with Metabase databases, allowing models to explore database schemas, retrieve metadata, visualize relationships, and execute actions.
          Last updated -
          2
          Python

        View all related MCP servers

        MCP directory API

        We provide all the information about MCP servers via our MCP API.

        curl -X GET 'https://glama.ai/api/mcp/v1/servers/heilgar/shadcn-ui-mcp-server'

        If you have feedback or need assistance with the MCP directory API, please join our Discord server