@devmotion/cli 0.6.0 → 0.6.1

package/studio/client/_app/immutable/nodes/28.DKT4ZSZk.js

@@ -1,8 +0,0 @@
-import"../chunks/Ct_92ewg.js";import"../chunks/CRSvvRTA.js";import{s as o,k as s,b as i,g as d,n as c}from"../chunks/BH1rZqH0.js";import{C as r}from"../chunks/B3TZrMGu.js";var l=d('<h1 id="devmotion-mcp-server">DevMotion MCP Server</h1> <p>Let AI assistants build DevMotion videos for you — create projects, add layers, animate, and render, all through natural language.</p> <p>There are two ways to connect, and <strong>local comes first</strong>:</p> <ul><li><strong>Local (stdio) — the default for devs & agents.</strong> The MCP server runs from the CLI, right inside your project. No account, no network, no tokens. This is what <code>devmotion setup</code> wires up, and it edits your HTML files directly.</li> <li><strong>Remote (cloud HTTP) — optional.</strong> Point any MCP client at the hosted server when you’d rather work against cloud projects in the hosted Studio.</li></ul> <hr/> <h2 id="what-is-mcp">What is MCP?</h2> <p>The <a href="https://modelcontextprotocol.io" rel="nofollow">Model Context Protocol</a> (MCP) is an open standard that lets AI clients interact with external tools and services. By connecting your AI client to DevMotion’s MCP server, the AI can create and edit animation projects on your behalf.</p> <hr/> <h2 id="quick-start-local">Quick start (local)</h2> <p>Inside a DevMotion project (run <code>devmotion init my-video</code> first), run:</p> <!> <p>This installs the Claude Code skills and registers a <strong>local, stdio</strong> MCP server in <code>.claude/settings.local.json</code>:</p> <!> <p>Open your agent and ask it to build a video. The AI calls <code>create_layer</code>, <code>edit_layer</code>, and friends, and every change is written straight back to your HTML files. See <a href="/docs/mcp/setup">AI Coding Assistants</a> for Cursor, Windsurf, and manual config.</p> <blockquote><p>No account, no API key, no quota — the local server runs entirely on your machine.</p></blockquote> <hr/> <h2 id="prefer-the-cloud-remote-http">Prefer the cloud? (remote HTTP)</h2> <p>If you’d rather work against cloud projects in the hosted Studio, connect to the remote endpoint instead:</p> <p><strong>MCP Endpoint:</strong> <code>https://devmotion.app/mcp</code></p> <p>Interactive clients (Claude, Cursor, Windsurf) handle OAuth automatically; programmatic clients use a bearer token from your <a href="/profile">profile page</a>. See <a href="/docs/mcp/setup">AI Coding Assistants</a> for client configs and <a href="/docs/mcp/integrations">Enterprise & Automation</a> for no-code platforms and agent frameworks.</p> <hr/> <h2 id="which-one-should-i-use">Which one should I use?</h2> <table><thead><tr><th>You want to…</th><th>Use</th></tr></thead><tbody><tr><td>Build locally with Claude Code, Cursor, or Windsurf</td><td><strong>Local (stdio)</strong> — <a href="/docs/mcp/setup">AI Coding Assistants →</a></td></tr><tr><td>Work offline, in CI, or with no account</td><td><strong>Local (stdio)</strong> — <a href="/docs/mcp/setup">AI Coding Assistants →</a></td></tr><tr><td>Drive the hosted Studio from your agent</td><td><strong>Remote (HTTP)</strong> — <a href="/docs/mcp/setup">AI Coding Assistants →</a></td></tr><tr><td>Automate from n8n, Make, LangChain, CrewAI, etc.</td><td><strong>Remote (HTTP)</strong> — <a href="/docs/mcp/integrations">Enterprise & Automation →</a></td></tr></tbody></table> <hr/> <h2 id="how-it-works">How it works</h2> <p><strong>1. Connect</strong> — point your client at the local server (<code>devmotion mcp</code>) or the remote endpoint. The AI discovers available tools automatically.</p> <p><strong>2. Create</strong> — ask the AI to build an animation in plain language:</p> <blockquote><p><em>“Create a 1080×1920 TikTok intro with a bold title that slides in and a pulsing accent shape in the background.”</em></p></blockquote> <p><strong>3. Render</strong> — locally with <code>devmotion render</code>, or via the hosted Studio when using the remote server. See the full <a href="/docs/mcp/reference">tool reference</a>.</p>',1);function g(n){var t=l(),e=o(s(t),20);r(e,{title:"Terminal",lang:"bash",code:"npx @devmotion/cli setup"});var a=o(e,4);r(a,{title:".claude/settings.local.json",lang:"json",code:`{
-  "mcpServers": {
-    "devmotion": {
-      "command": "npx",
-      "args": ["devmotion", "mcp"]
-    }
-  }
-}`}),c(32),i(n,t)}export{g as component};

