@kvasar/google-stitch 0.1.15 → 0.1.17

package/openclaw.plugin.json

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

package/skills/SKILL.md

@@ -85,7 +85,7 @@ Example prompts:
 
 ### Screen generation
 
-For new screens from prompts:
+For creating new screens from prompts:
 
 - `generate_screen_from_text`
 
@@ -96,12 +96,19 @@ Example prompts:
 - build landing page
 - design mobile onboarding
 
+Use this tool when the user wants to create a new UI screen from a text description.
+
 Always extract:
 
 - projectId
 - prompt
-- deviceType (optional)
-- modelId (optional)
+
+Important:
+- Screen generation usually takes a few minutes to complete
+- Do **not retry automatically** if a connection error or timeout occurs
+- A connection error does **not necessarily mean the generation failed**
+- After waiting a few minutes, use `get_screen` or `list_screens` to verify whether the screen was successfully created
+- Avoid duplicate retries to prevent generating the same screen multiple times
 
 ## Supported device types:
 

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