@_davideast/stitch-mcp 0.1.1 → 0.1.2

package/README.md

@@ -19,58 +19,14 @@ This single command will:
 6. Enable Stitch API
 7. Generate MCP configuration for your client
 
-**Example session:**
-```
-Stitch MCP Setup
-
-Step 1: Select your MCP client
-✔ Which MCP client are you using? Antigravity
-
-Step 2: Setting up Google Cloud CLI
-✔ Google Cloud CLI ready (bundled): v552.0.0
-
-Step 3: Setup Authentication
-✔ Check your current setup status? Yes
-
-Authenticate with Google Cloud
-
-  CLOUDSDK_CONFIG="~/.stitch-mcp/config" gcloud auth login
-
-  (copied to clipboard)
-✔ Press Enter when complete Yes
-✔ Logged in as you@gmail.com
-
-Authorize Application Default Credentials
-
-  CLOUDSDK_CONFIG="~/.stitch-mcp/config" gcloud auth application-default login
-
-  (copied to clipboard)
-✔ Press Enter when complete Yes
-✔ ADC configured
-
-Step 4: Select a Google Cloud project
-✔ Select a project: My Project (my-project-id)
-
-Step 5: Configure IAM Permissions
-✔ Required IAM role is already configured.
-
-Step 6: Generating MCP Configuration
-✔ Configuration generated
-
-Setup Complete! ✔
-```
-
-**How it works:** Commands are displayed and automatically copied to your clipboard. Run the command in your terminal, complete the OAuth flow in your browser, then press Enter to continue.
-
 **Example output:**
 ```json
 {
   "mcpServers": {
     "stitch": {
-      "command": "npx",
-      "args": ["@_davideast/stitch-mcp", "proxy"],
-      "env": {
-        "STITCH_PROJECT_ID": "your-project-id"
+      "serverUrl": "https://stitch.googleapis.com/mcp",
+      "headers": {
+        "X-Goog-Api-Key": "YOUR-API-KEY"
       }
     }
   }
@@ -79,46 +35,6 @@ Setup Complete! ✔
 
 Copy this config into your MCP client settings and you're ready to use the Stitch MCP server.
 
-## Quick Start (Existing gcloud Users)
-
-If you already have `gcloud` configured, skip `init` and use the proxy directly.
-
-**Prerequisites:**
-```bash
-# 1. Application Default Credentials
-gcloud auth application-default login
-
-# 2. Set project (if not already set)
-gcloud config set project <PROJECT_ID>
-
-# 3. Enable Stitch API (requires beta component)
-gcloud components install beta
-gcloud beta services mcp enable stitch.googleapis.com --project=<PROJECT_ID>
-```
-
-**MCP Configuration:**
-```json
-{
-  "mcpServers": {
-    "stitch": {
-      "command": "npx",
-      "args": ["@_davideast/stitch-mcp", "proxy"],
-      "env": {
-        "STITCH_USE_SYSTEM_GCLOUD": "1"
-      }
-    }
-  }
-}
-```
-
-**Environment Variables:**
-| Variable | Description |
-|----------|-------------|
-| `STITCH_USE_SYSTEM_GCLOUD` | Use system gcloud config instead of isolated config |
-| `STITCH_PROJECT_ID` | Override project ID |
-| `GOOGLE_CLOUD_PROJECT` | Alternative project ID variable |
-| `STITCH_HOST` | Custom Stitch API endpoint |
-
 ## Verify Your Setup
 
 ```bash
@@ -217,7 +133,7 @@ Revokes both user authentication and Application Default Credentials. Useful for
 - Clearing authentication for testing
 - Resetting state when troubleshooting
 
