AI Coding Assistants

Connect Claude Code, Cursor, or Windsurf to DevMotion. The local server is the default — it runs from the CLI inside your project, needs no account, and edits your HTML files directly. Prefer the hosted Studio? Jump to Use the cloud server instead.


One command

Inside a DevMotion project (run devmotion init my-video first if you don’t have one), run:

Terminal
npx @devmotion/cli setup

The setup asks which agent you use (Claude Code, Codex, or both) and whether to install globally or only in the current project. Global is the default. It installs a standards-based devmotion/SKILL.md and registers the local stdio MCP server in the agent’s official config.

For automation or CI, skip the prompts with flags:

Terminal
npx @devmotion/cli setup --agent both --scope global
npx @devmotion/cli setup --agent claude --scope project

The skill tells agents to use DevMotion’s type-safe MCP tools first. Those tools share the same mutation logic as the SaaS editor; direct scene HTML editing is reserved for capabilities that MCP does not expose.

Manual config (Claude Code, Cursor, Windsurf)

Every client uses the same local server: it spawns npx @devmotion/cli mcp over stdio. Add this to your client’s MCP config:

.mcp.json · .cursor/mcp.json · windsurf mcp_config.json
{
  "mcpServers": {
    "devmotion": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@devmotion/cli", "mcp"]
    }
  }
}
ClientConfig file
Claude Code.mcp.json (project) or ~/.claude.json (global)
Codex.codex/config.toml (project) or ~/.codex/config.toml (global)
Cursor.cursor/mcp.json (project) or ~/.cursor/mcp.json
Windsurf~/.codeium/windsurf/mcp_config.json

The local server works on the project in your current directory — no account, no API key, no quota. Run commands with npx @devmotion/cli …, or install once with npm i -g @devmotion/cli and drop the npx.


Use the cloud server instead

Want your agent to drive cloud projects in the hosted Studio? Connect to the remote endpoint over HTTP. Authentication is handled via OAuth — no tokens to copy for interactive clients.

Claude Code (CLI)

Terminal
claude mcp add --transport http devmotion https://devmotion.app/mcp

On first use, Claude Code prompts you to authenticate in the terminal. After that, DevMotion tools are available in every session.

Claude Desktop · Cursor · Windsurf

These clients reach the remote server through mcp-remote, which handles the OAuth handshake:

claude_desktop_config.json · .cursor/mcp.json · windsurf mcp_config.json
{
  "mcpServers": {
    "devmotion": {
      "command": "npx",
      "args": ["-y", "mcp-remote", "https://devmotion.app/mcp"]
    }
  }
}

On first connection, a browser tab opens for the DevMotion login. The session is saved locally and renewed automatically.

The cloud server runs under your DevMotion account and counts toward your plan. See Plans & Limits.


Troubleshooting

devmotion not found — use the npx config above, run it directly with npx @devmotion/cli mcp, or install once with npm i -g @devmotion/cli.

Local server not connecting — make sure you ran the client from inside a directory that contains a devmotion.json. The MCP server operates on the project in the current working directory.

(Cloud) Browser tab doesn’t open — run npx mcp-remote https://devmotion.app/mcp directly in your terminal to trigger the OAuth flow manually, then restart your client. Not needed for the Claude Code CLI.

(Cloud) “Unauthorized” after login — your token may have expired. Delete the mcp-remote cache at ~/.mcp-remote/ and reconnect.

(Cloud) Projects not visible in the editor — confirm you authenticated with the same DevMotion account you use in the browser.