opencodekit 0.18.25 → 0.18.27

package/dist/template/.opencode/plugin/stitch.ts

@@ -0,0 +1,307 @@
+/**
+ * Stitch Plugin — Google Stitch UI generation as native OpenCode tools.
+ *
+ * Replaces the MCP subprocess (`npx @_davideast/stitch-mcp proxy`) with
+ * direct HTTP via `@google/stitch-sdk`'s `StitchToolClient`.
+ *
+ * Tools: stitch_create_project, stitch_get_project, stitch_list_projects,
+ *        stitch_list_screens, stitch_get_screen, stitch_generate_screen,
+ *        stitch_edit_screens, stitch_generate_variants
+ *
+ * Auth: Set STITCH_API_KEY env var (API key) or STITCH_ACCESS_TOKEN (OAuth).
+ */
+
+import { StitchError, StitchToolClient } from "@google/stitch-sdk";
+import type { Plugin } from "@opencode-ai/plugin";
+import { tool } from "@opencode-ai/plugin/tool";
+
+// ---------------------------------------------------------------------------
+// Shared
+// ---------------------------------------------------------------------------
+
+let client: StitchToolClient | null = null;
+
+const getClient = (): StitchToolClient => {
+	if (!client) {
+		client = new StitchToolClient();
+	}
+	return client;
+};
+
+/** Call a Stitch MCP tool and return the result as a JSON string. */
+const callTool = async (
+	name: string,
+	args: Record<string, unknown>,
+): Promise<string> => {
+	try {
+		const result = await getClient().callTool(name, args);
+		return JSON.stringify(result, null, 2);
+	} catch (err: unknown) {
+		if (err instanceof StitchError) {
+			return JSON.stringify({
+				error: err.code,
+				message: err.message,
+				...(err.suggestion ? { suggestion: err.suggestion } : {}),
+				recoverable: err.recoverable,
+				tool: name,
+			});
+		}
+		return JSON.stringify({
+			error: "UNKNOWN_ERROR",
+			message: err instanceof Error ? err.message : String(err),
+			tool: name,
+		});
+	}
+};
+
+// ---------------------------------------------------------------------------
+// Enums (for agent guidance — not strict validation)
+// ---------------------------------------------------------------------------
+
+const DEVICE_TYPES = [
+	"DEVICE_TYPE_UNSPECIFIED",
+	"MOBILE",
+	"DESKTOP",
+	"TABLET",
+	"AGNOSTIC",
+] as const;
+
+const MODEL_IDS = [
+	"MODEL_ID_UNSPECIFIED",
+	"GEMINI_3_PRO",
+	"GEMINI_3_FLASH",
+] as const;
+
+// ---------------------------------------------------------------------------
+// Plugin
+// ---------------------------------------------------------------------------
+
+export const StitchPlugin: Plugin = async () => {
+	return {
+		tool: {
+			// ---------------------------------------------------------------
+			// Projects
+			// ---------------------------------------------------------------
+
+			stitch_create_project: tool({
+				description:
+					"Create a new Google Stitch project.\n\nOptionally provide a title.",
+				args: {
+					title: tool.schema
+						.string()
+						.optional()
+						.describe("Project title (optional)"),
+				},
+				async execute(args: { title?: string }) {
+					return callTool("create_project", args);
+				},
+			}),
+
+			stitch_get_project: tool({
+				description:
+					"Get details of a Stitch project by resource name.\n\nFormat: projects/{projectId}",
+				args: {
+					name: tool.schema
+						.string()
+						.describe(
+							"Project resource name (e.g. projects/abc123). Required.",
+						),
+				},
+				async execute(args: { name: string }) {
+					return callTool("get_project", args);
+				},
+			}),
+
+			stitch_list_projects: tool({
+				description: "List all Stitch projects. Optionally filter by keyword.",
+				args: {
+					filter: tool.schema
+						.string()
+						.optional()
+						.describe("Filter string (optional)"),
+				},
+				async execute(args: { filter?: string }) {
+					return callTool("list_projects", args);
+				},
+			}),
+
+			// ---------------------------------------------------------------
+			// Screens
+			// ---------------------------------------------------------------
+
+			stitch_list_screens: tool({
+				description:
+					"List all screens in a Stitch project.\n\nRequires projectId.",
+				args: {
+					projectId: tool.schema.string().describe("Project ID. Required."),
+				},
+				async execute(args: { projectId: string }) {
+					return callTool("list_screens", args);
+				},
+			}),
+
+			stitch_get_screen: tool({
+				description:
+					"Get screen details including HTML code.\n\nProvide the screen resource name (format: projects/{projectId}/screens/{screenId}).",
+				args: {
+					name: tool.schema
+						.string()
+						.describe(
+							"Screen resource name (e.g. projects/abc/screens/xyz). Required.",
+						),
+				},
+				async execute(args: { name: string }) {
+					return callTool("get_screen", args);
+				},
+			}),
+
+			// ---------------------------------------------------------------
+			// Generation
+			// ---------------------------------------------------------------
+
+			stitch_generate_screen: tool({
+				description: `Generate a UI screen from a text prompt.
+
+Device types: ${DEVICE_TYPES.join(", ")}
+Model IDs: ${MODEL_IDS.join(", ")}`,
+				args: {
+					projectId: tool.schema.string().describe("Project ID. Required."),
+					prompt: tool.schema
+						.string()
+						.describe("Text description of the UI to generate. Required."),
+					deviceType: tool.schema
+						.string()
+						.optional()
+						.describe(
+							`Device type: ${DEVICE_TYPES.join(" | ")} (default: MOBILE)`,
+						),
+					modelId: tool.schema
+						.string()
+						.optional()
+						.describe(
+							`Model: ${MODEL_IDS.join(" | ")} (default: GEMINI_3_FLASH)`,
+						),
+				},
+				async execute(args: {
+					projectId: string;
+					prompt: string;
+					deviceType?: string;
+					modelId?: string;
+				}) {
+					return callTool("generate_screen_from_text", args);
+				},
+			}),
+
+			stitch_edit_screens: tool({
+				description: `Edit existing screens with a text prompt.
+
+Device types: ${DEVICE_TYPES.join(", ")}
+Model IDs: ${MODEL_IDS.join(", ")}`,
+				args: {
+					projectId: tool.schema.string().describe("Project ID. Required."),
+					selectedScreenIds: tool.schema
+						.array(tool.schema.string())
+						.describe("Screen IDs to edit. Required."),
+					prompt: tool.schema.string().describe("Edit instructions. Required."),
+					deviceType: tool.schema
+						.string()
+						.optional()
+						.describe(
+							`Device type: ${DEVICE_TYPES.join(" | ")} (default: MOBILE)`,
+						),
+					modelId: tool.schema
+						.string()
+						.optional()
+						.describe(
+							`Model: ${MODEL_IDS.join(" | ")} (default: GEMINI_3_FLASH)`,
+						),
+				},
+				async execute(args: {
+					projectId: string;
+					selectedScreenIds: string[];
+					prompt: string;
+					deviceType?: string;
+					modelId?: string;
+				}) {
+					return callTool("edit_screens", args);
+				},
+			}),
+
+			stitch_generate_variants: tool({
+				description: `Generate design variants of existing screens.
+
+variantOptions:
+  - variantCount: number of variants (1-10)
+  - creativeRange: LOW, MEDIUM, HIGH (how different from original)
+  - aspects: optional comma-separated aspects to vary (e.g. "color,layout")
+
+Device types: ${DEVICE_TYPES.join(", ")}
+Model IDs: ${MODEL_IDS.join(", ")}`,
+				args: {
+					projectId: tool.schema.string().describe("Project ID. Required."),
+					selectedScreenIds: tool.schema
+						.array(tool.schema.string())
+						.describe("Screen IDs to create variants of. Required."),
+					prompt: tool.schema
+						.string()
+						.describe("Prompt describing desired variations. Required."),
+					variantCount: tool.schema
+						.number()
+						.optional()
+						.describe("Number of variants to generate (1-10, default: 3)"),
+					creativeRange: tool.schema
+						.string()
+						.optional()
+						.describe("Creative range: LOW | MEDIUM | HIGH (default: MEDIUM)"),
+					aspects: tool.schema
+						.string()
+						.optional()
+						.describe(
+							"Comma-separated aspects to vary (e.g. 'color,layout'). Optional.",
+						),
+					deviceType: tool.schema
+						.string()
+						.optional()
+						.describe(
+							`Device type: ${DEVICE_TYPES.join(" | ")} (default: MOBILE)`,
+						),
+					modelId: tool.schema
+						.string()
+						.optional()
+						.describe(
+							`Model: ${MODEL_IDS.join(" | ")} (default: GEMINI_3_FLASH)`,
+						),
+				},
+				async execute(args: {
+					projectId: string;
+					selectedScreenIds: string[];
+					prompt: string;
+					variantCount?: number;
+					creativeRange?: string;
+					aspects?: string;
+					deviceType?: string;
+					modelId?: string;
+				}) {
+					// Build variantOptions object from flat args
+					const variantOptions: Record<string, unknown> = {};
+					if (args.variantCount != null)
+						variantOptions.variantCount = args.variantCount;
+					if (args.creativeRange)
+						variantOptions.creativeRange = args.creativeRange;
+					if (args.aspects) variantOptions.aspects = args.aspects;
+
+					return callTool("generate_variants", {
+						projectId: args.projectId,
+						selectedScreenIds: args.selectedScreenIds,
+						prompt: args.prompt,
+						variantOptions,
+						...(args.deviceType ? { deviceType: args.deviceType } : {}),
+						...(args.modelId ? { modelId: args.modelId } : {}),
+					});
+				},
+			}),
+		},
+	};
+};
+
+export default StitchPlugin;

