@kvasar/google-stitch 0.1.29 → 0.1.31

package/README.md

@@ -1,27 +1,21 @@
 # Google Stitch MCP — OpenClaw Plugin
 
-Integrate Google Stitch MCP (Model Context Protocol) into OpenClaw to search resources, execute workflows, and monitor status.
-
+OpenClaw plugin that exposes Google Stitch MCP tools for project management, screen generation, screen editing, design variants, and design systems.
 
 ## Configuration
 
-Add the following configuration to your OpenClaw plugin settings:
-
-| Key | Description |
-|-----|-------------|
-| `apiKey` | API key for authenticating with Stitch MCP (Bearer token) |
-| `endpoint` | Stitch MCP endpoint URL (e.g., `https://stitch.googleapis.com/mcp`) |
+The plugin will not load unless both required config values are present.
 
-Example configuration (in OpenClaw config file or UI):
+OpenClaw config path:
 
 ```json
 {
   "plugins": {
     "entries": {
-      "google-stitch-mcp": {
+      "openclaw-google-stitch": {
         "config": {
           "apiKey": "YOUR_API_KEY",
-          "endpoint": "https://stitch.example.com/mcp"
+          "endpoint": "https://stitch.googleapis.com/mcp"
         }
       }
     }
@@ -29,35 +23,47 @@ Example configuration (in OpenClaw config file or UI):
 }
 ```
 
-### Project Structure
+Required keys:
 
