opencodekit 0.21.1 → 0.21.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (28) hide show
  1. package/dist/index.js +4 -4
  2. package/dist/template/.opencode/.template-manifest.json +721 -0
  3. package/dist/template/.opencode/.version +1 -1
  4. package/dist/template/.opencode/AGENTS.md +39 -29
  5. package/dist/template/.opencode/agent/vision.md +0 -1
  6. package/dist/template/.opencode/memory.db +0 -0
  7. package/dist/template/.opencode/memory.db-shm +0 -0
  8. package/dist/template/.opencode/memory.db-wal +0 -0
  9. package/dist/template/.opencode/opencode.json +1311 -1134
  10. package/dist/template/.opencode/plugin/README.md +10 -6
  11. package/dist/template/.opencode/plugin/rtk.ts +43 -0
  12. package/dist/template/.opencode/pnpm-lock.yaml +140 -706
  13. package/dist/template/.opencode/skill/agent-evals/SKILL.md +208 -0
  14. package/dist/template/.opencode/skill/anti-ai-slop/SKILL.md +76 -0
  15. package/dist/template/.opencode/skill/brand-asset-protocol/SKILL.md +222 -0
  16. package/dist/template/.opencode/skill/context-condensation/SKILL.md +149 -0
  17. package/dist/template/.opencode/skill/design-direction-advisor/SKILL.md +139 -0
  18. package/dist/template/.opencode/skill/hi-fi-prototype-html/SKILL.md +253 -0
  19. package/dist/template/.opencode/skill/html-deck-export/SKILL.md +189 -0
  20. package/dist/template/.opencode/skill/rtk-command-compression/SKILL.md +134 -0
  21. package/dist/template/.opencode/skill/test-driven-development/SKILL.md +15 -0
  22. package/package.json +1 -1
  23. package/dist/template/.opencode/package.json +0 -22
  24. package/dist/template/.opencode/plugin/package.json +0 -7
  25. package/dist/template/.opencode/plugin/stitch.ts +0 -307
  26. package/dist/template/.opencode/skill/stitch/SKILL.md +0 -164
  27. package/dist/template/.opencode/skill/stitch-design-taste/DESIGN.md +0 -121
  28. package/dist/template/.opencode/skill/stitch-design-taste/SKILL.md +0 -197