package/dist/template/.opencode/skill/stitch/SKILL.md

@@ -1,31 +1,24 @@
 ---
 name: stitch
-description: Google Stitch MCP for AI-powered UI design. Extract design context, generate code from designs, and create screens from descriptions. Use when working with Stitch designs and UI generation.
-version: 1.0.0
-tags: [design, mcp, ui]
+description: Google Stitch UI generation via native plugin. Generate screens from text, edit designs, create variants. Use when working with Stitch designs and UI generation.
+version: 2.0.0
+tags: [design, ui, stitch]
 dependencies: []
 ---
 
-# Google Stitch MCP
+# Google Stitch Plugin
 
 ## When to Use
 
-- When you need to generate or inspect Google Stitch UI designs via MCP.
+- When you need to generate or inspect Google Stitch UI designs.
 
 ## When NOT to Use
 
 - When you don't have Stitch access or don't need Stitch-generated UI.
 
-
 ## Overview
 
-Stitch MCP is Google's official Model Context Protocol server for interacting with Google Stitch designs. It allows AI agents to extract design context (colors, typography, spacing), generate production-ready code from designs, and create new designs from text descriptions.
-
-## Endpoint
-
-**MCP Server URL**: `https://stitch.googleapis.com/mcp`
-
-**Authentication**: Google Cloud credentials with Bearer token and project ID header
+Stitch tools are registered as native OpenCode tools via the Stitch plugin (`.opencode/plugin/stitch.ts`), using `@google/stitch-sdk` for direct HTTP to `stitch.googleapis.com/mcp`. No MCP subprocess needed.
 
 ## Prerequisites
 