package/studio/client/_app/immutable/nodes/38.D6xlICgs.js

@@ -1 +0,0 @@
-import"../chunks/Ct_92ewg.js";import"../chunks/CRSvvRTA.js";import{p as U,s as r,k as V,f as t,c as H,b as N,e as z,g as B,r as e,n as g}from"../chunks/BH1rZqH0.js";import{s as o}from"../chunks/BKx7aQex.js";import{i as G}from"../chunks/DVkCj0xi.js";import{P as a}from"../chunks/Cdg3o65X.js";var J=B('<h1 id="plans--limits">Plans & Limits</h1> <blockquote><p><strong>The local CLI MCP server is free.</strong> When the server runs from <code>devmotion mcp</code> on your machine (the default — see <a href="/docs/mcp/setup">AI Coding Assistants</a>), there’s no account, plan, or quota. Everything below applies to the <strong>cloud</strong> MCP server at <code>https://devmotion.app/mcp</code>.</p></blockquote> <p>Cloud MCP access requires a <strong>Creator or Pro plan</strong>. All cloud MCP operations run under your DevMotion account — the same limits apply as in the web editor.</p> <hr/> <h2 id="plan-comparison">Plan Comparison</h2> <table><thead><tr><th>Feature</th><th align="center">Free</th><th align="center"> </th><th align="center"> </th></tr></thead><tbody><tr><td>MCP Access</td><td align="center">—</td><td align="center">✓</td><td align="center">✓</td></tr><tr><td>Rate limit</td><td align="center">—</td><td align="center"> </td><td align="center"> </td></tr><tr><td>AI credits/month</td><td align="center">—</td><td align="center"> </td><td align="center"> </td></tr><tr><td>Cloud projects</td><td align="center">—</td><td align="center"> </td><td align="center">Unlimited</td></tr><tr><td>Video exports/month</td><td align="center">—</td><td align="center"> </td><td align="center"> </td></tr><tr><td>Max export res.</td><td align="center">—</td><td align="center"> </td><td align="center"> </td></tr><tr><td>Webhooks</td><td align="center">—</td><td align="center">✓</td><td align="center">✓</td></tr></tbody></table> <blockquote><p><strong>Video exports/month</strong> counts all exports across all surfaces — web editor, REST API, and MCP. The quota is shared.</p></blockquote> <hr/> <h2 id="how-credits-work">How credits work</h2> <p>AI credits are shared across the web editor and MCP. They are consumed <strong>only by server-side AI features</strong> — things like caption generation and dubbing that require DevMotion’s servers to run an AI model on your behalf.</p> <p>Regular MCP tool calls (<code>create_project</code>, <code>create_layer</code>, <code>edit_layer</code>, etc.) do <strong>not</strong> consume credits. When you use Claude, Cursor, or any other MCP client to build animations, the AI reasoning happens entirely on the client side — DevMotion only executes the resulting tool calls. Credits are only spent if the client invokes a server-side AI tool explicitly.</p> <hr/> <h2 id="account--quota">Account & quota</h2> <blockquote><p>Sign in with the <strong>same DevMotion account</strong> you use in the browser. Projects created via MCP appear in your editor and count toward your plan’s project quota. If you hit the project limit, <code>create_project</code> will return an error until you delete an existing project or upgrade your plan.</p></blockquote> <p><a href="/#pricing">Upgrade your plan →</a></p>',1);function tt(k,w){U(w,!1),G();var v=J(),_=r(V(v),10),n=t(_),x=t(n),i=r(t(x),2),I=t(i);e(i);var y=r(i),j=t(y);e(y),e(x),e(n);var b=r(n),d=r(t(b)),s=r(t(d),2),R=t(s);e(s);var P=r(s),$=t(P);e(P),e(d);var c=r(d),l=r(t(c),2),L=t(l,!0);e(l);var f=r(l),D=t(f,!0);e(f),e(c);var p=r(c),C=r(t(p),2),E=t(C,!0);e(C),g(),e(p);var h=r(p),u=r(t(h),2),T=t(u,!0);e(u);var M=r(u),S=t(M,!0);e(M),e(h);var q=r(h),m=r(t(q),2),W=t(m,!0);e(m);var A=r(m),F=t(A,!0);e(A),e(q),g(),e(b),e(_),g(18),H(()=>{o(I,`Creator ($${a.creator.price??""}/mo)`),o(j,`Pro ($${a.pro.price??""}/mo)`),o(R,`${a.creator.limits.apiRateLimit??""} req/min`),o($,`${a.pro.limits.apiRateLimit??""} req/min`),o(L,a.creator.limits.maxCostPerMonth*100),o(D,a.pro.limits.maxCostPerMonth*100),o(E,a.creator.limits.cloudProjects),o(T,a.creator.limits.exportsPerMonth),o(S,a.pro.limits.exportsPerMonth),o(W,a.creator.limits.maxExportResolution),o(F,a.pro.limits.maxExportResolution)}),N(k,v),z()}export{tt as component};

