@teamsparta/stack-mcp v0.0.3

Stack Design System MCP Server

TeamSparta Stack 디자인 시스템의 컴포넌트 정보를 제공하는 MCP (Model Context Protocol) 서버입니다.

🚀 특징

• 31개 컴포넌트 지원 (AlertModal, BottomSheet, Button 등)
• 컴포넌트 간 상호 참조 지원
• 자동 코드 생성 기능
• 접근성 정보 제공
• TypeScript 완전 지원
• 번들된 데이터 - 런타임에 파일 시스템 접근 불필요

📦 설치

NPM으로 설치 (권장)

npm install -g @teamsparta/stack-mcp

로컬 빌드

git clone <repository>
cd stack/packages/mcp
npm install
npm run build

🔧 사용법

Cursor에서 사용

~/.cursor/mcp.json 파일에 다음을 추가:

{
  "mcpServers": {
    "stack-design-system": {
      "command": "npx",
      "args": ["@teamsparta/stack-mcp"],
      "env": {}
    }
  }
}

Claude Desktop에서 사용

claude_desktop_config.json 파일에 다음을 추가:

{
  "mcpServers": {
    "stack-design-system": {
      "command": "npx",
      "args": ["@teamsparta/stack-mcp"],
      "env": {}
    }
  }
}

로컬 빌드 버전 사용

{
  "mcpServers": {
    "stack-design-system": {
      "command": "node",
      "args": ["/path/to/stack/packages/mcp/dist/index.js"],
      "env": {
        "NODE_ENV": "production"
      }
    }
  }
}

🛠️ 제공되는 도구

1. list-components

사용 가능한 모든 컴포넌트 목록을 조회합니다.

// 모든 컴포넌트 조회
list - components();

// 카테고리별 조회
list - components({ category: "Interactive" });

// 카테고리별 그룹화
list - components({ groupBy: "category" });

2. get-component-info

특정 컴포넌트의 상세 정보를 조회합니다.

get -
  component -
  info({
    componentName: "AlertModal",
    includeExamples: true,
    includeProps: true,
  });

3. search-components

키워드로 컴포넌트를 검색합니다.

search -
  components({
    query: "button",
    limit: 5,
  });

4. generate-component-code

컴포넌트 사용 코드를 생성합니다.

generate -
  component -
  code({
    componentName: "AlertModal",
    scenario: "basic",
    importType: "namespace",
  });

5. get-component-props

컴포넌트의 Props 정보를 상세히 조회합니다.

get -
  component -
  props({
    componentName: "Button",
    subComponent: "Icon",
  });

6. find-components-by-feature

특정 기능을 가진 컴포넌트들을 찾습니다.

find -
  components -
  by -
  feature({
    feature: "accessibility",
  });

🏗️ 개발

개발 환경 설정

cd stack/packages/mcp
npm install

개발 모드 실행

npm run dev

빌드

# 스펙 데이터 생성 + TypeScript 컴파일
npm run build

# 스펙 데이터만 생성
npm run build:specs

환경 변수

• NODE_ENV=production: 생성된 스펙 데이터 사용
• USE_GENERATED_SPECS=true: 강제로 생성된 스펙 데이터 사용

📁 프로젝트 구조

packages/mcp/
├── src/
│   ├── types.ts              # 타입 정의
│   ├── index.ts              # 메인 서버
│   ├── utils/
│   │   ├── spec-parser.ts    # AI 스펙 파일 파싱
│   │   ├── search.ts         # 검색 기능
│   │   └── code-generator.ts # 코드 생성
│   └── generated/            # 자동 생성된 스펙 데이터
│       └── specs.ts
├── scripts/
│   └── build-specs.ts        # 빌드 스크립트
├── dist/                     # 컴파일된 파일
└── package.json

🔄 배포 프로세스

1. 스펙 데이터 생성: 모든 AI_*.md 파일을 파싱하여 TypeScript 모듈로 변환
2. TypeScript 컴파일: 소스 코드를 JavaScript로 컴파일
3. 패키지 배포: 번들된 데이터와 함께 NPM에 배포