@kvasar/google-stitch 0.1.16 → 0.1.18

package/openclaw.plugin.json

@@ -1,7 +1,7 @@
 {
   "id": "openclaw-google-stitch",
    "name": "Google Stitch MCP",
-  "version": "0.1.16",
+  "version": "0.1.18",
   "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.16",
+  "version": "0.1.18",
   "description": "OpenClaw plugin for Google Stitch UI generation, screen design, variants, and design systems",
   "type": "module",
   "main": "./src/index.ts",

package/src/tools/generate_screen_from_text_tool.ts

@@ -7,37 +7,31 @@ import fs from "node:fs";
 import path from "node:path";
 import os from "node:os";
 
+type StitchFile = {
+  name?: string;
+  downloadUrl?: string;
+  mimeType?: string;
+  fileContentBase64?: string;
+};
+
+type SessionOutputComponent = {
+  text?: string;
+  suggestion?: string;
+   
+};
+
 type StitchResponse = {
   screen?: {
     name?: string;
     title?: string;
     prompt?: string;
-    screenshot?: {
-      url?: string;
-      bytes?: string;
-    };
-    htmlCode?: {
-      content?: string;
-      url?: string;
-    };
+    screenshot?: StitchFile;
+    htmlCode?: StitchFile;
     deviceType?: DeviceType;
     width?: string;
     height?: string;
   };
-  output_components?: Array<{
-    text?: string;
-    suggestion?: string;
-    design?: {
-      screenshot?: {
-        url?: string;
-        bytes?: string;
-      };
-      htmlCode?: {
-        content?: string;
-        url?: string;
-      };
-    };
-  }>;
+  output_components?: SessionOutputComponent[];
 };
 
 export function generateScreenFromTextTool(client: StitchMCPClient) {
@@ -91,39 +85,28 @@ export function generateScreenFromTextTool(client: StitchMCPClient) {
       const result = (await client.generateScreen(params)) as StitchResponse;
 
       const screen = result.screen;
-      const firstComponent = result.output_components?.[0];
 
-      // Extract model's conversational text and suggestion
-      const modelText = firstComponent?.text;
-      const suggestion = firstComponent?.suggestion;
+      const modelText = result.output_components
+        ?.map(component => component.text)
+        .filter(Boolean)
+        .join("\n");
 
-      // Try image URL response
-      const imageUrl =
-        screen?.screenshot?.url ||
-        firstComponent?.design?.screenshot?.url;
+      const suggestionText = result.output_components
+        ?.map(component => component.suggestion)
+        .filter(Boolean)
+        .join("\n");
 
-      if (imageUrl) {
-        const content: Array<{ type: string; [key: string]: any }> = [];
-        if (modelText) {
-          content.push({ type: "text", text: modelText });
-        }
+      const content: Array<{ type: string; [key: string]: any }> = [];
+
+      if (modelText) {
         content.push({
-          type: "image",
-          url: imageUrl,
-          caption: screen?.title || "Generated by Google Stitch"
+          type: "text",
+          text: modelText
         });
-        if (suggestion) {
-          content.push({ type: "text", text: suggestion });
-        }
-        return { content };
       }
 
-      // Try image bytes response
-      const imageBytes =
-        screen?.screenshot?.bytes ||
-        firstComponent?.design?.screenshot?.bytes;
-
-      if (imageBytes) {
+      // Prefer embedded image first
+      if (screen?.screenshot?.fileContentBase64) {
         const tempFilePath = path.join(
           os.tmpdir(),
           `stitch-screen-${Date.now()}.png`
@@ -131,43 +114,83 @@ export function generateScreenFromTextTool(client: StitchMCPClient) {
 
         fs.writeFileSync(
           tempFilePath,
-          Buffer.from(imageBytes, "base64")
+          Buffer.from(
+            screen.screenshot.fileContentBase64,
+            "base64"
+          )
         );
 
-        const content: Array<{ type: string; [key: string]: any }> = [];
-        if (modelText) {
-          content.push({ type: "text", text: modelText });
-        }
         content.push({
           type: "image",
           path: tempFilePath,
-          caption: screen?.title || "Generated by Google Stitch"
+          caption: screen.title || "Generated by Google Stitch"
         });
-        if (suggestion) {
-          content.push({ type: "text", text: suggestion });
+
+        if (suggestionText) {
+          content.push({
+            type: "text",
+            text: suggestionText
+          });
         }
+
         return { content };
       }
 
-      // HTML fallback (either provided or minimal placeholder)
-      let html =
-        screen?.htmlCode?.content ||
-        firstComponent?.design?.htmlCode?.content;
+      // Fallback to remote image URL
+      if (screen?.screenshot?.downloadUrl) {
+        content.push({
+          type: "image",
+          url: screen.screenshot.downloadUrl,
+          caption: screen.title || "Generated by Google Stitch"
+        });
+
+        if (suggestionText) {
+          content.push({
+            type: "text",
+            text: suggestionText
+          });
+        }
+
+        return { content };
+      }
+
+      // HTML fallback
+      let html: string | undefined;
+
+      if (screen?.htmlCode?.fileContentBase64) {
+        html = Buffer.from(
+          screen.htmlCode.fileContentBase64,
+          "base64"
+        ).toString("utf-8");
+      }
+
+      if (!html && screen?.htmlCode?.downloadUrl) {
+        html = `<iframe
+          src="${screen.htmlCode.downloadUrl}"
+          style="width:100%;height:600px;border:none;"
+        ></iframe>`;
+      }
 
       if (!html) {
         html = `<div style="padding:16px">
-          <h3>${escapeHtml(screen?.title || "Generated screen")}</h3>
+          <h3>${escapeHtml(
+            screen?.title || "Generated screen"
+          )}</h3>
         </div>`;
       }
 
-      const content: Array<{ type: string; [key: string]: any }> = [];
-      if (modelText) {
-        content.push({ type: "text", text: modelText });
-      }
-      content.push({ type: "html", html });
-      if (suggestion) {
-        content.push({ type: "text", text: suggestion });
+      content.push({
+        type: "html",
+        html
+      });
+
+      if (suggestionText) {
+        content.push({
+          type: "text",
+          text: suggestionText
+        });
       }
+
       return { content };
     }
   };

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);
-  },
-});