package/studio/client/_app/immutable/nodes/39.DabCE-Rt.js

@@ -1,79 +0,0 @@
-import"../chunks/Ct_92ewg.js";import"../chunks/CRSvvRTA.js";import{s as t,k as m,b as _,g as b,r as f,n as j}from"../chunks/BH1rZqH0.js";import{h as k}from"../chunks/B0CGBs-v.js";import{C as e}from"../chunks/B3TZrMGu.js";var v=b('<h1 id="tools--keyframes-reference">Tools & Keyframes Reference</h1> <p>Complete reference for all MCP tools exposed by DevMotion and the keyframe animation system.</p> <hr/> <h2 id="available-tools">Available Tools</h2> <table><thead><tr><th>Tool</th><th>Description</th></tr></thead><tbody><tr><td><code>create_project</code></td><td>Create a new animation project</td></tr><tr><td><code>get_project</code></td><td>Inspect project state, layers, and keyframes</td></tr><tr><td><code>create_layer</code></td><td>Add a layer with optional animations and keyframes</td></tr><tr><td><code>edit_layer</code></td><td>Patch an existing layer’s properties or keyframes</td></tr><tr><td><code>remove_layer</code></td><td>Delete a layer from the project</td></tr><tr><td><code>configure_project</code></td><td>Update project dimensions, duration, FPS, background</td></tr><tr><td><code>group_layers</code></td><td>Group multiple layers together</td></tr><tr><td><code>ungroup_layers</code></td><td>Ungroup a layer group</td></tr><tr><td><code>action_generate_captions</code></td><td>Transcribe audio/video to word-level captions</td></tr><tr><td><code>action_dub_audio</code></td><td>Dub audio into another language with AI voice cloning</td></tr><tr><td><code>action_extract_audio</code></td><td>Extract audio track from a video layer</td></tr></tbody></table> <hr/> <h2 id="create_project">create_project</h2> <!> <p>Returns the project <code>id</code> and a preview URL. Use the <code>id</code> in every subsequent call.</p> <hr/> <h2 id="create_layer">create_layer</h2> <p>Creates a complete layer in a single call. The <code>layer</code> field is required and carries the type + props.</p> <!> <!> <h3 id="create_layer-fields">create_layer fields</h3> <table><thead><tr><th>Field</th><th>Type</th><th align="center">Required</th><th>Description</th></tr></thead><tbody><tr><td><code>projectId</code></td><td>string</td><td align="center">✓</td><td>Project to add the layer to</td></tr><tr><td><code>layer</code></td><td>object</td><td align="center">✓</td><td><code>&#123; type, props &#125;</code> — see Layer Types below</td></tr><tr><td><code>name</code></td><td>string</td><td align="center">—</td><td>Display name</td></tr><tr><td><code>transform</code></td><td>object</td><td align="center">—</td><td>Position, scale, rotation, anchor</td></tr><tr><td><code>style</code></td><td>object</td><td align="center">—</td><td>Opacity, blur, filters, drop shadow</td></tr><tr><td><code>enterTime</code></td><td>number</td><td align="center">—</td><td>When the layer appears (seconds, default 0)</td></tr><tr><td><code>exitTime</code></td><td>number</td><td align="center">—</td><td>When the layer disappears (seconds)</td></tr><tr><td><code>animation</code></td><td>object</td><td align="center">—</td><td><code>&#123; preset?, keyframes? &#125;</code> — can use both at once</td></tr></tbody></table> <hr/> <h2 id="edit_layer">edit_layer</h2> <p>Patch-style update — only the fields you provide are changed.</p> <!> <p><code>props</code> are merged with existing props. <code>transform</code> and <code>style</code> replace the entire section if provided.</p> <hr/> <h2 id="remove_layer">remove_layer</h2> <!> <p><code>layerId</code> accepts either the layer’s ID or its display name.</p> <hr/> <h2 id="configure_project">configure_project</h2> <!> <p>All fields are optional. <code>backgroundColor</code> is a hex string.</p> <hr/> <h2 id="group_layers--ungroup_layers">group_layers / ungroup_layers</h2> <!> <!> <hr/> <h2 id="media-actions">Media Actions</h2> <p>These tools run AI-powered operations on media layers (video/audio). Each action creates new layers and/or modifies the source layer automatically.</p> <h3 id="action_generate_captions">action_generate_captions</h3> <p>Transcribe a video or audio layer into word-level captions using Whisper AI.</p> <!> <table><thead><tr><th>Field</th><th>Type</th><th align="center">Required</th><th>Description</th></tr></thead><tbody><tr><td><code>projectId</code></td><td>string</td><td align="center">✓</td><td>Project containing the layer</td></tr><tr><td><code>layerId</code></td><td>string</td><td align="center">✓</td><td>Video or audio layer to transcribe</td></tr><tr><td><code>language</code></td><td>string</td><td align="center">—</td><td>Language code (e.g. “en”, “es”). Omit for auto-detect</td></tr><tr><td><code>prompt</code></td><td>string</td><td align="center">—</td><td>Context to guide transcription (lyrics, terminology)</td></tr></tbody></table> <p>Creates a new <strong>captions</strong> layer linked to the source media.</p> <h3 id="action_dub_audio">action_dub_audio</h3> <p>Dub audio into another language using AI voice cloning (ElevenLabs).</p> <!> <table><thead><tr><th>Field</th><th>Type</th><th align="center">Required</th><th>Description</th></tr></thead><tbody><tr><td><code>projectId</code></td><td>string</td><td align="center">✓</td><td>Project containing the layer</td></tr><tr><td><code>layerId</code></td><td>string</td><td align="center">✓</td><td>Audio or video layer to dub</td></tr><tr><td><code>targetLang</code></td><td>string</td><td align="center">✓</td><td>Target language code: en, es, fr, de, it, pt, ru, ja, ko, zh, ar, hi, nl, pl, tr</td></tr><tr><td><code>sourceLang</code></td><td>string</td><td align="center">—</td><td>Source language code. Omit for auto-detect</td></tr></tbody></table> <p>Creates a new <strong>audio</strong> layer with the dubbed track and mutes the original.</p> <h3 id="action_extract_audio">action_extract_audio</h3> <p>Extract the audio track from a video layer using FFmpeg.</p> <!> <table><thead><tr><th>Field</th><th>Type</th><th align="center">Required</th><th>Description</th></tr></thead><tbody><tr><td><code>projectId</code></td><td>string</td><td align="center">✓</td><td>Project containing the layer</td></tr><tr><td><code>layerId</code></td><td>string</td><td align="center">✓</td><td>Video layer to extract audio from</td></tr></tbody></table> <p>Creates a new <strong>audio</strong> layer and mutes the original video. Free — no AI credits required.</p> <hr/> <h2 id="layer-types">Layer Types</h2> <table><thead><tr><th>Type</th><th>Key props</th></tr></thead><tbody><tr><td><code>text</code></td><td><code>content</code> (string), <code>fontSize</code>, <code>color</code>, <code>fontFamily</code>, <code>fontWeight</code></td></tr><tr><td><code>shape</code></td><td><code>shapeType</code> (<code>rectangle</code>/<code>ellipse</code>/<code>circle</code>/…), <code>background</code></td></tr><tr><td><code>image</code></td><td><code>src</code> (URL)</td></tr><tr><td><code>video</code></td><td><code>src</code> (URL)</td></tr><tr><td><code>group</code></td><td><em>(no props — use <code>group_layers</code> instead)</em></td></tr></tbody></table> <hr/> <h2 id="keyframe-animation">Keyframe Animation</h2> <p>Layers are animated by adding keyframes at specific times. DevMotion interpolates between them automatically using the easing curve you specify.</p> <p>Pass keyframes inside <code>animation.keyframes</code> when calling <code>create_layer</code>, or add them later with <code>edit_layer</code>.</p> <h3 id="animatable-properties">Animatable Properties</h3> <table><thead><tr><th>Property</th><th>Description</th></tr></thead><tbody><tr><td><code>position.x</code> / <code>position.y</code></td><td>Position in pixels</td></tr><tr><td><code>position.z</code></td><td>Z depth</td></tr><tr><td><code>scale.x</code> / <code>scale.y</code></td><td>Scale (1 = 100%)</td></tr><tr><td><code>rotation.x</code> / <code>rotation.y</code> / <code>rotation.z</code></td><td>Rotation in degrees</td></tr><tr><td><code>opacity</code></td><td>Transparency (0–1)</td></tr><tr><td><code>props.fontSize</code></td><td>Font size (text layers)</td></tr><tr><td><code>props.color</code></td><td>Text color (hex)</td></tr><tr><td><code>props.content</code></td><td>Text content (typewriter)</td></tr></tbody></table> <h3 id="keyframe-schema">Keyframe schema</h3> <p>Each keyframe requires an <code>id</code> (any unique string — DevMotion replaces it internally):</p> <pre class="language-json"></pre> <h3 id="easing-values">Easing Values</h3> <table><thead><tr><th>Value</th><th>Description</th></tr></thead><tbody><tr><td><code>linear</code></td><td>Constant speed</td></tr><tr><td><code>ease-in</code></td><td>Starts slow, ends fast</td></tr><tr><td><code>ease-out</code></td><td>Starts fast, ends slow</td></tr><tr><td><code>ease-in-out</code></td><td>Slow at both ends</td></tr><tr><td><code>bounce</code></td><td>Elastic bounce at end</td></tr></tbody></table> <hr/> <h2 id="example-prompts">Example Prompts</h2> <ul><li><em>“Create a 9:16 product showcase with a phone mockup image, a title, and a price tag that bounces in.”</em></li> <li><em>“Make a lower-third bar with white text on a semi-transparent dark background that slides in from the left.”</em></li> <li><em>“Build a 5-second countdown animation with a large number that scales up and fades out each second.”</em></li> <li><em>“Edit the ‘Headline’ layer to use yellow and add a shake animation.”</em></li></ul>',1);function C(g){var d=v(),o=t(m(d),14);e(o,{title:"create_project",lang:"json",code:`{
-  "name": "TikTok Intro",
-  "width": 1080,
-  "height": 1920
-}`});var r=t(o,10);e(r,{title:"create_layer — text layer with slide-in animation",lang:"json",code:`{
-  "projectId": "your_project_id",
-  "name": "Title",
-  "layer": {
-    "type": "text",
-    "props": {
-      "content": "Hello World",
-      "fontSize": 64,
-      "color": "#ffffff"
-    }
-  },
-  "transform": {
-    "position": { "x": 0, "y": -200 }
-  },
-  "animation": {
-    "keyframes": [
-      { "id": "kf1", "time": 0,   "property": "position.x", "value": -400, "easing": "ease-out" },
-      { "id": "kf2", "time": 0.5, "property": "position.x", "value": 0 }
-    ]
-  }
-}`});var a=t(r,2);e(a,{title:"create_layer — shape with preset animation",lang:"json",code:`{
-  "projectId": "your_project_id",
-  "name": "Accent Shape",
-  "layer": {
-    "type": "shape",
-    "props": {
-      "shapeType": "rectangle",
-      "background": { "type": "solid", "color": "#ff4455" }
-    }
-  },
-  "transform": {
-    "position": { "x": 0, "y": 300 },
-    "scale": { "x": 0.8, "y": 0.1 }
-  },
-  "animation": {
-    "preset": { "id": "fade-in", "startTime": 0.2, "duration": 0.4 }
-  }
-}`});var n=t(a,12);e(n,{title:"edit_layer — update position and color",lang:"json",code:`{
-  "projectId": "your_project_id",
-  "layerId": "layer_abc",
-  "transform": {
-    "position": { "x": 100, "y": -200 }
-  },
-  "props": {
-    "color": "#ffcc00"
-  }
-}`});var c=t(n,8);e(c,{title:"remove_layer",lang:"json",code:`{
-  "projectId": "your_project_id",
-  "layerId": "layer_abc"
-}`});var i=t(c,8);e(i,{title:"configure_project — resize to landscape",lang:"json",code:`{
-  "projectId": "your_project_id",
-  "width": 1920,
-  "height": 1080,
-  "duration": 10,
-  "backgroundColor": "#1a1a2e"
-}`});var s=t(i,8);e(s,{title:"group_layers",lang:"json",code:`{
-  "projectId": "your_project_id",
-  "layerIds": ["layer_abc", "layer_def"],
-  "name": "Background Group"
-}`});var l=t(s,2);e(l,{title:"ungroup_layers",lang:"json",code:`{
-  "projectId": "your_project_id",
-  "groupId": "group_xyz"
-}`});var p=t(l,12);e(p,{title:"action_generate_captions",lang:"json",code:`{
-  "projectId": "your_project_id",
-  "layerId": "video_layer_id",
-  "language": "en",
-  "prompt": "Optional context for transcription accuracy"
-}`});var h=t(p,10);e(h,{title:"action_dub_audio",lang:"json",code:`{
-  "projectId": "your_project_id",
-  "layerId": "audio_layer_id",
-  "targetLang": "es"
-}`});var y=t(h,10);e(y,{title:"action_extract_audio",lang:"json",code:`{
-  "projectId": "your_project_id",
-  "layerId": "video_layer_id"
-}`});var u=t(y,28);k(u,()=>'<code class="language-json"><span class="token punctuation">&#123;</span> <span class="token property">"id"</span><span class="token operator">:</span> <span class="token string">"kf1"</span><span class="token punctuation">,</span> <span class="token property">"time"</span><span class="token operator">:</span> <span class="token number">0.5</span><span class="token punctuation">,</span> <span class="token property">"property"</span><span class="token operator">:</span> <span class="token string">"position.y"</span><span class="token punctuation">,</span> <span class="token property">"value"</span><span class="token operator">:</span> <span class="token number">-200</span><span class="token punctuation">,</span> <span class="token property">"easing"</span><span class="token operator">:</span> <span class="token string">"ease-out"</span> <span class="token punctuation">&#125;</span></code>',!0),f(u),j(10),_(g,d)}export{C as component};

