motion-cart

Shop for animations and let an AI agent add them to any local project — React, Next, Vue, or vanilla JS.

# point it at a project + its already-running dev server
npx motion-cart --target . --dev-url http://localhost:5173 --token <your-motion+-token>
# then open the control panel it prints (http://localhost:7100)

Browse a catalogue of Motion animations, optionally click the elements on your live site to target, and a Claude agent edits your real source while the preview hot-reloads.

Requirements

• A project that is a clean git repo (edits land on an isolated motion-cart/session-* branch).
• An already-running local dev server for that project; pass its URL via --dev-url (loopback only).

Model provider (auth)

By default the agent uses your existing Claude Code login (no key needed). You can instead point it at any Anthropic-compatible gateway — including iO Bonzai — with your own key.

Set it once (saved to ~/.motion-cart/config.json, chmod 600) and every run reuses it:

npx motion-cart config --base-url https://api-v2.bonzai.iodigital.com \
                       --api-key <your-bonzai-key> --model claude-4-5-sonnet
# then just:
npx motion-cart --target . --dev-url http://localhost:5173

npx motion-cart config            # show current provider (key redacted)
npx motion-cart config --clear    # reset to the Claude Code login

Or pass per-run flags (these + MOTION_CART_* env override the saved config):

npx motion-cart --target . --dev-url http://localhost:5173 \
  --base-url https://api-v2.bonzai.iodigital.com --api-key <key> --model claude-4-5-sonnet

--base-url/--api-key/--model map to ANTHROPIC_BASE_URL / ANTHROPIC_AUTH_TOKEN / model for the agent. The gateway must expose the Anthropic Messages route (<base-url>/v1/messages) — LiteLLM-based gateways like Bonzai do; a purely OpenAI-shaped endpoint won't work.

Auth gotcha: an invalid ANTHROPIC_API_KEY in your shell overrides your Claude login and causes 401 Invalid bearer token. unset it, or pass --api-key/--base-url explicitly.

Flags

| Flag | Default | Purpose | |---|---|---| | --dev-url | (required) | URL of your running local dev server | | --target | cwd | project directory the agent edits | | --base-url | $MOTION_CART_BASE_URL | custom Anthropic-compatible gateway (e.g. iO Bonzai) | | --api-key | $MOTION_CART_API_KEY | API key for that gateway | | --model | $MOTION_CART_MODEL | model id (e.g. claude-4-5-sonnet) | | --port | 7100 | control panel port | | --proxy-port | 7101 | injecting proxy port | | --token | $MOTION_PLUS_TOKEN | Motion+ token to enable the Motion MCP |

Safety

Edits are made on a motion-cart/session-* branch (branched from your current branch) and auto-committed, so your base branch stays clean. Review with git diff <base>..motion-cart/session-*, then merge or delete the branch. The proxy binds loopback only and the control API requires a per-session token.