voidless-mcp 1.6.2 → 1.6.3

package/README.md

@@ -87,6 +87,7 @@ claude mcp add voidless -e VOIDLESS_API_KEY=void_... -- npx -y voidless-mcp
 | --- | --- |
 | `animate_sprite` | One 16-frame clip from a description of the motion |
 | `generate_animation_set` | Several clips in one job: a preset (platformer, top-down walk/run/dash/attack/idle) on one sprite, or one directional clip per facing of an 8-way set; the left side is mirrored from the right (`autoFlip` to mirror any right-only clips after the run) |
+| `get_image_data` | An image, or an animation as one sprite strip, as a small data URI to paste into HTML (for sandboxes such as Claude's HTML artifacts that cannot load outside images), with a CSS snippet to play it |
 | `flip_left_side` | Mirror the right-side animations into the left side (walk-right -> walk-left), free |
 
 **Sound, video and 3D**

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "voidless-mcp",
   "mcpName": "dev.voidless/voidless",
-  "version": "1.6.2",
+  "version": "1.6.3",
   "description": "MCP server for Voidless: generate game sprites, animations, sound, music, video and 3D models",
   "license": "MIT",
   "author": "Voidless Dev Inc. <contact@voidless.dev>",
@@ -35,6 +35,7 @@
   },
   "dependencies": {
     "@modelcontextprotocol/sdk": "^1.12.1",
+    "pngjs": "^7.0.0",
     "undici": "^6.29.0"
   }
 }

package/tools.js

@@ -14,6 +14,8 @@
  */
 
 import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
+import pngjs from "pngjs";
+const { PNG } = pngjs;
 import { z } from "zod";
 import { readFileSync } from "node:fs";
 import { Agent, setGlobalDispatcher } from "undici";
@@ -23,7 +25,7 @@ import { Agent, setGlobalDispatcher } from "undici";
 // server does.
 setGlobalDispatcher(new Agent({ headersTimeout: 0, bodyTimeout: 0, connectTimeout: 30_000 }));
 
-export const VERSION = "1.6.2";
+export const VERSION = "1.6.3";
 const BASE_URL = process.env.VOIDLESS_API_URL || "https://api.voidless.dev";
 const CDN_URL = "https://cdn.voidless.dev";
 // Where asset links point. Results link to the asset's page in the app rather than to raw GIFs: the
@@ -361,6 +363,114 @@ export function createVoidlessServer(API_KEY) {
     })
   );
 
