Provides pre-vetted React Three Fiber & GSAP components that are injected into Next.js apps via AST-safe edits, enabling AI agents to add 3D and motion animations without VRAM leaks or SSR crashes.
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type @ followed by the MCP server name and your instructions, e.g., "@animai search for a dark 3d hero with particles"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
Production-safe 3D & motion components your AI agent can install.
AI agents are great at UI — and notoriously bad at WebGL. Ask one for a Three.js hero and you'll usually get VRAM leaks, SSR crashes, and hydration bugs. AnimAI fixes that with a registry of pre-vetted React Three Fiber & GSAP components that are certified leak-free, SSR-safe, and performance-budgeted — then injected into your Next.js app with AST-safe edits (never regex) by a CLI or an MCP server your agent calls directly.
npx animai add hero-orbital-rigEvery component ships with a machine-generated vetting report, produced by
the harness in scripts/vet.mjs and enforced in CI:
Check | Guarantee |
Dispose audit | a |
SSR gate | WebGL is loaded via |
GSAP rule | animations use |
Canvas sizing |
|
Related MCP server: threejs-devtools-mcp
Add one line to your agent's MCP config (Cursor, Claude Code, Windsurf):
{
"mcpServers": {
"animai": { "command": "npx", "args": ["-y", "animai", "mcp"] }
}
}Your agent gets two flat, deterministic tools:
search_motion_library — natural-language search over the registry
fetch_motion_component — exact vetted source + dependencies + integration steps
npx animai search "dark 3d hero" # find components
npx animai add hero-orbital-rig # write files + AST-patch your route
npx animai add hero-orbital-rig --dry-run
npx animai add hero-orbital-rig --target main
npx animai doctor hero-orbital-rig # check peer-dependency versions
npx animai update hero-orbital-rig # re-fetch latest (guards your local edits)
npx animai login <license-key> # unlock Pro componentsadd writes the component + SSR-safe loader into app/components/ and injects
the JSX into your route using @ast-grep/napi Find & Patch — imports and nodes
are inserted through the AST, so your source is never corrupted by string
replacement.
The CLI, MCP server, and a growing set of components are free (MIT). Pro components are delivered through a licensed registry — the public npm package and CDN never contain Pro source. See docs/registry.md.
Path | What it is |
| CLI + MCP server + registry client (the |
| Component source of truth ( |
| Registry/CDN build steps + the vetting harness |
| animai.dev — browse, docs, and a live MCP playground |
| Cloudflare Worker serving the licensed registry (Polar) |
| |
| Minimal Next.js target app for trying |
npm install
npm run build # build registry data + compile TypeScript
npm run vet # run the vetting harness, write reports
npm run vet:check # CI gate — non-zero exit on any critical failure
npm run demo:dry-run # preview an AST injection against examples/next-demo
npm run mcp # start the MCP server on stdioMIT for the tooling and free components. Pro components are licensed per the terms at animai.dev.
This server cannot be deployed
Search, read and install agent-ready React components, screens and blocks for AI products.
React components and blocks with motion. Search docs, props and shadcn install commands.
Search and pull 500+ production-ready React + Tailwind sections and elements
Search and read the docs and examples of react-three-fiber, drei, zustand, jotai... from your agent