package/studio/client/_app/immutable/nodes/40.Q-jN9EvK.js

@@ -1,15 +0,0 @@
-import"../chunks/Ct_92ewg.js";import"../chunks/CRSvvRTA.js";import{s as e,k as c,b as a,g as l,n as u}from"../chunks/BH1rZqH0.js";import{C as o}from"../chunks/B3TZrMGu.js";var p=l('<h1 id="ai-coding-assistants">AI Coding Assistants</h1> <p>Connect Claude Code, Cursor, or Windsurf to DevMotion. The <strong>local</strong> 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 <a href="#use-the-cloud-server-instead">Use the cloud server instead</a>.</p> <hr/> <h2 id="local-setup-recommended">Local setup (recommended)</h2> <h3 id="one-command">One command</h3> <p>Inside a DevMotion project (run <code>devmotion init my-video</code> first if you don’t have one), run:</p> <!> <p>This installs the Claude Code skills (<code>/devmotion-init</code>, <code>/devmotion-add-layer</code>, <code>/devmotion-render</code>) and registers a local <strong>stdio</strong> MCP server in <code>.claude/settings.local.json</code>. That’s it — open Claude Code in the project and ask it to build a video.</p> <h3 id="manual-config-claude-code-cursor-windsurf">Manual config (Claude Code, Cursor, Windsurf)</h3> <p>Every client uses the same local server: it spawns <code>devmotion mcp</code> over stdio. Add this to your client’s MCP config:</p> <!> <table><thead><tr><th>Client</th><th>Config file</th></tr></thead><tbody><tr><td>Claude Code</td><td><code>.claude/settings.json</code> (project)</td></tr><tr><td>Cursor</td><td><code>.cursor/mcp.json</code> (project) or <code>~/.cursor/mcp.json</code></td></tr><tr><td>Windsurf</td><td><code>~/.codeium/windsurf/mcp_config.json</code></td></tr></tbody></table> <blockquote><p>The local server works on the project in your current directory — no account, no API key, no quota. Run commands with <code>npx @devmotion/cli …</code>, or install once with <code>npm i -g @devmotion/cli</code> and drop the <code>npx</code>.</p></blockquote> <hr/> <h2 id="use-the-cloud-server-instead">Use the cloud server instead</h2> <p>Want your agent to drive <strong>cloud</strong> projects in the hosted Studio? Connect to the remote endpoint over HTTP. Authentication is handled via OAuth — no tokens to copy for interactive clients.</p> <h3 id="claude-code-cli">Claude Code (CLI)</h3> <!> <p>On first use, Claude Code prompts you to authenticate in the terminal. After that, DevMotion tools are available in every session.</p> <h3 id="claude-desktop--cursor--windsurf">Claude Desktop · Cursor · Windsurf</h3> <p>These clients reach the remote server through <code>mcp-remote</code>, which handles the OAuth handshake:</p> <!> <p>On first connection, a browser tab opens for the DevMotion login. The session is saved locally and renewed automatically.</p> <blockquote><p>The cloud server runs under your DevMotion account and counts toward your plan. See <a href="/docs/mcp/plans">Plans & Limits</a>.</p></blockquote> <hr/> <h2 id="troubleshooting">Troubleshooting</h2> <p><strong><code>devmotion</code> not found</strong> — run it via <code>npx @devmotion/cli mcp</code>, or install once with <code>npm i -g @devmotion/cli</code>.</p> <p><strong>Local server not connecting</strong> — make sure you ran the client from inside a directory that contains a <code>devmotion.json</code>. The MCP server operates on the project in the current working directory.</p> <p><strong>(Cloud) Browser tab doesn’t open</strong> — run <code>npx mcp-remote https://devmotion.app/mcp</code> directly in your terminal to trigger the OAuth flow manually, then restart your client. Not needed for the Claude Code CLI.</p> <p><strong>(Cloud) “Unauthorized” after login</strong> — your token may have expired. Delete the <code>mcp-remote</code> cache at <code>~/.mcp-remote/</code> and reconnect.</p> <p><strong>(Cloud) Projects not visible in the editor</strong> — confirm you authenticated with the same DevMotion account you use in the browser.</p>',1);function f(s){var t=p(),n=e(c(t),12);o(n,{title:"Terminal",lang:"bash",code:"npx @devmotion/cli setup"});var d=e(n,8);o(d,{title:".claude/settings.json · .cursor/mcp.json · windsurf mcp_config.json",lang:"json",code:`{
-  "mcpServers": {
-    "devmotion": {
-      "command": "npx",
-      "args": ["devmotion", "mcp"]
-    }
-  }
-}`});var r=e(d,14);o(r,{title:"Terminal",lang:"bash",code:"claude mcp add --transport http devmotion https://devmotion.app/mcp"});var i=e(r,8);o(i,{title:"claude_desktop_config.json · .cursor/mcp.json · windsurf mcp_config.json",lang:"json",code:`{
-  "mcpServers": {
-    "devmotion": {
-      "command": "npx",
-      "args": ["-y", "mcp-remote", "https://devmotion.app/mcp"]
-    }
-  }
-}`}),u(18),a(s,t)}export{f as component};