@@ -40,49 +33,41 @@ Stitch MCP is Google's official Model Context Protocol server for interacting wi
 ### 1. Enable Stitch API in Google Cloud
 
 ```bash
-# Set your Google Cloud project
 gcloud config set project PROJECT_ID
-
-# Enable the Stitch MCP service
 gcloud beta services mcp enable stitch.googleapis.com --project=PROJECT_ID
 ```
 
-### 2. Get Your Access Token
+### 2. Set Environment Variables
 
-```bash
-# Authenticate with Google Cloud
-gcloud auth login
+**API Key auth** (recommended):
 
-# Get your access token
-gcloud auth print-access-token
+```bash
+export STITCH_API_KEY="your-api-key"
 ```
 
-### 3. Set Environment Variables
+**Or OAuth auth**:
 
 ```bash
-# Set your Google Cloud project ID
-export GOOGLE_CLOUD_PROJECT="your-project-id"
-
-# Get and set your access token
 export STITCH_ACCESS_TOKEN=$(gcloud auth print-access-token)
+export GOOGLE_CLOUD_PROJECT="your-project-id"
 ```
 
-### 4. Configuration
+### 3. Restart OpenCode
 
-Stitch MCP is pre-configured in `opencode.json` as a default MCP server. Once environment variables are set, restart OpenCode and the tools will be available.
+Tools are available immediately after env vars are set and OpenCode restarts.
 
 ## Available Tools
 
-Once configured, the Stitch MCP exposes the following tools:
-
-| Tool                               | Description                       |
-| ---------------------------------- | --------------------------------- |
-| `stitch_list_projects`             | List all your Stitch projects     |
-| `stitch_create_project`            | Create a new UI design project    |
-| `stitch_get_project`               | Get project details               |
-| `stitch_list_screens`              | List screens in a project         |
-| `stitch_get_screen`                | Get screen details with HTML code |
-| `stitch_generate_screen_from_text` | Generate UI from text prompt      |
+| Tool                       | Description                          |
+| -------------------------- | ------------------------------------ |
+| `stitch_create_project`    | Create a new Stitch project          |
+| `stitch_get_project`       | Get project details by resource name |
+| `stitch_list_projects`     | List all projects (optional filter)  |
+| `stitch_list_screens`      | List screens in a project            |
+| `stitch_get_screen`        | Get screen details with HTML code    |
+| `stitch_generate_screen`   | Generate UI from text prompt         |
+| `stitch_edit_screens`      | Edit existing screens with a prompt  |
+| `stitch_generate_variants` | Generate design variants of screens  |
 
 ## Usage Examples
 
@@ -95,15 +80,13 @@ stitch_list_projects({});
 ### Create a Project
 
 ```typescript
