@kvasar/google-stitch 0.1.13 → 0.1.15

package/openclaw.plugin.json

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

package/skills/SKILL.md

@@ -135,6 +135,33 @@ Always structure the tool call as:
 
 Never call the tool with only a string prompt.
 
+### List screens
+
+Lists all screens within a given Stitch project.
+
+- `list_screens`
+
+Required parameters:
+- `projectId`: the Stitch project ID (without the `projects/` prefix)
+
+Use this tool when the user wants to:
+- see all generated screens in a project
+- review existing designs
+- inspect project screens before updating or exporting
+
+Example prompts:
+- List all screens in project 12345
+- Show me all screens for project 4044680601076201931
+- What screens are in project 12345?
+- Show me the designs in this project
+- 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
+
+---
+
 ### Screen editing
 
 For modifying existing screens:

package/src/tools/generate_screen_from_text_tool.ts

@@ -93,22 +93,32 @@ export function generateScreenFromTextTool(client: StitchMCPClient) {
       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;
+
+      // Try image URL response
       const imageUrl =
         screen?.screenshot?.url ||
         firstComponent?.design?.screenshot?.url;
 
       if (imageUrl) {
-        return {
-          content: [
-            {
-              type: "image",
-              url: imageUrl,
-              caption: screen?.title || "Generated by Google Stitch"
-            }
-          ]
-        };
+        const content: Array<{ type: string; [key: string]: any }> = [];
+        if (modelText) {
+          content.push({ type: "text", text: modelText });
+        }
+        content.push({
+          type: "image",
+          url: imageUrl,
+          caption: screen?.title || "Generated by Google Stitch"
+        });
+        if (suggestion) {
+          content.push({ type: "text", text: suggestion });
+        }
+        return { content };
       }
 
+      // Try image bytes response
       const imageBytes =
         screen?.screenshot?.bytes ||
         firstComponent?.design?.screenshot?.bytes;
@@ -124,33 +134,41 @@ export function generateScreenFromTextTool(client: StitchMCPClient) {
           Buffer.from(imageBytes, "base64")
         );
 
-        return {
-          content: [
-            {
-              type: "image",
-              path: tempFilePath,
-              caption: screen?.title || "Generated by Google Stitch"
-            }
-          ]
-        };
+        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"
+        });
+        if (suggestion) {
+          content.push({ type: "text", text: suggestion });
+        }
+        return { content };
       }
 
-      const html =
+      // HTML fallback (either provided or minimal placeholder)
+      let html =
         screen?.htmlCode?.content ||
-        firstComponent?.design?.htmlCode?.content ||
-        `<div style="padding:16px">
+        firstComponent?.design?.htmlCode?.content;
+
+      if (!html) {
+        html = `<div style="padding:16px">
           <h3>${escapeHtml(screen?.title || "Generated screen")}</h3>
-          <p>${escapeHtml(firstComponent?.text || "")}</p>
         </div>`;
+      }
 
-      return {
-        content: [
-          {
-            type: "html",
-            html
-          }
-        ]
-      };
+      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 });
+      }
+      return { content };
     }
   };
 }

package/src/tools/list_screens.ts

@@ -1,7 +1,20 @@
-export const listScreensTool = (client:any) => ({
+import { StitchMCPClient } from "../services/stitch-mcp-client.js";
+
+interface ListScreensParams {
+  projectId: string;
+}
+
+export const listScreensTool = (client: StitchMCPClient) => ({
   name: "list_screens",
-  description: "list screens",
-  async execute(_: string, params: any) {
-    return await client.request?.("list_screens", params);
+  description: "Lists all screens within a given Stitch project",
+
+  async execute(_: string, params: ListScreensParams) {
+    if (!params?.projectId) {
+      throw new Error("projectId is required");
+    }
+
+    return client.request("list_screens", {
+      projectId: params.projectId,
+    });
   },
-});
+});