@kvasar/google-stitch 0.1.0

package/README.md

@@ -0,0 +1,162 @@
+# Google Stitch MCP — OpenClaw Plugin
+
+Integrate Google Stitch MCP (Model Context Protocol) into OpenClaw to search resources, execute workflows, and monitor status.
+
+## Installation
+
+1. Clone or copy this plugin into your OpenClaw workspace:
+   ```bash
+   cd ~/.openclaw/workspace
+   git clone <repo-url> openclaw-google-stitch-mcp
+   ```
+2. Install dependencies:
+   ```bash
+   cd openclaw-google-stitch-mcp
+   npm install
+   ```
+3. Verify TypeScript and tests:
+   ```bash
+   npm run check
+   ```
+
+## 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`) |
+
+Example configuration (in OpenClaw config file or UI):
+
+```json
+{
+  "plugins": {
+    "entries": {
+      "google-stitch-mcp": {
+        "config": {
+          "apiKey": "YOUR_API_KEY",
+          "endpoint": "https://stitch.example.com/mcp"
+        }
+      }
+    }
+  }
+}
+```
+
+A sample configuration file is provided in `config/.example.json`.
+
+## Tools Reference
+
+### `stitch_search`
+
+Search Stitch MCP resources and workflows.
+
+**Parameters:**
+- `query` (string, required): Search query string.
+- `filters` (object, optional): Optional filters (e.g., `{ "type": "flow" }`).
+
+**Example:**
+```json
+{
+  "query": "data pipeline",
+  "filters": { "type": "flow" }
+}
+```
+
+**Response:** JSON with `resources` array and `total`.
+
+---
+
+### `stitch_execute_flow`
+
+Execute a Stitch flow/action.
+
+**Parameters:**
+- `flowId` (string, required): Identifier of the flow (from `stitch_search`).
+- `inputs` (object, optional): Input parameters for the flow.
+
+**Example:**
+```json
+{
+  "flowId": "flow_12345",
+  "inputs": { "source": "bigquery", "dataset": "analytics.events" }
+}
+```
+
+**Response:** Initial execution result with `executionId` and `status`.
+
+---
+
+### `stitch_status`
+
+Check execution status or service health.
+
+**Parameters:**
+- `executionId` (string, optional): Execution ID to poll. If omitted, returns service health.
+
+**Example (check execution):**
+```json
+{
+  "executionId": "exec_67890"
+}
+```
+
+**Example (health):**
+```json
+{}
+```
+
+**Response:** Status object with `healthy` (boolean) for health, or detailed execution status.
+
+---
+
+## Error Handling
+
+The plugin surfaces errors with `isError: true` and a message. Common errors:
+
+- **Configuration missing**: Ensure `apiKey` and `endpoint` are set.
+- **Authentication/HTTP errors**: Check API key validity and endpoint reachability.
+- **JSON-RPC errors**: Inspect `error.message` from Stitch; may indicate invalid method or parameters.
+- **Network**: The client retries up to 3 times with exponential backoff; persistent failures are reported.
+
+## Development
+
+- **TypeScript**: `npm run typecheck`
+- **Tests**: `npm test` (Vitest)
+- **Watch**: `npm run test:watch`
+
+### Project Structure
+
+```
+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/
+│   └── google-stitch/
+│       └── SKILL.md
+├── tests/unit/
+│   └── stitch-mcp-client.test.ts
+├── config/
+│   └── .example.json
+├── package.json
+├── tsconfig.json
+└── README.md
+```
+
+## License
+
+MIT
+
+---
+
+## Changelog
+
+- **0.1.0**: Initial release with stitch_search, stitch_execute_flow, stitch_status. Client includes retry and session continuity.

package/openclaw.plugin.json

@@ -0,0 +1,32 @@
+{
+  "id": "openclaw-google-stitch",
+   "name": "Google Stitch MCP",
+  "version": "0.1.0",
+  "description": "Integrates Google Stitch MCP services into OpenClaw",
+   "skills": ["skills"],
+  "configSchema": {
+    "type": "object",
+    "additionalProperties": false,
+    "properties": {
+      "apiKey": {
+        "type": "string",
+        "description": "API key for authenticating with Stitch MCP"
+      },
+      "endpoint": {
+        "type": "string",
+        "description": "Stitch MCP endpoint URL (e.g., https://stitch.googleapis.com/mcp)"
+      }
+    },
+    "required": ["apiKey", "endpoint"]
+  },
+  "uiHints": {
+    "apiKey": {
+      "label": "API Key",
+      "placeholder": "your_api_key"
+    },
+    "endpoint": {
+      "label": "Endpoint URL",
+      "placeholder": "https://stitch.example.com/mcp"
+    }
+  }
+}

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@kvasar/google-stitch",
+  "version": "0.1.0",
+  "description": "OpenClaw plugin for Google Stitch UI generation, screen design, variants, and design systems",
+  "type": "module",
+  "main": "./src/index.ts",
+  "files": [
+    "src/",
+    "openclaw.plugin.json",
+    "tsconfig.json",
+    "README.md",
+    "SKILL.md"
+  ],
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "check": "tsc --noEmit && vitest run",
+    "build": "tsc"
+  },
+  "openclaw": {
+    "extensions": ["./src/index.ts"],
+    "tools": [
+      "create_project",
+      "get_project",
+      "list_projects",
+      "list_screens",
+      "get_screen",
+      "generate_screen_from_text",
+      "edit_screens",
+      "generate_variants",
+      "create_design_system",
+      "update_design_system",
+      "list_design_systems",
+      "apply_design_system"
+    ]
+  },
+  "dependencies": {
+    "@sinclair/typebox": "^0.32.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.4.0",
+    "@types/node": "^22.0.0",
+    "vitest": "^1.6.0"
+  },
+  "keywords": [
+    "openclaw",
+    "plugin",
+    "google",
+    "stitch",
+    "ui-generation",
+    "design-system",
+    "wireframe",
+    "prototype"
+  ],
+  "license": "MIT"
+}

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

