AI导哈

动画库服务

一个生产就绪的模型上下文协议（MCP）服务器，提供全面的Motion.dev动画库访问，支持React、JavaScript和Vue，具有离线文档、智能代码生成和多框架支持功能。

  • by Abhishekrajpurohit
  • TypeScript
  • 本地部署
  • 14 星标
  • 更新于
在 GitHub 查看 Abhishekrajpurohit/motion-dev-mcp

使用说明

Motion.dev MCP服务器

一个生产就绪的模型上下文协议（MCP）服务器，为React、JavaScript和Vue提供全面的Motion.dev动画库访问。功能包括离线文档、智能代码生成和多框架支持。

🚀 快速开始

先决条件

  • Node.js 18+ -所需运行时间
  • MCP兼容客户端 -任何支持模型上下文协议的AI客户端

安装和设置

# 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客户端集成

在MCP客户端设置中配置：

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

或者使用Claude Code CLI：

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

✨ 特性

📚 离线文档系统

  • 351代码示例 React（119）、JavaScript（124）和Vue（108）
  • 26页文档 完整的Motion.dev覆盖范围
  • 63组件定义 具有增强的API参考
  • FTS5全文搜索 对于特殊角色，使用LIKE回退

🛠️ MCP工具可用

文档访问

  • get_motion_docs -获取特定的Motion.dev文档
  • search_motion_docs -在所有文档中进行全文搜索
  • get_component_api -组件API和示例（例如，motion.div）
  • get_examples_by_category -筛选代码示例
  • get_framework_guide -框架特定指南

代码生成

  • generate_motion_component - 多动画支持 （缩放+旋转）
  • create_animation_sequence -复杂的动画时间线
  • convert_between_frameworks -反应↔ JS公司↔ Vue转换
  • validate_motion_syntax - 全面验证 针对Motion.dev API
  • optimize_motion_code -性能和可访问性建议

🎯 生产能力

高级搜索系统

  • FTS5+LIKE混合动力车：手柄 motion.div 以及优雅的特殊人物
  • 框架过滤：在特定框架文档中搜索
  • <50ms响应时间：通过全面索引优化SQLite查询

多框架代码生成

  • 图案组合：智能合并多个动画（缩放+旋转）
  • 跨框架：在React、JavaScript和Vue之间转换动画
  • 生产就绪：干净、优化的代码，支持适当的TypeScript

全面验证

  • Motion.dev API验证：根据实际财产规格进行验证
  • 性能警告：标志布局触发动画
  • 无障碍建议：建议更喜欢减少运动支持
  • 最佳实践指南：特定于框架的导入和使用验证

📖 使用示例

搜索文档

// Find spring animation docs
search_motion_docs({
  "query": "spring animations",
  "framework": "react",
  "limit": 10
})

获取组件API

// Get motion.div with examples
get_component_api({
  "component": "motion.div",
  "framework": "react"
})
// Returns: 10+ relevant examples with descriptions

生成多动画组件

// Combine multiple animation patterns
generate_motion_component({
  "animations": ["scale", "rotate"],
  "framework": "react",
  "componentName": "AnimatedBox"
})
// Returns: Component with combined scale + rotate animations

跨框架转换

// Convert React to Vue
convert_between_frameworks({
  "from": "react",
  "to": "vue",
  "code": "<motion.div animate={{ x: 100, rotate: 90 }} />"
})

全面验证

// Validate Motion.dev syntax
validate_motion_syntax({
  "code": "<motion.div animate={{ invalidProp: 'bad' }} />",
  "framework": "react"
})
// Returns: Specific errors for invalid properties with suggestions

🔧 维护命令

数据库管理

# Rebuild all documentation (updates examples and components)
npm run rebuild

# Check current database statistics
npm run stats

# Custom database path
MOTION_DB_PATH=./custom/docs.db npm run rebuild

发展

# Build TypeScript
npm run build

# Test MCP server startup
node dist/index.js

# Debug database content
sqlite3 docs/motion-docs.db "SELECT COUNT(*) FROM motion_examples;"

📊 当前数据库统计信息

  • 文档：26页（React：7，JavaScript：13，Vue：6）
  • 组件：63个带有说明的增强定义
  • 例子：351个跨所有框架的工作代码示例
  • 数据库大小：约15MB，包含完整内容和搜索索引
  • FTS5支持: ✅ 启用自动LIKE回退

🏗️ 建筑

SQLite第一设计

  • 离线操作：安装后无需互联网即可完成功能
  • FTS5搜索：具有优雅LIKE回退的快速语义搜索
  • 结构化存储：优化了文档、组件和示例的模式
  • 更好的sqlite3：具有sql.js回退功能的高性能SQLite

MCP协议合规性

  • 10+工具：完整的Motion.dev功能覆盖
  • TypeScript：全类型安全和全面的错误处理
  • 流媒体支持：高效处理大量文件回复
  • 会话管理：正确处理客户端会话

🎯 集成优势

非常适合人工智能驱动的开发工作流程：

  • 按代码设计：根据设计规范生成动画
  • 自然语言：根据描述编写动画组件
  • 全栈开发：完成应用程序动画实现
  • 交叉平台的：触摸手势和响应式动画

📈 性能指标

  • 搜索响应：SQLite查询小于50ms
  • 代码生成：对于复杂的多动画组件，<200ms
  • 数据库重建：进度跟踪成功率100%
  • 错误率：正常使用情况下，请求失败率<1%
  • 框架对等：完全支持React/JS/Vue，具有智能合并功能

🔄 状态：生产功能正常（8/10）

✅ 成功完成：

  • 全面的离线文档系统，包含351个示例
  • 模式组合的多框架代码生成
  • 使用FTS5+LIKE混合方法进行高级搜索
  • 根据Motion.dev API规范进行生产准备验证
  • 完全符合MCP协议，全面覆盖工具

🎯 成就： 从1/10（未准备好生产）转换为 8/10（生产功能） 所有关键功能都得到了恢复和增强。

通过任何兼容MCP的客户端，使用AI驱动的Motion.dev集成来转换您的动画。

相关 MCP