Microsoft

Generate videos in VS Code

Register one server, and the repo can render its own launch video. Renderly runs a hosted MCP server, so VS Code renders from the templates you already built - and previews cost nothing.

5 free credits · no card · hosted MCP, nothing to install

VS Codeexample session

You

Take the top entry in CHANGELOG.md and make a launch video for it.

renderly_list_projects
Looks for a release video in your library
Release Notes Promo, 1080p, 5 dynamic variables
renderly_get_variables
Reads the names it has to fill
version, headline, three feature lines

Your 4.2.0 section lists four bullets and the template holds three. I will drop the dependency bump and preview before spending anything.

renderly_preview_render0 credits
Fills the template and checks it, free
previewUrl live for 24h, resolved 5/5, no warnings

You

The chip should read v4.2.0, with the v. Show me every frame.

renderly_preview_render0 credits
Updates the same preview, adds ?mode=grid
revision 2, contact sheet of 9 labelled frames
renderly_create_render0.5 credits
Renders once you click Allow in the dialog
26s clip queued, quote 0.5 credits
renderly_get_render_status
Polls until the file exists
completed, mp4 ready, 0.5 credits charged

2 previews, charged nothing0.5 credits spent, on the render alone

A video generator arrives in VS Code the same way a debug target does: as an entry in a JSON file the editor already knows how to check. Eight lines in .vscode/mcp.json name the server, its http type and https://renderly.video/api/mcp, and IntelliSense marks any key the schema does not recognise while you type. The work then happens in the Chat view. Set the mode picker to Agent, because that is where tool calls run, and ask for the video. The agent reads the changelog from a tab you already have open, lists the projects you designed in the Renderly editor, and checks which variables one of them exposes before it fills anything in. Every call pauses at a confirmation dialog; expand that dialog and you can correct the parameters before clicking Allow. The first render call is a preview, which costs no credits and returns a public link that stays live for a day. When a connection misbehaves, MCP: List Servers and then Show Output puts the server's own log in front of you. Move the same entry into your user profile mcp.json and the tooling follows you into every workspace you open.

Renderly is the rendering engine, not the publisher. It hands back a finished MP4 at a URL - where that file goes next is up to you or one of our no-code integrations. The same engine and the same credits drive the REST API, so nothing about a render differs because VS Code asked for it.

The free preview loop

VS Code can check its work before you pay for it

An agent filling in a template will get something wrong - a mistyped variable name, a headline too long for its line. Renderly gives it a way to find out for nothing. A preview takes the same arguments as a real render and resolves them exactly the same way, but produces no video and costs no credits.

Preview0 credits
Fix, preview again0 credits
Once more0 credits
Rendercredits charged

It can look at the frames

Append ?mode=grid and the preview page draws a labelled contact sheet spanning the whole video, as ordinary images. Any agent that can open a page and screenshot it can then see a collided caption or a wrong colour - the failures no validator catches.

?mode=grid

Or one exact moment

Append ?frame=N to check a specific instant, where N is the second you care about multiplied by the frame rate. The page publishes its own rate, so the agent works it out rather than guessing from the nearest tile on the grid.

?frame=N

And fix it in place

Pass the previewId back with corrected values and the same preview updates. The link never changes, so the agent reloads and looks again. A revision counter goes up each time, which is how it knows it is seeing its own latest attempt and not a cached earlier one.

previewId

The warning that saves the most credits. If a variable name does not match, Renderly ignores it silently and renders the authored default instead - so the video comes back looking fine and carrying the wrong text. A preview returns a resolved map of what actually applied plus an UNKNOWN_REPLACEMENT warning, which is how VS Code catches that before it becomes a charge.

Setup

Connect Renderly to VS Code

VS Code takes remote MCP servers natively over HTTP, so there is no bridge process to supervise. It tries the HTTP stream transport first and falls back to SSE on its own, so point it at /api/mcp and ignore the legacy endpoint. Register it from the terminal, from the Command Palette, or by writing the file yourself.

Any terminal, or the VS Code integrated terminal

