React、JavaScript、Vue の包括的な Motion.dev アニメーションライブラリアクセスを提供する、Model Context Protocol (MCP) サーバです。 オフラインのドキュメンテーション、インテリジェントなコード生成、およびマルチフレームワークのサポートを備えています。

すぐにスタート

前提条件

• Node.js 18+ - 必要なランタイム -MCP対応クライアント - モデルコンテキストプロトコルをサポートするAIクライアント

インストールとセットアップ

MCP クライアントの統合

MCPクライアントの設定:

Claude Code CLIを使用するか:

✨ 機能

ドキュメント オフライン システム

• 351 コード例 React (119)、JavaScript (124)、Vue (108) を渡る
• 26 ドキュメントページ* 完全な Motion.dev のカバレッジ
• 63 コンポーネントの定義* 強化された API リファレンス
• FTS5 フルテキスト検索 特殊文字のLIKEフォールバック付き

## # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # #

ドキュメントアクセス

• [get_motion_docs - 特定の Motion.dev ドキュメントの取得
• [search_motion_docs - すべてのドキュメントを横断フルテキスト検索
• [get_component_api - コンポーネント API の例 (例、Motion.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