package/studio/server/chunks/12-uBBeSc-D.js

@@ -1,9 +0,0 @@
-const index = 12;
-let component_cache;
-const component = async () => component_cache ??= (await import('./_page.svelte-B7tkn2Ph.js')).default;
-const imports = ["_app/immutable/nodes/12.DJvy6gDY.js","_app/immutable/chunks/Ct_92ewg.js","_app/immutable/chunks/BH1rZqH0.js","_app/immutable/chunks/CuJfaes_.js","_app/immutable/chunks/BKx7aQex.js","_app/immutable/chunks/l6_YgvJu.js","_app/immutable/chunks/DXdOjWBO.js","_app/immutable/chunks/BwzC7gXw.js","_app/immutable/chunks/DItp427M.js","_app/immutable/chunks/CfEkJfal.js","_app/immutable/chunks/Dq1Bw6bH.js","_app/immutable/chunks/D1FB0IUT.js","_app/immutable/chunks/DlWRTGQ1.js","_app/immutable/chunks/Bs7NW1Se.js","_app/immutable/chunks/BgrSU1kg.js","_app/immutable/chunks/BQhvHIBL.js","_app/immutable/chunks/BAPsSsPy.js","_app/immutable/chunks/Be-ZWJwN.js","_app/immutable/chunks/CjJOx53h.js","_app/immutable/chunks/C8kSHBGW.js","_app/immutable/chunks/CVY1v_NI.js","_app/immutable/chunks/DkL6aOyN.js","_app/immutable/chunks/BKaOgHuv.js","_app/immutable/chunks/BvSfBzuV.js","_app/immutable/chunks/BM16VTgB.js","_app/immutable/chunks/BJKr5hge.js","_app/immutable/chunks/BwnyT9Ny.js","_app/immutable/chunks/DhUtLNbU.js","_app/immutable/chunks/C3TDTGEk.js","_app/immutable/chunks/CsYc-nV1.js","_app/immutable/chunks/MA9VYZ9Y.js","_app/immutable/chunks/Cdg3o65X.js","_app/immutable/chunks/I5GezlI2.js","_app/immutable/chunks/EsOjj2Re.js","_app/immutable/chunks/vMKBQkkd.js","_app/immutable/chunks/C0WKYdwk.js","_app/immutable/chunks/Dw0S4s6I.js","_app/immutable/chunks/DVwuKx4e.js","_app/immutable/chunks/B0CGBs-v.js","_app/immutable/chunks/B-qm-b0r.js","_app/immutable/chunks/bsfLFPc3.js","_app/immutable/chunks/D4ooP0Dt.js","_app/immutable/chunks/Bqthoyql.js","_app/immutable/chunks/hevTEAPk.js","_app/immutable/chunks/DGHx_OMD.js","_app/immutable/chunks/CRSvvRTA.js","_app/immutable/chunks/DVkCj0xi.js","_app/immutable/chunks/C8EXIwcU.js","_app/immutable/chunks/CeJ1Fkyc.js","_app/immutable/chunks/DaMTK_yC.js","_app/immutable/chunks/CVS8giU8.js","_app/immutable/chunks/CTpKZT5_.js","_app/immutable/chunks/Of4NhqMR.js","_app/immutable/chunks/DUvwbcGL.js","_app/immutable/chunks/BW3LFrce.js","_app/immutable/chunks/DovQv5Ja.js","_app/immutable/chunks/95fvlwry.js","_app/immutable/chunks/BK86JIHu.js","_app/immutable/chunks/DXmIOUiy.js","_app/immutable/chunks/CTjBIV3u.js","_app/immutable/chunks/AZ9rWnO0.js","_app/immutable/chunks/B6madqDo.js"];
-const stylesheets = ["_app/immutable/assets/editor.CGhxenOw.css"];
-const fonts = [];
-
-export { component, fonts, imports, index, stylesheets };
-//# sourceMappingURL=12-uBBeSc-D.js.map

