← All guides

A practical walkthrough

Build and review an animation with an AI agent

Connect an MCP client, give it a clear brief and inspect the result before export.

Open the coin example ↗

The Keyframe MCP connector uses a dedicated Chrome profile so projects can persist between sessions. Install Node.js 18 or newer and Google Chrome, then add this server in your MCP client's settings and reconnect it:

{"mcpServers":{"keyframe":{"command":"npx","args":["-y","keyframe-mcp"]}}}

1. Give it a specific brief

Try this: Open Keyframe and load the coin example into a new project. Inspect the available bones and clips. Make a two-second looping celebration with a gentle squash, rise and settle. Keep the symbol inside the frame. Preserve the existing clips.

2. Ask for evidence

Ask the agent to run keyframe_check_animation and keyframe_contact_sheet, then render a motion preview. Check the loop seam, framing and timing. A successful tool call does not guarantee a good animation; refine the brief and inspect the result.

3. Keep the editable result

Ask for a project JSON export and a GIF preview. Use keyframe_open_result to save and open visible Chrome for manual edits. The connector's profile is separate from your usual browser; import the project JSON there to transfer the project.

The connector is free. Model usage follows the pricing of your chosen AI client. The editor's optional built-in AI is a separate feature that uses your own provider key.

Connector setup and tool reference →

Browser scripting reference →