@kvasar/google-stitch 0.1.17 → 0.1.19

package/openclaw.plugin.json

@@ -1,7 +1,7 @@
 {
   "id": "openclaw-google-stitch",
    "name": "Google Stitch MCP",
-  "version": "0.1.17",
+  "version": "0.1.19",
   "description": "Integrates Google Stitch MCP services into OpenClaw",
    "skills": ["skills"],
   "configSchema": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kvasar/google-stitch",
-  "version": "0.1.17",
+  "version": "0.1.19",
   "description": "OpenClaw plugin for Google Stitch UI generation, screen design, variants, and design systems",
   "type": "module",
   "main": "./src/index.ts",

package/skills/SKILL.md

@@ -164,8 +164,8 @@ Example prompts:
 - List the generated UI screens for project 12345
 
 Returns:
-- Array of `Screen` objects
-- Includes fields such as `name`, `title`, `prompt`, `deviceType`, `width`, `height`, and grouping metadata
+- A visual list of generated screens in the project
+- Each screen is rendered with title, prompt, device type, dimensions, and preview image/HTML when available
 
 ---
 

package/src/tools/list_screens.ts

@@ -1,9 +1,36 @@
 import { StitchMCPClient } from "../services/stitch-mcp-client.js";
+import fs from "node:fs";
+import os from "node:os";
+import path from "node:path";
 
 interface ListScreensParams {
   projectId: string;
 }
 
+type StitchFile = {
+  name?: string;
+  downloadUrl?: string;
+  mimeType?: string;
+  fileContentBase64?: string;
+};
+
+type Screen = {
+  name?: string;
+  id?: string;
+  title?: string;
+  prompt?: string;
+  screenshot?: StitchFile;
+  htmlCode?: StitchFile;
+  figmaExport?: StitchFile;
+  deviceType?: string;
+  width?: string;
+  height?: string;
+  groupId?: string;
+  groupName?: string;
+  generatedBy?: string;
+  isCreatedByClient?: boolean;
+};
+
 export const listScreensTool = (client: StitchMCPClient) => ({
   name: "list_screens",
   description: "Lists all screens within a given Stitch project",
@@ -13,8 +40,95 @@ export const listScreensTool = (client: StitchMCPClient) => ({
       throw new Error("projectId is required");
     }
 
-    return client.request("list_screens", {
-      projectId: params.projectId,
-    });
-  },
+    const screens = (await client.request("list_screens", {
+      projectId: params.projectId
+    })) as unknown as Screen[];
+
+    const content: Array<{ type: string; [key: string]: any }> = [];
+
+    if (!screens?.length) {
+      return {
+        content: [
+          {
+            type: "text",
+            text: "No screens found in this project."
+          }
+        ]
+      };
+    }
+
+    for (const screen of screens) {
+      content.push({
+        type: "text",
+        text: `## ${screen.title || "Untitled screen"}
+        Prompt: ${screen.prompt || "-"}
+        Device: ${screen.deviceType || "-"}
+        Size: ${screen.width || "?"} × ${screen.height || "?"}`
+      });
+
+      // Prefer embedded image
+      if (screen.screenshot?.fileContentBase64) {
+        const tempFilePath = path.join(
+          os.tmpdir(),
+          `stitch-screen-${Date.now()}-${Math.random()
+            .toString(36)
+            .slice(2)}.png`
+        );
+
+        fs.writeFileSync(
+          tempFilePath,
+          Buffer.from(
+            screen.screenshot.fileContentBase64,
+            "base64"
+          )
+        );
+
+        content.push({
+          type: "image",
+          path: tempFilePath,
+          caption: screen.title || "Generated screen"
+        });
+
+        continue;
+      }
+
+      // Fallback URL
+      if (screen.screenshot?.downloadUrl) {
+        content.push({
+          type: "image",
+          url: screen.screenshot.downloadUrl,
+          caption: screen.title || "Generated screen"
+        });
+
+        continue;
+      }
+
+      // HTML fallback
+      if (screen.htmlCode?.fileContentBase64) {
+        const html = Buffer.from(
+          screen.htmlCode.fileContentBase64,
+          "base64"
+        ).toString("utf-8");
+
+        content.push({
+          type: "html",
+          html
+        });
+
+        continue;
+      }
+
+      if (screen.htmlCode?.downloadUrl) {
+        content.push({
+          type: "html",
+          html: `<iframe
+            src="${screen.htmlCode.downloadUrl}"
+            style="width:100%;height:600px;border:none;"
+          ></iframe>`
+        });
+      }
+    }
+
+    return { content };
+  }
 });

package/src/tools/get_screen.ts

@@ -1,7 +0,0 @@
-export const getScreenTool = (client:any) => ({
-  name: "get_screen",
-  description: "get screen",
-  async execute(_: string, params: any) {
-    return await client.request?.("get_screen", params);
-  },
-});