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 don’t have any images on hand. Searching on Unsplash? Too generic. Asking a designer? Too slow. Editing one yourself? Don’t know how.

Flux is an AI image model developed by Black Forest Labs, known for its speed — just a few seconds after writing a description, the image is ready, and the quality is quite good. Once set up in VS Code, Copilot Chat becomes your instant designer.

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

Step 2: Obtain and Enter Your 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 and run: Flux MCP: Set Ace Data Cloud API Key
  4. Paste the API Key and press Enter to save (stored in VS Code SecretStorage / system keychain)

If you want to change the key, run Flux MCP: Clear Ace Data Cloud API Key and then set it again.

Step 3: Verify Connection

  1. Open GitHub Copilot Chat and switch to Agent mode
  2. Directly make a request and mention flux, for example: Use flux 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": {
    "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
    }
  ]
}

Step 3: Verify Connection

  1. Open GitHub Copilot Chat and switch to Agent mode
  2. Directly make a request and mention flux, for example: Use flux 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": {
    "flux": {
      "type": "http",
      "url": "https://flux.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 Connection

  1. Open GitHub Copilot Chat and switch to Agent mode
  2. Directly make a request and mention flux, for example: Use flux 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": {
    "flux": {
      "type": "http",
      "url": "https://flux.mcp.acedata.cloud/mcp",
      "headers": {
        "Authorization": "Bearer ${input:acedata-token}"
      }
    }
  },
  "inputs": [
    {
      "id": "acedata-token",
      "type": "promptString",
      "description": "Ace Data Cloud API key",
      "password": true
    }
  ]
}

Generate Images While Coding

Add an illustration to your API documentation

You just finished writing a payment API, and the documentation needs a flow diagram:

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

flux_generate_image is extremely fast; in Dev mode, images are ready in seconds, and Pro mode offers higher quality in about a dozen seconds. If unsatisfied, just re-describe and try again — 10 times faster than tweaking in Figma.

Create a Logo for your npm package

You published an open-source toolkit and need a distinctive logo:

> Generate a minimalist style logo, a paper-folded hummingbird, single-color line art, white background, suitable as an npm package icon

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

Edit existing images in Kontext mode

Already have an image but need adjustments? Flux’s Kontext mode supports modifications based on existing images:

> Replace the English text in this screenshot with Chinese "立即开始" (Start Now), keep everything else unchanged

flux_edit_image understands context and edits image content intelligently, not just simple painting but smart replacement.

Tools

Tool Description
flux_generate_image Text-to-image generation
flux_edit_image Image editing

Other Editor Configurations