Quick Start

Mint an access token, connect your editor to the hosted endpoint, and compile your first animation — no install, no npm package.

Prerequisites

A free Preset account — sign up at presetai.dev
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 free account.

1. Mint a token — in the Preset dashboard, click Connect Animatic to generate 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.

A free Preset account is all you need — no other API keys, no cost. A valid token unlocks the 60 hosted tools; connecting without one returns 401 Unauthorized. For project state and rendering (all 78 tools), 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 all 78 tools