VS Code + Luma MCP

You spent two weeks completing a CLI tool, and the README is very detailed. But you also know—a 30-second demo video is more persuasive than 500 words of explanation.

Screen recording? Too boring. After Effects? Too heavy. Actually, it can be done in VS Code.

In Copilot Chat, say:

> Generate a video: commands executing in a terminal window, output appearing line by line, background is a deep blue gradient with subtle particle effects

Luma Dream Machine will help you generate a high-quality concept video that can be directly placed on the product page.

Step 1: Obtain API Key

Open the Ace Data Cloud application list, enter the available applications, and copy the API Key.

Get Ace Data Cloud API Key

Step 2: Install the Plugin

  1. Open the VS Code extension marketplace (Cmd+Shift+X)
  2. Search for Luma MCP, or directly search for the extension ID: acedatacloud.mcp-luma
  3. Click Install, and after installation, reload the window as prompted

Step 3: Fill in the API Key

  1. Press Cmd+Shift+P, execute: Luma MCP: Set Ace Data Cloud API Key
  2. Paste the API Key and press enter to save (saved in VS Code SecretStorage / system keychain)

If you want to change the Key, you can execute Luma MCP: Clear Ace Data Cloud API Key and set it again.

Step 4: Verify Connection

  1. Open GitHub Copilot Chat and switch to Agent mode
  2. Directly request and mention luma, for example: Use luma to help me complete this task
  3. The first call will automatically go to this plugin and use your saved API Key

Advanced: Manual mcp.json (Optional)

If you prefer manual configuration, you can also write .vscode/mcp.json in your project:

{
  "servers": {
    "luma": {
      "type": "http",
      "url": "https://luma.mcp.acedata.cloud/mcp",
      "headers": {
        "Authorization": "Bearer ${input:acedata-api-key}"
      }
    }
  },
  "inputs": [
    {
      "id": "acedata-api-key",
      "type": "promptString",
      "description": "Ace Data Cloud API Key",
      "password": true
    }
  ]
}

Practical Scenarios

Hero Animation for Landing Page

Your SaaS product homepage needs an eye-catching Hero video. Previously, you had to outsource for animations, now:

> Generate a 5-second looping abstract video, with purple and blue fluids flowing slowly, techy feel, suitable for web background

The video produced by luma_generate_video is smooth and high-quality, better than many paid stock footage sites.

Generating Product Animation from Design Draft

You have a Figma-exported app screenshot and want to make it "come alive":

> Use this phone screenshot as a reference to generate a video, making the data charts in the interface animate from zero to full

luma_generate_video_from_image accepts images or videos as references and can turn static UIs into animated demonstrations. It saves much more time than recording CSS animations yourself.

Video Continuation

The first video looks good but is too short? No need to regenerate:

> Continue this video, slowly zooming out to reveal a larger panorama

luma_extend_video can continue generating based on existing content, maintaining a consistent style.

Available Tools

Tool Description
luma_generate_video Text to video generation
luma_extend_video Video extension
luma_generate_video_from_image Generate video from reference image

Other Editor Configurations