@kvasar/google-stitch 0.1.3 → 0.1.5

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";

package/openclaw.plugin.json

@@ -1,7 +1,7 @@
 {
   "id": "openclaw-google-stitch",
    "name": "Google Stitch MCP",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "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.3",
+  "version": "0.1.5",
   "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

@@ -1,15 +1,48 @@
 export class StitchMCPClient {
-  constructor(private config: { apiKey: string; endpoint: string }) {}
+  constructor(
+    private config: { apiKey: string; endpoint: string }
+  ) {
+    if (!config.apiKey) {
+      throw new Error("Missing Stitch apiKey");
+    }
+
+    if (!config.endpoint) {
+      throw new Error("Missing Stitch endpoint");
+    }
+  }
+
   private async request(path: string, body?: unknown) {
-    const response = await fetch(`${this.config.endpoint}/${path}`, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        Authorization: `Bearer ${this.config.apiKey}`,
-      },
-      body: body ? JSON.stringify(body) : undefined,
-    });
-    if (!response.ok) throw new Error(`Stitch API error: ${response.status}`);
+    const cleanPath = path.startsWith("/")
+      ? path.slice(1)
+      : path;
+
+    const response = await fetch(
+      `${this.config.endpoint}/${cleanPath}`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "X-Goog-Api-Key": this.config.apiKey,
+        },
+        body: body
+          ? JSON.stringify(body)
+          : undefined,
+      }
+    );
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      throw new Error(
+        `Stitch API error: ${response.status} - ${errorText}`
+      );
+    }
+
     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;");
+}