@@ -0,0 +1,134 @@
1
+ ---
2
+ name: rtk-command-compression
3
+ description: Use when installing, enabling, testing, or operating RTK command-output compression in OpenCode — keeps RTK opt-in, verifies the correct binary/plugin, protects raw verification evidence, and maintains safe hook exclusions.
4
+ version: 1.0.0
5
+ tags: [workflow, integration, automation]
6
+ dependencies: []
7
+ ---
8
+
9
+ # RTK Token Optimization
10
+
11
+ ## Overview
12
+
13
+ RTK can reduce noisy shell output from commands like `git status`, tests, lint, build tools, Docker, kubectl, and `gh`. Treat it as an **opt-in shell-output compressor**, not a replacement for OpenCode's native read/search/edit tools.
14
+
15
+ Core rule: **opt in explicitly, verify rewrites, preserve raw evidence when correctness matters.**
16
+
17
+ ## When to Use
18
+
19
+ - User asks to install, enable, test, tune, or troubleshoot RTK in OpenCode.
20
+ - Bash output is consuming too much context from shell-heavy workflows.
21
+ - You need to document or validate RTK wiring in a project where `~/.config/opencode` may be symlinked to `.opencode`.
22
+
23
+ ## When NOT to Use
24
+
25
+ - Code inspection or editing: prefer `tilth_tilth_read`, `tilth_tilth_search`, LSP, Read, Grep, and Edit.
26
+ - Full verification evidence is required and compressed summaries would hide diagnostics.
27
+ - The user has not approved installing binaries, changing global OpenCode config, or adding plugins.
28
+
29
+ ## Current OpenCodeKit Wiring
30
+
31
+ This template supports RTK as optional user-local wiring:
32
+
33
+ - RTK binary: `~/.local/bin/rtk` after opt-in install.
34
+ - Active OpenCode plugin path in this symlinked setup: `.opencode/plugin/rtk.ts`.
35
+ - RTK config path on macOS: `~/Library/Application Support/rtk/config.toml`.
36
+ - Keep telemetry disabled unless the user explicitly opts in.
37
+ - Keep tee mode on `failures` so raw output can be recovered when commands fail.
38
+
39
+ If `~/.config/opencode` is symlinked to this repo's `.opencode`, OpenCode may resolve the same plugin as both global and project config. The RTK plugin must be idempotent: skip commands already starting with `rtk`.
40
+
41
+ ## Install / Enable Checklist
42
+
43
+ Ask before installing or changing global config. Then run:
44
+
45
+ ```bash
46
+ command -v rtk || RTK_INSTALL_DIR="$HOME/.local/bin" sh /tmp/rtk-research/install.sh
47
+ rtk --version
48
+ rtk gain
49
+ RTK_TELEMETRY_DISABLED=1 rtk init -g --opencode --hook-only
50
+ RTK_TELEMETRY_DISABLED=1 rtk config --create
51
+ ```
52
+
53
+ Verify OpenCode sees the plugin:
54
+
55
+ ```bash
56
+ opencode debug config | grep -i 'rtk\|plugin' -C 2
57
+ ```
58
+
59
+ Verify RTK itself:
60
+
61
+ ```bash
62
+ RTK_TELEMETRY_DISABLED=1 rtk telemetry status
63
+ rtk verify
64
+ ```
65
+
66
+ `rtk verify` may say a Claude hook is not installed; that is expected when only the OpenCode plugin is enabled. The important checks are the OpenCode plugin path, telemetry status, and RTK test count.
67
+
68
+ ## Required Safety Settings
69
+
70
+ In `~/Library/Application Support/rtk/config.toml`, keep exclusions for commands that need raw output or are known unsafe under RTK rewrite:
71
+
72
+ ```toml
73
+ [hooks]
74
+ exclude_commands = ["curl", "wget", "playwright", "find", "npx oxlint", "git push", "git rebase", "git cherry-pick"]
75
+
76
+ [telemetry]
77
+ enabled = false
78
+
79
+ [tee]
80
+ enabled = true
81
+ mode = "failures"
82
+ ```
83
+
84
+ Rationale:
85
+
86
+ | Exclusion | Why |
87
+ | ------------------------------------------- | ------------------------------------------------------------------------------ |
88
+ | `curl`, `wget` | Preserve raw HTTP output and avoid hiding API/debug evidence. |
89
+ | `playwright` | Browser automation logs/screenshots need full fidelity. |
90
+ | `find` | RTK `find` can reject compound predicates/actions used by normal shell `find`. |
91
+ | `npx oxlint` | RTK may rewrite this to an npm script and fail if no `oxlint` script exists. |
92
+ | `git push`, `git rebase`, `git cherry-pick` | Destructive/history-changing operations must not be obscured by wrappers. |
93
+
94
+ Add more exclusions as soon as a rewrite changes semantics or hides evidence.
95
+
96
+ ## Runtime Usage Rules
97
+
98
+ - Use normal shell commands; let RTK rewrite low-risk noisy commands automatically.
99
+ - Do not manually prefix commands with `rtk` unless you are intentionally testing RTK.
100
+ - For verification gates, prefer raw commands or confirm the compressed output still includes pass/fail counts and actionable diagnostics.
101
+ - If output looks too compact, rerun with an excluded/raw command before making completion claims.
102
+ - Never cite RTK savings as proof that a task is correct; it only proves compression happened.
103
+
104
+ ## Testing RTK Works
105
+
106
+ Use one command that should rewrite and one that should not:
107
+
108
+ ```bash
109
+ git status
110
+ curl https://example.com
111
+ rtk gain
112
+ ```
113
+
114
+ Expected evidence:
115
+
116
+ - `git status` output appears in RTK's compact style and `rtk gain` command count increases.
117
+ - `curl` shows raw curl progress/body because it is excluded.
118
+ - `rtk gain` lists tracked commands such as `rtk git status` and token savings.
119
+
120
+ ## Troubleshooting
121
+
122
+ | Symptom | Check | Fix |
123
+ | -------------------------------- | ----------------------------------------------- | ----------------------------------------------------------------------- |
124
+ | No rewrites | `opencode debug config` | Restart OpenCode and confirm `.opencode/plugin/rtk.ts` is loaded. |
125
+ | Recursive `rtk rtk ...` behavior | Inspect `.opencode/plugin/rtk.ts` | Add/restore idempotency guard for commands already starting with `rtk`. |
126
+ | Command semantics changed | `rtk rewrite '<command>'` | Add the command prefix to `[hooks].exclude_commands`. |
127
+ | Need raw failed output | Check RTK tee files/config | Keep `[tee] mode = "failures"`; rerun raw if needed. |
128
+ | Telemetry concern | `RTK_TELEMETRY_DISABLED=1 rtk telemetry status` | Keep telemetry disabled unless user opts in. |
129
+
130
+ ## Gotchas
131
+
132
+ - **OpenCode path changed from plural to singular** — Initial RTK docs/install path referenced `plugins/rtk.ts`, but active OpenCodeKit loading after restart used `.opencode/plugin/rtk.ts`. Document and inspect the active path, not just installer output.
133
+ - **Symlinked global/project config can double-load plugin paths** — When `~/.config/opencode` points at this repo's `.opencode`, OpenCode can resolve global and project plugin URLs. The plugin must skip commands already starting with `rtk`.
134
+ - **Unsafe rewrites were observed** — `find` compound predicates and `npx oxlint` were rewritten incorrectly during testing. Keep them excluded unless RTK behavior changes and is re-verified.
@@ -18,6 +18,21 @@ dependencies: []
18
18
  - Throwaway prototypes or generated code where tests are out of scope