@@ -0,0 +1,15 @@
+export class StitchMCPClient {
+  constructor(private config: { apiKey: string; endpoint: string }) {}
+  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}`);
+    return response.json();
+  }
+}

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

@@ -0,0 +1,96 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { StitchMCPClient, SearchResult, ExecutionResult, StatusResult } from "../services/stitch-mcp-client.js";
+
+describe("StitchMCPClient", () => {
+  let client: StitchMCPClient;
+  const apiKey = "test-api-key";
+  const endpoint = "https://stitch.example.com/mcp";
+
+  beforeEach(() => {
+    client = new StitchMCPClient({ apiKey, endpoint });
+    global.fetch = vi.fn();
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("should construct with config", () => {
+    expect(client).toBeInstanceOf(StitchMCPClient);
+  });
+
+  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);
+
+    await client.search("query");
+
+    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"'),
+      })
+    );
+  });
+
+  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 }),
+    });
+
+    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" } }),
+    });
+
+    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"),
+    });
+
+    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: [] } }),
+      });
+
+    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 expect(client.search("q")).rejects.toThrow("network error");
+    expect(global.fetch).toHaveBeenCalledTimes(3);
+  });
+});

package/src/tools/apply_design_system.ts

@@ -0,0 +1,7 @@
+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);
+  },
+});

package/src/tools/create_design_system.ts

@@ -0,0 +1,7 @@
+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);
+  },
+});

package/src/tools/create_project.ts

@@ -0,0 +1,7 @@
+export const createProjectTool = (client:any) => ({
+  name: "create_project",
+  description: "create project",
+  async execute(_: string, params: any) {
+    return await client.request?.("create_project", params);
+  },
+});

package/src/tools/edit_screens.ts

@@ -0,0 +1,7 @@
+export const editScreensTool = (client:any) => ({
+  name: "edit_screens",
+  description: "edit screens",
+  async execute(_: string, params: any) {
+    return await client.request?.("edit_screens", params);
+  },
+});

package/src/tools/generate_screen_from_text.ts

@@ -0,0 +1,7 @@
+export const generateScreenFromTextTool = (client:any) => ({
+  name: "generate_screen_from_text",
+  description: "generate screen from text",
+  async execute(_: string, params: any) {
+    return await client.request?.("generate_screen_from_text", params);
+  },
+});

package/src/tools/generate_variants.ts

@@ -0,0 +1,7 @@
+export const generateVariantsTool = (client:any) => ({
+  name: "generate_variants",
+  description: "generate variants",
+  async execute(_: string, params: any) {
+    return await client.request?.("generate_variants", params);
+  },
+});

package/src/tools/get_project.ts

@@ -0,0 +1,7 @@
+export const getProjectTool = (client:any) => ({
+  name: "get_project",
+  description: "get project",
+  async execute(_: string, params: any) {
+    return await client.request?.("get_project", params);
+  },
+});

package/src/tools/get_screen.ts

@@ -0,0 +1,7 @@
+export const getScreenTool = (client:any) => ({
+  name: "get_screen",
+  description: "get screen",
+  async execute(_: string, params: any) {
+    return await client.request?.("get_screen", params);
+  },
+});

package/src/tools/list_design_systems.ts

@@ -0,0 +1,7 @@
+export const listDesignSystemsTool = (client:any) => ({
+  name: "list_design_systems",
+  description: "list design systems",
+  async execute(_: string, params: any) {
+    return await client.request?.("list_design_systems", params);
+  },
+});

package/src/tools/list_projects.ts

@@ -0,0 +1,7 @@
+export const listProjectsTool = (client:any) => ({
+  name: "list_projects",
+  description: "list projects",
+  async execute(_: string, params: any) {
+    return await client.request?.("list_projects", params);
+  },
+});

package/src/tools/list_screens.ts

@@ -0,0 +1,7 @@
+export const listScreensTool = (client:any) => ({
+  name: "list_screens",
+  description: "list screens",
+  async execute(_: string, params: any) {
+    return await client.request?.("list_screens", params);
+  },
+});

package/src/tools/update_design_system.ts

@@ -0,0 +1,7 @@
+export const updateDesignSystemTool = (client:any) => ({
+  name: "update_design_system",
+  description: "update design system",
+  async execute(_: string, params: any) {
+    return await client.request?.("update_design_system", params);
+  },
+});

package/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "strict": true,
+    "outDir": "./dist",
+    "rootDir": ".",
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true
+  },
+  "include": ["index.ts", "src/**/*.ts"],
+  "exclude": ["node_modules", "dist"]
+}