Docs & examples for your agent

LLMs have supercharged our development workflows, but even now they still struggle to produce great animation code.

For example, have you ever fought with your LLM about still importing Motion from "framer-motion"? This is because it's trained on out-of-date information.

Or has it produced an animation that's almost right but ends up requiring a lot of prompting to fix? This is because LLMs can't visualise timing or easing curves, so they guess at values that often feel wrong.

The Motion AI Kit ships an MCP server that gives your LLM the right information at the right time, instead of stale training data:

• Motion documentation: the full, current docs, searchable by your agent.

• Example source code: every premium example, on Motion+.

• Your saved transitions: anything you build in the Transition Editor.

In short, it turns your AI editor into a Motion expert.

Documentation

This is the baseline, no Motion+ required: the AI Kit MCP includes the full, up-to-date Motion documentation. Every docs page is available as an MCP resource, and your LLM can search across them using the built-in search tool.

Every page is available as a resource, and is queryable by the LLM via the dedicated search tool.

Examples (Motion+)

Motion+ adds a vault of premium examples, all queryable by your LLM.

Instead of relying on outdated training data, your AI searches this curated collection of production-ready patterns and adapts them to your project. It's as easy as "build me an accordion", or "create a vertically scrolling Carousel".

• Zero hallucinations: The code comes from the official Motion repository, not a generic LLM training set.

• Instant & Offline: The server runs locally on your machine for zero latency.

• Context aware: The AI reads the example code and understands why it works, allowing it to adapt the variables to your specific project names automatically.

Use prompts like:

create a tooltip with Motion and Base UI

Or:

make a spinning 3d cube

Browsing

All examples are browsable via the Motion Examples gallery. It's easy to ask your editor to add a specific one:

adapt the app store motion example

The AI editor will, by default, select between JS, React and Vue based on your project. You can manually prompt it for a specific platform by mentioning it directly.

adapt the app store motion vue example 

Saved transitions

The AI Kit Extension includes a visual transition editor. Any transition you build there can be saved to your Motion+ profile, making it available to your LLM via the MCP.

On a user's profile, you can save their shared transitions to your own profile, too.

With the AI Kit MCP, these shared transitions can be accessed via your LLM.

use my "bounce out" transition

Related

These are part of the AI Kit but live in their own tools, not the MCP context:

• Transition Editor: build and visualise CSS and Motion transitions, then save them so they feed back into the MCP.

• /motion skill: best-practice rules for will-change, per-frame performance, and transform usage, with React, Vue, vanilla, Radix and Base UI guidance. Install via the AI Kit installer.

• MotionScore Code Audit: grade and fix the animations your agent writes.

Get the AI Kit

Stop fighting your AI over animation code. The Motion AI Kit is included with Motion+, along with premium Motion APIs, the full examples library, step-by-step tutorials, and early access to new features.