@kvasar/google-stitch 0.1.19 → 0.1.21

package/openclaw.plugin.json

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

package/src/tools/create_project.ts

@@ -7,7 +7,7 @@ import { Type } from "@sinclair/typebox";
 import { StitchMCPClient } from "../services/stitch-mcp-client.js";
 
 export interface CreateProjectParams {
-  name: string;
+  title: string;
 }
 
 export function createProjectTool(client: StitchMCPClient) {
@@ -20,7 +20,7 @@ export function createProjectTool(client: StitchMCPClient) {
       ),
     }),
     async execute(_id: string, params: CreateProjectParams) {
-      const result = await client.createProject(params.name);
+      const result = await client.createProject(params.title);
       return {
         content: [{ type: "text" as const, text: JSON.stringify(result, null, 2) }],
       };

package/src/tools/generate_screen_from_text_tool.ts

@@ -6,6 +6,8 @@ import {
 import fs from "node:fs";
 import path from "node:path";
 import os from "node:os";
+import { Type } from "@sinclair/typebox";
+
 
 type StitchFile = {
   name?: string;

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

package/src/tools/list_design_systems.ts

@@ -1,7 +1,16 @@
+import { Type, Static } from "@sinclair/typebox";
+
+const ListDesignSystemsSchema = Type.Object({
+  projectId: Type.Optional(Type.String({ description: "Optional. Project ID. If empty, lists global design systems." })),
+});
+
+type ListDesignSystemsParams = Static<typeof ListDesignSystemsSchema>;
+
 export const listDesignSystemsTool = (client:any) => ({
   name: "list_design_systems",
-  description: "list design systems",
-  async execute(_: string, params: any) {
+  description: "Lists design systems accessible to the user, optionally filtered by project",
+  parameters: ListDesignSystemsSchema,
+  async execute(_: string, params: ListDesignSystemsParams) {
     return await client.request?.("list_design_systems", params);
   },
 });

package/src/tools/list_screens.ts

@@ -2,6 +2,7 @@ import { StitchMCPClient } from "../services/stitch-mcp-client.js";
 import fs from "node:fs";
 import os from "node:os";
 import path from "node:path";
+import { Type } from "@sinclair/typebox";
 
 interface ListScreensParams {
   projectId: string;
@@ -34,6 +35,10 @@ type Screen = {
 export const listScreensTool = (client: StitchMCPClient) => ({
   name: "list_screens",
   description: "Lists all screens within a given Stitch project",
+    parameters: Type.Object({
+      projectId: Type.String({
+      description: "Required. Project ID (e.g., '4044680601076201931'), without `projects/` prefix."
+  })}),
 
   async execute(_: string, params: ListScreensParams) {
     if (!params?.projectId) {