Motile UI MCP Server

AI 어시스턴트를 위한 Motile UI 컴포넌트 라이브러리 MCP 서버

🇰🇷 한국어 | 🇺🇸 English

🇰🇷 한국어

📚 목차

• 주요 기능
• 설치
• 빠른 시작
• 라이선스

✨ 주요 기능

• 🤖 AI 통합 - Claude와 같은 AI 어시스턴트에서 Motile UI 컴포넌트 정보 직접 조회
• 📚 실시간 메타데이터 - 항상 최신의 정확한 컴포넌트 정보 제공
• 💪 TypeScript 타입 생성 - 필요할 때마다 타입 정의 자동 생성
• 📖 풍부한 예제 - 모든 사용 사례에 대한 코드 예제 제공
• 🎯 자연어 쿼리 - 일상 언어로 컴포넌트 정보 질문
• 🔧 5개의 MCP Tools - 다양한 방식으로 컴포넌트 정보 조회

📦 설치

요구사항

• Node.js: 18.0.0 이상
• Claude Desktop 또는 Claude Code

다른 플랫폼

Cursor, OpenAI Codex, Gemini 등 다른 AI 플랫폼에서의 사용 방법은 공식 문서를 참고하세요:

https://www.motile-ui.site/mcp

방법 1: NPX 사용 (권장 ⭐)

설치 없이 바로 사용하고 싶다면 NPX를 사용하세요!

장점

• ✅ 별도 설치 불필요
• ✅ 항상 최신 버전 사용
• ✅ 크로스 플랫폼 호환성
• ⚠️ 첫 실행 시 2-5초 소요 (패키지 다운로드)

Claude Code 설정

1. 설정 파일 열기:

code ~/.claude.json

2. mcpServers 섹션에 추가:

주의: 기존에 다른 MCP 서버가 등록되어 있다면, mcpServers 객체 안에 motile-ui를 추가하세요.

{
  // ... 기존 설정들 ...
  "mcpServers": {
    // ... 기존 MCP 서버들 (context7, sequential-thinking 등) ...
    "motile-ui": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@motile-ui/mcp@latest"]
    }
  }
}

전체 예시:

{
  "mcpServers": {
    "context7": {
      "type": "http",
      "url": "https://mcp.context7.com/mcp"
    },
    "sequential-thinking": {
      "type": "stdio",
      "command": "npx",
      "args": ["@modelcontextprotocol/server-sequential-thinking"]
    },
    "motile-ui": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@motile-ui/mcp@latest"]
    }
  }
}

Claude Desktop 설정

1. 설정 파일 열기:

macOS/Linux:

code ~/Library/Application\ Support/Claude/claude_desktop_config.json

Windows:

code %APPDATA%\Claude\claude_desktop_config.json

2. mcpServers 섹션에 추가:

주의: 기존에 다른 MCP 서버가 등록되어 있다면, mcpServers 객체 안에 motile-ui를 추가하세요.

{
  "mcpServers": {
    // ... 기존 MCP 서버들 ...
    "motile-ui": {
      "command": "npx",
      "args": ["-y", "@motile-ui/mcp@latest"]
    }
  }
}

방법 2: 전역 설치

자주 사용하거나 빠른 실행 속도가 필요하다면 전역 설치를 권장합니다.

# npm
npm install -g @motile-ui/mcp

# yarn
yarn global add @motile-ui/mcp

# pnpm
pnpm add -g @motile-ui/mcp

Claude Code 설정

1. 설정 파일 열기:

code ~/.claude.json

2. mcpServers 섹션에 추가:

주의: 기존에 다른 MCP 서버가 등록되어 있다면, mcpServers 객체 안에 motile-ui를 추가하세요.

{
  "mcpServers": {
    // ... 기존 MCP 서버들 ...
    "motile-ui": {
      "type": "stdio",
      "command": "motile-ui-mcp"
    }
  }
}

Claude Desktop 설정

1. 설정 파일 열기:

macOS/Linux:

code ~/Library/Application\ Support/Claude/claude_desktop_config.json

Windows:

code %APPDATA%\Claude\claude_desktop_config.json

2. mcpServers 섹션에 추가:

주의: 기존에 다른 MCP 서버가 등록되어 있다면, mcpServers 객체 안에 motile-ui를 추가하세요.

{
  "mcpServers": {
    // ... 기존 MCP 서버들 ...
    "motile-ui": {
      "command": "motile-ui-mcp"
    }
  }
}

🚀 빠른 시작

설정 완료 후

1. Claude 재시작

