@xiaou66/vite-plugin-vue-mcp-next 0.0.2 → 0.0.5

package/dist/index.js

@@ -16,11 +16,13 @@ var DEFAULT_MASK_HEADERS = [
 
 // src/constants.ts
 var DEFAULT_MCP_PATH = "/__mcp";
+var DEFAULT_SCREENSHOT_MAX_BYTES = 5 * 1024 * 1024;
 var MCP_TOOL_NAMES = {
   listPages: "list_pages",
   getPageState: "get_page_state",
   getDomTree: "get_dom_tree",
   queryDom: "query_dom",
+  takeScreenshot: "take_screenshot",
   getConsoleLogs: "get_console_logs",
   clearConsoleLogs: "clear_console_logs",
   evaluateScript: "evaluate_script",
@@ -37,6 +39,8 @@ var MCP_TOOL_NAMES = {
 };
 var VIRTUAL_RUNTIME_ID = "virtual:vite-plugin-vue-mcp-next/runtime";
 var RESOLVED_VIRTUAL_RUNTIME_ID = `\0${VIRTUAL_RUNTIME_ID}`;
+var VIRTUAL_SCREENSHOT_CONFIG_ID = "virtual:vite-plugin-vue-mcp-next/screenshot-config";
+var RESOLVED_VIRTUAL_SCREENSHOT_CONFIG_ID = `\0${VIRTUAL_SCREENSHOT_CONFIG_ID}`;
 var DEFAULT_MCP_CLIENT_SERVER_NAME = "vue-mcp-next";
 var DEFAULT_OPTIONS = {
   mcpPath: DEFAULT_MCP_PATH,
@@ -76,6 +80,14 @@ var DEFAULT_OPTIONS = {
   },
   console: {
     maxRecords: DEFAULT_CONSOLE_MAX_RECORDS
+  },
+  screenshot: {
+    prefer: "auto",
+    maxBytes: DEFAULT_SCREENSHOT_MAX_BYTES,
+    snapdom: {
+      options: {},
+      plugins: []
+    }
   }
 };
 function mergeMcpClientOptions(cursorConfig, mcpClients) {
@@ -126,6 +138,21 @@ function mergeOptions(options = {}) {
     console: {
       ...DEFAULT_OPTIONS.console,
       ...options.console
+    },
+    screenshot: {
+      ...DEFAULT_OPTIONS.screenshot,
+      ...options.screenshot,
+      snapdom: {
+        ...DEFAULT_OPTIONS.screenshot.snapdom,
+        ...options.screenshot?.snapdom,
+        options: {
+          ...DEFAULT_OPTIONS.screenshot.snapdom.options,
+          ...options.screenshot?.snapdom?.options
+        },
+        plugins: options.screenshot?.snapdom?.plugins ?? [
+          ...DEFAULT_OPTIONS.screenshot.snapdom.plugins
+        ]
+      }
     }
   };
 }
@@ -680,9 +707,225 @@ function getPathname(url) {
   }
 }
 
+// src/mcp/tools/screenshot.ts
+import { z as z5 } from "zod";
+
+// src/cdp/cdpScreenshot.ts
+async function cdpCaptureScreenshot(options) {
+  if (options.target === "element") {
+    return captureElementScreenshot(options);
+  }
+  if (options.target === "fullPage") {
+    return captureFullPageScreenshot(options);
+  }
+  return captureViewportScreenshot(options);
+}
+async function captureViewportScreenshot(options) {
+  const metrics = await options.client.Page.getLayoutMetrics();
+  const width = Math.ceil(metrics.cssLayoutViewport.clientWidth);
+  const height = Math.ceil(metrics.cssLayoutViewport.clientHeight);
+  const result = await options.client.Page.captureScreenshot(
+    omitUndefined({
+      format: options.format,
+      quality: createQuality(options),
+      captureBeyondViewport: false
+    })
+  );
+  return { data: result.data, width, height };
+}
+async function captureFullPageScreenshot(options) {
+  const metrics = await options.client.Page.getLayoutMetrics();
+  const width = Math.ceil(metrics.cssContentSize.width);
+  const height = Math.ceil(metrics.cssContentSize.height);
+  const result = await options.client.Page.captureScreenshot(
+    omitUndefined({
+      format: options.format,
+      quality: createQuality(options),
+      captureBeyondViewport: true,
+      clip: { x: 0, y: 0, width, height, scale: 1 }
+    })
+  );
+  return { data: result.data, width, height };
+}
+async function captureElementScreenshot(options) {
+  if (!options.selector) {
+    throw new Error("selector is required when target is element");
+  }
+  const rect = await getElementRect(options.client, options.selector);
+  const result = await options.client.Page.captureScreenshot(
+    omitUndefined({
+      format: options.format,
+      quality: createQuality(options),
+      captureBeyondViewport: true,
+      clip: {
+        x: rect.x,
+        y: rect.y,
+        width: rect.width,
+        height: rect.height,
+        scale: 1
+      }
+    })
+  );
+  return { data: result.data, width: rect.width, height: rect.height };
+}
+async function getElementRect(client, selector) {
+  const result = await client.Runtime.evaluate({
+    expression: createElementRectExpression(selector),
+    awaitPromise: true,
+    returnByValue: true
+  });
+  if (result.exceptionDetails) {
+    throw new Error(result.exceptionDetails.text || "element query failed");
+  }
+  const value = result.result.value;
+  if (!isElementRect(value)) {
+    throw new Error(`element not found: ${selector}`);
+  }
+  return value;
+}
+function createElementRectExpression(selector) {
+  return `(() => {
+  const el = document.querySelector(${JSON.stringify(selector)});
+  if (!el) return null;
+  const rect = el.getBoundingClientRect();
+  return {
+    x: rect.x + window.scrollX,
+    y: rect.y + window.scrollY,
+    width: rect.width,
+    height: rect.height
+  };
+})()`;
+}
+function createQuality(options) {
+  return options.format === "png" ? void 0 : options.quality;
+}
+function omitUndefined(value) {
+  return Object.fromEntries(
+    Object.entries(value).filter(([, item]) => item !== void 0)
+  );
+}
+function isElementRect(value) {
+  if (!value || typeof value !== "object") {
+    return false;
+  }
+  const rect = value;
+  return typeof rect.x === "number" && typeof rect.y === "number" && typeof rect.width === "number" && rect.width > 0 && typeof rect.height === "number" && rect.height > 0;
+}
+
+// src/mcp/tools/screenshot.ts
+var DEFAULT_SCREENSHOT_TARGET = "viewport";
+var DEFAULT_SCREENSHOT_FORMAT = "png";
+var screenshotInputSchema = {
+  pageId: z5.string().optional(),
+  target: z5.enum(["viewport", "fullPage", "element"]).optional(),
+  selector: z5.string().optional(),
+  format: z5.enum(["png", "jpeg", "webp"]).optional(),
+  prefer: z5.enum(["auto", "cdp", "runtime"]).optional(),
+  quality: z5.number().optional(),
+  scale: z5.number().optional(),
+  snapdom: z5.record(z5.string(), z5.unknown()).optional()
+};
+function registerScreenshotTools(server, ctx) {
+  server.registerTool(
+    MCP_TOOL_NAMES.takeScreenshot,
+    {
+      description: "Take a page screenshot using CDP or snapdom fallback.",
+      inputSchema: screenshotInputSchema
+    },
+    async (input) => handleTakeScreenshot(ctx, input)
+  );
+}
+async function handleTakeScreenshot(ctx, input) {
+  const target = input.target ?? DEFAULT_SCREENSHOT_TARGET;
+  const format = input.format ?? DEFAULT_SCREENSHOT_FORMAT;
+  const prefer = input.prefer ?? ctx.options.screenshot.prefer;
+  if (target === "element" && !input.selector) {
+    return createToolError("selector is required when target is element");
+  }
+  if (prefer !== "runtime") {
+    const cdp = await connectCdpForPage(ctx, input.pageId);
+    if (cdp) {
+      try {
+        const screenshot = await cdpCaptureScreenshot({
+          client: cdp.client,
+          target,
+          selector: input.selector,
+          format,
+          quality: input.quality
+        });
+        return createScreenshotResponse(ctx, {
+          source: "cdp",
+          target,
+          format,
+          data: screenshot.data,
+          width: screenshot.width,
+          height: screenshot.height,
+          mimeType: createMimeType(format),
+          byteLength: getBase64ByteLength(screenshot.data)
+        });
+      } finally {
+        await closeCdpClient(cdp.client);
+      }
+    }
+    if (prefer === "cdp") {
+      return createToolError("CDP screenshot is unavailable");
+    }
+  }
+  return createRuntimeScreenshot(ctx, input, { target, format });
+}
+async function createRuntimeScreenshot(ctx, input, normalized) {
+  const result = await requestRuntimeData(ctx, (event) => {
+    void ctx.rpcServer?.takeScreenshot({
+      event,
+      target: normalized.target,
+      selector: input.selector,
+      format: normalized.format,
+      quality: input.quality,
+      scale: input.scale,
+      snapdom: {
+        ...ctx.options.screenshot.snapdom,
+        options: {
+          ...ctx.options.screenshot.snapdom.options,
+          ...input.snapdom
+        }
+      }
+    });
+  });
+  if (isScreenshotTooLarge(ctx, result)) {
+    return createToolError(
+      `screenshot is too large: ${String(result.byteLength)} bytes`
+    );
+  }
+  if (!isPlainRecord(result)) {
+    return createToolError("runtime screenshot returned an invalid response");
+  }
+  return createToolResponse(result);
+}
+function createScreenshotResponse(ctx, result) {
+  if (result.byteLength > ctx.options.screenshot.maxBytes) {
+    return createToolError(
+      `screenshot is too large: ${String(result.byteLength)} bytes`
+    );
+  }
+  return createToolResponse(result);
+}
+function isScreenshotTooLarge(ctx, result) {
+  return isPlainRecord(result) && "byteLength" in result && typeof result.byteLength === "number" && result.byteLength > ctx.options.screenshot.maxBytes;
+}
+function isPlainRecord(value) {
+  return Boolean(value) && typeof value === "object" && !Array.isArray(value);
+}
+function createMimeType(format) {
+  return `image/${format}`;
+}
+function getBase64ByteLength(data) {
+  const padding = data.endsWith("==") ? 2 : data.endsWith("=") ? 1 : 0;
+  return Math.ceil(data.length * 3 / 4) - padding;
+}
+
 // src/mcp/tools/vue.ts
 import { nanoid as nanoid2 } from "nanoid";
-import { z as z5 } from "zod";
+import { z as z6 } from "zod";
 function registerVueTools(server, ctx) {
   server.registerTool(
     MCP_TOOL_NAMES.getComponentTree,
@@ -695,7 +938,7 @@ function registerVueTools(server, ctx) {
     MCP_TOOL_NAMES.getComponentState,
     {
       description: "Get Vue component state.",
-      inputSchema: { componentName: z5.string() }
+      inputSchema: { componentName: z6.string() }
     },
     async ({ componentName }) => requestVueData(ctx, (event) => {
       void ctx.rpcServer?.getInspectorState({ event, componentName });
@@ -706,10 +949,10 @@ function registerVueTools(server, ctx) {
     {
       description: "Edit Vue component state.",
       inputSchema: {
-        componentName: z5.string(),
-        path: z5.array(z5.string()),
-        value: z5.string(),
-        valueType: z5.enum(["string", "number", "boolean", "object", "array"])
+        componentName: z6.string(),
+        path: z6.array(z6.string()),
+        value: z6.string(),
+        valueType: z6.enum(["string", "number", "boolean", "object", "array"])
       }
     },
     ({ componentName, path: path5, value, valueType }) => {
@@ -729,7 +972,7 @@ function registerVueTools(server, ctx) {
     MCP_TOOL_NAMES.highlightComponent,
     {
       description: "Highlight a Vue component.",
-      inputSchema: { componentName: z5.string() }
+      inputSchema: { componentName: z6.string() }
     },
     ({ componentName }) => {
       if (!ctx.rpcServer) {
@@ -757,7 +1000,7 @@ function registerVueTools(server, ctx) {
     MCP_TOOL_NAMES.getPiniaState,
     {
       description: "Get Pinia store state.",
-      inputSchema: { storeName: z5.string() }
+      inputSchema: { storeName: z6.string() }
     },
     async ({ storeName }) => requestVueData(ctx, (event) => {
       void ctx.rpcServer?.getPiniaState({ event, storeName });
@@ -800,6 +1043,7 @@ function createMcpServer(ctx, vite) {
   });
   registerPageTools(server, ctx, vite);
   registerDomTools(server, ctx);
+  registerScreenshotTools(server, ctx);
   registerConsoleTools(server, ctx);
   registerEvaluateTools(server, ctx);
   registerNetworkTools(server, ctx);
@@ -809,18 +1053,39 @@ function createMcpServer(ctx, vite) {
 
 // src/mcp/transport.ts
 import { SSEServerTransport } from "@modelcontextprotocol/sdk/server/sse.js";
-function setupMcpTransport(base, server, vite) {
+import { StreamableHTTPServerTransport } from "@modelcontextprotocol/sdk/server/streamableHttp.js";
+function setupMcpTransport(base, createServer, vite) {
   const transports = /* @__PURE__ */ new Map();
   vite.middlewares.use(`${base}/sse`, (_req, res) => {
     const transport = new SSEServerTransport(`${base}/messages`, res);
-    transports.set(transport.sessionId, transport);
+    const server = createServer();
+    transports.set(transport.sessionId, { server, transport });
     res.on("close", () => {
       transports.delete(transport.sessionId);
+      void server.close();
     });
     void server.connect(transport).catch((error) => {
       res.destroy(error instanceof Error ? error : new Error(String(error)));
     });
   });
+  vite.middlewares.use(`${base}/mcp`, (req, res) => {
+    if (req.method !== "POST") {
+      res.statusCode = 405;
+      res.end("Method Not Allowed");
+      return;
+    }
+    const transport = new StreamableHTTPServerTransport({
+      sessionIdGenerator: void 0
+    });
+    const server = createServer();
+    res.on("close", () => {
+      void transport.close();
+      void server.close();
+    });
+    void server.connect(transport).then(() => transport.handleRequest(req, res)).catch((error) => {
+      res.destroy(error instanceof Error ? error : new Error(String(error)));
+    });
+  });
   vite.middlewares.use(`${base}/messages`, (req, res) => {
     if (req.method !== "POST") {
       res.statusCode = 405;
@@ -834,13 +1099,13 @@ function setupMcpTransport(base, server, vite) {
       res.end("Bad Request");
       return;
     }
-    const transport = transports.get(sessionId);
-    if (!transport) {
+    const entry = transports.get(sessionId);
+    if (!entry) {
       res.statusCode = 404;
       res.end("Not Found");
       return;
     }
-    void transport.handlePostMessage(req, res).catch((error) => {
+    void entry.transport.handlePostMessage(req, res).catch((error) => {
       res.destroy(error instanceof Error ? error : new Error(String(error)));
     });
   });
@@ -861,6 +1126,10 @@ function createServerVueRuntimeRpc(ctx) {
     onEvaluateScriptUpdated: (event, data) => {
       void ctx.hooks.callHook(event, data);
     },
+    takeScreenshot: () => void 0,
+    onScreenshotTaken: (event, data) => {
+      void ctx.hooks.callHook(event, data);
+    },
     getInspectorTree: () => void 0,
     onInspectorTreeUpdated: (event, data) => {
       void ctx.hooks.callHook(event, data);
@@ -1152,13 +1421,19 @@ function createRuntimeInjectionController(options, getConfig) {
       if (importee === VIRTUAL_RUNTIME_ID) {
         return RESOLVED_VIRTUAL_RUNTIME_ID;
       }
+      if (importee === VIRTUAL_SCREENSHOT_CONFIG_ID) {
+        return RESOLVED_VIRTUAL_SCREENSHOT_CONFIG_ID;
+      }
       return void 0;
     },
     load(id) {
-      if (id !== RESOLVED_VIRTUAL_RUNTIME_ID) {
-        return void 0;
+      if (id === RESOLVED_VIRTUAL_RUNTIME_ID) {
+        return "import { startRuntimeClient } from '@xiaou66/vite-plugin-vue-mcp-next/runtime/client';\nvoid startRuntimeClient();";
+      }
+      if (id === RESOLVED_VIRTUAL_SCREENSHOT_CONFIG_ID) {
+        return createScreenshotConfigModule(options);
       }
-      return "import { startRuntimeClient } from '@xiaou66/vite-plugin-vue-mcp-next/runtime/client';\nvoid startRuntimeClient();";
+      return void 0;
     },
     transformIndexHtml(html) {
       if (options.appendTo) {
@@ -1193,6 +1468,32 @@ ${code}`;
     }
   };
 }
+function createScreenshotConfigModule(options) {
+  const paths = collectScreenshotImportPaths(options);
+  const imports = paths.map((item, index) => `import * as m${String(index)} from ${JSON.stringify(item)};`).join("\n");
+  const entries = paths.map((item, index) => `${JSON.stringify(item)}: m${String(index)}`).join(",\n  ");
+  return `${imports}
+export const screenshotModuleRegistry = {
+  ${entries}
+};
+`;
+}
+function collectScreenshotImportPaths(options) {
+  const paths = /* @__PURE__ */ new Set();
+  for (const plugin of options.screenshot.snapdom.plugins) {
+    paths.add(getPluginPath(plugin));
+  }
+  if (options.screenshot.snapdom.filter) {
+    paths.add(options.screenshot.snapdom.filter);
+  }
+  if (options.screenshot.snapdom.fallbackURL) {
+    paths.add(options.screenshot.snapdom.fallbackURL);
+  }
+  return [...paths];
+}
+function getPluginPath(plugin) {
+  return typeof plugin === "string" ? plugin : plugin.path;
+}
 
 // src/plugin/mcpClientConfig/index.ts
 import path4 from "path";
@@ -1216,7 +1517,7 @@ function replaceOrAppendOwnedBlock(current, options) {
   const block = createCodexServerBlock(options);
   const matcher = createOwnedBlockMatcher(options.serverName);
   if (matcher.test(current)) {
-    return current.replace(matcher, block);
+    return ensureTrailingNewline(current);
   }
   const separator = current.trim() ? "\n\n" : "";
   return `${trimEndNewline(current)}${separator}${block}`;
@@ -1258,6 +1559,10 @@ async function readOptionalTextFile(filePath) {
 function trimEndNewline(value) {
   return value.replace(/\n+$/u, "");
 }
+function ensureTrailingNewline(value) {
+  return value.endsWith("\n") ? value : `${value}
+`;
+}
 function escapeRegExp(value) {
   return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 }
@@ -1274,12 +1579,15 @@ import path3 from "path";
 async function updateJsonMcpClientConfig(options) {
   try {
     const config = await readJsonConfig(options.configPath);
-    if (!isPlainRecord(config)) {
+    if (!isPlainRecord2(config)) {
       warnConfigFailure(options, "config root must be a JSON object");
       return;
     }
-    const mcpServers = isPlainRecord(config.mcpServers) ? config.mcpServers : {};
-    mcpServers[options.serverName] = { url: options.mcpUrl };
+    const mcpServers = isPlainRecord2(config.mcpServers) ? config.mcpServers : {};
+    if (Object.hasOwn(mcpServers, options.serverName)) {
+      return;
+    }
+    mcpServers[options.serverName] = { type: "sse", url: options.mcpUrl };
     config.mcpServers = mcpServers;
     await fs3.mkdir(path3.dirname(options.configPath), { recursive: true });
     await fs3.writeFile(
@@ -1308,7 +1616,7 @@ async function readOptionalTextFile2(filePath) {
     throw error;
   }
 }
-function isPlainRecord(value) {
+function isPlainRecord2(value) {
   return Boolean(value) && typeof value === "object" && !Array.isArray(value);
 }
 function warnConfigFailure(options, reason) {
@@ -1324,7 +1632,7 @@ function isNodeError2(error) {
 }
 
 // src/plugin/mcpClientConfig/index.ts
-async function updateMcpClientConfigs(root, mcpUrl, options) {
+async function updateMcpClientConfigs(root, sseUrl, streamableHttpUrl, options) {
   const serverName = options.serverName;
   const jobs = [];
   if (options.cursor) {
@@ -1332,7 +1640,7 @@ async function updateMcpClientConfigs(root, mcpUrl, options) {
       updateJsonMcpClientConfig({
         clientName: "Cursor",
         configPath: path4.join(root, ".cursor", "mcp.json"),
-        mcpUrl,
+        mcpUrl: sseUrl,
         serverName
       })
     );
@@ -1341,7 +1649,7 @@ async function updateMcpClientConfigs(root, mcpUrl, options) {
     jobs.push(
       updateCodexMcpClientConfig({
         configPath: path4.join(root, ".codex", "config.toml"),
-        mcpUrl,
+        mcpUrl: streamableHttpUrl,
         serverName
       })
     );
@@ -1351,7 +1659,7 @@ async function updateMcpClientConfigs(root, mcpUrl, options) {
       updateJsonMcpClientConfig({
         clientName: "Claude Code",
         configPath: path4.join(root, ".mcp.json"),
-        mcpUrl,
+        mcpUrl: sseUrl,
         serverName
       })
     );
@@ -1361,7 +1669,7 @@ async function updateMcpClientConfigs(root, mcpUrl, options) {
       updateJsonMcpClientConfig({
         clientName: "Trae",
         configPath: path4.join(root, ".trae", "mcp.json"),
-        mcpUrl,
+        mcpUrl: sseUrl,
         serverName
       })
     );
@@ -1397,8 +1705,11 @@ function vueMcpNext(userOptions = {}) {
           timeout: -1
         }
       );
-      const mcpServer = createMcpServer(ctx, server);
-      setupMcpTransport(options.mcpPath, mcpServer, server);
+      setupMcpTransport(
+        options.mcpPath,
+        () => createMcpServer(ctx, server),
+        server
+      );
       server.ws.on(
         "vite-plugin-vue-mcp-next:page-connected",
         (payload) => {
@@ -1425,12 +1736,21 @@ function vueMcpNext(userOptions = {}) {
         }
       );
       const port = String(server.config.server.port || 5173);
-      const mcpUrl = `http://${options.host}:${port}${options.mcpPath}/sse`;
+      const mcpSseUrl = `http://${options.host}:${port}${options.mcpPath}/sse`;
+      const mcpStreamableHttpUrl = `http://${options.host}:${port}${options.mcpPath}/mcp`;
       const root = searchForWorkspaceRoot(server.config.root);
-      await updateMcpClientConfigs(root, mcpUrl, options.mcpClients);
+      await updateMcpClientConfigs(
+        root,
+        mcpSseUrl,
+        mcpStreamableHttpUrl,
+        options.mcpClients
+      );
       if (options.printUrl) {
         setTimeout(() => {
-          console.log(`  \u279C  MCP:     Server is running at ${mcpUrl}`);
+          console.log(`  \u279C  MCP:     SSE server is running at ${mcpSseUrl}`);
+          console.log(
+            `  \u279C  MCP:     Streamable HTTP server is running at ${mcpStreamableHttpUrl}`
+          );
         }, 300);
       }
       server.httpServer?.once("close", () => {