npm package: @motile-ui/mcp
Description: MCP server for Motile UI component library - AI assistant integration
Author: jtnoh300@gmail.com
Latest version: 1.3.0

<div align="center">
  <img src="https://github.com/Innopers.png" alt="Motile UI MCP Logo" width="200"/>

# Motile UI MCP Server

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

[![npm version](https://img.shields.io/npm/v/@motile-ui/mcp.svg?style=flat-square)](https://www.npmjs.com/package/@motile-ui/mcp)
[![npm downloads](https://img.shields.io/npm/dm/@motile-ui/mcp.svg?style=flat-square)](https://www.npmjs.com/package/@motile-ui/mcp)
[![license](https://img.shields.io/npm/l/@motile-ui/mcp.svg?style=flat-square)](https://github.com/Innopers/motile-ui-mcp/blob/main/LICENSE)
[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue?style=flat-square)](https://www.typescriptlang.org/)

  <br/>

**[🇰🇷 한국어](#-한국어) | [🇺🇸 English](#-english)**

</div>

---

<br/>
<br/>

# 🇰🇷 한국어

## 📚 목차

- [주요 기능](#-주요-기능)
- [설치](#-설치)
- [빠른 시작](#-빠른-시작)
- [라이선스](#-라이선스)

---

## ✨ 주요 기능

- 🤖 **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](https://www.motile-ui.site/mcp)**

---

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

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

#### 장점

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

#### Claude Code 설정

**1. 설정 파일 열기:**

```bash
code ~/.claude.json
```

**2. `mcpServers` 섹션에 추가:**

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

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

**전체 예시:**

```json
{
  "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:**

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

**Windows:**

```bash
code %APPDATA%\Claude\claude_desktop_config.json
```

**2. `mcpServers` 섹션에 추가:**

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

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

---

### 방법 2: 전역 설치

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

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

# yarn
yarn global add @motile-ui/mcp

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

#### Claude Code 설정

**1. 설정 파일 열기:**

```bash
code ~/.claude.json
```

**2. `mcpServers` 섹션에 추가:**

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

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

#### Claude Desktop 설정

**1. 설정 파일 열기:**

**macOS/Linux:**

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

**Windows:**

```bash
code %APPDATA%\Claude\claude_desktop_config.json
```

**2. `mcpServers` 섹션에 추가:**

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

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

---

## 🚀 빠른 시작

### 설정 완료 후

**1. Claude 재시작**

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

**2. 확인 (Claude Code만 해당)**

```bash
/mcp
```

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

---

### 사용 시작

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

**예시:**

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

---

## 📄 라이선스

MIT © [Innopers](https://github.com/Innopers)

<br/>
<br/>

---

<br/>
<br/>

# 🇺🇸 English

## 📚 Table of Contents

- [Features](#-features)
- [Installation](#-installation)
- [Quick Start](#-quick-start)
- [License](#-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](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:**

```bash
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.

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

**Full example:**

```json
{
  "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:**

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

**Windows:**

```bash
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.

```json
{
  "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**.

```bash
# 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:**

```bash
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.

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

#### Claude Desktop Setup

**1. Open configuration file:**

**macOS/Linux:**

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

**Windows:**

```bash
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.

```json
{
  "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)**

```bash
/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](https://github.com/Innopers)