# Docs MCP
URL: /ai-integration/docs-mcp
Source: https://github.com/daangn/seed-design/blob/dev/docs/content/ai-integration/(mcp)/docs-mcp.mdx

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

## 소개

[`@seed-design/docs-mcp`](https://github.com/daangn/seed-design/tree/dev/packages/docs-mcp)는 SEED 문서를 위한 공식 MCP(Model Context Protocol) 서버입니다.

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

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

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

## 설치

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

```sh
codex mcp add seed-docs -- npx -y @seed-design/docs-mcp
```

`~/.gemini/settings.json` 파일에 다음을 추가합니다:

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

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

[Cursor MCP에 대해 자세히 알아보기](https://docs.cursor.com/context/model-context-protocol)

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

```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" })
```

**예시 응답:**

```markdown
# 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 서버에 통합할 수 있습니다.

### 설치

`server`는 MCP TypeScript SDK v2의 `McpServer` 인스턴스이므로, transport를 직접 연결하려면 `@modelcontextprotocol/server`도 함께 설치합니다.

```bash
npm install @seed-design/docs-mcp @modelcontextprotocol/server
# 또는
bun add @seed-design/docs-mcp @modelcontextprotocol/server
```

### 사용 예시

```javascript
import { StdioServerTransport } from "@modelcontextprotocol/server/stdio";
import { server } from "@seed-design/docs-mcp/server";
import { initializeTools } from "@seed-design/docs-mcp/tools";

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

// 원하는 transport와 함께 사용 (stdio, Streamable HTTP 등)
await server.connect(new StdioServerTransport());
```

***

## 개발

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

```bash
# 의존성 설치
bun install

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

# 빌드
bun run build

# 린트
bun run lint

# 타입 검사
bun run typecheck
```

### MCP Inspector로 테스트

[MCP Inspector](https://github.com/modelcontextprotocol/inspector)를 사용하면 브라우저에서 도구를 테스트할 수 있습니다:

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