Skip to main content

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.

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.

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

Was this page helpful?