code --add-mcp "{\"name\":\"renderly\",\"type\":\"http\",\"url\":\"https://renderly.video/api/mcp\"}"

Writes the entry into your user profile, so it is there in every workspace. The documented example for this flag is a stdio server; if your build rejects a url payload, use MCP: Add Server from the Command Palette instead.

.vscode/mcp.json (in the repo)

{
  "servers": {
    "renderly": {
      "type": "http",
      "url": "https://renderly.video/api/mcp"
    }
  }
}

The top-level key is servers, not mcpServers. Commit this and everyone who clones the repo gets the same server.

mcp.json, using a Renderly API key instead of OAuth

{
  "inputs": [
    {
      "type": "promptString",
      "id": "renderly-key",
      "description": "Renderly API key",
      "password": true
    }
  ],
  "servers": {
    "renderly": {
      "type": "http",
      "url": "https://renderly.video/api/mcp",
      "headers": {
        "Authorization": "Bearer ${input:renderly-key}"
      }
    }
  }
}

VS Code asks for the key when the server starts, which keeps the secret out of a committed file.

Register the server: run the code --add-mcp command above, or open the Command Palette (Ctrl/Cmd+Shift+P) and run MCP: Add Server, choosing Workspace or Global as the target.
Confirm you trust the server when VS Code asks. Until you do, it will not start.
Approve the browser window that opens on the first connection. That is WorkOS AuthKit, and VS Code registers itself dynamically to complete it.
Check the server is up with MCP: List Servers, pick renderly, then Show Output.
Switch the Chat view to agent mode and ask it to list your Renderly projects. Ten tools should be available.

Either a browser sign-in or an API key

OAuth needs no extra configuration. A bare entry with type and url is enough: VS Code reads the 401 and its resource_metadata header, discovers WorkOS AuthKit, registers itself dynamically with PKCE, and opens a browser window on the first connection. If that handshake ever needs resetting, the Account menu carries Authentication: Remove Dynamic Authentication Providers, which clears the stored client credentials so the next connection registers again. A static rnd_ key is the better choice on a machine with no browser, such as a devcontainer or a remote SSH host. Feed it through an input variable, not a literal string, since the mcp.json file is often committed.

How this was checked. Server verified live on 2026-08-19: an unauthenticated POST returns 401 with an RFC 9728 challenge, WorkOS AuthKit advertises Dynamic Client Registration, and all ten tools are registered. The setup below was confirmed against Microsoft's current MCP documentation and survived an independent adversarial recheck on the same date. Nobody here drove VS Code end to end. Microsoft’s documentation

The surface

Ten tools VS Code gets

You never call these by hand. VS Code picks the right one from what you asked for. They are listed because it is worth knowing which of them can cost you money - and that seven of the ten cannot.

They are thin wrappers over the same service layer the public REST API uses, so the two surfaces cannot drift apart.

Renderly MCP tools, what each does, and whether it costs credits
Tool	What it does	Cost
`renderly_whoami`Connect	Confirms the connection and reports your credit balance	free
`renderly_list_projects`Find	Lists your own projects that have something to personalise	free
`renderly_list_templates`Find	Lists the public system templates	free
`renderly_get_variables`Find	Reads which fields a template or project accepts, and their current values	free
`renderly_preview_render`Check	Resolves your values exactly as a render would, without producing a video - returns a public preview link, what actually applied, a credit quote and any warnings	free
`renderly_create_render`Render	Renders the video. Annotated as not read-only, so clients ask before calling it	credits
`renderly_get_render_status`Track	Polls the job and returns the finished video URL	free
`renderly_generate_captions`Add AI	Transcribes audio into word-synced captions you can drop straight onto a layer	credits
`renderly_generate_voiceover`Add AI	Turns a script into narration saved to your media library	credits
`renderly_get_ai_job`Add AI	Polls a captions or voiceover job for its result	free

Why VS Code

What this client is good at

