@kvasar/google-stitch 0.1.18 → 0.1.20

package/openclaw.plugin.json

@@ -1,7 +1,7 @@
 {
   "id": "openclaw-google-stitch",
    "name": "Google Stitch MCP",
-  "version": "0.1.18",
+  "version": "0.1.20",
   "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.18",
+  "version": "0.1.20",
   "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/get_screen.ts

@@ -0,0 +1,165 @@
+import { StitchMCPClient } from "../services/stitch-mcp-client.js";
+import fs from "node:fs";
+import os from "node:os";
+import path from "node:path";
+
+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;
+};
+
+type GetScreenParams = {
+  name: string;
+  projectId: string;
+  screenId: string;
+};
+
+type ContentItem = {
+  type: string;
+  [key: string]: any;
+};
+
+export const getScreenTool = (client: StitchMCPClient) => ({
+  name: "get_screen",
+  description:
+    "Retrieves and visually renders a specific screen within a Stitch project.",
+
+  parameters: {
+    type: "object",
+    properties: {
+      name: {
+        type: "string",
+        description:
+          "Required. Resource name. Format: projects/{project}/screens/{screen}"
+      },
+      projectId: {
+        type: "string",
+        description:
+          "Required (deprecated). Project ID without prefix."
+      },
+      screenId: {
+        type: "string",
+        description:
+          "Required (deprecated). Screen ID without prefix."
+      }
+    },
+    required: ["name", "projectId", "screenId"]
+  },
+
+  async execute(
+    _: string,
+    params: GetScreenParams
+  ) {
+    const { name, projectId, screenId } = params;
+
+    if (!name || !projectId || !screenId) {
+      throw new Error(
+        "name, projectId and screenId are required"
+      );
+    }
+
+    const screen = (await client.request("get_screen", {
+      name,
+      projectId,
+      screenId
+    })) as Screen;
+
+    const content: ContentItem[] = [];
+
+    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()}.png`
+      );
+
+      fs.writeFileSync(
+        tempFilePath,
+        Buffer.from(
+          screen.screenshot.fileContentBase64,
+          "base64"
+        )
+      );
+
+      content.push({
+        type: "image",
+        path: tempFilePath,
+        caption: screen.title || "Generated screen"
+      });
+
+      return { content };
+    }
+
+    // Fallback remote image
+    if (screen.screenshot?.downloadUrl) {
+      content.push({
+        type: "image",
+        url: screen.screenshot.downloadUrl,
+        caption: screen.title || "Generated screen"
+      });
+
+      return { content };
+    }
+
+    // HTML fallback
+    if (screen.htmlCode?.fileContentBase64) {
+      const html = Buffer.from(
+        screen.htmlCode.fileContentBase64,
+        "base64"
+      ).toString("utf-8");
+
+      content.push({
+        type: "html",
+        html
+      });
+
+      return { content };
+    }
+
+    if (screen.htmlCode?.downloadUrl) {
+      content.push({
+        type: "html",
+        html: `<iframe
+          src="${screen.htmlCode.downloadUrl}"
+          style="width:100%;height:600px;border:none;"
+        ></iframe>`
+      });
+
+      return { content };
+    }
+
+    content.push({
+      type: "text",
+      text: "No visual preview available for this screen."
+    });
+
+    return { content };
+  }
+});