vizo-mcp 0.3.0 → 0.3.1

package/README.md

@@ -12,7 +12,7 @@ Diagrams (`draw_diagram`, `update_diagram`) are laid out on your machine and sen
 
 ## Adding images
 
-`add_image` also takes a local file `path` here: the proxy reads the file and uploads it. The image is placed on the board, or with `place: false` only uploaded, and the returned `fileId` can be used as a flowchart or component node's `image` to show the picture in a diagram.
+`add_image` also takes a local file `path` here (up to 20 MB): the proxy uploads the file straight to the board with your token, then places it by its `fileId`, so large images don't have to fit in an MCP request. The image is placed on the board, or with `place: false` only uploaded, and the returned `fileId` can be used as a flowchart or component node's `image` to show the picture in a diagram.
 
 ## Exporting images
 

package/dist/index.js

@@ -15,6 +15,7 @@ import {
   ListToolsRequestSchema,
   ReadResourceRequestSchema
 } from "@modelcontextprotocol/sdk/types.js";
+import { createHash } from "node:crypto";
 import { readFileSync as readFileSync3, statSync } from "node:fs";
 import { resolve as resolve2 } from "node:path";
 
@@ -1349,36 +1350,6 @@ function defaultTitle(spec) {
   return { flowchart: "Flowchart", component: "Architecture", class: "Class diagram", sequence: "Sequence diagram", state: "State machine", mindmap: spec.kind === "mindmap" ? spec.root.label : "Mind map" }[spec.kind];
 }
 
-// ../diagram/src/primitives.ts
-import { z as z2 } from "zod";
-var Near = z2.object({
-  elementId: z2.string(),
-  side: z2.enum(["right", "left", "above", "below"]).optional(),
-  gap: z2.number().min(0).max(1e3).optional()
-});
-var ShapeInput = z2.object({
-  id: z2.string().max(64).regex(/^[A-Za-z0-9_.:-]+$/).optional().describe("Optional id to reference later; generated if omitted"),
-  type: z2.enum(["rectangle", "ellipse", "diamond", "text", "sticky", "code"]),
-  text: z2.string().max(4e3).optional(),
-  x: z2.number().optional(),
-  y: z2.number().optional(),
-  width: z2.number().min(10).max(4e3).optional(),
-  height: z2.number().min(10).max(4e3).optional(),
-  color: Color.optional(),
-  fontSize: z2.number().min(8).max(96).optional(),
-  dashed: z2.boolean().optional(),
-  near: Near.optional().describe("Place relative to an existing element instead of x/y")
-});
-var ConnectInput = z2.object({
-  from: z2.string(),
-  to: z2.string(),
-  label: z2.string().max(200).optional(),
-  dashed: z2.boolean().optional(),
-  arrowhead: z2.enum(["arrow", "triangle", "none"]).optional(),
-  bidirectional: z2.boolean().optional(),
-  color: Color.optional()
-});
-
 // src/export.ts
 import { existsSync, mkdirSync, readFileSync as readFileSync2, writeFileSync } from "node:fs";
 import { dirname, extname, resolve } from "node:path";
@@ -3234,7 +3205,7 @@ function ce(e, t = {}) {
       o = C(1, r + (W2 - r) * (s * pe));
     }
     return (r + o) / 2;
