Quick Start
Get a connection token, connect your editor to the hosted endpoint, and compile your first animation, with no install and no npm package.
Prerequisites
- preset AI alpha access. The hosted endpoint is invite-only; request early access if you're not in yet.
- An AI assistant that supports remote MCP servers (Claude Code, Claude Desktop, Cursor, or VS Code)
Connect
Animatic runs as a hosted remote MCP endpoint, gated on your preset AI alpha access.
1. Get your token. Once you're an alpha member, we send you an access token (ak_live_…).
2. Add the remote server to Claude Code:
claude mcp add --transport http animatic \
https://mcp.presetai.dev/animatic/mcp \
--header "Authorization: Bearer ak_live_…"
For Claude Desktop, Cursor, and VS Code, see MCP Setup.
No other API keys are needed. A valid token unlocks the 61 hosted tools; connecting without one returns 401 Unauthorized. For project state and rendering, see Local install.
One prompt, a full motion spec
The fastest way to try the hosted surface — describe what you want and let your AI search, compose, and compile it to production CSS in one go:
"Compose a 3-scene product launch sequence with the cinematic-dark personality and compile it to CSS."
Your AI chains the hosted tools — discover → plan → compile — and hands back ready-to-paste keyframes.
Want a single call that runs the whole pipeline — brief → scenes → timelines → scoring → a render-ready spec? generate_video is part of the local install, not the hosted surface; the local renderer (render_project) turns that spec into a finished video file.
Your first animation
For step-by-step control, try these prompts with your AI:
1. Explore what's available:
What animation personalities does Animatic have? Show me the editorial personality.
2. Search for primitives:
Search for entrance animations that work with the editorial personality.
3. Get choreography recommendations:
I need a hero section entrance for a documentation site.
Recommend choreography using the editorial personality.
4. Compile to CSS:
Compile that choreography recommendation into production CSS.
Your AI will use Animatic's tools to search, compose, validate, and compile — returning production-ready CSS keyframes.
Next steps
- Personalities: understand the 4 animation personalities and when to use each
- Primitives: browse the 156-primitive library
- Brief to Scenes: learn the full animation pipeline
- Tool Reference: detailed docs for the hosted tools