Use the library from your coding agent.

The Annnimate MCP server connects the library to Cursor, Claude Code, and any other MCP client. Your agent searches components and pulls paste-ready GSAP code - React, Vue, or HTML - without you leaving the editor. It's part of the Library subscription.

Connect

Add the server, sign in, done

Pick your client. Every path ends the same way: a browser opens, you sign in with your normal Annnimate account (magic link, Google, or GitHub), approve the connection, and the client handles tokens and refresh from there. No keys to copy.

One command, then run /mcp and pick annnimate → Authenticate:

claude mcp add --transport http annnimate https://annnimate.com/api/mcp

No API key needed. Your client opens a browser sign-in with your normal Annnimate account the first time it connects.

Access follows your subscription.

The connection identifies you; what it can read is decided live, per request. If your subscription lapses the server says so, and the same connection works again the moment you re-subscribe.
Reference

The tools

  • search_components - browse or search the library. Returns slugs, titles, categories, descriptions - no code, cheap to call.
  • get_component - the full paste-ready code for one component in one format (react, vue, or html), plus install steps, gotchas, dependencies, and the configurable attributes.
  • get_concept - a /learn explainer of one GSAP idea (easing, ScrollTrigger, timelines, SplitText, plugins) as markdown.
  • get_pattern - a /patterns guide to one UI motion pattern and the components that implement it.

A typical flow: ask your agent for a component ("add a magnetic button"), it calls search_components, picks a slug, calls get_component with your framework, and wires the files into your project.

The landscape

Code-generator MCPs vs a component MCP

Most GSAP and Framer Motion MCP servers you find on registries are code generators: you describe an animation and the model writes fresh GSAP from scratch. Useful for one-off snippets, but the output is whatever the model produces that day, untested, unstyled, and yours to debug.

The Annnimate server is the other kind: a component MCP, the same model shadcn/ui uses. Your agent searches a library of finished, production-tested components and installs the real source, React, Vue, or HTML, with accessibility, reduced motion, and documented attributes already handled. Generation gives you a starting point; a component MCP gives you the shipped thing.

API key

For CI and clients without OAuth

If your client can't do a browser sign-in (CI, scripts, older clients), generate an API key in Settings → MCP server and send it as a header. The key is shown once - treat it like a password, and revoke it in settings if it leaks.

Claude Code (API key)
Scope

What it covers

  • The full component Library, in React, Vue, and HTML/CSS/JS.
  • Concepts and patterns as agent-readable markdown.
  • Webflow is not available via MCP - agents can't paste into the Webflow Designer. Use the Webflow tab on the component page.
  • Kits are not included yet - Kit support is on the roadmap.
Troubleshooting

Common errors

  • 401- not authenticated. Re-run the client's authenticate flow (Claude Code: /mcp→ Authenticate), or check the API-key header if you use one.
  • 403- you're signed in but the subscription isn't active. Re-subscribe and the same connection works again immediately.