Сервер Model Context Protocol (MCP) предоставляет полный доступ к библиотеке анимации Motion.dev для React, JavaScript и Vue. Функции автономной документации, интеллектуального генерирования кода и многокадровой поддержки.

Быстрый старт

Предпосылки

• Node.js 18+ - Требуется время выполнения MCP-совместимый клиент - любой клиент, поддерживающий протокол Model Context

###Установка и настройка

###Интеграция с клиентом

**Настройка в настройках клиента MCP: **

** Или с помощью Claude Code CLI: **

Feature Особенности

###Оффлайн-система документирования 351 Примеры кода в React (119), JavaScript (124) и Vue (108) 26 Страницы документации с полным покрытием Motion.dev 63 Определения компонентов с расширенными ссылками на API FTS5 Full-Text Search с лайком для специальных персонажей

s️ Инструменты MCP

####Документальный доступ

• get_motion_docs - Получить конкретную документацию Motion.dev search_motion_docs - полнотекстовый поиск по всем документам
• get_component_api - компонент API с примерами (например, motion.div)
• get_examples_by_category - Примеры фильтрованного кода
• [[Т4]] - Руководящие указания по конкретным рамкам

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