Game particle effects in Windsurf and Devin Desktop

On 2 June 2026 Windsurf became Devin Desktop: the same editor, with Devin Local as the default agent. Devin Local and the Devin CLI share one MCP setup, so connecting ParticleFX once gives both its tools. The agent can then build an effect for your browser game and, instead of frames, export it with the live runtime: the studio engine, simulating the effect in the page at any size.

Connect Devin Desktop (Devin Local)

1. Add the server from a terminal. -s user makes it available in every project; without it, it is saved for this project only, in the git-ignored .devin/mcp_config.local.json.
2. Sign in with devin mcp login particlefx. It opens particlefx.studio: sign in with your ParticleFX account and allow the connection.
3. Run devin mcp list to see the server.

devin mcp add -s user particlefx https://mcp.particlefx.studio/mcp
devin mcp login particlefx

To use an API key instead of signing in, make one on your billing page and give the server a header in .devin/mcp_config.local.json, which stays out of git:

{
  "mcpServers": {
    "particlefx": {
      "url": "https://mcp.particlefx.studio/mcp",
      "headers": { "Authorization": "Bearer pfx_live_your_key" }
    }
  }
}

The legacy Cascade agent

Cascade keeps its own MCP file. Open it from the ... menu of the Cascade panel (MCPs, Open MCP config file) and add the server; ${env:PFX_API_KEY} reads the key from your environment. Cascade allows 100 tools in total across all servers.

{
  "mcpServers": {
    "particlefx": {
      "serverUrl": "https://mcp.particlefx.studio/mcp",
      "headers": { "Authorization": "Bearer ${env:PFX_API_KEY}" }
    }
  }
}

Example: a live portal for a web game

Use the particlefx tools. Start from the Warp Portal library effect, name it portal,
make it greener, check the render, then export the live runtime bundle into public/fx/
and show it on a transparent canvas over the game at the exit door.

What happens, tool by tool:

1. list_presets finds Warp Portal (pixel-arcade/portal) in the library.
2. create_effect copies it into your account as portal. From here on it is your effect: it shows up on My effects and open_in_studio gives a link to it.
3. edit_effect applies the change you asked for as edit ops, the same edit language the studio and its own agent use.
4. render_preview returns a labelled contact sheet of moments across the loop. The agent looks at it, and edits again if something reads badly. analyze_effect checks that the loop closes and counts particles over it.
5. export_effect with format: "runtime" renders the real thing at full size and returns a download link that works for 1 hour.
6. The agent downloads the zip and unpacks it into public/fx/: portal.json (the effect, images embedded), particlefx-runtime.js (the player, about 42 KB gzipped), a working index.html and a README.

The effect plays on its own canvas. With transparent: true it sits over the game canvas like any other element:

<canvas id="portal" style="position: absolute; left: 520px; top: 180px; width: 192px; height: 192px"></canvas>
<script src="fx/particlefx-runtime.js"></script>
<script>
  fetch('fx/portal.json')
    .then((r) => r.json())
    .then((effect) => ParticleFX.play(document.getElementById('portal'), effect, { transparent: true }))
    .then((fx) => {
      // fx.burst(x, y) adds particles, fx.pause(), fx.play(), fx.destroy()
    });
</script>

• The runtime needs WebGL2 and a page served over http, as fetch cannot read local files.
• particlefx-runtime.js is licensed to play effects exported from ParticleFX Studio in your own game, app or site.
• For a non-browser engine, ask for a spritesheet instead. More: web games engine guide.

Warp PortalPower-Up AuraTap Glitter RippleHealing Rain

What it costs

Connecting costs nothing, and neither do searching the library, reading the reference, analysing an effect, or any edit after the first. Paid steps use builds, the same builds as on the website:

• Create the effect from a library preset (create_effect): 1 build.
• Edits and the loop check (edit_effect, analyze_effect): free.
• Previews (render_preview): the first 20 of each UTC day free, then 1 build per 4, at most 200 a day.
• Export (export_effect, live runtime bundle): 1 build, and the live runtime needs a paid plan.

So this example takes 2 builds of work if the previews stay inside the free ones: 1 for the new effect and 1 for the export. The free sign-up and daily builds are for the website and never pay for MCP calls. On a free account and on Starter, MCP calls are paid from pack builds, from $4.99 for 150 that never expire. Creator at +50%, Studio at +25%, Studio Max one for one can spend plan builds instead, and fall back to pack builds when those run out. Work that fails on our side is refunded.

The live runtime is a plan feature, as in the studio: any plan, from $7.99 a month (Starter), unlocks it. Without a plan the same build exports a GIF, WebP, APNG, PNG frames, or the sheet as an image only (sheet_meta: "none").

If you would rather our own effects agent did the creative work, build_effect takes a description and costs 1 build (Basic) or 10 (Pro). Full price list: MCP tools and keys, limits and billing.