Provides access to Motion.dev animation library documentation (previously Framer Motion), enabling code generation and best practices for React, JavaScript, and Vue animations
Provides vanilla JavaScript Motion animation guides, code generation, and API references for browser-based animations
Generates Motion animation components and provides comprehensive documentation access for React-based animation implementations
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
MCP Client Integration
Configure in your MCP client settings:
Or using Claude Code CLI:
✨ 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 documentationsearch_motion_docs
- Full-text search across all docsget_component_api
- Component API with examples (e.g., motion.div)get_examples_by_category
- Filtered code examplesget_framework_guide
- Framework-specific guides
Code Generation
generate_motion_component
- Multi-animation support (scale + rotate)create_animation_sequence
- Complex animation timelinesconvert_between_frameworks
- React ↔ JS ↔ Vue conversionvalidate_motion_syntax
- Comprehensive validation against Motion.dev APIoptimize_motion_code
- Performance and accessibility suggestions
🎯 Production Capabilities
Advanced Search System
FTS5 + LIKE Hybrid: Handles
motion.div
and special characters gracefullyFramework 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
📖 Usage Examples
Search Documentation
Get Component API
Generate Multi-Animation Components
Cross-Framework Conversion
Comprehensive Validation
🔧 Maintenance Commands
Database Management
Development
📊 Current Database Statistics
Documentation: 26 pages (React: 7, JavaScript: 13, Vue: 6)
Components: 63 enhanced definitions with descriptions
Examples: 351 working code examples across all frameworks
Database Size: ~15MB with full content and search indexes
FTS5 Support: ✅ Enabled with automatic LIKE fallback
🏗️ Architecture
SQLite-First Design
Offline Operation: Complete functionality without internet after setup
FTS5 Search: Fast semantic search with graceful LIKE fallback
Structured Storage: Optimized schema for docs, components, and examples
Better-sqlite3: High-performance SQLite with sql.js fallback
MCP Protocol Compliance
10+ Tools: Complete Motion.dev functionality coverage
TypeScript: Full type safety and comprehensive error handling
Streaming Support: Efficient handling of large documentation responses
Session Management: Proper client session handling
🎯 Integration Benefits
Perfect for AI-powered development workflows:
Design-to-Code: Generate animations from design specifications
Natural Language: Compose animated components from descriptions
Full-Stack Development: Complete application animation implementation
Cross-Platform: Touch gestures and responsive animations
📈 Performance Metrics
Search Response: <50ms for SQLite queries
Code Generation: <200ms for complex multi-animation components
Database Rebuild: 100% success rate with progress tracking
Error Rate: <1% failed requests under normal usage
Framework Parity: Full React/JS/Vue support with intelligent merging
🔄 Status: Production Functional (8/10)
✅ Successfully Completed:
Comprehensive offline documentation system with 351 examples
Multi-framework code generation with pattern combination
Advanced search with FTS5 + LIKE hybrid approach
Production-ready validation against Motion.dev API specifications
Full MCP protocol compliance with comprehensive tool coverage
🎯 Achievement: Transformed from 1/10 (Not Production Ready) to 8/10 (Production Functional) with all critical functionality restored and enhanced.
Transform your animations with AI-powered Motion.dev integration through any MCP-compatible client.
This server cannot be installed
hybrid server
The server is able to function both locally and remotely, depending on the configuration or use case.
Provides AI assistants with comprehensive access to Motion.dev animation library documentation and code generation tools. Enables LLMs to generate Motion animations for React, JavaScript, and Vue with proper documentation backing and framework conversion capabilities.
Related MCP Servers
- -securityFlicense-qualityProvides tools to interact with RunwayML and Luma AI APIs for video and image generation, including text-to-video, image-to-video, prompt enhancement, and management of generations.Last updated -11
- AsecurityFlicenseAqualityAI-powered animation generator that transforms static images into animated SVG components using the Model Context Protocol, allowing users to create animations through natural language prompts.Last updated -163
- AsecurityAlicenseAqualityProvides up-to-date documentation for 9000+ libraries directly in your AI code editor, enabling accurate code suggestions and eliminating outdated information.Last updated -1329158MIT License
- AsecurityFlicenseAqualityEnables AI-driven frontend component design and code generation from natural language requirements. Supports Vue, React, and Angular with intelligent component decomposition, API design, and complete project generation.Last updated -43