Motile UI

MCP Server

@motile-ui/mcp

AI 코딩 어시스턴트를 Motile UI 컴포넌트 라이브러리에 연결하세요. 에디터에서 직접 지능형 제안, 실시간 문서, 코드 예제를 받아보세요.

주요 기능

AI 기반 생성

자연어 프롬프트로 프로덕션 수준의 컴포넌트를 생성합니다.

제로 설정

npx 명령어 하나로 바로 사용 가능합니다. 별도 설정이 필요 없습니다.

멀티 플랫폼

Claude, Cursor, Gemini CLI, OpenAI Codex와 호환됩니다.

타입 안전

모든 컴포넌트 Props에 대한 TypeScript 정의와 자동 완성을 지원합니다.

검색 및 탐색

이름, 카테고리, 설명으로 컴포넌트를 즉시 검색할 수 있습니다.

실시간 예제

모든 컴포넌트의 동작하는 데모 코드와 사용 패턴을 제공합니다.

빠른 시작

AI 코딩 어시스턴트에 MCP 서버를 추가하세요. 아래에서 플랫폼과 설치 방법을 선택하세요.

설치 없이 바로 실행합니다. 항상 최신 버전을 사용합니다.

1

설정 파일 열기

BASH
1code ~/.claude.json
2

MCP 서버 설정 추가

JSON
1{
2  "mcpServers": {
3    "motile-ui": {
4      "type": "stdio",
5      "command": "npx",
6      "args": ["-y", "@motile-ui/mcp@latest"]
7    }
8  }
9}

설치 확인

  1. Claude을 재시작하여 새로운 MCP 설정을 로드하세요.
  2. AI 어시스턴트에게 Motile UI 컴포넌트에 대해 질문하여 연결을 확인하세요.

사용 가능한 도구

MCP 서버가 AI 어시스턴트에 제공하는 도구 목록입니다.

list_components카테고리, 패턴, 복잡도 필터로 모든 컴포넌트를 탐색합니다.
파라미터
categorystring선택
카테고리로 필터링 (controls, feedback, overlays, navigation, layout)
patternstring선택
패턴으로 필터링 (basic, compound)
complexitystring선택
복잡도로 필터링 (simple, moderate, complex)
get_componentProps, 사용 예제, import 구문을 포함한 상세한 컴포넌트 정보를 가져옵니다.
파라미터
namestring필수
컴포넌트 이름 (예: 'Button', 'Modal')
includeExamplesboolean선택
사용 예제 포함 (기본값: true)
search_components이름, 설명, 태그로 컴포넌트를 검색하고 선택적으로 필터링합니다.
파라미터
querystring필수
검색어
categorystring선택
카테고리로 필터링
patternstring선택
패턴으로 필터링
limitnumber선택
최대 결과 수 (기본값: 10)
get_component_demo컴포넌트의 설치 및 import 지침이 포함된 동작하는 데모 코드를 가져옵니다.
파라미터
namestring필수
컴포넌트 이름
categorystring선택
예제 카테고리로 필터링 (basic, advanced, with-hooks, compound, variant)
get_component_types컴포넌트 Props 및 관련 타입의 TypeScript 타입 정의를 생성합니다.
파라미터
namestring필수
컴포넌트 이름

사용 예시

AI 어시스턴트가 Motile UI MCP 서버와 어떻게 상호작용하는지 확인하세요.

컴포넌트 탐색
You

Motile UI에서 사용 가능한 모든 컨트롤 컴포넌트를 보여줘

MCP
list_componentscategory: "controls"
상세 레퍼런스
You

Button 컴포넌트 어떻게 사용해? 모든 Props와 예제를 보여줘

MCP
get_componentname: "Button", includeExamples: true
키워드 검색
You

날짜와 시간 선택을 위한 컴포넌트를 찾아줘

MCP
search_componentsquery: "time picker"
데모 코드
You

Modal 컴포넌트의 동작하는 예제를 보여줘

MCP
get_component_demoname: "Modal"
MCP | Motile UI