-stitch_create_project({
-  title: "My E-commerce App",
-});
+stitch_create_project({ title: "My E-commerce App" });
 ```
 
 ### Generate Screen from Text
 
 ```typescript
-stitch_generate_screen_from_text({
+stitch_generate_screen({
   projectId: "my-project-123",
   prompt:
     "Create a modern login page with email and password fields, social login buttons, and a forgot password link",
@@ -111,37 +94,71 @@ stitch_generate_screen_from_text({
 });
 ```
 
-## Troubleshooting
+### Edit Existing Screens
 
-### "Stitch API not enabled"
+```typescript
+stitch_edit_screens({
+  projectId: "my-project-123",
+  selectedScreenIds: ["screen-abc"],
+  prompt: "Make the login button larger and change the color scheme to dark mode",
+});
+```
 
-```bash
-gcloud beta services mcp enable stitch.googleapis.com --project=YOUR_PROJECT_ID
+### Generate Design Variants
+
+```typescript
+stitch_generate_variants({
+  projectId: "my-project-123",
+  selectedScreenIds: ["screen-abc"],
+  prompt: "Create variants with different color schemes",
+  variantCount: 3,
+  creativeRange: "MEDIUM",
+});
 ```
 
-### "Authentication failed"
+## Parameters
+
+### Device Types
+
+`DEVICE_TYPE_UNSPECIFIED` | `MOBILE` | `DESKTOP` | `TABLET` | `AGNOSTIC`
+
+### Model IDs
+
+`MODEL_ID_UNSPECIFIED` | `GEMINI_3_PRO` | `GEMINI_3_FLASH`
+
+### Variant Options
+
+- `variantCount`: Number of variants (1-10)
+- `creativeRange`: `LOW` | `MEDIUM` | `HIGH`
+- `aspects`: Comma-separated aspects to vary (e.g. "color,layout")
+
+## Troubleshooting
+
+### "AUTH_FAILED"
 
 ```bash
-# Refresh your access token (expires after ~1 hour)
+# API key auth
+export STITCH_API_KEY="your-key"
+
+# Or OAuth (token expires after ~1 hour)
 export STITCH_ACCESS_TOKEN=$(gcloud auth print-access-token)
-# Restart OpenCode
 ```
 
-### "Project not set"
+### "Stitch API not enabled"
 
 ```bash
-gcloud config set project YOUR_PROJECT_ID
-export GOOGLE_CLOUD_PROJECT=YOUR_PROJECT_ID
+gcloud beta services mcp enable stitch.googleapis.com --project=YOUR_PROJECT_ID
 ```
 
 ## Documentation
 
 - [Google Stitch](https://stitch.withgoogle.com)
+- [Stitch SDK](https://github.com/google-labs-code/stitch-sdk)
 - [Stitch MCP Setup](https://stitch.withgoogle.com/docs/mcp/setup)
-- [Google Cloud MCP Overview](https://docs.cloud.google.com/mcp/overview)
 
 ## Tips
 
-- Access tokens expire after ~1 hour, refresh with `gcloud auth print-access-token`
-- Use descriptive prompts for better UI generation results
+- API key auth is simpler than OAuth (no token refresh)
+- Use descriptive prompts for better UI generation
+- `GEMINI_3_PRO` produces higher quality; `GEMINI_3_FLASH` is faster
 - Test generated code in your target framework before production use

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "opencodekit",
-	"version": "0.18.25",
+	"version": "0.18.27",
 	"description": "CLI tool for bootstrapping and managing OpenCodeKit projects",
 	"keywords": [
 		"agents",

package/dist/template/.opencode/skill/stitch/mcp.json

@@ -1,9 +0,0 @@
-{
-	"stitch": {
-		"serverUrl": "https://stitch.googleapis.com/mcp",
-		"headers": {
-			"Authorization": "Bearer ${STITCH_ACCESS_TOKEN}",
-			"X-Goog-User-Project": "${GOOGLE_CLOUD_PROJECT}"
-		}
-	}
-}