VS Code keeps server definitions where the rest of a project's tooling already lives. .vscode/mcp.json sits beside tasks.json and launch.json, so "how we make release videos" becomes a file under version control rather than a setting on one laptop, and a dev container can carry the same definition through customizations.vscode.mcp in devcontainer.json. Watch the top-level key: VS Code reads servers, while blocks copied from other clients use mcpServers and parse quietly without ever appearing. The second reason is the confirmation dialog. Expand it before you click Allow and you can edit the input parameters, so a wrong headline is corrected in the dialog instead of costing you another prompt. That suits the way Renderly bills: the call you approve most often is renderly_preview_render, and it costs nothing.

Questions people actually hit

Should I put Renderly in .vscode/mcp.json or in my user mcp.json, and where does the user one actually live?

Both work, and they answer different questions. Put it in <project-root>/.vscode/mcp.json when the video tooling belongs to that repo, and commit it. Put it in the user-profile mcp.json when you want it in every window. Reach the second one with Command Palette then MCP: Open User Configuration rather than hunting for the path, because a non-default profile moves the file to <User>/profiles/<profile ID>/mcp.json. By default it sits beside settings.json: %APPDATA%\Code\User on Windows, ~/Library/Application Support/Code/User on macOS, ~/.config/Code/User on Linux.

I pasted a working MCP block from Cursor into VS Code and nothing happened. What is wrong?

Check the top-level key. VS Code reads servers. Blocks written for Cursor or Claude Desktop use mcpServers, and VS Code does not warn you about it: the file parses, the server simply never appears in MCP: List Servers. The second common cause is a missing type. A remote entry needs "type": "http" spelled out, alongside url. Keep the file open while you edit, because VS Code provides IntelliSense against the mcp.json schema and will mark a key it does not recognise.

Can I add it without opening a JSON file at all?

Yes. Run code --add-mcp with a small JSON payload naming the server, its type and its url, and VS Code writes the entry into your user profile, so it is present in every workspace from then on. The published docs only print a stdio example for that flag, with a command field rather than a url. If your build rejects the url form, run MCP: Add Server from the Command Palette instead, which walks you through the same fields and asks whether to target Workspace or Global.

I work inside a dev container. Can the container carry the server, and how do I sign in without a browser?

It can. Dev containers take MCP servers through devcontainer.json, under customizations.vscode.mcp, so the container definition carries Renderly the same way .vscode/mcp.json carries it for a local checkout. Sign-in is the part that needs thought, because the OAuth flow wants to open a browser window and a remote or headless box may not give it one. Use a Renderly rnd_ API key there instead: it is accepted as a plain Bearer token in the headers block, and a promptString input keeps it out of the committed file. Both credentials reach the same ten tools.

Copilot says it cannot make a video and I see no Renderly tools. Am I in the wrong chat mode?

Almost certainly ask mode. Renderly's tools are offered to the agent, so switch the mode picker in the Chat view to Agent, then open the tools picker and confirm that renderly is ticked. There is a hard ceiling too: a chat request can have a maximum of 128 tools enabled at a time. Renderly contributes ten, so with several servers registered you can cross that line and lose tools quietly. Deselect servers you are not using, or set github.copilot.chat.virtualTools.threshold.

How do I keep the agent from spending credits while it is still experimenting?

Lean on the free call. renderly_preview_render costs nothing: it fills the template, hands back a public link that works for 24 hours with no login, and reports both a credit quote and any UNKNOWN_REPLACEMENT warnings, so wording can be reworked for free. renderly_create_render is the call that spends credits on a video, at roughly one credit per minute of 1080p, rounded up to the nearest half. It is annotated as not read-only, so VS Code stops and asks. For a harder stop, deselect it in the tools picker and leave the free tools on.

The same server, in every other client

One endpoint, one account, one credit balance. Only the wrapper changes.

Using something not listed? Any client that speaks remote MCP over Streamable HTTP can connect to https://renderly.video/api/mcp - these pages exist because the setup differs, not the server.

Let VS Code render the next one

Build a template once, then describe what you want. Previews are free, so the first thing you spend a credit on is a video you have already seen.