opencodekit 0.18.26 → 0.19.0

package/dist/template/.opencode/package.json

@@ -11,7 +11,8 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@opencode-ai/plugin": "1.3.2"
+    "@google/stitch-sdk": "^0.0.3",
+    "@opencode-ai/plugin": "1.3.9"
   },
   "devDependencies": {
     "@types/node": "^25.3.0",

package/dist/template/.opencode/plugin/README.md

@@ -9,6 +9,7 @@ plugin/
 ├── memory.ts           # 4-tier automated memory system (capture → distill → curate → inject)
 ├── sessions.ts         # Session search tools (find/read)
 ├── copilot-auth.ts     # GitHub Copilot provider/auth integration
+├── stitch.ts           # Google Stitch UI generation (8 tools via @google/stitch-sdk)
 ├── skill-mcp.ts        # Skill-scoped MCP bridge (skill_mcp tools)
 └── lib/
     ├── memory-tools.ts       # 6 core memory tools (observation, search, get, read, update, timeline)
@@ -58,6 +59,12 @@ plugin/
   - Handles GitHub Copilot OAuth/device flow
   - Adds model/provider request shaping for compatible reasoning behavior
 
+- `stitch.ts`
+  - Google Stitch UI generation via `@google/stitch-sdk`
+  - 8 tools: create_project, get_project, list_projects, list_screens, get_screen, generate_screen, edit_screens, generate_variants
+  - Direct HTTP to `stitch.googleapis.com/mcp` (no MCP subprocess)
+  - Auth: STITCH_API_KEY or STITCH_ACCESS_TOKEN env var
+
 ## Notes
 
 - OpenCode auto-discovers every `.ts` file in `plugin/` as a plugin — keep helper modules in `lib/`

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/figma-go/SKILL.md

@@ -0,0 +1,65 @@
+---
+name: figma-go
+description: Use figma-mcp-go (plugin bridge, no API token). Read/write Figma data via MCP.
+mcp:
+  figma-mcp-go:
+    command: npx
+    args: ["-y", "@vkhanhqui/figma-mcp-go@latest"]
+version: 1.0.0
+tags: [design, mcp, figma]
+dependencies: []
+---
+
+# Figma MCP (figma-mcp-go)
+
+## When to Use
+
+- You need **read/write** access to live Figma documents without API rate limits.
+- You want to generate designs or modify existing Figma files via MCP.
+
+## When NOT to Use
+
+- You only need static exports (use existing asset pipeline).
+- You don’t have access to Figma Desktop or can’t install plugins.
+
+## Prerequisites (one-time setup)
+
+1. **Install the Figma plugin**
+
+- Download `plugin.zip` from: https://github.com/vkhanhqui/figma-mcp-go/releases
+- In Figma Desktop: **Plugins → Development → Import plugin from manifest**
+- Select `manifest.json` inside `plugin.zip`
+- Run the plugin inside any Figma file
+
+2. **Ensure MCP server runs via OpenCode**
+
+- This skill starts the MCP server with:
+  `npx -y @vkhanhqui/figma-mcp-go@latest`
+- No `FIGMA_API_KEY` is required.
+
+## Quick Start
+
+```bash
+skill_mcp(skill_name="figma-go", tool_name="get_metadata", arguments='{}')
+```
+
+## Common Tools
+
+- **Read**: `get_document`, `get_pages`, `get_node`, `get_nodes_info`, `get_design_context`
+- **Write**: `create_frame`, `create_text`, `set_text`, `set_fills`, `move_nodes`, `resize_nodes`, `delete_nodes`
+- **Export**: `get_screenshot`, `save_screenshots`
+
+## Example: Read a Frame
+
+```bash
+skill_mcp(skill_name="figma-go", tool_name="get_node", arguments='{"node_id":"1234:5678"}')
+```
+
+## Notes
+
+- This MCP uses a **plugin bridge**, so Figma Desktop must be running with the plugin active.
+- If tools fail, re-run the plugin inside the open Figma file.
+- If you see `Invalid schema for function 'figma-mcp-go_delete_nodes'`, keep the
+  global `mcp.figma-mcp-go` entry **disabled** in `opencode.json` and use this skill
+  (via `skill_mcp`) until upstream fixes the schema.
+- Full tool list and prompts: https://github.com/vkhanhqui/figma-mcp-go#available-tools

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.26",
+	"version": "0.19.0",
 	"description": "CLI tool for bootstrapping and managing OpenCodeKit projects",
 	"keywords": [
 		"agents",
@@ -10,11 +10,15 @@
 		"opencodekit",
 		"template"
 	],
+	"homepage": "https://github.com/opencodekit-template/opencodekit-template#readme",
+	"bugs": {
+		"url": "https://github.com/opencodekit-template/opencodekit-template/issues"
+	},
 	"license": "MIT",
-	"author": "OpenCodeKit",
+	"author": "heyhuynhgiabuu <buub1309120@gmail.com>",
 	"repository": {
 		"type": "git",
-		"url": "git+https://github.com/opencodekit/opencodekit-template.git"
+		"url": "git+https://github.com/opencodekit-template/opencodekit-template.git"
 	},
 	"bin": {
 		"ock": "dist/index.js"

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}"
-		}
-	}
-}