How to install the MotionSpec MCP in Claude — and what it gets you
The MotionSpec MCP server is one URL: https://api.motionspec.dev/mcp. It's free, keyless and remote (Streamable HTTP) — there is nothing to install locally, no API key to manage, and nothing you send is stored. It exposes two tools, motion_catalog and motion_validate, that turn UI animation from something a model improvises into something it composes and verifies. Setup takes about two minutes in any MCP client; if you want to see the tools working before connecting anything, the browser playground runs the live validator with zero setup.
Claude Code — one command
claude mcp add --transport http motionspec https://api.motionspec.dev/mcp
Then type /mcp in Claude Code to confirm the server is connected and both tools are listed. From that point Claude can call them in any session.
Claude Desktop
In current builds: Settings → Connectors → "Add custom connector" — name it MotionSpec, paste https://api.motionspec.dev/mcp, and save. Because the server is keyless, there is no OAuth step and no token field; the connector is usable immediately.
Cursor and other MCP clients
Any client that speaks MCP over Streamable HTTP works with the standard configuration block:
{
"mcpServers": {
"motionspec": { "url": "https://api.motionspec.dev/mcp" }
}
}
What the two tools actually do
motion_catalogreturns the 40 verified animation primitives and their authoring rules — names, parameters, and bounds. This changes what the model is doing: instead of free-writing CSS keyframes or GSAP calls from statistical memory, it composes from a bounded, reviewed set. The catalog is the vocabulary.motion_validatechecks a finished MotionSpec against the schema, the primitive allow-list, parameter bounds and injection rules. It is fail-closed: anything off — a primitive that doesn't exist, a duration outside bounds, a suspicious selector — returns a precise, machine-readable error instead of passing through. This is the same trust boundary the compiler uses.
Why connect it — the practical advantages
- Hallucinated animation gets caught before it ships. Generated code full of plausible-but-nonexistent APIs fails at runtime, where debugging is slow. A spec that names a nonexistent primitive fails validation instantly, with an error the agent can act on in one step.
- Accessibility and budget are defaults, not requests. Specs declare
respectReducedMotion; the catalog's primitives carry the reduced-motion guard and performance budget by construction — a property of the output, not a hope in the prompt. - Deterministic, cacheable results. The same validated spec always compiles to the same output — fewer regenerations, fewer surprises between builds. (More on the economics in why a motion spec cuts token costs.)
- Zero friction. No key, no account, no stored data — the barrier to letting your agent verify its motion is one URL.
FAQ
Do I need an API key?
No. The server is public and keyless. Add the URL and it works.
Is anything I send stored?
No. Specs are validated and the result is returned — nothing is kept.
Which clients are supported?
Claude Code, Claude Desktop (custom connector), Cursor, and any other MCP client that supports remote servers over Streamable HTTP.
Catalog vs. validate — when do I use which?
Fetch motion_catalog once so the model knows the vocabulary; call motion_validate on every spec before compiling or shipping it.
The browser playground runs the live motion_validate tool — paste a spec, see the exact errors an agent would see.