VS Code + Luma MCP

You spent two weeks writing a CLI tool and wrote a detailed README. 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, you can do it right inside VS Code.

In Copilot Chat, say:

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

Luma Dream Machine will help you generate a high-quality conceptual video that can be directly used on your product page.

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

Step 2: Obtain and Enter the API Key

  1. Open Ace Data Cloud Console / Applications
  2. Copy your API Key (the same key can be used for all Ace Data Cloud MCP services)
  3. Press Cmd+Shift+P, run: Luma MCP: Set Ace Data Cloud API Key
  4. Paste the API Key and press Enter to save (stored in VS Code SecretStorage / system keychain)

To switch keys, run Luma MCP: Clear Ace Data Cloud API Key and then set it again.

Step 3: Verify Connectivity

  1. Open GitHub Copilot Chat and switch to Agent mode
  2. Directly make a request mentioning luma, for example: Use luma to help me complete this task
  3. On the first call, it will automatically route to this extension and use your saved API Key

Advanced: Manual mcp.json Configuration (Optional)

If you prefer manual configuration, you can also create .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
    }
  ]
}

Step 3: Verify Connectivity

  1. Open GitHub Copilot Chat and switch to Agent mode
  2. Directly make a request mentioning luma, for example: Use luma to help me complete this task
  3. On the first call, it will automatically route to this extension and use your saved API Key

Advanced: Manual mcp.json Configuration (Optional)

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

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

Step 3: Verify Connectivity

  1. Open GitHub Copilot Chat and switch to Agent mode
  2. Directly make a request mentioning luma, for example: Use luma to help me complete this task
  3. On the first call, it will automatically route to this extension and use your saved API Key

Advanced: Manual mcp.json Configuration (Optional)

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

{
  "servers": {
    "luma": {
      "type": "http",
      "url": "https://luma.mcp.acedata.cloud/mcp",
      "headers": {
        "Authorization": "Bearer ${input:acedata-token}"
      }
    }
  },
  "inputs": [
    {
      "id": "acedata-token",
      "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 motion effects, but now:

> Generate a 5-second looping abstract video with purple and blue fluids slowly flowing, tech style, suitable as a webpage background

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

Generate Product Animation from Design Mockups

You have a Figma-exported app screenshot and want to "bring it to life":

> Use this mobile screenshot as reference, generate a video where 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 UI into animated demos, saving you much time compared to writing CSS animations and recording screens.

Video Extension

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

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

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

Available Tools

Tool Description
luma_generate_video Text-to-video
luma_extend_video Video extension
luma_generate_video_from_image Reference image to video

Other Editor Configurations