VS Code + Luma MCP 使用教程

在开发过程中，我们常常会遇到这样的场景：花费两周开发了一个 CLI 工具，还写了详尽的 README，但你知道，一段 30 秒的演示视频比 500 字的文字说明更有说服力。传统的屏幕录制有点单调，After Effects 又过于繁琐，其实，你完全可以直接在 VS Code 里生成高质量演示视频。本篇教程将带你手把手配置 Luma MCP ，通过 Ace Data Cloud 的能力在 VS Code 内完成视频生成。

简介

Ace Data Cloud 是一个面向开发者和企业的云端 AI 数据与生成服务平台，提供 API 接口和 MCP（Model Context Protocol）服务，让开发者在编辑器、IDE 或自定义应用中直接调用 AI 模型生成内容。

Luma MCP 是其提供的视频生成扩展，可以将文本或静态图片快速转换为高质量动画视频，非常适合：

SaaS 产品主页的 Hero 动画
设计稿或截图转成动态演示
产品视频延伸与二次创作

更多信息可参考：Ace Data Cloud 官方平台。

环境准备 / 前置条件

VS Code 已安装（建议最新版）
GitHub Copilot Chat 已启用
拥有 Ace Data Cloud API Key （可在应用管理页面获取）
网络通畅，可访问外部 MCP 服务

安装 Luma MCP 扩展

打开 VS Code 扩展市场：Cmd+Shift+X（Mac）或 Ctrl+Shift+X（Windows/Linux）
搜索 Luma MCP 或扩展 ID acedatacloud.mcp-luma
点击安装，安装完成后根据提示重载窗口

安装完成后，你的 VS Code 就可以直接调用 Luma MCP 提供的视频生成能力。

配置 Ace Data Cloud API Key

打开 Ace Data Cloud Console，复制你的 API Key
在 VS Code 中按 Cmd+Shift+P（Mac）或 Ctrl+Shift+P（Windows/Linux）打开命令面板
运行命令：Luma MCP: Set Ace Data Cloud API Key
粘贴 API Key 并回车保存（会存储在 VS Code SecretStorage 或系统钥匙串中）

提示：如果需要更换 Key，可先运行 Luma MCP: Clear Ace Data Cloud API Key 再重新设置。

验证连接

打开 GitHub Copilot Chat，并切换到 Agent 模式
发送请求时提及 luma，例如：
复制代码
```
Use luma to help me complete this task
```
第一次调用时，Luma MCP 会自动使用你保存的 API Key 进行路由

高级：手动配置 mcp.json（可选）

如果你希望手动管理配置，可在项目根目录创建 .vscode/mcp.json：

json 复制代码

{
  "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
    }
  ]
}

之后，Copilot Chat 调用时会自动读取该配置。

实用场景示例

1. Hero 动画生成

为 SaaS 产品主页生成吸引人的 Hero 视频：

复制代码

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

生成的视频平滑、高质量，可直接作为网页背景，比很多付费素材更实用。

2. 将设计稿动画化

将 Figma 导出的移动端截图转换为动态演示：

复制代码

> 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 可以将静态界面动画化，节省手动写 CSS 动画和录屏的时间。

3. 视频延伸

已有视频太短？无需重新生成：

复制代码

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

luma_extend_video 可在保持风格一致的情况下扩展视频长度。

可用工具列表

工具	功能说明
luma_generate_video	文本生成视频
luma_extend_video	视频延伸
luma_generate_video_from_image	静态图转动态视频

其他编辑器配置

Cursor --- 可在 .cursor/mcp.json 下配置 mcpServers
Claude Code / Desktop --- 参考官方教程：Claude + Luma MCP
JetBrains --- 设置 → Tools → AI Assistant → MCP，添加 HTTP 类型的 Luma 服务

常见问题

API Key 设置后无法调用
- 检查是否保存正确，或尝试清除并重新设置
视频生成失败或卡住
- 确认网络通畅，并在 Agent 模式下重新发送请求
手动配置 mcp.json 不生效
- 检查 JSON 格式和 ${input:acedata-api-key} 占位符是否正确

总结

通过 Luma MCP 与 Ace Data Cloud 的结合，VS Code 不仅是开发工具，更可以成为快速生成产品视频和动画的利器。无论是制作 Hero 动画、产品演示，还是 UI 动态效果，都能大幅提升效率和可视化质量。

VS Code + Luma MCP 使用教程