VS Code + Flux MCP

Have you ever had moments like this: after finishing a feature, you want to post a tweet to promote it, but you don't have any images on hand. Looking for one on Unsplash? Too common. Finding a designer? Too slow. Making one yourself? Not possible.

Flux is an AI image model developed by Black Forest Labs that supports text-to-image generation and image editing. After configuration, it can be called by Copilot Chat to use the corresponding tools.

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

Step 3: Enter API Key

  1. Press Cmd+Shift+P, execute: Flux 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 Flux 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 state your request and mention flux, for example: Use flux 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": {
    "flux": {
      "type": "http",
      "url": "https://flux.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
    }
  ]
}

Generate Images While Coding

Create a documentation illustration after finishing the interface

You just finished a payment interface, and the documentation needs a flowchart:

> Generate an image: a phone on the left, a shield icon in the middle representing security verification, and a server on the right, in a flat illustration style, using blue and green tones with white

flux_generate_image supports multiple models. First, check the current model and capabilities, then choose based on draft or final image requirements.

Create a Logo for an npm Package

You have released an open-source toolkit and need a highly recognizable logo:

> Generate a minimalist style logo, a origami-style hummingbird, monochrome lines, white background, suitable for an npm package icon

The resulting image can be directly scaled to be used as a favicon, without worrying about vector issues.

Edit Existing Images in Kontext Mode

Have an image that needs adjustments? Flux's Kontext mode supports modifications based on existing images:

> Change the English text in this screenshot to Chinese "立即开始", keeping everything else the same

flux_edit_image can understand contextual modifications to image content, not just simple smudging, but intelligent replacement.

Tools

Tool Description
flux_generate_image Text to image generation
flux_edit_image Image editing

Other Editor Configurations