Claude Code 또는 Claude Desktop을 종료하고 다시 실행하여 MCP 서버를 로드합니다.

2. 확인 (Claude Code만 해당)

/mcp

명령어로 motile-ui가 목록에 나타나는지 확인합니다.

사용 시작

이제 Claude에게 Motile UI 컴포넌트에 대해 질문할 수 있습니다!

예시:

• "Motile UI에 어떤 컴포넌트가 있어?"
• "Button 컴포넌트의 props를 알려줘"
• "Toast 컴포넌트 사용 예제를 보여줘"

📄 라이선스

MIT © Innopers

🇺🇸 English

📚 Table of Contents

• Features
• Installation
• Quick Start
• License

✨ Features

• 🤖 AI Integration - Direct access to Motile UI component information from AI assistants like Claude
• 📚 Real-time Metadata - Always accurate and up-to-date component information
• 💪 TypeScript Type Generation - Automatically generate type definitions on demand
• 📖 Rich Examples - Code examples for every use case
• 🎯 Natural Language Queries - Ask about components in plain language
• 🔧 5 MCP Tools - Multiple ways to query component information

📦 Installation

Requirements

• Node.js: 18.0.0 or higher
• Claude Desktop or Claude Code

Other Platforms

For usage instructions with Cursor, OpenAI Codex, Gemini, and other AI platforms, please refer to the official documentation:

https://www.motile-ui.site/mcp

Method 1: Using NPX (Recommended ⭐)

Use immediately without installation with NPX!

Benefits

• ✅ No installation required
• ✅ Always use the latest version
• ✅ Cross-platform compatibility
• ⚠️ First run takes 2-5 seconds (package download)

Claude Code Setup

1. Open configuration file:

code ~/.claude.json

2. Add to mcpServers section:

Note: If you already have other MCP servers registered, add motile-ui inside the existing mcpServers object.

{
  // ... existing settings ...
  "mcpServers": {
    // ... existing MCP servers (context7, sequential-thinking, etc.) ...
    "motile-ui": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@motile-ui/mcp@latest"]
    }
  }
}

Full example:

{
  "mcpServers": {
    "context7": {
      "type": "http",
      "url": "https://mcp.context7.com/mcp"
    },
    "sequential-thinking": {
      "type": "stdio",
      "command": "npx",
      "args": ["@modelcontextprotocol/server-sequential-thinking"]
    },
    "motile-ui": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@motile-ui/mcp@latest"]
    }
  }
}

Claude Desktop Setup

1. Open configuration file:

macOS/Linux:

code ~/Library/Application\ Support/Claude/claude_desktop_config.json

Windows:

code %APPDATA%\Claude\claude_desktop_config.json

2. Add to mcpServers section:

Note: If you already have other MCP servers registered, add motile-ui inside the existing mcpServers object.

{
  "mcpServers": {
    // ... existing MCP servers ...
    "motile-ui": {
      "command": "npx",
      "args": ["-y", "@motile-ui/mcp@latest"]
    }
  }
}

Method 2: Global Installation

Recommended if you use frequently or need faster execution.

# npm
npm install -g @motile-ui/mcp

# yarn
yarn global add @motile-ui/mcp

# pnpm
pnpm add -g @motile-ui/mcp

Claude Code Setup

1. Open configuration file:

code ~/.claude.json

2. Add to mcpServers section:

Note: If you already have other MCP servers registered, add motile-ui inside the existing mcpServers object.

{
  "mcpServers": {
    // ... existing MCP servers ...
    "motile-ui": {
      "type": "stdio",
      "command": "motile-ui-mcp"
    }
  }
}

Claude Desktop Setup

1. Open configuration file:

macOS/Linux:

code ~/Library/Application\ Support/Claude/claude_desktop_config.json

Windows:

code %APPDATA%\Claude\claude_desktop_config.json

2. Add to mcpServers section:

Note: If you already have other MCP servers registered, add motile-ui inside the existing mcpServers object.

{
  "mcpServers": {
    // ... existing MCP servers ...
    "motile-ui": {
      "command": "motile-ui-mcp"
    }
  }
}

🚀 Quick Start

After Configuration

1. Restart Claude

Close and reopen Claude Code or Claude Desktop to load the MCP server.

2. Verify (Claude Code only)

/mcp

Check if motile-ui appears in the list.

Start Using

You can now ask Claude about Motile UI components!

Examples:

• "What components are available in Motile UI?"
• "Show me the props for the Button component"
• "Give me usage examples for the Toast component"

📄 License

MIT © Innopers