package/studio/server/chunks/15-BP_ppf1w.js

@@ -1,9 +0,0 @@
-const index = 15;
-let component_cache;
-const component = async () => component_cache ??= (await import('./_page.svelte-Crbq-RQR.js')).default;
-const imports = ["_app/immutable/nodes/15.a3Pos74G.js","_app/immutable/chunks/Ct_92ewg.js","_app/immutable/chunks/BH1rZqH0.js","_app/immutable/chunks/BKx7aQex.js","_app/immutable/chunks/95fvlwry.js","_app/immutable/chunks/l6_YgvJu.js","_app/immutable/chunks/DXdOjWBO.js","_app/immutable/chunks/BwzC7gXw.js","_app/immutable/chunks/CjJOx53h.js","_app/immutable/chunks/DItp427M.js","_app/immutable/chunks/C8kSHBGW.js","_app/immutable/chunks/DlWRTGQ1.js","_app/immutable/chunks/DUvwbcGL.js","_app/immutable/chunks/DVwuKx4e.js","_app/immutable/chunks/Bs7NW1Se.js","_app/immutable/chunks/D1FB0IUT.js","_app/immutable/chunks/CuJfaes_.js","_app/immutable/chunks/Dq1Bw6bH.js","_app/immutable/chunks/BQhvHIBL.js","_app/immutable/chunks/BAPsSsPy.js","_app/immutable/chunks/Be-ZWJwN.js","_app/immutable/chunks/CVY1v_NI.js","_app/immutable/chunks/BGtZOVkV.js","_app/immutable/chunks/CwPeYiWY.js","_app/immutable/chunks/MA9VYZ9Y.js","_app/immutable/chunks/BvSfBzuV.js","_app/immutable/chunks/BM16VTgB.js","_app/immutable/chunks/CfEkJfal.js","_app/immutable/chunks/BwnyT9Ny.js","_app/immutable/chunks/C0WKYdwk.js","_app/immutable/chunks/CsYc-nV1.js","_app/immutable/chunks/BgrSU1kg.js","_app/immutable/chunks/BK86JIHu.js","_app/immutable/chunks/D4ooP0Dt.js"];
-const stylesheets = [];
-const fonts = [];
-
-export { component, fonts, imports, index, stylesheets };
-//# sourceMappingURL=15-BP_ppf1w.js.map