Docs MCP

AI Agent가 SEED 문서에 직접 접근할 수 있는 MCP 서버를 제공합니다.

소개

@seed-design/docs-mcp는 SEED 문서를 위한 공식 MCP(Model Context Protocol) 서버입니다.

이 MCP 서버를 사용하면 AI Agent가 다음 정보에 직접 접근할 수 있습니다:

React 컴포넌트: 설치, props, 사용 예시
Design Guidelines: 컴포넌트 해부도, 속성, 사용 가이드라인
Foundation: 색상, 타이포그래피, 간격 등 디자인 토큰
Rootage: 디자인 토큰과 컴포넌트 스펙 원본 데이터
아이콘: 아이콘 검색 및 사용법

Figma 연결 없이 독립적으로 실행되며, SEED를 사용하는 프로젝트에서 AI 도구의 문서 이해도를 높일 수 있습니다.

설치

claude mcp add seed-docs -- npx -y @seed-design/docs-mcp

~/Library/Application Support/Claude/claude_desktop_config.json 파일에 다음을 추가합니다:

{
  "mcpServers": {
    "seed-docs": {
      "command": "npx",
      "args": ["-y", "@seed-design/docs-mcp"]
    }
  }
}

사용 가능한 도구

Discovery

`discover_tools`

사용 가능한 모든 도구를 탐색하고 각 도구의 용도를 확인합니다. MCP 서버에 처음 연결했을 때 호출하면 유용합니다.

파라미터:

이름	타입	설명
`query`	string (선택)	도구를 필터링할 검색어 (예: 'installation', 'component')
`category`	string (선택)	카테고리 필터 (`discovery`, `react`, `breeze`, `design-guidelines`, `rootage`, `icons`)

예시:

discover_tools({ query: "component" })

React Components

`list_react_components`

사용 가능한 모든 SEED React 컴포넌트 목록을 반환합니다.

파라미터: 없음

예시 응답:

Found 45 React components:

- ActionButton (action-button)
- AlertDialog (alert-dialog)
- Avatar (avatar)
- Badge (badge)
...

`get_react_component`

특정 React 컴포넌트의 상세 문서를 반환합니다. 설치 방법, props, 사용 예시가 포함됩니다.

파라미터:

이름	타입	설명
`componentName`	string	컴포넌트 이름 (kebab-case, 예: `action-button`, `text-field`)

예시:

get_react_component({ componentName: "action-button" })

`get_react_changelog`

SEED React 패키지의 변경 이력을 반환합니다. 버전 업그레이드 시 변경 사항을 확인할 때 유용합니다.

파라미터: 없음

React 섹션별 도구

React 문서의 각 섹션에 접근하는 도구들입니다. 각 섹션마다 list_*와 get_* 도구가 제공됩니다.

섹션	list 도구	get 도구	설명
Getting Started	`list_react_getting_started`	`get_react_getting_started`	설치, CLI, 스타일링 설정
Stackflow	`list_react_stackflow`	`get_react_stackflow`	Stackflow 통합 가이드
Developer Tools	`list_react_developer_tools`	`get_react_developer_tools`	Codemod, Figma 통합
Migration	`list_react_migration`	`get_react_migration`	마이그레이션 가이드
AI Integration	`list_react_ai_integration`	`get_react_ai_integration`	AI 도구 통합
Updates	`list_react_updates`	`get_react_updates`	버전 업데이트 정보

사용 예시

먼저 list_* 도구로 사용 가능한 문서를 확인합니다:

list_react_getting_started()

응답:

# SEED React - Getting Started Topics

- Installation - Vite (path: installation/vite)
- Installation - Manual (path: installation/manual)
- CLI - Commands (path: cli/commands)
- CLI - Configuration (path: cli/configuration)
- Styling - Theming (path: styling/theming)
- Styling - Tailwind CSS (path: styling/tailwind-css)

원하는 문서의 path를 사용해 상세 내용을 가져옵니다:

get_react_getting_started({ path: "installation/vite" })

Breeze

Breeze는 프로젝트에 바로 사용할 수 있는 유틸리티 UI 컴포넌트 모음입니다.

`list_breeze_components`

사용 가능한 Breeze 컴포넌트 목록을 반환합니다.

파라미터: 없음

예시 응답:

Found 1 Breeze components:

- AnimateNumber (animate-number)

`get_breeze_component`

특정 Breeze 컴포넌트의 상세 문서를 반환합니다.

파라미터:

이름	타입	설명
`componentName`	string	컴포넌트 이름 (kebab-case, 예: `animate-number`)

예시:

get_breeze_component({ componentName: "animate-number" })

