@kvasar/google-stitch 0.1.8 → 0.1.10

package/openclaw.plugin.json

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

package/skills/SKILL.md

@@ -86,14 +86,40 @@ Always extract:
 
 - projectId
 - prompt
-- deviceType
-- preferred model
+- deviceType (optional)
+- modelId (optional)
 
-Preferred model:
+## Supported device types:
 
-- `GEMINI_3_1_PRO`
+- MOBILE
+- DESKTOP
+- TABLET
+- AGNOSTIC
 
----
+### Preferred default:
+
+- DESKTOP
+
+#### Supported models:
+
+- GEMINI_3_PRO
+- GEMINI_3_FLASH
+- GEMINI_3_1_PRO
+
+#### Preferred default:
+
+- GEMINI_3_1_PRO
+
+Always structure the tool call as:
+
+{
+  "projectId": "project-id",
+  "prompt": "Generate a modern SaaS dashboard with KPI cards and sidebar",
+  "deviceType": "DESKTOP",
+  "modelId": "GEMINI_3_1_PRO"
+}
+
+Never call the tool with only a string prompt.
 
 ### Screen editing
 
@@ -135,17 +161,44 @@ Recommended defaults:
 
 For brand consistency and theming:
 
+
+
 - `create_design_system`
+
+Examples:
+
+- Create a dark mode design system with Inter font and round corners
+- Set up a design system with blue as the primary color
+- Create a brand identity with Geist font and minimal roundness
+
 - `update_design_system`
+
+Examples:
+
+- Update the design system to use dark mode
+- Change the font to Geist in our design system
+- Update the roundness to fully rounded
+
+
 - `list_design_systems`
+
+Examples:
+
+- List all design systems in project 12345
+- Show me the available design systems
+- What design systems do I have?
+
+
 - `apply_design_system`
 
+Applies a design system to one or more screens, modifying their appearance to match the system’s tokens (colors, fonts, shapes).
+
 Examples:
 
-- create dark theme
-- use Inter font
-- rounded buttons
-- apply brand colors
+- Apply the blue design system to all screens in project 12345
+- Restyle these screens with the brand identity
+- Use design system abc to update my screens
+
 
 ---
 

package/src/services/stitch-mcp-client.ts

@@ -1,6 +1,19 @@
 import { Client } from "@modelcontextprotocol/sdk/client/index.js";
 import { StreamableHTTPClientTransport } from "@modelcontextprotocol/sdk/client/streamableHttp.js";
 
+export type DeviceType =
+  | "DEVICE_TYPE_UNSPECIFIED"
+  | "MOBILE"
+  | "DESKTOP"
+  | "TABLET"
+  | "AGNOSTIC";
+
+export type ModelId =
+  | "MODEL_ID_UNSPECIFIED"
+  | "GEMINI_3_PRO"
+  | "GEMINI_3_FLASH"
+  | "GEMINI_3_1_PRO";
+
 export class StitchMCPClient {
   private client: Client;
   private transport: StreamableHTTPClientTransport;
@@ -41,12 +54,22 @@ export class StitchMCPClient {
     });
   }
 
-  async generateScreen(prompt: string) {
-    await this.connect();
+ async generateScreen(params: {
+  projectId: string;
+  prompt: string;
+  deviceType?: DeviceType;
+  modelId?: ModelId;
+}) {
+  await this.connect();
 
-    return this.client.callTool({
-      name: "generate_screen_from_text",
-      arguments: { prompt },
-    });
-  }
+  return this.client.callTool({
+    name: "generate_screen_from_text",
+    arguments: {
+      projectId: params.projectId,
+      prompt: params.prompt,
+      deviceType: params.deviceType,
+      modelId: params.modelId,
+    },
+  });
+}
 }

package/src/tools/apply_design_system.ts