-#### `view` - View Stitch Resources
+#### `view` - Interactive Resource Viewer
 
 ```bash
 npx @_davideast/stitch-mcp view [options]
@@ -230,7 +146,41 @@ npx @_davideast/stitch-mcp view [options]
 - `--project <id>` - Project ID
 - `--screen <id>` - Screen ID
 
-Interactively view Stitch resources such as projects and screens. Displays the resource data in a JSON tree format.
+Interactively browse Stitch resources in a navigable JSON tree. Supports drilling into nested objects and performing actions on selected nodes.
+
+**Keyboard Shortcuts:**
+
+| Key | Action |
+|-----|--------|
+| `↑` / `↓` | Navigate up/down |
+| `Enter` | Expand/collapse or drill into nested object |
+| `Backspace` | Go back one level |
+| `c` | Copy selected value to clipboard |
+| `cc` | Extended copy (downloads content for URLs) |
+| `s` | **Preview HTML** - serves `htmlCode` in-memory and opens browser |
+| `o` | Open project in Stitch web app |
+| `q` | Quit viewer |
+
+**HTML Preview Feature:**
+
+When viewing a screen, select the `htmlCode` node and press `s` to:
+1. Download the HTML code from Stitch
+2. Start a local server (auto-closes after 5 minutes)
+3. Open your browser to preview the rendered HTML
+
+```
+Selected Path: screen.htmlCode | 'c' copy, 'cc' extended, 's' preview
+🌐 Preview at http://127.0.0.1:54268 (auto-closes in 5 min)
+```
+
+**Example Usage:**
+```bash
+# Browse all projects
+npx @_davideast/stitch-mcp view --projects
+
+# View a specific screen
+npx @_davideast/stitch-mcp view --project <project-id> --screen <screen-id>
+```
 
 #### `proxy` - MCP Proxy Server
 
@@ -249,6 +199,46 @@ This command is typically configured as the entry point in your MCP client setti
 - Error handling
 - Debug logging (when `--debug` is enabled to `/tmp/stitch-proxy-debug.log`)
 
+## OAuth setup with gcloud
+
+If you already have `gcloud` configured, skip `init` and use the proxy directly.
+
+**Prerequisites:**
+```bash
+# 1. Application Default Credentials
+gcloud auth application-default login
+
+# 2. Set project (if not already set)
+gcloud config set project <PROJECT_ID>
+
+# 3. Enable Stitch API (requires beta component)
+gcloud components install beta
+gcloud beta services mcp enable stitch.googleapis.com --project=<PROJECT_ID>
+```
+
+**MCP Configuration:**
+```json
+{
+  "mcpServers": {
+    "stitch": {
+      "command": "npx",
+      "args": ["@_davideast/stitch-mcp", "proxy"],
+      "env": {
+        "STITCH_USE_SYSTEM_GCLOUD": "1"
+      }
+    }
+  }
+}
+```
+
+**Environment Variables:**
+| Variable | Description |
+|----------|-------------|
+| `STITCH_USE_SYSTEM_GCLOUD` | Use system gcloud config instead of isolated config |
+| `STITCH_PROJECT_ID` | Override project ID |
+| `GOOGLE_CLOUD_PROJECT` | Alternative project ID variable |
+| `STITCH_HOST` | Custom Stitch API endpoint |
+
 ### How It Works
 
 #### Automatic gcloud Management

package/dist/cli.js

@@ -72336,6 +72336,106 @@ var init_navigation_behaviors = __esm(() => {
   ];
 });
 
+// src/ui/serve-behaviors/server.ts
+import { createServer } from "node:http";
+import { spawn as spawn4 } from "node:child_process";
+async function serveHtmlInMemory(html, options) {
+  const timeout = options?.timeout ?? 5 * 60 * 1000;
+  const openBrowser = options?.openBrowser ?? true;
+  return new Promise((resolve, reject) => {
+    const server = createServer((req, res) => {
+      res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
+      res.end(html);
+    });
+    server.listen(0, "127.0.0.1", () => {
+      const address = server.address();
+      if (!address || typeof address === "string") {
+        reject(new Error("Failed to get server address"));
+        return;
+      }
+      const url2 = `http://127.0.0.1:${address.port}`;
+      const timer = setTimeout(() => server.close(), timeout);
+      const stop = () => {
+        clearTimeout(timer);
+        server.close();
+      };
+      if (openBrowser) {
+        const cmd = process.platform === "darwin" ? "open" : process.platform === "win32" ? "cmd" : "xdg-open";
+        const args = process.platform === "win32" ? ["/c", "start", url2] : [url2];
+        spawn4(cmd, args, { detached: true, stdio: "ignore" }).unref();
+      }
+      resolve({ url: url2, stop });
+    });
+    server.on("error", reject);
+  });
+}
+var init_server = () => {};
+
+// src/ui/serve-behaviors/handlers.ts
+var deps, htmlCodeServeHandler;
+var init_handlers2 = __esm(() => {
+  init_server();
+  deps = {
+    serveHtmlInMemory
+  };
+  htmlCodeServeHandler = {
+    async serve(ctx) {
+      try {
+        let url2;
+        if (typeof ctx.value === "string") {
+          url2 = ctx.value;
+        } else if (typeof ctx.value === "object" && ctx.value?.downloadUrl) {
+          url2 = ctx.value.downloadUrl;
+        } else {
+          return { success: false, message: "No download URL found" };
+        }
+        ctx.onProgress?.("\uD83D\uDCE5 Downloading HTML...");
+        const response = await fetch(url2);
+        if (!response.ok) {
+          return { success: false, message: `Download failed: ${response.status} ${response.statusText}` };
+        }
+        const html = await response.text();
+        ctx.onProgress?.("\uD83D\uDE80 Starting local server...");
+        const { url: serveUrl } = await deps.serveHtmlInMemory(html);
+        ctx.onProgress?.("\uD83C\uDF10 Opening browser...");
+        return { success: true, message: `\uD83C\uDF10 Preview at ${serveUrl} (auto-closes in 5 min)`, url: serveUrl };
+      } catch (error2) {
+        return { success: false, message: `Serve failed: ${error2 instanceof Error ? error2.message : String(error2)}` };
+      }
+    }
+  };
+});
+
+// src/ui/serve-behaviors/registry.ts
+function registerServeHandler(matcher, handler2) {
+  registrations2.push({ matcher, handler: handler2 });
+}
+function getServeHandler(path10) {
+  for (let i2 = registrations2.length - 1;i2 >= 0; i2--) {
+    const reg = registrations2[i2];
+    if (reg && reg.matcher(path10))
+      return reg.handler;
+  }
+  return null;
+}
+function endsWith2(suffix) {
+  return (path10) => path10.endsWith(suffix);
+}
+var registrations2;
+var init_registry2 = __esm(() => {
+  init_handlers2();
+  registrations2 = [];
+  registerServeHandler(endsWith2(".htmlCode"), htmlCodeServeHandler);
+  registerServeHandler(endsWith2(".htmlCode.downloadUrl"), htmlCodeServeHandler);
+});
+
+// src/ui/serve-behaviors/index.ts
+var init_serve_behaviors = __esm(() => {
+  init_server();
+  init_handlers2();
+  init_registry2();
+});
+
 // node_modules/react/cjs/react-jsx-dev-runtime.development.js
 var require_react_jsx_dev_runtime_development = __commonJS((exports) => {
   var React10 = __toESM(require_react(), 1);
@@ -72560,7 +72660,7 @@ var require_jsx_dev_runtime = __commonJS((exports, module) => {
 });
 
 // src/ui/JsonTree.tsx
-import { spawn as spawn4 } from "child_process";
+import { spawn as spawn5 } from "child_process";
 function getType(value) {
   if (value === null)
     return "null";
@@ -72666,6 +72766,32 @@ var import_react26, jsx_dev_runtime, JsonTree = ({ data, rootLabel, onNavigate,
       }
       return;
     }
+    if (input === "s") {
+      const node = visibleNodes[selectedIndex];
+      if (!node)
+        return;
+      const handler2 = getServeHandler(node.id);
+      if (!handler2) {
+        if (feedbackTimeout.current)
+          clearTimeout(feedbackTimeout.current);
+        setFeedbackMessage("⚠️ No preview available for this path");
+        feedbackTimeout.current = setTimeout(() => setFeedbackMessage(null), 3000);
+        return;
+      }
+      const onProgress = (message) => {
+        if (feedbackTimeout.current)
+          clearTimeout(feedbackTimeout.current);
+        setFeedbackMessage(message);
+      };
+      const ctx = { key: node.key, value: node.value, path: node.id, onProgress };
+      handler2.serve(ctx).then((result) => {
+        if (feedbackTimeout.current)
+          clearTimeout(feedbackTimeout.current);
+        setFeedbackMessage(result.message);
+        feedbackTimeout.current = setTimeout(() => setFeedbackMessage(null), 1e4);
+      });
+      return;
+    }
     if (input === "o") {
       const node = visibleNodes[selectedIndex];
       if (!node)
@@ -72700,7 +72826,7 @@ var import_react26, jsx_dev_runtime, JsonTree = ({ data, rootLabel, onNavigate,
       if (projectId) {
         const url2 = `https://stitch.withgoogle.com/projects/${projectId}`;
         const openCmd = process.platform === "darwin" ? "open" : process.platform === "win32" ? "start" : "xdg-open";
-        spawn4(openCmd, [url2], { stdio: "ignore", detached: true }).unref();
+        spawn5(openCmd, [url2], { stdio: "ignore", detached: true }).unref();
         if (feedbackTimeout.current)
           clearTimeout(feedbackTimeout.current);
         setFeedbackMessage(`\uD83D\uDD17 Opened project in browser`);
@@ -72855,7 +72981,7 @@ var import_react26, jsx_dev_runtime, JsonTree = ({ data, rootLabel, onNavigate,
         children: [
           "Selected Path: ",
           visibleNodes[selectedIndex]?.id || "none",
-          " | Press 'c' to copy, 'cc' for extended"
+          " | 'c' copy, 'cc' extended, 's' preview"
         ]
       }, undefined, true, undefined, this),
       feedbackMessage && /* @__PURE__ */ jsx_dev_runtime.jsxDEV(Text, {
@@ -72871,6 +72997,7 @@ var init_JsonTree = __esm(async () => {
   await init_build2();
   init_copy_behaviors();
   init_navigation_behaviors();
+  init_serve_behaviors();
   jsx_dev_runtime = __toESM(require_jsx_dev_runtime(), 1);
 });
 

package/dist/ui/serve-behaviors/handlers.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Serve handlers - isolated behavior implementations.
+ */
+import type { ServeHandler } from './types.js';
+import { serveHtmlInMemory } from './server.js';
+export declare const deps: {
+    serveHtmlInMemory: typeof serveHtmlInMemory;
+};
+export declare const htmlCodeServeHandler: ServeHandler;

package/dist/ui/serve-behaviors/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Serve behaviors for JSON viewer.
+ */
+export type { ServeHandler, ServeContext, ServeResult, PathMatcher } from './types.js';
+export { serveHtmlInMemory } from './server.js';
+export { htmlCodeServeHandler } from './handlers.js';
+export { registerServeHandler, getServeHandler, endsWith, contains } from './registry.js';

package/dist/ui/serve-behaviors/registry.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Registry for path-based serve handler selection.
+ */
+import type { ServeHandler, PathMatcher } from './types.js';
+import { htmlCodeServeHandler } from './handlers.js';
+export declare function registerServeHandler(matcher: PathMatcher, handler: ServeHandler): void;
+export declare function getServeHandler(path: string): ServeHandler | null;
+export declare function endsWith(suffix: string): PathMatcher;
+export declare function contains(segment: string): PathMatcher;
+export { htmlCodeServeHandler };

package/dist/ui/serve-behaviors/server.d.ts

@@ -0,0 +1,8 @@
+export interface ServeInstance {
+    url: string;
+    stop: () => void;
+}
+export declare function serveHtmlInMemory(html: string, options?: {
+    timeout?: number;
+    openBrowser?: boolean;
+}): Promise<ServeInstance>;

package/dist/ui/serve-behaviors/types.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Serve behavior types for the JSON viewer.
+ */
+export interface ServeContext {
+    key: string;
+    value: any;
+    path: string;
+    onProgress?: (message: string) => void;
+}
+export interface ServeResult {
+    success: boolean;
+    message: string;
+    url?: string;
+}
+export interface ServeHandler {
+    serve(ctx: ServeContext): Promise<ServeResult>;
+}
+export type PathMatcher = (path: string) => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@_davideast/stitch-mcp",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Stitch MCP CLI helper. Automates Google Cloud authentication. Generates MCP config for your client. Sets up a proxy server.",
   "type": "module",
   "publishConfig": {