一个生产准备的模型背景协议(MCP)服务器,为React,JavaScript,和Vue提供全面的Motion.dev动画库访问. 功能是离线文档,智能代码生成,以及多框架支持.

# # # 快速启动 # # # # # # QQ Quick start

· 先决条件

• Node.js 18+-规定运行时间
• MCP兼容客户 - 任何支持模式背景协议的AI客户端

QQ 安装和设置

MCP 客户集成

** 在 MCP 客户端设置中配置:**

** 或使用克洛德代码CLI:**

□ * * * * 特点

离线文档系统

• 351 码例 横跨React(119)、JavaScript(124)和Vue(108)
• 26份文件页,完整覆盖 Motion.dev
• 63 构成部分定义,加强API参考
• FTS5 Full-Text Search 特殊字符类似倒置

QQ MCP 可用工具

文件访问

• get_motion_docs - 获取特定的 Motion.dev 文档
• search_motion_docs - 所有文件的全文搜索
• get_component_api - 有实例的组件 API(如:movement.div)
• get_examples_by_category - 被过滤的代码示例
• [[T4] – – 具体框架指南

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