VS Code + Seedance MCP
You just finished a new app interface design in Figma and shared it in the group for feedback. The product manager replied, "Can we see the dynamic effects?" Writing code to implement it yourself takes too much time, but you have a PNG screenshot—that’s enough. Hand it over to Seedance MCP Server, which can turn a static image into a video with animation effects. ByteDance’s model is especially friendly for Chinese scenarios.
¶ Step 1: Search and Install the Extension in VS Code
- Open the VS Code Extensions Marketplace (
Cmd+Shift+X) - Search for
Seedance MCP, or directly search the extension ID:acedatacloud.mcp-seedance - Click Install, then reload the window as prompted after installation
¶ Step 2: Obtain and Enter the API Key
- Open Ace Data Cloud Console / Applications
- Copy your API Key (the same key can be used for all Ace Data Cloud MCP)
- Press
Cmd+Shift+P, run:Seedance MCP: Set Ace Data Cloud API Key - Paste the API Key and press Enter to save (stored in VS Code SecretStorage / system keychain)
If you want to change the key, run Seedance MCP: Clear Ace Data Cloud API Key and then set it again.
¶ Step 3: Verify Connectivity
- Open GitHub Copilot Chat and switch to Agent mode
- Directly make a request and mention
seedance, for example:Use seedance to help me complete this task - On the first call, it will automatically route to this extension and use your saved API Key
¶ Advanced: Manual mcp.json (Optional)
If you prefer manual configuration, you can also create .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
}
]
}
¶ Step 3: Verify Connectivity
- Open GitHub Copilot Chat and switch to Agent mode
- Directly make a request and mention
seedance, for example:Use seedance to help me complete this task - On the first call, it will automatically route to this extension and use your saved API Key
¶ Advanced: Manual mcp.json (Optional)
If you prefer manual configuration, you can also create .vscode/mcp.json in your project:
{
"servers": {
"seedance": {
"type": "http",
"url": "https://seedance.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
- Open GitHub Copilot Chat and switch to Agent mode
- Directly make a request and mention
seedance, for example:Use seedance to help me complete this task - On the first call, it will automatically route to this extension and use your saved API Key
¶ Advanced: Manual mcp.json (Optional)
If you prefer manual configuration, you can also create .vscode/mcp.json in your project:
{
"servers": {
"seedance": {
"type": "http",
"url": "https://seedance.mcp.acedata.cloud/mcp",
"headers": {
"Authorization": "Bearer ${input:acedata-token}"
}
}
},
"inputs": [
{
"id": "acedata-token",
"type": "promptString",
"description": "Ace Data Cloud API key",
"password": true
}
]
}
¶ Actual Usage
Product Prototype Animation Preview
Export the Figma design as an image and let Seedance automatically generate an interactive animated preview video:
> Generate a video from this Dashboard screenshot, where data charts appear from left to right with fade-in and value growth animations
Show it to the product manager to confirm the direction instantly, saving time on manually implementing animations.
Record a Demo for Internal Tools
You made an internal operations panel and need to demo it at the weekly meeting but don’t have time to record the screen:
> Generate a video: a dashboard on an operations monitoring big screen refreshing in real-time, curves fluctuating, numbers jumping, dark theme
Pure text description can produce effects, suitable for quickly creating demo materials.
Short Video Materials
You run a tech-related Douyin account and need an intro animation:
> Generate a 3-second video intro: a glowing code symbol </> transitions from blurry to clear, with particle effects in the background, tech blue tone
Change the theme every episode, Seedance can produce a version in minutes.
¶ Tools
| Tool | Description |
|---|---|
| seedance_generate_video | Text/Image to video generation |
¶ Other Editor Configurations
- Cursor:
.cursor/mcp.json, configure the sameurlandheadersundermcpServers - Claude Code — Terminal CLI configuration, see Claude Code + Seedance MCP Tutorial
- Claude Desktop — See Claude Desktop + Seedance MCP Tutorial