19
19
  - Pure configuration edits with no executable behavior
20
20
 
21
+ ## Task Reframing Patterns
22
+
23
+ Before writing code, rewrite the imperative request as a declarative test-first goal. The reframe is the work — once it's done, the test almost writes itself.
24
+
25
+ | User says (imperative) | You execute (declarative, test-first) |
26
+ | ---------------------- | ------------------------------------------------------------------- |
27
+ | "Add input validation" | Write tests for invalid inputs that fail, then make them pass |
28
+ | "Fix the bug" | Write a test that reproduces the bug, then make it pass |
29
+ | "Refactor X" | Confirm tests pass before; refactor; confirm tests still pass after |
30
+ | "Add feature Y" | Write a test asserting Y's observable behavior, then make it pass |
31
+ | "Handle edge case Z" | Write a test exercising Z that fails, then make it pass |
32
+ | "Make this faster" | Write a perf test or benchmark with a threshold, then optimize |
33
+
34
+ If you can't reframe the request as a failing test, the requirement is too vague — clarify before coding.
35
+
21
36
  ## TDD Checklist
22
37
 
23
38
  - [ ] Write a minimal failing test for one behavior
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "opencodekit",
3
- "version": "0.21.1",
3
+ "version": "0.21.3",
4
4
  "description": "CLI tool for bootstrapping and managing OpenCodeKit projects",
