NCUA MCP

NHN Commerce UI Admin · Model Context Protocol Server

NHN Commerce 어드민 디자인 시스템(NCDS UI Admin)의 AI 연동 서버입니다.

AI 에이전트(Claude 등)와 대화하면서 어드민 컴포넌트를 검색하고, 속성을 확인하고, 정확한 HTML과 React 사용법을 받을 수 있습니다.

💡 @ncds/ui-admin 패키지 설치 없이, npx 한 줄로 바로 사용할 수 있습니다.

🎯 이런 분들이 사용하면 좋아요

• 🎨 UX 가이드 작성 시 컴포넌트 종류와 속성을 확인하고 싶은 기획자/디자이너
• 💻 어드민 화면 개발 시 정확한 컴포넌트 사용법이 필요한 개발자
• 🤖 AI 기반 개발 워크플로우를 사용하는 팀

🚀 시작하기

Claude Desktop

1. Claude Desktop 앱의 설정(⚙️) > Developer > Edit Config 를 클릭하세요
2. 열린 파일에 아래 내용을 붙여넣으세요:

{
  "mcpServers": {
    "ncds-ui-admin": {
      "command": "npx",
      "args": ["-y", "@ncds/ui-admin-mcp"]
    }
  }
}

3. 파일을 저장하고, Claude Desktop을 완전히 종료(Cmd+Q) 후 다시 실행하세요
4. 새 대화에서 "어드민 컴포넌트 목록 보여줘"라고 물어보면 동작합니다!

⚠️ Node.js 22 이상이 설치되어 있어야 합니다. 터미널에서 node -v로 확인할 수 있습니다. 설치가 필요하면 nodejs.org에서 다운로드하세요.

Claude Code

프로젝트 루트에 .mcp.json 파일을 만들어주세요:

{
  "mcpServers": {
    "ncds-ui-admin": {
      "command": "npx",
      "args": ["-y", "@ncds/ui-admin-mcp"]
    }
  }
}

💬 사용 예시

Claude에게 자연어로 물어보면 됩니다:

"어드민 컴포넌트 목록 보여줘"
"버튼 컴포넌트 어떤 속성 사용할 수 있어?"
"input 컴포넌트 HTML 마크업 보여줘"
"화살표 관련 아이콘 검색해줘"
"버튼 컴포넌트를 label은 저장, primary로 렌더링해줘"
"이 HTML에 사용된 클래스가 맞는지 검증해줘"

🛠️ 제공하는 기능

| 기능 | 설명 | | --------------------- | -------------------------------------------------------------- | | 📋 컴포넌트 목록 조회 | 사용 가능한 전체 UI 컴포넌트를 확인합니다 | | 🔍 컴포넌트 검색 | 키워드로 원하는 컴포넌트를 찾습니다 | | 🎨 아이콘 목록 조회 | 사용 가능한 아이콘 요약 정보를 확인합니다 | | 🔍 아이콘 검색 | 키워드로 원하는 아이콘을 찾습니다 | | 🧩 HTML 마크업 조회 | 컴포넌트의 정확한 HTML 구조와 React 사용 예시를 확인합니다 | | ⚙️ 속성(Props) 조회 | 컴포넌트에 사용할 수 있는 옵션과 기본값을 확인합니다 | | ✅ HTML 검증 | 작성한 HTML의 클래스명이 올바른지 검증하고 자동으로 수정합니다 | | 🔄 동적 HTML 렌더링 | props를 전달하면 실제 렌더링된 정확한 HTML을 받을 수 있습니다 | | 📡 서버 상태 확인 | 연결 상태, 버전, 사용 규칙을 확인합니다 |

📌 요구사항

• Node.js 22 이상

📜 License

Copyright © NHN Commerce. All rights reserved.