@@ -1,7 +1,61 @@
-export const applyDesignSystemTool = (client:any) => ({
+type SelectedScreenInstance = {
+  id: string;
+  sourceScreen: string;
+};
+
+type ApplyDesignSystemParams = {
+  projectId: string;
+  selectedScreenInstances: SelectedScreenInstance[];
+  assetId: string;
+};
+
+export const applyDesignSystemTool = (client: any) => ({
   name: "apply_design_system",
-  description: "apply design system",
-  async execute(_: string, params: any) {
-    return await client.request?.("apply_design_system", params);
+  description:
+    "Applies a design system asset to one or more screens, updating colors, fonts, and shapes",
+
+  parameters: {
+    type: "object",
+    properties: {
+      projectId: {
+        type: "string",
+        description: "Required. Project ID without prefix."
+      },
+      selectedScreenInstances: {
+        type: "array",
+        description:
+          "Required. Screen instances to update from get_project.",
+        items: {
+          type: "object",
+          properties: {
+            id: {
+              type: "string",
+              description:
+                "Required. Screen instance ID (not source screen ID)."
+            },
+            sourceScreen: {
+              type: "string",
+              description:
+                "Required. Resource name format: projects/{project}/screens/{screen}"
+            }
+          },
+          required: ["id", "sourceScreen"]
+        }
+      },
+      assetId: {
+        type: "string",
+        description:
+          "Required. Design system asset ID without assets/ prefix."
+      }
+    },
+    required: [
+      "projectId",
+      "selectedScreenInstances",
+      "assetId"
+    ]
   },
-});
+
+  async execute(_: string, params: ApplyDesignSystemParams) {
+    return await client.request("apply_design_system", params);
+  }
+});

package/src/tools/create_design_system.ts

@@ -1,7 +1,142 @@
-export const createDesignSystemTool = (client:any) => ({
+type ColorMode =
+  | "COLOR_MODE_UNSPECIFIED"
+  | "LIGHT"
+  | "DARK";
+
+type FontType =
+  | "FONT_UNSPECIFIED"
+  | "INTER"
+  | "DM_SANS"
+  | "GEIST";
+
+type Roundness =
+  | "ROUNDNESS_UNSPECIFIED"
+  | "ROUND_FOUR"
+  | "ROUND_EIGHT"
+  | "ROUND_TWELVE"
+  | "ROUND_FULL";
+
+type ColorVariant =
+  | "COLOR_VARIANT_UNSPECIFIED"
+  | "MONOCHROME"
+  | "NEUTRAL"
+  | "TONAL_SPOT"
+  | "VIBRANT"
+  | "EXPRESSIVE"
+  | "FIDELITY"
+  | "CONTENT"
+  | "RAINBOW"
+  | "FRUIT_SALAD";
+
+type DesignTheme = {
+  colorMode: ColorMode;
+  headlineFont: FontType;
+  bodyFont: FontType;
+  labelFont?: FontType;
+  roundness: Roundness;
+  customColor: string;
+  colorVariant?: ColorVariant;
+  overridePrimaryColor?: string;
+  overrideSecondaryColor?: string;
+  overrideTertiaryColor?: string;
+  overrideNeutralColor?: string;
+  designMd?: string;
+};
+
+type DesignSystem = {
+  displayName: string;
+  theme: DesignTheme;
+};
+
+type CreateDesignSystemParams = {
+  designSystem: DesignSystem;
+  projectId?: string;
+};
+
+export const createDesignSystemTool = (client: any) => ({
   name: "create_design_system",
-  description: "create design system",
-  async execute(_: string, params: any) {
-    return await client.request?.("create_design_system", params);
+  description:
+    "Creates a new design system with colors, typography, roundness, and theme tokens for a Stitch project",
+
+  parameters: {
+    type: "object",
+    properties: {
+      projectId: {
+        type: "string",
+        description:
+          "Optional. Project ID. If omitted, creates a global design asset."
+      },
+      designSystem: {
+        type: "object",
+        description: "Required. Design system definition.",
+        properties: {
+          displayName: {
+            type: "string",
+            description: "Required. Display name."
+          },
+          theme: {
+            type: "object",
+            properties: {
+              colorMode: {
+                type: "string",
+                enum: ["LIGHT", "DARK"]
+              },
+              headlineFont: {
+                type: "string",
+                enum: ["INTER", "DM_SANS", "GEIST"]
+              },
+              bodyFont: {
+                type: "string",
+                enum: ["INTER", "DM_SANS", "GEIST"]
+              },
+              labelFont: {
+                type: "string",
+                enum: ["INTER", "DM_SANS", "GEIST"]
+              },
+              roundness: {
+                type: "string",
+                enum: [
+                  "ROUND_FOUR",
+                  "ROUND_EIGHT",
+                  "ROUND_TWELVE",
+                  "ROUND_FULL"
+                ]
+              },
+              customColor: {
+                type: "string",
+                description: "Hex seed color"
+              },
+              colorVariant: {
+                type: "string",
+                enum: [
+                  "MONOCHROME",
+                  "NEUTRAL",
+                  "TONAL_SPOT",
+                  "VIBRANT",
+                  "EXPRESSIVE"
+                ]
+              },
+              designMd: {
+                type: "string",
+                description: "Optional markdown design instructions"
+              }
+            },
+            required: [
+              "colorMode",
+              "headlineFont",
+              "bodyFont",
+              "roundness",
+              "customColor"
+            ]
+          }
+        },
+        required: ["displayName", "theme"]
+      }
+    },
+    required: ["designSystem"]
   },
-});
+
+  async execute(_: string, params: CreateDesignSystemParams) {
+    return await client.request("create_design_system", params);
+  }
+});

package/src/tools/generate_screen_from_text_tool.ts

@@ -1,28 +1,43 @@
-import { StitchMCPClient } from "../services/stitch-mcp-client.js";
+import {
+  DeviceType,
+  ModelId,
+  StitchMCPClient
+} from "../services/stitch-mcp-client.js";
 import fs from "node:fs";
 import path from "node:path";
 import os from "node:os";
 
-type StitchGenerateResponse = {
-  html?: string;
-  code?: string;
-  jsx?: string;
-  previewHtml?: string;
-  result?: {
-    html?: string;
-    code?: string;
-    jsx?: string;
-  };
-  imageUrl?: string;
-  screenshotUrl?: string;
-  previewUrl?: string;
-  data?: {
-    imageUrl?: string;
-    screenshotUrl?: string;
-    previewUrl?: string;
-    base64Image?: string;
-    rawBytes?: string;
+type StitchResponse = {
+  screen?: {
+    name?: string;
+    title?: string;
+    prompt?: string;
+    screenshot?: {
+      url?: string;
+      bytes?: string;
+    };
+    htmlCode?: {
+      content?: string;
+      url?: string;
+    };
+    deviceType?: DeviceType;
+    width?: string;
+    height?: string;
   };
+  output_components?: Array<{
+    text?: string;
+    suggestion?: string;
+    design?: {
+      screenshot?: {
+        url?: string;
+        bytes?: string;
+      };
+      htmlCode?: {
+        content?: string;
+        url?: string;
+      };
+    };
+  }>;
 };
 
 export function generateScreenFromTextTool(client: StitchMCPClient) {
@@ -33,91 +48,100 @@ export function generateScreenFromTextTool(client: StitchMCPClient) {
     parameters: {
       type: "object",
       properties: {
+        projectId: {
+          type: "string",
+          description: "Required. Project ID without prefix."
+        },
         prompt: {
           type: "string",
           description: "Describe the UI screen to generate"
+        },
+        deviceType: {
+          type: "string",
+          enum: [
+            "DEVICE_TYPE_UNSPECIFIED",
+            "MOBILE",
+            "DESKTOP",
+            "TABLET",
+            "AGNOSTIC"
+          ]
+        },
+        modelId: {
+          type: "string",
+          enum: [
+            "MODEL_ID_UNSPECIFIED",
+            "GEMINI_3_PRO",
+            "GEMINI_3_FLASH",
+            "GEMINI_3_1_PRO"
+          ]
         }
       },
-      required: ["prompt"]
+      required: ["projectId", "prompt"]
     },
 
-    async execute(_id: string, params: { prompt: string }) {
-      const result =
-        (await client.generateScreen(
-          params.prompt
-        )) as StitchGenerateResponse;
+    async execute(
+      _id: string,
+      params: {
+        projectId: string;
+        prompt: string;
+        deviceType?: DeviceType;
+        modelId?: ModelId;
+      }
+    ) {
+      const result = (await client.generateScreen(params)) as StitchResponse;
+
+      const screen = result.screen;
+      const firstComponent = result.output_components?.[0];
 
-      // Check for image URLs or base64 data
-      const imageUrl = result.imageUrl || result.screenshotUrl || result.previewUrl || 
-                      result.data?.imageUrl || result.data?.screenshotUrl || result.data?.previewUrl;
-      const base64Image = result.data?.base64Image;
-      const rawBytes = result.data?.rawBytes;
+      const imageUrl =
+        screen?.screenshot?.url ||
+        firstComponent?.design?.screenshot?.url;
 
       if (imageUrl) {
-        // If we have an image URL, return it as an image block
         return {
           content: [
             {
               type: "image",
               url: imageUrl,
-              caption: "Generated by Google Stitch"
+              caption: screen?.title || "Generated by Google Stitch"
+            }
+          ]
+        };
+      }
+
+      const imageBytes =
+        screen?.screenshot?.bytes ||
+        firstComponent?.design?.screenshot?.bytes;
+
+      if (imageBytes) {
+        const tempFilePath = path.join(
+          os.tmpdir(),
+          `stitch-screen-${Date.now()}.png`
+        );
+
+        fs.writeFileSync(
+          tempFilePath,
+          Buffer.from(imageBytes, "base64")
+        );
+
+        return {
+          content: [
+            {
+              type: "image",
+              path: tempFilePath,
+              caption: screen?.title || "Generated by Google Stitch"
             }
           ]
         };
-      } else if (base64Image || rawBytes) {
-        // Decode and save base64 or raw bytes to a temporary file
-        const tempDir = os.tmpdir();
-        const tempFilePath = path.join(tempDir, `stitch-screen-${Date.now()}.png`);
-        
-        try {
-          let imageData: Buffer;
-          if (base64Image) {
-            // Remove data URL prefix if present
-            const cleanBase64 = base64Image.replace(/^data:image\/\w+;base64,/, '');
-            imageData = Buffer.from(cleanBase64, 'base64');
-          } else if (rawBytes) {
-            // Assuming rawBytes is base64 encoded
-            imageData = Buffer.from(rawBytes, 'base64');
-          } else {
-            throw new Error("No image data found");
-          }
-          
-          fs.writeFileSync(tempFilePath, imageData);
-          
-          return {
-            content: [
-              {
-                type: "image",
-                path: tempFilePath,
-                caption: "Generated by Google Stitch"
-              }
-            ]
-          };
-        } catch (error) {
-          console.error("Failed to save image:", error);
-          // Fall back to HTML if image processing fails
-        }
       }
 
-      // Fallback to HTML if no image data is available
       const html =
-        result.html ??
-        result.previewHtml ??
-        result.result?.html ??
-        (result.code
-          ? `<pre style="white-space:pre-wrap;padding:16px">${escapeHtml(
-              result.code
-            )}</pre>`
-          : result.jsx
-          ? `<pre style="white-space:pre-wrap;padding:16px">${escapeHtml(
-              result.jsx
-            )}</pre>`
-          : `<div style="padding:16px">
-               <h3>Screen generated</h3>
-               <pre>${escapeHtml(
-                 JSON.stringify(result, null, 2)
-               )}</pre>
-             </div>`);
+        screen?.htmlCode?.content ||
+        firstComponent?.design?.htmlCode?.content ||
+        `<div style="padding:16px">
+          <h3>${escapeHtml(screen?.title || "Generated screen")}</h3>
+          <p>${escapeHtml(firstComponent?.text || "")}</p>
+        </div>`;
 
       return {
         content: [