@ncds/ui-admin-mcp 1.6.4-alpha.2 → 1.6.4-alpha.3

package/README.md

@@ -0,0 +1,94 @@
+<div align="center">
+
+<img src="./assets/logo.svg" alt="NCUA MCP" width="480" />
+
+<br />
+
+[![npm version](https://img.shields.io/npm/v/@ncds/ui-admin-mcp?color=E28AFC&label=npm)](https://www.npmjs.com/package/@ncds/ui-admin-mcp)
+[![node](https://img.shields.io/badge/node-%3E%3D20-brightgreen)](https://nodejs.org)
+[![MCP](https://img.shields.io/badge/MCP-compatible-6366f1)](https://modelcontextprotocol.io)
+[![license](https://img.shields.io/badge/license-MIT-blue)](LICENSE)
+
+</div>
+
+# @ncds/ui-admin-mcp
+
+NHN Commerce 어드민 디자인 시스템([NCDS UI Admin](https://www.npmjs.com/package/@ncds/ui-admin))의 AI 연동 서버입니다.
+
+AI 에이전트(Claude 등)와 대화하면서 어드민 컴포넌트를 검색하고, 속성을 확인하고, 정확한 HTML과 React 사용법을 받을 수 있습니다.
+
+> 💡 `@ncds/ui-admin` 패키지 설치 없이, `npx` 한 줄로 바로 사용할 수 있습니다.
+
+## 🎯 이런 분들이 사용하면 좋아요
+
+- 🎨 UX 가이드 작성 시 **컴포넌트 종류와 속성**을 확인하고 싶은 기획자/디자이너
+- 💻 어드민 화면 개발 시 **정확한 컴포넌트 사용법**이 필요한 개발자
+- 🤖 **AI 기반 개발 워크플로우**를 사용하는 팀
+
+## 🚀 시작하기
+
+### Claude Desktop
+
+1. Claude Desktop 앱의 **설정(⚙️)** > **Developer** > **Edit Config** 를 클릭하세요
+2. 열린 파일에 아래 내용을 붙여넣으세요:
+
+```json
+{
+  "mcpServers": {
+    "ncds-ui-admin": {
+      "command": "npx",
+      "args": ["-y", "@ncds/ui-admin-mcp"]
+    }
+  }
+}
+```
+
+3. 파일을 저장하고, Claude Desktop을 **완전히 종료(Cmd+Q)** 후 다시 실행하세요
+4. 새 대화에서 "어드민 컴포넌트 목록 보여줘"라고 물어보면 동작합니다!
+
+> ⚠️ **Node.js 20 이상**이 설치되어 있어야 합니다. 터미널에서 `node -v`로 확인할 수 있습니다. 설치가 필요하면 [nodejs.org](https://nodejs.org)에서 다운로드하세요.
+
+### Claude Code
+
+프로젝트 루트에 `.mcp.json` 파일을 만들어주세요:
+
+```json
+{
+  "mcpServers": {
+    "ncds-ui-admin": {
+      "command": "npx",
+      "args": ["-y", "@ncds/ui-admin-mcp"]
+    }
+  }
+}
+```
+
+## 💬 사용 예시
+
+Claude에게 자연어로 물어보면 됩니다:
+
+```
+"어드민 컴포넌트 목록 보여줘"
+"버튼 컴포넌트 어떤 속성 사용할 수 있어?"
+"input 컴포넌트 HTML 마크업 보여줘"
+"이 HTML에 사용된 클래스가 맞는지 검증해줘"
+```
+
+## 🛠️ 제공하는 기능
+
+| 기능                  | 설명                                                           |
+| --------------------- | -------------------------------------------------------------- |
+| 📋 컴포넌트 목록 조회 | 사용 가능한 전체 UI 컴포넌트를 확인합니다                      |
+| 🔍 컴포넌트 검색      | 키워드로 원하는 컴포넌트를 찾습니다                            |
+| 🧩 HTML 마크업 조회   | 컴포넌트의 정확한 HTML 구조와 React 사용 예시를 확인합니다     |
+| ⚙️ 속성(Props) 조회   | 컴포넌트에 사용할 수 있는 옵션과 기본값을 확인합니다           |
+| ✅ HTML 검증          | 작성한 HTML의 클래스명이 올바른지 검증하고 자동으로 수정합니다 |
+| 📡 서버 상태 확인     | 연결 상태, 버전, 사용 규칙을 확인합니다                        |
+
+## 📌 요구사항
+
+- Node.js 20 이상
+
+## 📜 License
+
+Copyright © NHN Commerce. All rights reserved.

package/bin/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "1.6.4-alpha.2";
+export declare const VERSION = "1.6.4-alpha.3";

package/bin/version.js

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VERSION = void 0;
-exports.VERSION = '1.6.4-alpha.2';
+exports.VERSION = '1.6.4-alpha.3';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ncds/ui-admin-mcp",
-  "version": "1.6.4-alpha.2",
+  "version": "1.6.4-alpha.3",
   "description": "NCDS UI Admin MCP 서버 — AI 에이전트가 NCUA 컴포넌트를 조회하고 HTML을 검증할 수 있는 MCP 서버",
   "bin": {
     "ncua-mcp": "./bin/server.mjs"
@@ -9,7 +9,6 @@
     "bin",
     "data",
     "templates",
-    "package.json",
     "README.md"
   ],
   "engines": {
@@ -25,7 +24,7 @@
     "mcp",
     "model-context-protocol"
   ],
-  "license": "MIT",
+  "license": "SEE LICENSE IN LICENSE",
   "private": false,
   "dependencies": {
     "@modelcontextprotocol/sdk": "^1.27.1",

package/templates/.mcp.json.example

@@ -1,8 +1,8 @@
 {
   "mcpServers": {
     "ncds-ui-admin": {
-      "command": "node",
-      "args": ["./node_modules/@ncds/ui-admin/mcp/bin/server.mjs"]
+      "command": "npx",
+      "args": ["-y", "@ncds/ui-admin-mcp"]
     }
   }
 }

package/templates/README.md

@@ -8,8 +8,8 @@
 {
   "mcpServers": {
     "ncds-ui-admin": {
-      "command": "node",
-      "args": ["./node_modules/@ncds/ui-admin/mcp/bin/server.mjs"]
+      "command": "npx",
+      "args": ["-y", "@ncds/ui-admin-mcp"]
     }
   }
 }
@@ -18,13 +18,12 @@
 또는 이 디렉토리의 `.mcp.json.example` 파일을 프로젝트 루트로 복사합니다.
 
 ```bash
-cp node_modules/@ncds/ui-admin/mcp/templates/.mcp.json.example .mcp.json
+cp node_modules/@ncds/ui-admin-mcp/templates/.mcp.json.example .mcp.json
 ```
 
 ## 요구사항
 
 - Node.js 20 이상
-- `@ncds/ui-admin` 설치 완료
 
 ## 확인 방법