-  }, e[0].pressure), m = $(u, h, e[e.length - 1].pressure, n), U, X = e[0].vector, z3 = e[0].point, F = z3, O = z3, E = F, J = false;
+  }, e[0].pressure), m = $(u, h, e[e.length - 1].pressure, n), U, X = e[0].vector, z2 = e[0].point, F = z2, O = z2, E = F, J = false;
   for (let r = 0; r < e.length; r++) {
     let { pressure: i } = e[r], { point: o, vector: s, distance: W2, runningLength: I } = e[r];
     if (r < e.length - 1 && p - I < 3) continue;
@@ -3252,7 +3223,7 @@ function ce(e, t = {}) {
     if (be || ne) {
       let v = b(R(X), m);
       for (let Z = 1 / 13, w = 0; w <= 1; w += Z) O = L(a(o, v), o, V * w), _.push(O), E = L(l(o, v), o, V * -w), M.push(E);
-      z3 = O, F = E, ne && (J = true);
+      z2 = O, F = E, ne && (J = true);
       continue;
     }
     if (J = false, r === e.length - 1) {
@@ -3261,7 +3232,7 @@ function ce(e, t = {}) {
       continue;
     }
     let oe = b(R(K(re, s, Y)), m);
-    O = a(o, oe), (r <= 1 || A(z3, O) > te) && (_.push(O), z3 = O), E = l(o, oe), (r <= 1 || A(F, E) > te) && (M.push(E), F = E), H = i, X = s;
+    O = a(o, oe), (r <= 1 || A(z2, O) > te) && (_.push(O), z2 = O), E = l(o, oe), (r <= 1 || A(F, E) > te) && (M.push(E), F = E), H = i, X = s;
   }
   let P = e[0].point.slice(0, 2), k = e.length > 1 ? e[e.length - 1].point.slice(0, 2) : l(e[0].point, [1, 1]), Q = [], N = [];
   if (e.length === 1) {
@@ -4064,7 +4035,7 @@ var SCENE_TOOL = "get_board_scene";
 var SIZES_TOOL = "get_image_sizes";
 var HIDDEN = /* @__PURE__ */ new Set([PUT_TOOL, SCENE_TOOL, SIZES_TOOL]);
 var IMAGE_TOOL = "add_image";
-var MAX_IMAGE_BYTES = 47e5;
+var MAX_IMAGE_BYTES = 2e7;
 var LOCAL_TOOLS = /* @__PURE__ */ new Set(["draw_diagram", "update_diagram"]);
 var toolError = (text2) => ({ content: [{ type: "text", text: text2 }], isError: true });
 function arg(name) {
@@ -4083,14 +4054,15 @@ async function main() {
     process.exit(2);
   }
   const endpoint = new URL(base2.endsWith("/mcp") ? base2 : `${base2}/mcp`);
-  const upstream = new Client({ name: "vizo-mcp-proxy", version: "0.3.0" });
+  const site = base2.replace(/\/mcp$/, "");
+  const upstream = new Client({ name: "vizo-mcp-proxy", version: "0.3.1" });
   await upstream.connect(
     new StreamableHTTPClientTransport(endpoint, { requestInit: { headers: { Authorization: `Bearer ${token}`, [PROXY_HEADER]: String(LAYOUT_VERSION) } } })
   );
   const caps = upstream.getServerCapabilities() ?? {};
   log(`connected to ${endpoint.href} (local layout v${LAYOUT_VERSION})`);
   const server = new Server(
-    { name: "vizo", version: "0.3.0" },
+    { name: "vizo", version: "0.3.1" },
     {
       capabilities: {
         tools: caps.tools ? {} : void 0,
@@ -4115,15 +4087,16 @@ This local proxy also has export_image: save a board or some of its diagrams as
     server.setRequestHandler(CallToolRequestSchema, async (req) => {
       const { name, arguments: args = {} } = req.params;
       if (name === EXPORT_TOOL.name) return exportLocally(args);
-      if (name === IMAGE_TOOL && typeof args.path === "string") {
-        const { path, ...rest } = args;
-        let dataURL;
+      if (name === IMAGE_TOOL && (args.path || args.url || args.dataURL) && !args.fileId) {
+        const { path, url, dataURL, ...rest } = args;
+        if ([path, url, dataURL].filter(Boolean).length !== 1) return toolError("Give exactly one of path, url, dataURL or fileId.");
         try {
-          dataURL = readImage(path);
+          const image2 = path ? readLocalImage(String(path)) : url ? await downloadImage(String(url)) : decodeDataURL(String(dataURL));
+          const fileId = await uploadImage(String(args.boardId ?? ""), image2);
+          return upstream.callTool({ ...req.params, arguments: { ...rest, fileId } });
         } catch (e) {
           return toolError(e instanceof Error ? e.message : String(e));
         }
-        return upstream.callTool({ ...req.params, arguments: { ...rest, dataURL } });
       }
       if (!LOCAL_TOOLS.has(name)) return upstream.callTool(req.params);
       serverSupportsLocal ??= (await upstream.listTools()).tools.some((t) => t.name === PUT_TOOL);
@@ -4144,6 +4117,39 @@ This local proxy also has export_image: save a board or some of its diagrams as
     server.setRequestHandler(ListPromptsRequestSchema, (req) => upstream.listPrompts(req.params));
     server.setRequestHandler(GetPromptRequestSchema, (req) => upstream.getPrompt(req.params));
   }
+  async function uploadImage(boardRef, image2) {
+    const boardId = boardIdOf(boardRef);
+    const fileId = createHash("sha1").update(image2.bytes).digest("hex");
+    const res = await fetch(`${site}/api/boards/${encodeURIComponent(boardId)}/files/${fileId}`, {
+      method: "PUT",
+      body: image2.bytes,
+      headers: { Authorization: `Bearer ${token}`, "Content-Type": image2.type }
+    });
+    if (!res.ok) {
+      const msg = await res.json().then((j) => j.error).catch(() => res.statusText);
+      throw new Error(res.status === 404 ? `Board '${boardId}' not found or you have no access. Use list_boards.` : msg);
+    }
+    return fileId;
+  }
+  async function downloadImages(boardRef, files) {
+    const boardId = boardIdOf(boardRef);
+    const out = [];
+    let next = 0;
+    const worker = async () => {
+      while (next < files.length) {
+        const f = files[next++];
+        const res = await fetch(`${site}/api/boards/${encodeURIComponent(boardId)}/files/${encodeURIComponent(f.id)}`, { headers: { Authorization: `Bearer ${token}` } });
+        if (!res.ok) {
+          log(`image ${f.id}: HTTP ${res.status}`);
+          continue;
+        }
+        const type = res.headers.get("content-type") || f.mimeType;
+        out.push({ id: f.id, mimeType: type, dataURL: `data:${type};base64,${Buffer.from(await res.arrayBuffer()).toString("base64")}` });
+      }
+    };
+    await Promise.all(Array.from({ length: Math.min(6, files.length) }, worker));
+    return out;
+  }
   async function renderLocally(name, args) {
     let spec;
     try {
@@ -4185,11 +4191,14 @@ This local proxy also has export_image: save a board or some of its diagrams as
   }
   async function exportLocally(args) {
     if (!args?.boardId) return toolError("boardId is required");
-    const r = await upstream.callTool({ name: SCENE_TOOL, arguments: { boardId: args.boardId } });
+    const r = await upstream.callTool({ name: SCENE_TOOL, arguments: { boardId: args.boardId, fileRefs: true } });
     const body = r.content?.find((c) => c.type === "text")?.text ?? "";
     if (r.isError) return toolError(body || "Couldn't read the board.");
     try {
-      return await exportImage(JSON.parse(body), args);
+      const scene = JSON.parse(body);
+      const refs = scene.files.filter((f) => !f.dataURL);
+      if (refs.length) scene.files = [...scene.files.filter((f) => f.dataURL), ...await downloadImages(args.boardId, refs)];
+      return await exportImage(scene, args);
     } catch (e) {
       if (e instanceof ExportError) return toolError(e.message);
       log("export failed:", e);
@@ -4209,15 +4218,20 @@ function withPath(t) {
   const schema = t.inputSchema ?? { type: "object", properties: {} };
   return {
     ...t,
-    description: `${t.description ?? ""} Here you can also pass a local file \`path\` instead of url/dataURL.`,
+    description: `${t.description ?? ""} Here you can also pass a local file \`path\`, and url, path and dataURL images can be up to ${MAX_IMAGE_BYTES / 1e6} MB (this proxy uploads them).`,
     inputSchema: {
       ...schema,
-      properties: { path: { type: "string", description: "Image file on this machine (absolute, or relative to the working directory); use instead of url/dataURL" }, ...schema.properties }
+      properties: { path: { type: "string", description: "Image file on this machine (absolute, or relative to the working directory); use instead of url/dataURL/fileId" }, ...schema.properties }
     }
   };
 }
-var MIME = { png: "image/png", jpg: "image/jpeg", jpeg: "image/jpeg", gif: "image/gif", webp: "image/webp", bmp: "image/bmp", svg: "image/svg+xml" };
-function readImage(path) {
+var boardIdOf = (ref) => {
+  const id2 = ref.match(/\/b\/([A-Za-z0-9_-]+)/)?.[1] ?? ref.trim();
+  if (!id2) throw new Error("boardId is required");
+  return id2;
+};
+var tooLarge = (size) => `Image too large (${(size / 1e6).toFixed(1)} MB; max ${MAX_IMAGE_BYTES / 1e6} MB). Use a smaller or more compressed image.`;
+function readLocalImage(path) {
   const full = resolve2(path);
   let size;
   try {
@@ -4225,10 +4239,39 @@ function readImage(path) {
   } catch {
     throw new Error(`No such file: ${full}`);
   }
-  if (size > MAX_IMAGE_BYTES) throw new Error(`Image too large (${(size / 1e6).toFixed(1)} MB; max ${MAX_IMAGE_BYTES / 1e6} MB). Use a smaller or more compressed image.`);
-  const mime = MIME[full.split(".").pop()?.toLowerCase() ?? ""] ?? "application/octet-stream";
-  return `data:${mime};base64,${readFileSync3(full).toString("base64")}`;
+  if (size > MAX_IMAGE_BYTES) throw new Error(tooLarge(size));
+  return { bytes: readFileSync3(full), type: MIME[full.split(".").pop()?.toLowerCase() ?? ""] ?? "application/octet-stream" };
 }
+async function downloadImage(raw) {
+  let url;
+  try {
+    url = new URL(raw);
+  } catch {
+    throw new Error(`url '${raw}' is not a valid URL`);
+  }
+  if (url.protocol !== "https:" && url.protocol !== "http:") throw new Error("url must be http(s)");
+  const res = await fetch(url, { headers: { accept: "image/*", "user-agent": "Mozilla/5.0 (compatible; vizo-mcp)" }, signal: AbortSignal.timeout(3e4) });
+  if (!res.ok || !res.body) throw new Error(`Couldn't fetch ${url.href}: HTTP ${res.status}`);
+  const declared = Number(res.headers.get("content-length") ?? 0);
+  if (declared > MAX_IMAGE_BYTES) throw new Error(tooLarge(declared));
+  const parts = [];
+  let size = 0;
+  for await (const chunk of res.body) {
+    size += chunk.length;
+    if (size > MAX_IMAGE_BYTES) throw new Error(tooLarge(size));
+    parts.push(Buffer.from(chunk));
+  }
+  return { bytes: Buffer.concat(parts), type: res.headers.get("content-type") ?? "application/octet-stream" };
+}
+function decodeDataURL(dataURL) {
+  const m = dataURL.match(/^data:([^;,]*)(;base64)?,/);
+  if (!m) throw new Error("dataURL must look like data:image/png;base64,....");
+  const body = dataURL.slice(m[0].length);
+  const bytes = m[2] ? Buffer.from(body, "base64") : Buffer.from(decodeURIComponent(body));
+  if (bytes.length > MAX_IMAGE_BYTES) throw new Error(tooLarge(bytes.length));
+  return { bytes, type: m[1] || "application/octet-stream" };
+}
+var MIME = { png: "image/png", jpg: "image/jpeg", jpeg: "image/jpeg", gif: "image/gif", webp: "image/webp", bmp: "image/bmp", svg: "image/svg+xml" };
 main().catch((e) => {
   log(e instanceof Error ? e.message : e);
   process.exit(1);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vizo-mcp",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "stdio MCP proxy for a Vizo whiteboard server",
   "license": "MIT",
   "type": "module",