React, JavaScript 및 Vue에 대한 종합적인 Motion.dev 애니메이션 라이브러리 액세스를 제공하는 Production-ready Model Context Protocol (MCP) 서버. 오프라인 문서, 지능형 코드 생성 및 멀티 프레임 워크 지원 기능.

⭐ 빠른 시작

# 필수품

• Node.js 18+ - 필수 실행 시간
• **MCP 호환 클라이언트 ** - 모델 Context Protocol을 지원하는 모든 AI 클라이언트

설치 및 설치

MCP 클라이언트 통합

**MCP 클라이언트 설정에서 구성: **

** Claude Code CLI 사용:**

✨ 특징

## ## Off Offline 문서 시스템

• **351 코드 예제 ** React (124), JavaScript (124), Vue (108)
• **26 문서 페이지 ** 완전한 Motion.dev 적용
• ** 63 구성 요소 정의 ** 향상된 API 참조
• FTS5 Full-Text Search 특수문자를 위한 LIKE fallback

542️ MCP 도구 사용 가능

문서 접근

• get_motion_docs - Fetch specific Motion.dev 문서
• search_motion_docs - 모든 문서의 전체 텍스트 검색
• get_component_api - 예를 들어 구성 요소 API (예: 모션.div)
• get_examples_by_category - 필터링 코드 예
• get_framework_guide - 프레임 워크별 가이드

Motion.dev MCP Server

A production-ready Model Context Protocol (MCP) server providing comprehensive Motion.dev animation library access for React, JavaScript, and Vue. Features offline documentation, intelligent code generation, and multi-framework support.

🚀 Quick Start

Prerequisites

• Node.js 18+ - Required runtime
• MCP-compatible client - Any AI client supporting Model Context Protocol

Installation & Setup

# Clone the repository
git clone https://github.com/your-username/motion-dev-mcp.git
cd motion-dev-mcp

# Install dependencies
npm install

# Build TypeScript
npm run build

# Initialize documentation database (first time only)
npm run rebuild

MCP Client Integration

Configure in your MCP client settings:

{
  "mcpServers": {
    "motion-dev": {
      "command": "node",
      "args": ["./dist/index.js"],
      "cwd": "$HOME/motion-dev-mcp"
    }
  }
}

Or using Claude Code CLI:

claude mcp add node $HOME/motion-dev-mcp/dist/index.js

✨ Features

📚 Offline Documentation System

• 351 Code Examples across React (119), JavaScript (124), and Vue (108)
• 26 Documentation Pages with complete Motion.dev coverage
• 63 Component Definitions with enhanced API references
• FTS5 Full-Text Search with LIKE fallback for special characters

🛠️ MCP Tools Available

Documentation Access

• get_motion_docs - Fetch specific Motion.dev documentation
• search_motion_docs - Full-text search across all docs
• get_component_api - Component API with examples (e.g., motion.div)
• get_examples_by_category - Filtered code examples
• get_framework_guide - Framework-specific guides

Code Generation

• generate_motion_component - Multi-animation support (scale + rotate)
• create_animation_sequence - Complex animation timelines
• convert_between_frameworks - React ↔ JS ↔ Vue conversion
• validate_motion_syntax - Comprehensive validation against Motion.dev API
• optimize_motion_code - Performance and accessibility suggestions

🎯 Production Capabilities

Advanced Search System

• FTS5 + LIKE Hybrid: Handles motion.div and special characters gracefully
• Framework Filtering: Search within specific framework documentation
• <50ms Response Times: Optimized SQLite queries with comprehensive indexing

Multi-Framework Code Generation

• Pattern Combination: Intelligently merges multiple animations (scale + rotate)
• Cross-Framework: Converts animations between React, JavaScript, and Vue
• Production Ready: Clean, optimized code with proper TypeScript support

Comprehensive Validation

• Motion.dev API Validation: Validates against actual property specifications
• Performance Warnings: Flags layout-triggering animations
• Accessibility Recommendations: Suggests prefers-reduced-motion support
• Best Practice Guidance: Framework-specific import and usage validation