Design Guidelines

컴포넌트의 디자인 가이드라인 문서에 접근합니다. 해부도(anatomy), 속성, 사용 권장사항 등이 포함됩니다.

`list_docs_components`

디자인 가이드라인이 있는 컴포넌트 목록을 반환합니다.

파라미터: 없음

예시 응답:

Found 25 component design guidelines:

- ActionButton (action-button)
- Avatar (avatar)
- BottomSheet (bottom-sheet)
...

`get_docs_component`

특정 컴포넌트의 디자인 가이드라인을 반환합니다.

파라미터:

이름	타입	설명
`componentName`	string	컴포넌트 이름 (kebab-case, 예: `action-button`)

예시:

get_docs_component({ componentName: "action-button" })

Rootage

SEED의 Rootage 스펙(디자인 토큰 및 컴포넌트 스펙의 원본 JSON 데이터)에 접근합니다.

`get_rootage`

Rootage 리소스를 반환합니다. 경로 없이 호출하면 사용 가능한 모든 리소스 목록을 반환합니다.

파라미터:

이름	타입	설명
`path`	string (선택)	리소스 경로 (예: `/color.json`, `/components/action-button.json`)

예시:

리소스 목록 조회:

get_rootage()

특정 리소스 조회:

get_rootage({ path: "/components/action-button.json" })

Icons

SEED 아이콘을 검색하고 사용법을 확인합니다.

`list_icons`

아이콘 목록을 반환합니다. 타입, 변형, 서비스별로 필터링할 수 있습니다.

파라미터:

이름	타입	설명
`type`	string (선택)	아이콘 타입 (`monochrome`, `multicolor`)
`variant`	string (선택)	모노크롬 아이콘 변형 (`line`, `fill`)
`service`	string (선택)	멀티컬러 아이콘의 서비스 카테고리 (예: `중고거래`, `부동산`)
`limit`	number (선택)	반환할 최대 개수 (기본값: 50, 최대: 200)

예시:

list_icons({ type: "monochrome", variant: "line", limit: 20 })

`search_icons`

키워드로 아이콘을 검색합니다. 영어와 한국어 검색을 모두 지원합니다.

파라미터:

이름	타입	설명
`query`	string	검색어 (예: `arrow`, `화살표`, `shopping`)
`type`	string (선택)	아이콘 타입 필터
`limit`	number (선택)	반환할 최대 개수 (기본값: 20, 최대: 100)

예시:

search_icons({ query: "화살표" })

예시 응답:

Found 15 icons matching "화살표":
View in browser: https://seed-design.io/foundations/iconography/library?search=화살표

- icon_arrow_left_line [monochrome] (line)
  Matched: arrow, 화살표, left
- icon_arrow_right_line [monochrome] (line)
  Matched: arrow, 화살표, right
...

`get_icon_details`

특정 아이콘의 상세 정보와 React 컴포넌트 import 문을 반환합니다.

파라미터:

이름	타입	설명
`iconName`	string	아이콘 이름 (예: `icon_arrow_left_line`)

예시:

get_icon_details({ iconName: "icon_arrow_left_line" })

예시 응답:

# icon_arrow_left_line

**Type:** monochrome
**Variant:** line
**Keywords:** arrow, left, back, 화살표, 왼쪽

## Usage

### React
\`\`\`tsx
import { IconArrowLeftLine } from "@karrotmarket/react-monochrome-icon"

<IconArrowLeftLine />
\`\`\`

## Documentation

View this icon: https://seed-design.io/foundations/iconography/library?icon=icon_arrow_left_line

프로그래매틱 사용

@seed-design/docs-mcp는 npm 패키지로 설치하여 커스텀 MCP 서버에 통합할 수 있습니다.

설치

npm install @seed-design/docs-mcp
# 또는
bun add @seed-design/docs-mcp

사용 예시

import { server } from "@seed-design/docs-mcp/server";
import { initializeTools } from "@seed-design/docs-mcp/tools";

// 도구 초기화
await initializeTools(server);

// 원하는 transport와 함께 사용
// 예: stdio, HTTP, SSE 등

개발

로컬에서 개발하거나 테스트할 때 사용하는 명령어입니다.

# 의존성 설치
bun install

# 개발 모드 실행 (stdio)
bun run dev

# 빌드
bun run build

# 린트
bun run lint

# 타입 검사
bun run typecheck

MCP Inspector로 테스트

MCP Inspector를 사용하면 브라우저에서 도구를 테스트할 수 있습니다:

npx @modelcontextprotocol/inspector bun ./dist/stdio.js

Docs MCP

On this page