Motile UI

MCP

AI 코딩 도구에서 Motile UI 컴포넌트를 자연어로 조회하고 활용하세요. MCP 서버를 통해 AI 어시스턴트가 컴포넌트 정보에 직접 접근할 수 있습니다.

MCP란?

Model Context Protocol(MCP)은 AI 어시스턴트가 외부 데이터 소스에 접근할 수 있게 하는 프로토콜입니다. Motile UI MCP 서버를 통해 AI 어시스턴트가 컴포넌트 정보를 실시간으로 조회하고, 더 정확한 코드 예제를 제공할 수 있습니다.

자연어 조회

"Button 컴포넌트 사용법 알려줘"처럼 자연어로 질문하면 AI 어시스턴트가 정확한 정보를 제공합니다.

실시간 정보

항상 최신 컴포넌트 정보와 API를 제공하여 문서와 코드가 일치합니다.

코드 자동 생성

요구사항을 설명하면 AI 어시스턴트가 Motile UI를 활용한 코드를 자동으로 작성해줍니다.

통합 개발 경험

AI 코딩 도구에서 문서를 따로 찾지 않고 대화만으로 개발을 진행할 수 있습니다.

설치

NPX를 사용한 간편한 설치

별도의 설치 없이 NPX를 통해 바로 사용할 수 있습니다. 항상 최신 버전이 실행되며, 프로젝트별로 독립적인 환경을 유지할 수 있습니다.

1
설정 파일 열기
1code ~/.claude.json
2
MCP 서버 설정 추가
1{
2  "mcpServers": {
3    "motile-ui": {
4      "type": "stdio",
5      "command": "npx",
6      "args": ["-y", "@motile-ui/mcp@latest"]
7    }
8  }
9}

설치 확인

  1. Claude을(를) 재시작합니다.
  2. "Button 컴포넌트 사용법 알려줘"라고 질문하여 정상 작동을 확인합니다.

사용 가능한 도구

list_components

카테고리, 패턴, 복잡도로 컴포넌트 목록을 조회합니다.

파라미터
categorystring?카테고리 (controls, feedback, overlays, navigation, layout)
patternstring?패턴 (basic, compound)
complexitystring?복잡도 (simple, moderate, complex)
get_component

특정 컴포넌트의 상세 정보를 가져옵니다.

파라미터
namestring컴포넌트 이름 (예: Button, Drawer)
includeExamplesboolean?사용 예제 포함 여부 (기본값: true)
search_components

이름, 설명, 태그에서 컴포넌트를 검색합니다.

파라미터
querystring검색어
categorystring?카테고리로 필터링 (선택)
patternstring?패턴으로 필터링 (basic, compound)
limitnumber?최대 결과 개수 (기본값: 10)
get_component_demo

컴포넌트의 데모 예제를 가져옵니다.

파라미터
namestring컴포넌트 이름
categorystring?예제 카테고리 (basic, advanced, with-hooks 등)
get_component_types

컴포넌트의 TypeScript 타입 정의를 생성합니다.

파라미터
namestring컴포넌트 이름
MCP | Motile UI