MCP 服务器

motion-dev-react-mcp

MCP server providing 33 verified Motion for React APIs with correct imports and defaults, enabling AI assistants to generate accurate animation code.

README

<h1 align="center">motion-dev-react-mcp</h1>

<p align="center"> <a href="https://motion.dev">Motion</a> for React — inside your AI assistant.<br/> <strong>33 APIs. Correct imports. Accurate defaults. No hallucinations.</strong> </p>

Install

Claude Code

claude mcp add motion-dev-react-mcp -- npx -y @orkait-ai/motion-dev-react-mcp

Cursor / Windsurf / any MCP client

{
  "mcpServers": {
    "motion-dev-react-mcp": {
      "command": "npx",
      "args": ["-y", "@orkait-ai/motion-dev-react-mcp"]
    }
  }
}

<details> <summary>Build from source</summary>

git clone https://github.com/orkait/motion-dev-react-mcp.git
cd motion-dev-react-mcp && npm install && npm run build
claude mcp add motion-dev-react-mcp -- node $(pwd)/dist/index.js

</details>

What it does

Your AI writes Motion code that actually works — because it can look up the real API instead of guessing.

// Without MCP — AI hallucinates
import { useViewportScroll } from "framer-motion"  // wrong

// With MCP — AI looks it up
import { useScroll, useTransform } from "motion/react"  // correct
const { scrollYProgress } = useScroll({ target: ref, offset: ["start end", "end start"] });

Tools

Tool	Purpose
`get_api`	Props, types, defaults, and usage for any component or hook
`search_docs`	Find the right API — "how to animate on scroll"
`get_examples`	Working code by category — scroll, drag, layout, exit, SVG...
`generate_animation`	Describe what you want → get a working component
`get_transitions`	Spring, tween, inertia config and orchestration
`list_apis`	Browse all 33 APIs, filter by kind

Coverage

33 APIs — verified against motiondivision/motion v12 source code.


Components	`motion` `AnimatePresence` `LayoutGroup` `LazyMotion` `MotionConfig` `Reorder.Group` `Reorder.Item`
Hooks	`useAnimate` `useMotionValue` `useTransform` `useSpring` `useScroll` `useInView` `useMotionValueEvent` `useVelocity` `useTime` `useMotionTemplate` `useDragControls` `useAnimationFrame` `useReducedMotion` `useIsPresent` `usePresence` `usePresenceData` `useWillChange` `useCycle` `usePageInView`
Functions	`animate` `stagger` `hover` `press` `scroll` `inView`

14 example categories — animation, gestures, scroll, layout, exit, drag, hover, SVG, transitions, variants, keyframes, spring, reorder, performance.

Every prop, every default, every example — cross-referenced against the source, not just the docs.

Why this over the other one

	motion-dev-react-mcp	the other MCP
APIs	33	9 (5 broken)
Dependencies	2	180+ (SQLite, Babel, Cheerio...)
Framework	React only	React + Vue + JS (stubs)
Defaults	Source-verified	From docs (some wrong)
Tests	70 passing	1 (`1+1=2`)
Last updated	Active	Aug 2025