@kvasar/google-stitch 0.1.5 → 0.1.7

package/openclaw.plugin.json

@@ -1,7 +1,7 @@
 {
   "id": "openclaw-google-stitch",
    "name": "Google Stitch MCP",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "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.5",
+  "version": "0.1.7",
   "description": "OpenClaw plugin for Google Stitch UI generation, screen design, variants, and design systems",
   "type": "module",
   "main": "./src/index.ts",
@@ -8,6 +8,7 @@
     "index.ts",
     "src/",
     "openclaw.plugin.json",
+    "skills/",
     "tsconfig.json",
     "README.md",
     "SKILL.md"
@@ -39,11 +40,12 @@
     ]
   },
   "dependencies": {
+    "@modelcontextprotocol/sdk": "^1.29.0",
     "@sinclair/typebox": "^0.32.0"
   },
   "devDependencies": {
-    "typescript": "^5.4.0",
     "@types/node": "^22.0.0",
+    "typescript": "^5.4.0",
     "vitest": "^1.6.0"
   },
   "keywords": [

package/skills/SKILL.md

@@ -0,0 +1,226 @@
+---
+name: google-stitch
+description: Use Google Stitch to create projects, generate UI screens, edit existing designs, create variants, and manage design systems for web and mobile applications.
+metadata:
+  openclaw:
+    emoji: "🧵"
+author: Jordi Marti
+version: "1.0"
+---
+
+# Google Stitch Skill
+
+Use this skill whenever the user wants to:
+
+- design application screens
+- generate UI from prompts
+- create wireframes
+- build prototypes
+- create landing pages
+- design mobile apps
+- improve UX layouts
+- generate screen variants
+- define or apply design systems
+- create product mockups
+
+---
+
+## Trigger phrases
+
+Activate when the user mentions:
+
+- stitch
+- google stitch
+- create ui
+- design screen
+- screen flow
+- wireframe
+- mockup
+- landing page
+- mobile screen
+- dashboard design
+- edit design
+- generate variants
+- design system
+- brand theme
+
+---
+
+## Tool routing guidance
+
+Use the appropriate Stitch tool depending on the user request.
+
+### Project management
+
+If the user wants to start a new design workspace:
+
+- `create_project`
+
+Examples:
+
+- create a new project
+- start a new app design
+- create design workspace
+
+If the user wants existing project info:
+
+- `get_project`
+- `list_projects`
+
+---
+
+### Screen generation
+
+For new screens from prompts:
+
+- `generate_screen_from_text`
+
+Examples:
+
+- create login page
+- generate dashboard
+- build landing page
+- design mobile onboarding
+
+Always extract:
+
+- projectId
+- prompt
+- deviceType
+- preferred model
+
+Preferred model:
+
+- `GEMINI_3_1_PRO`
+
+---
+
+### Screen editing
+
+For modifying existing screens:
+
+- `edit_screens`
+
+Examples:
+
+- make button blue
+- add navbar
+- improve spacing
+- dark mode layout
+
+---
+
+### Design exploration
+
+For alternative designs:
+
+- `generate_variants`
+
+Use when the user requests:
+
+- alternatives
+- redesign options
+- multiple versions
+- color experiments
+- layout exploration
+
+Recommended defaults:
+
+- variantCount: 3
+- creativeRange: EXPLORE
+
+---
+
+### Design systems
+
+For brand consistency and theming:
+
+- `create_design_system`
+- `update_design_system`
+- `list_design_systems`
+- `apply_design_system`
+
+Examples:
+
+- create dark theme
+- use Inter font
+- rounded buttons
+- apply brand colors
+
+---
+
+## UX generation guidance
+
+Before generating screens, identify:
+
+- user persona
+- main task
+- primary CTA
+- navigation pattern
+- responsive behavior
+- empty/error states
+
+Always prefer full journeys over isolated screens.
+
+Recommended flow:
+
+- landing
+- sign in
+- dashboard
+- detail
+- settings
+- success / error states
+
+---
+
+## UX quality rules
+
+Always optimize for:
+
+- clarity
+- usability
+- responsive layout
+- modern SaaS aesthetics
+- conversion-oriented design
+
+Prefer:
+
+- card layouts
+- clean typography
+- strong CTA hierarchy
+- consistent spacing
+- reusable sections
+- enterprise-ready UI
+
+---
+
+## Prompt enhancement rules
+
+If the user request is vague, improve it before generation.
+
+Example:
+
+Input:
+> create dashboard
+
+Enhanced prompt:
+> Generate a modern SaaS dashboard with KPI cards, task progress chart, recent activity feed, filters, and left-side navigation.
+
+Always enrich prompts with:
+
+- hierarchy
+- layout intent
+- CTA actions
+- component structure
+- visual style
+
+---
+
+## Output expectations
+
+Focus on:
+
+- realistic production UI
+- startup / enterprise SaaS design
+- scalable UX patterns
+- modern component systems

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

@@ -1,48 +1,44 @@
+import { Client } from "@modelcontextprotocol/sdk/client/index.js";
+import { StreamableHTTPClientTransport } from "@modelcontextprotocol/sdk/client/streamableHttp.js";
+
 export class StitchMCPClient {
+  private client: Client;
+  private transport: StreamableHTTPClientTransport;
+  private connected = false;
+
   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 cleanPath = path.startsWith("/")
-      ? path.slice(1)
-      : path;
+    this.client = new Client({
+      name: "openclaw-google-stitch",
+      version: "1.0.0",
+    });
 
-    const response = await fetch(
-      `${this.config.endpoint}/${cleanPath}`,
+    this.transport = new StreamableHTTPClientTransport(
+      new URL(this.config.endpoint),
       {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-          "X-Goog-Api-Key": this.config.apiKey,
+        requestInit: {
+          headers: {
+            "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}`
-      );
+  async connect() {
+    if (!this.connected) {
+      await this.client.connect(this.transport);
+      this.connected = true;
     }
-
-    return response.json();
   }
 
   async generateScreen(prompt: string) {
-    return this.request("generate-screen", {
-      prompt,
+    await this.connect();
+
+    return this.client.callTool({
+      name: "generate_screen_from_text",
+      arguments: { prompt },
     });
   }
 }