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.
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/mcpNo 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 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.
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.
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.
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.
