VS Code + Seedance MCP

You just created a new interface design for an app using Figma and shared it in the group to seek feedback. The product manager replied, "Can we see the dynamic effects?" Writing the code to implement it yourself would take too much time, but you have a PNG screenshot that is enough—hand it over to the Seedance MCP Server, which can turn static images into a video with dynamic effects. The model from ByteDance is particularly friendly to Chinese scenarios.

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 Seedance MCP, or directly search for the extension ID: acedatacloud.mcp-seedance
  3. Click Install, and reload the window as prompted after installation

Step 3: Fill in the API Key

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

If you want to change the Key, you can execute Seedance 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 seedance, for example: Use seedance to help me complete this task
  3. The first call will automatically go to this plugin and use the API Key you saved

Advanced: Manual mcp.json (Optional)

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

{
  "servers": {
    "seedance": {
      "type": "http",
      "url": "https://seedance.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 Usage

Preview of Product Prototype Effects

Export the Figma design as an image and let Seedance automatically generate a preview video with interactive effects:

> Generate a video from this Dashboard screenshot, with data charts appearing from left to right, featuring fade-in and value growth animations

Just show it to the product manager to confirm the direction, saving the time of manually implementing the effects.

Record a Demonstration for Internal Tools

You created an operations panel for internal use and need to demonstrate it in the weekly meeting but don't have time to record:

> Generate a video: a dashboard on an operations monitoring screen is refreshing in real-time, curves are fluctuating, numbers are jumping, with a dark theme

Purely text descriptions can produce effects, suitable for quickly generating demonstration materials.

Short Video Material

You operate a technical Douyin account and need an opening animation:

> Generate a 3-second video intro: a glowing code symbol </> transitions from blurry to clear, with particle effects in the background, in a tech blue tone

Change the theme each time, and Seedance can produce a version in just a few minutes.

Tools

Tool Description
seedance_generate_video Generate video from text/image

Other Editor Configurations