+  // ── image data for HTML ──────────────────────────────────────────────────────────────────
+  // Claude's HTML artifacts (and many sandboxes) cannot load images from another site, and an image a
+  // tool shows the model cannot be copied out of the conversation into code. So this hands back the
+  // picture itself as a small data: URI the client pastes into <img src> or a CSS background. Shrunk to
+  // fit a text budget: a 512 PNG as base64 is ~400k characters, far past what a reply can carry.
+  const DATA_URI_BUDGET = 60000;
+
+  function decodePng(buf) {
+    const png = PNG.sync.read(buf);
+    return { width: png.width, height: png.height, data: png.data };
+  }
+
+  // Box-average downscale (keeps pixel art blocky when the factor is whole, smooth art clean otherwise).
+  function shrink(img, w, h) {
+    if (img.width === w && img.height === h) return img;
+    const out = Buffer.alloc(w * h * 4);
+    const sx = img.width / w, sy = img.height / h;
+    for (let y = 0; y < h; y++) {
+      const y0 = Math.floor(y * sy), y1 = Math.max(y0 + 1, Math.floor((y + 1) * sy));
+      for (let x = 0; x < w; x++) {
+        const x0 = Math.floor(x * sx), x1 = Math.max(x0 + 1, Math.floor((x + 1) * sx));
+        let r = 0, g = 0, b = 0, a = 0, n = 0;
+        for (let yy = y0; yy < y1; yy++) for (let xx = x0; xx < x1; xx++) {
+          const i = (yy * img.width + xx) * 4, al = img.data[i + 3];
+          r += img.data[i] * al; g += img.data[i + 1] * al; b += img.data[i + 2] * al; a += al; n++;
+        }
+        const o = (y * w + x) * 4;
+        if (a) { out[o] = r / a; out[o + 1] = g / a; out[o + 2] = b / a; }
+        out[o + 3] = a / n;
+      }
+    }
+    return { width: w, height: h, data: out };
+  }
+
+  function encodeStrip(frames, cell) {
+    const png = new PNG({ width: cell * frames.length, height: cell });
+    frames.forEach((f, k) => {
+      const s = shrink(f, cell, cell);
+      for (let y = 0; y < cell; y++) s.data.copy(png.data, (y * png.width + k * cell) * 4, y * cell * 4, (y + 1) * cell * 4);
+    });
+    return PNG.sync.write(png, { colorType: 6 });
+  }
+
+  async function fetchPng(key) {
+    const url = cdnUrl(key);
+    if (!url) throw new Error(`No public file for ${key}.`);
+    const res = await fetch(url);
+    if (!res.ok) throw new Error(`Could not load ${url} (${res.status}).`);
+    const buf = Buffer.from(await res.arrayBuffer());
+    if (buf.slice(1, 4).toString() !== "PNG") throw new Error(`${url} is not a PNG; use the URL instead.`);
+    return decodePng(buf);
+  }
+
+  server.tool(
+    "get_image_data",
+    "An asset's image as a data: URI to put straight into HTML (<img src=…> or a CSS background), for " +
+      "sandboxes that cannot load images from another site, such as Claude's HTML artifacts. For an animation " +
+      "or rotation frame it returns ONE horizontal sprite strip (all frames side by side, each size×size) plus a " +
+      "CSS snippet that plays it. Shrunk to fit a reply (small sizes are fine for sprites; scale them up in CSS " +
+      "with image-rendering: pixelated). Free.",
+    {
+      id: assetId,
+      frameId: z.number().int().optional().describe("Frame id from get_asset (an animation, rotation set or edit). Omit for the base image"),
+      imageIndex: z.number().int().optional().describe("Only this image of the frame (e.g. one facing of a rotation set) instead of the strip"),
+      size: z.number().int().min(16).max(256).default(128).describe("Pixels per image (square). Lowered automatically if the result would be too long"),
+    },
+    readTool("Get image data"),
+    tool(async ({ id, frameId: fid, imageIndex, size }) => {
+      const a = await apiGet(`/assets/${id}`);
+      const frames = (a.meta_data && a.meta_data.frames) || [];
+      let keys;
+      let label = "base image";
+      if (fid === undefined || fid === null) {
+        keys = [a.file];
+      } else {
+        const f = frames.find((x) => x && x.id === fid) || frames[fid];
+        if (!f) throw new Error(`Asset ${id} has no frame ${fid}. Use get_asset for frame ids.`);
+        const images = Array.isArray(f.images) ? f.images : [];
+        if (!images.length) throw new Error(`Frame ${fid} has no images.`);
+        keys = Number.isInteger(imageIndex) ? [images[imageIndex]].filter(Boolean) : images;
+        if (!keys.length) throw new Error(`Frame ${fid} has no image ${imageIndex}.`);
+        label = `${f.name || f.type || "frame"}${Number.isInteger(imageIndex) ? ` [${imageIndex}]` : ""}`;
+      }
+      const decoded = await Promise.all(keys.slice(0, 64).map(fetchPng));
+      let cell = Math.min(size, Math.max(...decoded.map((d) => Math.max(d.width, d.height))));
+      let png = encodeStrip(decoded, cell);
+      while (png.length * 4 / 3 > DATA_URI_BUDGET && cell > 16) {
+        cell = Math.max(16, Math.floor(cell * 0.75));
+        png = encodeStrip(decoded, cell);
+      }
+      const uri = `data:image/png;base64,${png.toString("base64")}`;
+      const n = decoded.length;
+      const lines = [
+        n === 1
+          ? `Asset ${id} ${label}: ${cell}×${cell} PNG as a data URI (${uri.length} characters).`
+          : `Asset ${id} ${label}: a sprite strip of ${n} frames, each ${cell}×${cell}, total ${cell * n}×${cell} (${uri.length} characters).`,
+        n > 1
+          ? `Play it with CSS: width:${cell}px;height:${cell}px;background:url(<the URI>) 0 0/auto ${cell}px;` +
+            `animation:play ${(n / 8).toFixed(2)}s steps(${n}) infinite; @keyframes play{to{background-position:-${cell * n}px 0}}` +
+            " (scale with transform:scale(N) and image-rendering:pixelated)."
+          : "Use it as <img src=\"<the URI>\" style=\"image-rendering:pixelated\"> or a CSS background.",
+        "",
+        uri,
+      ];
+      return { content: [{ type: "text", text: lines.join("\n") }] };
+    })
+  );
+
   server.tool(
     "get_asset",
     "Show one asset with every frame: frame ids, types (animation, rotations - 8-way, edit - text, layer…), " +