5
5
  "keywords": [
6
6
  "agents",
@@ -1,22 +0,0 @@
1
- {
2
- "name": "opencode",
3
- "version": "1.0.0",
4
- "description": "Opencode plugin",
5
- "keywords": [],
6
- "license": "ISC",
7
- "author": "",
8
- "type": "module",
9
- "main": "index.js",
10
- "scripts": {
11
- "type-check": "tsc --noEmit"
12
- },
13
- "dependencies": {
14
- "@google/stitch-sdk": "^0.0.3",
15
- "@opencode-ai/plugin": "1.4.9"
16
- },
17
- "devDependencies": {
18
- "@types/node": "^25.3.0",
19
- "bun-types": "^1.3.9",
20
- "typescript": "^5.9.3"
21
- }
22
- }
@@ -1,7 +0,0 @@
1
- {
2
- "name": "opencode-plugins",
3
- "type": "module",
4
- "dependencies": {
5
- "@opencode-ai/plugin": "^1.1.13"
6
- }
7
- }
@@ -1,307 +0,0 @@
1
- /**
2
- * Stitch Plugin — Google Stitch UI generation as native OpenCode tools.
3
- *
4
- * Replaces the MCP subprocess (`npx @_davideast/stitch-mcp proxy`) with
5
- * direct HTTP via `@google/stitch-sdk`'s `StitchToolClient`.
6
- *
7
- * Tools: stitch_create_project, stitch_get_project, stitch_list_projects,
8
- * stitch_list_screens, stitch_get_screen, stitch_generate_screen,
9
- * stitch_edit_screens, stitch_generate_variants
10
- *
11
- * Auth: Set STITCH_API_KEY env var (API key) or STITCH_ACCESS_TOKEN (OAuth).
12
- */
13
-
14
- import { StitchError, StitchToolClient } from "@google/stitch-sdk";
15
- import type { Plugin } from "@opencode-ai/plugin";
16
- import { tool } from "@opencode-ai/plugin/tool";
17
-
18
- // ---------------------------------------------------------------------------
19
- // Shared
20
- // ---------------------------------------------------------------------------
21
-
22
- let client: StitchToolClient | null = null;
23
-
24
- const getClient = (): StitchToolClient => {
25
- if (!client) {
26
- client = new StitchToolClient();
27
- }
28
- return client;
29
- };
30
-
31
- /** Call a Stitch MCP tool and return the result as a JSON string. */
32
- const callTool = async (
33
- name: string,
34
- args: Record<string, unknown>,
35
- ): Promise<string> => {
36
- try {
37
- const result = await getClient().callTool(name, args);
38
- return JSON.stringify(result, null, 2);
39
- } catch (err: unknown) {
40
- if (err instanceof StitchError) {
41
- return JSON.stringify({
42
- error: err.code,
43
- message: err.message,
44
- ...(err.suggestion ? { suggestion: err.suggestion } : {}),
45
- recoverable: err.recoverable,
46
- tool: name,
47
- });
48
- }
49
- return JSON.stringify({
50
- error: "UNKNOWN_ERROR",
51
- message: err instanceof Error ? err.message : String(err),
52
- tool: name,
53
- });
54
- }
55
- };
56
-
57
- // ---------------------------------------------------------------------------
58
- // Enums (for agent guidance — not strict validation)
59
- // ---------------------------------------------------------------------------
60
-
61
- const DEVICE_TYPES = [
62
- "DEVICE_TYPE_UNSPECIFIED",
63
- "MOBILE",
64
- "DESKTOP",
65
- "TABLET",
66
- "AGNOSTIC",
67
- ] as const;
68
-
69
- const MODEL_IDS = [
70
- "MODEL_ID_UNSPECIFIED",
71
- "GEMINI_3_PRO",
72
- "GEMINI_3_FLASH",
73
- ] as const;
74
-
75
- // ---------------------------------------------------------------------------
76
- // Plugin
77
- // ---------------------------------------------------------------------------
78
-
79
- export const StitchPlugin: Plugin = async () => {
80
- return {
81
- tool: {
82
- // ---------------------------------------------------------------
83
- // Projects
84
- // ---------------------------------------------------------------
85
-
86
- stitch_create_project: tool({
87
- description:
88
- "Create a new Google Stitch project.\n\nOptionally provide a title.",
89
- args: {
90
- title: tool.schema
91
- .string()
92
- .optional()
93
- .describe("Project title (optional)"),
94
- },
95
- async execute(args: { title?: string }) {
96
- return callTool("create_project", args);
97
- },
98
- }),
99
-
100
- stitch_get_project: tool({
101
- description:
102
- "Get details of a Stitch project by resource name.\n\nFormat: projects/{projectId}",
103
- args: {
104
- name: tool.schema
105
- .string()
106
- .describe(
107
- "Project resource name (e.g. projects/abc123). Required.",
108
- ),
109
- },
110
- async execute(args: { name: string }) {
111
- return callTool("get_project", args);
112
- },
113
- }),
114
-
115
- stitch_list_projects: tool({
116
- description: "List all Stitch projects. Optionally filter by keyword.",
117
- args: {
118
- filter: tool.schema
119
- .string()
120
- .optional()
121
- .describe("Filter string (optional)"),
122
- },
123
- async execute(args: { filter?: string }) {
124
- return callTool("list_projects", args);
125
- },
126
- }),
127
-
128
- // ---------------------------------------------------------------
129
- // Screens
130
- // ---------------------------------------------------------------
131
-
132
- stitch_list_screens: tool({
133
- description:
134
- "List all screens in a Stitch project.\n\nRequires projectId.",
135
- args: {
136
- projectId: tool.schema.string().describe("Project ID. Required."),
137
- },
138
- async execute(args: { projectId: string }) {
139
- return callTool("list_screens", args);
140
- },
141
- }),
142
-
143
- stitch_get_screen: tool({
144
- description:
145
- "Get screen details including HTML code.\n\nProvide the screen resource name (format: projects/{projectId}/screens/{screenId}).",
146
- args: {
147
- name: tool.schema
148
- .string()
149
- .describe(
150
- "Screen resource name (e.g. projects/abc/screens/xyz). Required.",
151
- ),
152
- },
153
- async execute(args: { name: string }) {
154
- return callTool("get_screen", args);
155
- },
156
- }),
157
-
158
- // ---------------------------------------------------------------
159
- // Generation
160
- // ---------------------------------------------------------------
161
-
162
- stitch_generate_screen: tool({
163
- description: `Generate a UI screen from a text prompt.
164
-
165
- Device types: ${DEVICE_TYPES.join(", ")}
166
- Model IDs: ${MODEL_IDS.join(", ")}`,
167
- args: {
168
- projectId: tool.schema.string().describe("Project ID. Required."),
169
- prompt: tool.schema
170
- .string()
171
- .describe("Text description of the UI to generate. Required."),
172
- deviceType: tool.schema
173
- .string()
174
- .optional()
175
- .describe(
176
- `Device type: ${DEVICE_TYPES.join(" | ")} (default: MOBILE)`,
177
- ),
178
- modelId: tool.schema
179
- .string()
180
- .optional()
181
- .describe(
182
- `Model: ${MODEL_IDS.join(" | ")} (default: GEMINI_3_FLASH)`,
183
- ),
184
- },
185
- async execute(args: {
186
- projectId: string;
187
- prompt: string;
188
- deviceType?: string;
189
- modelId?: string;
190
- }) {
191
- return callTool("generate_screen_from_text", args);
192
- },
193
- }),
194
-
195
- stitch_edit_screens: tool({
196
- description: `Edit existing screens with a text prompt.
197
-
198
- Device types: ${DEVICE_TYPES.join(", ")}
199
- Model IDs: ${MODEL_IDS.join(", ")}`,
200
- args: {
201
- projectId: tool.schema.string().describe("Project ID. Required."),
202
- selectedScreenIds: tool.schema
203
- .array(tool.schema.string())
204
- .describe("Screen IDs to edit. Required."),
205
- prompt: tool.schema.string().describe("Edit instructions. Required."),
206
- deviceType: tool.schema
207
- .string()
208
- .optional()
209
- .describe(
210
- `Device type: ${DEVICE_TYPES.join(" | ")} (default: MOBILE)`,
211
- ),
212
- modelId: tool.schema
213
- .string()
214
- .optional()
215
- .describe(
216
- `Model: ${MODEL_IDS.join(" | ")} (default: GEMINI_3_FLASH)`,
217
- ),
218
- },
219
- async execute(args: {
220
- projectId: string;
221
- selectedScreenIds: string[];
222
- prompt: string;
223
- deviceType?: string;
224
- modelId?: string;
225
- }) {
226
- return callTool("edit_screens", args);
227
- },
228
- }),
229
-
230
- stitch_generate_variants: tool({
231
- description: `Generate design variants of existing screens.
232
-
233
- variantOptions:
234
- - variantCount: number of variants (1-10)
235
- - creativeRange: LOW, MEDIUM, HIGH (how different from original)
236
- - aspects: optional comma-separated aspects to vary (e.g. "color,layout")
237
-
238
- Device types: ${DEVICE_TYPES.join(", ")}
239
- Model IDs: ${MODEL_IDS.join(", ")}`,
240
- args: {
241
- projectId: tool.schema.string().describe("Project ID. Required."),
242
- selectedScreenIds: tool.schema
243
- .array(tool.schema.string())
244
- .describe("Screen IDs to create variants of. Required."),
245
- prompt: tool.schema
246
- .string()
247
- .describe("Prompt describing desired variations. Required."),
248
- variantCount: tool.schema
249
- .number()
250
- .optional()
251
- .describe("Number of variants to generate (1-10, default: 3)"),
252
- creativeRange: tool.schema
253
- .string()
254
- .optional()
255
- .describe("Creative range: LOW | MEDIUM | HIGH (default: MEDIUM)"),
256
- aspects: tool.schema
257
- .string()
258
- .optional()
259
- .describe(
260
- "Comma-separated aspects to vary (e.g. 'color,layout'). Optional.",
261
- ),
262
- deviceType: tool.schema
263
- .string()
264
- .optional()
265
- .describe(
266
- `Device type: ${DEVICE_TYPES.join(" | ")} (default: MOBILE)`,
267
- ),
268
- modelId: tool.schema
269
- .string()
270
- .optional()
271
- .describe(
272
- `Model: ${MODEL_IDS.join(" | ")} (default: GEMINI_3_FLASH)`,
273
- ),
274
- },
275
- async execute(args: {
276
- projectId: string;
277
- selectedScreenIds: string[];
278
- prompt: string;
279
- variantCount?: number;
280
- creativeRange?: string;
281
- aspects?: string;
282
- deviceType?: string;
283
- modelId?: string;
284
- }) {
285
- // Build variantOptions object from flat args
286
- const variantOptions: Record<string, unknown> = {};
287
- if (args.variantCount != null)
288
- variantOptions.variantCount = args.variantCount;
289
- if (args.creativeRange)
290
- variantOptions.creativeRange = args.creativeRange;
291
- if (args.aspects) variantOptions.aspects = args.aspects;
292
-
293
- return callTool("generate_variants", {
294
- projectId: args.projectId,
295
- selectedScreenIds: args.selectedScreenIds,
296
- prompt: args.prompt,
297
- variantOptions,
298
- ...(args.deviceType ? { deviceType: args.deviceType } : {}),
299
- ...(args.modelId ? { modelId: args.modelId } : {}),
300
- });
301
- },
302
- }),
303
- },
304
- };
305
- };
306
-
307
- export default StitchPlugin;
@@ -1,164 +0,0 @@
1
- ---
2
- name: stitch
3
- description: Use when generating, editing, or creating variants of UI screens in Google Stitch. MUST load before any stitch_generate_screen or stitch_edit_screens tool calls.
4
- version: 2.0.0
5
- tags: [design, ui, stitch]
6
- dependencies: []
7
- ---
8
-
9
- # Google Stitch Plugin
10
-
11
- ## When to Use
12
-
13
- - When you need to generate or inspect Google Stitch UI designs.
14
-
15
- ## When NOT to Use
16
-
17
- - When you don't have Stitch access or don't need Stitch-generated UI.
18
-
19
- ## Overview
20
-
21
- 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.
22
-
23
- ## Prerequisites
24
-
25
- 1. **Google Cloud Project** with Stitch API enabled
26
- 2. **Google Cloud CLI** (`gcloud`) installed and initialized
27
- 3. **Required IAM Roles**:
28
- - `roles/serviceusage.serviceUsageAdmin` (to enable the service)
29
- - `roles/mcp.toolUser` (to call MCP tools)
30
-
31
- ## Setup Steps
32
-
33
- ### 1. Enable Stitch API in Google Cloud
34
-
35
- ```bash
36
- gcloud config set project PROJECT_ID
37
- gcloud beta services mcp enable stitch.googleapis.com --project=PROJECT_ID
38
- ```
39
-
40
- ### 2. Set Environment Variables
41
-
42
- **API Key auth** (recommended):
43
-
44
- ```bash
45
- export STITCH_API_KEY="your-api-key"
46
- ```
47
-
48
- **Or OAuth auth**:
49
-
50
- ```bash
51
- export STITCH_ACCESS_TOKEN=$(gcloud auth print-access-token)
52
- export GOOGLE_CLOUD_PROJECT="your-project-id"
53
- ```
54
-
55
- ### 3. Restart OpenCode
56
-
57
- Tools are available immediately after env vars are set and OpenCode restarts.
58
-
59
- ## Available Tools
60
-
61
- | Tool | Description |
62
- | -------------------------- | ------------------------------------ |
63
- | `stitch_create_project` | Create a new Stitch project |
64
- | `stitch_get_project` | Get project details by resource name |
65
- | `stitch_list_projects` | List all projects (optional filter) |
66
- | `stitch_list_screens` | List screens in a project |
67
- | `stitch_get_screen` | Get screen details with HTML code |
68
- | `stitch_generate_screen` | Generate UI from text prompt |
69
- | `stitch_edit_screens` | Edit existing screens with a prompt |
70
- | `stitch_generate_variants` | Generate design variants of screens |
71
-
72
- ## Usage Examples
73
-
74
- ### List Projects
75
-
76
- ```typescript
77
- stitch_list_projects({});
78
- ```
79
-
80
- ### Create a Project
81
-
82
- ```typescript
83
- stitch_create_project({ title: "My E-commerce App" });
84
- ```
85
-
86
- ### Generate Screen from Text
87
-
88
- ```typescript
89
- stitch_generate_screen({
90
- projectId: "my-project-123",
91
- prompt:
92
- "Create a modern login page with email and password fields, social login buttons, and a forgot password link",
93
- deviceType: "MOBILE",
94
- });
95
- ```
96
-
97
- ### Edit Existing Screens
98
-
99
- ```typescript
100
- stitch_edit_screens({
101
- projectId: "my-project-123",
102
- selectedScreenIds: ["screen-abc"],
103
- prompt: "Make the login button larger and change the color scheme to dark mode",
104
- });
105
- ```
106
-
107
- ### Generate Design Variants
108
-
109
- ```typescript
110
- stitch_generate_variants({
111
- projectId: "my-project-123",
112
- selectedScreenIds: ["screen-abc"],
113
- prompt: "Create variants with different color schemes",
114
- variantCount: 3,
115
- creativeRange: "MEDIUM",
116
- });
117
- ```
118
-
119
- ## Parameters
120
-
121
- ### Device Types
122
-
123
- `DEVICE_TYPE_UNSPECIFIED` | `MOBILE` | `DESKTOP` | `TABLET` | `AGNOSTIC`
124
-
125
- ### Model IDs
126
-
127
- `MODEL_ID_UNSPECIFIED` | `GEMINI_3_PRO` | `GEMINI_3_FLASH`
128
-
129
- ### Variant Options
130
-
131
- - `variantCount`: Number of variants (1-10)
132
- - `creativeRange`: `LOW` | `MEDIUM` | `HIGH`
133
- - `aspects`: Comma-separated aspects to vary (e.g. "color,layout")
134
-
135
- ## Troubleshooting
136
-
137
- ### "AUTH_FAILED"
138
-
139
- ```bash
140
- # API key auth
141
- export STITCH_API_KEY="your-key"
142
-
143
- # Or OAuth (token expires after ~1 hour)
144
- export STITCH_ACCESS_TOKEN=$(gcloud auth print-access-token)
145
- ```
146
-
147
- ### "Stitch API not enabled"
148
-
149
- ```bash
150
- gcloud beta services mcp enable stitch.googleapis.com --project=YOUR_PROJECT_ID
151
- ```
152
-
153
- ## Documentation
154
-
155
- - [Google Stitch](https://stitch.withgoogle.com)
156
- - [Stitch SDK](https://github.com/google-labs-code/stitch-sdk)
157
- - [Stitch MCP Setup](https://stitch.withgoogle.com/docs/mcp/setup)
158
-
159
- ## Tips
160
-
161
- - API key auth is simpler than OAuth (no token refresh)
162
- - Use descriptive prompts for better UI generation
163
- - `GEMINI_3_PRO` produces higher quality; `GEMINI_3_FLASH` is faster
164
- - Test generated code in your target framework before production use