@kvasar/google-stitch 0.1.2 → 0.1.4

package/index.ts

@@ -1,11 +1,12 @@
 import { definePluginEntry } from "openclaw/plugin-sdk/plugin-entry";
+
+import { generateScreenFromTextTool } from "./src/tools/generate_screen_from_text_tool.js";
 import { StitchMCPClient } from "./src/services/stitch-mcp-client.js";
 import { createProjectTool } from "./src/tools/create_project.js";
 import { getProjectTool } from "./src/tools/get_project.js";
 import { listProjectsTool } from "./src/tools/list_projects.js";
 import { listScreensTool } from "./src/tools/list_screens.js";
 import { getScreenTool } from "./src/tools/get_screen.js";
-import { generateScreenFromTextTool } from "./src/tools/generate_screen_from_text.js";
 import { editScreensTool } from "./src/tools/edit_screens.js";
 import { generateVariantsTool } from "./src/tools/generate_variants.js";
 import { createDesignSystemTool } from "./src/tools/create_design_system.js";
@@ -13,12 +14,23 @@ import { updateDesignSystemTool } from "./src/tools/update_design_system.js";
 import { listDesignSystemsTool } from "./src/tools/list_design_systems.js";
 import { applyDesignSystemTool } from "./src/tools/apply_design_system.js";
 
+interface StitchPluginConfig {
+  apiKey?: string;
+  endpoint?: string;
+}
+
+
 export default definePluginEntry({
   id: "openclaw-google-stitch",
   name: "Google Stitch",
   description: "Google Stitch integration for UI generation and design workflows",
   register(api) {
-    const cfg = api.config as { apiKey?: string; endpoint?: string };
+        const cfg = (
+      (api as { pluginConfig?: unknown; config?: unknown }).pluginConfig ??
+      (api as { pluginConfig?: unknown; config?: unknown }).config ??
+      {}
+    ) as StitchPluginConfig;
+       
     if (!cfg?.apiKey || !cfg?.endpoint) {
       throw new Error("Missing required configuration: apiKey and endpoint");
     }

package/openclaw.plugin.json

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

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

@@ -12,4 +12,9 @@ export class StitchMCPClient {
     if (!response.ok) throw new Error(`Stitch API error: ${response.status}`);
     return response.json();
   }
+   async generateScreen(prompt: string) {
+    return this.request("generate-screen", {
+      prompt,
+    });
+  }
 }

package/src/tools/generate_screen_from_text_tool.ts

@@ -0,0 +1,73 @@
+import { StitchMCPClient } from "../services/stitch-mcp-client.js";
+
+type StitchGenerateResponse = {
+  html?: string;
+  code?: string;
+  jsx?: string;
+  previewHtml?: string;
+  result?: {
+    html?: string;
+    code?: string;
+    jsx?: string;
+  };
+};
+
+export function generateScreenFromTextTool(client: StitchMCPClient) {
+  return {
+    name: "generate_screen_from_text",
+    description: "Generate a UI screen from a natural language prompt",
+
+    parameters: {
+      type: "object",
+      properties: {
+        prompt: {
+          type: "string",
+          description: "Describe the UI screen to generate"
+        }
+      },
+      required: ["prompt"]
+    },
+
+    async execute(_id: string, params: { prompt: string }) {
+      const result =
+        (await client.generateScreen(
+          params.prompt
+        )) as StitchGenerateResponse;
+
+      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>`);
+
+      return {
+        content: [
+          {
+            type: "html",
+            html
+          }
+        ]
+      };
+    }
+  };
+}
+
+function escapeHtml(str: string) {
+  return str
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;");
+}