-```
-openclaw-google-stitch-mcp/
-├── openclaw.plugin.json
-├── index.ts
-├── services/
-│   └── stitch-mcp-client.ts
-├── tools/
-│   ├── stitch_search.ts
-│   ├── stitch_execute_flow.ts
-│   └── stitch_status.ts
-├── skills/
-│   └── SKILL.md
-├── tests/unit/
-│   └── stitch-mcp-client.test.ts
-├── config/
-│   └── .example.json
-├── package.json
-├── tsconfig.json
-└── README.md
+| Key | Description |
+| --- | --- |
+| `apiKey` | Google Stitch API key sent as `X-Goog-Api-Key` |
+| `endpoint` | Stitch MCP endpoint URL |
+
+If either value is missing, plugin registration fails with:
+
+```text
+Google Stitch plugin requires plugins.entries.openclaw-google-stitch.config.apiKey and .endpoint
 ```
 
-## License
+## Exposed Tools
 
-MIT
+- `stitch_create_project`
+- `stitch_get_project`
+- `stitch_list_projects`
+- `stitch_list_screens`
+- `stitch_get_screen`
+- `stitch_generate_screen_from_text`
+- `stitch_edit_screens`
+- `stitch_generate_variants`
+- `stitch_create_design_system`
+- `stitch_update_design_system`
+- `stitch_list_design_systems`
+- `stitch_apply_design_system`
+
+## Development
+
+```bash
+npm run typecheck
+npm test
+npm run build
+```
 
----
+Notes:
 
-## Changelog
+- This package expects the OpenClaw runtime to provide `openclaw/plugin-sdk/plugin-entry` at execution time.
+- The local TypeScript build includes a minimal declaration shim so the package can be typechecked in isolation in this repo.
 
-- **0.1.0**: Initial release with stitch_search, stitch_execute_flow, stitch_status. Client includes retry and session continuity.
+## License
+
+MIT

package/openclaw.plugin.json

@@ -1,9 +1,10 @@
 {
   "id": "openclaw-google-stitch",
-   "name": "Google Stitch MCP",
-  "version": "0.1.28",
+  "name": "Google Stitch MCP",
+  "version": "0.1.31",
   "description": "Integrates Google Stitch MCP services into OpenClaw",
-   "skills": ["skills"],
+  "skills": ["skills"],
+ 
   "configSchema": {
     "type": "object",
     "additionalProperties": false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kvasar/google-stitch",
-  "version": "0.1.29",
+  "version": "0.1.31",
   "description": "OpenClaw plugin for Google Stitch UI generation, screen design, variants, and design systems",
   "type": "module",
   "main": "./index.ts",
@@ -23,20 +23,14 @@
     "extensions": [
       "./index.ts"
     ],
-    "tools": [
-      "stitch_create_project",
-      "stitch_get_project",
-      "stitch_list_projects",
-      "stitch_list_screens",
-      "stitch_get_screen",
-      "stitch_generate_screen_from_text",
-      "stitch_edit_screens",
-      "stitch_generate_variants",
-      "stitch_create_design_system",
-      "stitch_update_design_system",
-      "stitch_list_design_systems",
-      "stitch_apply_design_system"
-    ]
+    "compat": {
+      "pluginApi": ">=2026.3.24-beta.2",
+      "minGatewayVersion": "2026.3.24-beta.2"
+    },
+    "build": {
+      "openclawVersion": "2026.3.24-beta.2",
+      "pluginSdkVersion": "2026.3.24-beta.2"
+    }
   },
   "dependencies": {
     "@modelcontextprotocol/sdk": "^1.29.0",

package/skills/SKILL.md

@@ -107,7 +107,7 @@ Important:
 - Screen generation usually takes a few minutes to complete
 - Do **not retry automatically** if a connection error or timeout occurs
 - A connection error does **not necessarily mean the generation failed**
-- After waiting a few minutes, use `get_screen` or `list_screens` to verify whether the screen was successfully created
+- After waiting a few minutes, use `stitch_get_screen` or `list_screens` to verify whether the screen was successfully created
 - Avoid duplicate retries to prevent generating the same screen multiple times
 
 ## Supported device types:

package/src/tests/unit/stitch-mcp-client.test.ts

@@ -1,96 +1,77 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
-import { StitchMCPClient, SearchResult, ExecutionResult, StatusResult } from "../services/stitch-mcp-client.js";
+import { beforeEach, describe, expect, it, vi } from "vitest";
 
-describe("StitchMCPClient", () => {
-  let client: StitchMCPClient;
-  const apiKey = "test-api-key";
-  const endpoint = "https://stitch.example.com/mcp";
+const connectMock = vi.fn();
+const callToolMock = vi.fn();
 
-  beforeEach(() => {
-    client = new StitchMCPClient({ apiKey, endpoint });
-    global.fetch = vi.fn();
-  });
+vi.mock("@modelcontextprotocol/sdk/client/index.js", () => ({
+  Client: vi.fn().mockImplementation(() => ({
+    connect: connectMock,
+    callTool: callToolMock,
+  })),
+}));
 
-  afterEach(() => {
-    vi.restoreAllMocks();
-  });
+vi.mock("@modelcontextprotocol/sdk/client/streamableHttp.js", () => ({
+  StreamableHTTPClientTransport: vi.fn().mockImplementation((url, options) => ({
+    url,
+    options,
+  })),
+}));
 
-  it("should construct with config", () => {
-    expect(client).toBeInstanceOf(StitchMCPClient);
+describe("StitchMCPClient", () => {
+  beforeEach(() => {
+    vi.resetModules();
+    connectMock.mockReset();
+    callToolMock.mockReset();
+    connectMock.mockResolvedValue(undefined);
   });
 
-  it("should send JSON-RPC request with auth header", async () => {
-    const mockResponse = {
-      ok: true,
-      json: vi.fn().mockResolvedValue({ jsonrpc: "2.0", id: 1, result: { total: 1, resources: [] } }),
-    };
-    (global.fetch as any).mockResolvedValue(mockResponse);
+  it("connects once and lists projects through the MCP tool name", async () => {
+    const { StitchMCPClient } = await import("../../services/stitch-mcp-client.js");
+    const client = new StitchMCPClient({
+      apiKey: "test-api-key",
+      endpoint: "https://stitch.example.com/mcp",
+    });
 
-    await client.search("query");
+    callToolMock.mockResolvedValueOnce({ content: [] });
 
-    expect(global.fetch).toHaveBeenCalledWith(
-      endpoint,
-      expect.objectContaining({
-        method: "POST",
-        headers: expect.objectContaining({
-          "Authorization": `Bearer ${apiKey}`,
-          "Content-Type": "application/json",
-          "X-Session-ID": client.sessionId,
-        }),
-        body: expect.stringContaining('"method":"stitch.search"'),
-      })
-    );
-  });
+    await client.listProjects("view=owned");
+    await client.listProjects("view=shared");
 
-  it("should return result on success", async () => {
-    const result: SearchResult = { total: 1, resources: [{ id: "r1", name: "Flow1", type: "flow" }] };
-    (global.fetch as any).mockResolvedValue({
-      ok: true,
-      json: vi.fn().mockResolvedValue({ jsonrpc: "2.0", id: 1, result }),
+    expect(connectMock).toHaveBeenCalledTimes(1);
+    expect(callToolMock).toHaveBeenNthCalledWith(1, {
+      name: "list_projects",
+      arguments: { filter: "view=owned" },
     });
-
-    const res = await client.search("flow");
-    expect(res).toEqual(result);
-  });
-
-  it("should throw on JSON-RPC error", async () => {
-    (global.fetch as any).mockResolvedValue({
-      ok: true,
-      json: vi.fn().mockResolvedValue({ jsonrpc: "2.0", id: 1, error: { code: -32600, message: "Invalid Request" } }),
+    expect(callToolMock).toHaveBeenNthCalledWith(2, {
+      name: "list_projects",
+      arguments: { filter: "view=shared" },
     });
-
-    await expect(client.search("q")).rejects.toThrow("Stitch MCP error -32600: Invalid Request");
   });
 
-  it("should throw on HTTP error", async () => {
-    (global.fetch as any).mockResolvedValue({
-      ok: false,
-      status: 401,
-      text: vi.fn().mockResolvedValue("Unauthorized"),
+  it("passes generate screen parameters to the current MCP tool name", async () => {
+    const { StitchMCPClient } = await import("../../services/stitch-mcp-client.js");
+    const client = new StitchMCPClient({
+      apiKey: "test-api-key",
+      endpoint: "https://stitch.example.com/mcp",
     });
 
-    await expect(client.search("q")).rejects.toThrow("Stitch MCP HTTP 401: Unauthorized");
-  });
-
-  it("should retry on network failure up to 3 times", async () => {
-    // Fail first two fetches, succeed on third
-    (global.fetch as any)
-      .mockRejectedValueOnce(new Error("network error"))
-      .mockRejectedValueOnce(new Error("network error"))
-      .mockResolvedValueOnce({
-        ok: true,
-        json: vi.fn().mockResolvedValue({ jsonrpc: "2.0", id: 1, result: { total: 0, resources: [] } }),
-      });
+    callToolMock.mockResolvedValueOnce({ screen: { id: "screen-1" } });
 
-    const res = await client.search("q");
-    expect(res).toEqual({ total: 0, resources: [] });
-    expect(global.fetch).toHaveBeenCalledTimes(3);
-  });
-
-  it("should throw after max retries exceeded", async () => {
-    (global.fetch as any).mockRejectedValue(new Error("network error"));
+    await client.generateScreen({
+      projectId: "project-123",
+      prompt: "Create a pricing page",
+      deviceType: "DESKTOP",
+      modelId: "GEMINI_3_1_PRO",
+    });
 
-    await expect(client.search("q")).rejects.toThrow("network error");
-    expect(global.fetch).toHaveBeenCalledTimes(3);
+    expect(callToolMock).toHaveBeenCalledWith({
+      name: "generate_screen_from_text",
+      arguments: {
+        projectId: "project-123",
+        prompt: "Create a pricing page",
+        deviceType: "DESKTOP",
+        modelId: "GEMINI_3_1_PRO",
+      },
+    });
   });
 });

package/src/tools/get_screen.ts

@@ -42,7 +42,7 @@ type ContentItem = {
 };
 
 export const getScreenTool = (client: StitchMCPClient) => ({
-  name: "get_screen",
+  name: "stitch_get_screen",
   description: "Retrieves and visually renders a specific screen within a Stitch project.",
   parameters: GetScreenSchema,
   async execute(_: string, params: GetScreenParams) {

package/src/types/openclaw-plugin-sdk.d.ts

@@ -0,0 +1,3 @@
+declare module "openclaw/plugin-sdk/plugin-entry" {
+  export function definePluginEntry<T>(definition: T): T;
+}

package/tsconfig.json

@@ -12,6 +12,6 @@
     "declarationMap": true,
     "sourceMap": true
   },
-  "include": ["index.ts", "src/**/*.ts"],
+  "include": ["index.ts", "src/**/*.ts", "src/**/*.d.ts"],
   "exclude": ["node_modules", "dist"]
 }