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.
- package/dist/index.js +4 -4
- package/dist/template/.opencode/.template-manifest.json +721 -0
- package/dist/template/.opencode/.version +1 -1
- package/dist/template/.opencode/AGENTS.md +39 -29
- package/dist/template/.opencode/agent/vision.md +0 -1
- package/dist/template/.opencode/memory.db +0 -0
- package/dist/template/.opencode/memory.db-shm +0 -0
- package/dist/template/.opencode/memory.db-wal +0 -0
- package/dist/template/.opencode/opencode.json +1311 -1134
- package/dist/template/.opencode/plugin/README.md +10 -6
- package/dist/template/.opencode/plugin/rtk.ts +43 -0
- package/dist/template/.opencode/pnpm-lock.yaml +140 -706
- package/dist/template/.opencode/skill/agent-evals/SKILL.md +208 -0
- package/dist/template/.opencode/skill/anti-ai-slop/SKILL.md +76 -0
- package/dist/template/.opencode/skill/brand-asset-protocol/SKILL.md +222 -0
- package/dist/template/.opencode/skill/context-condensation/SKILL.md +149 -0
- package/dist/template/.opencode/skill/design-direction-advisor/SKILL.md +139 -0
- package/dist/template/.opencode/skill/hi-fi-prototype-html/SKILL.md +253 -0
- package/dist/template/.opencode/skill/html-deck-export/SKILL.md +189 -0
- package/dist/template/.opencode/skill/rtk-command-compression/SKILL.md +134 -0
- package/dist/template/.opencode/skill/test-driven-development/SKILL.md +15 -0
- package/package.json +1 -1
- package/dist/template/.opencode/package.json +0 -22
- package/dist/template/.opencode/plugin/package.json +0 -7
- package/dist/template/.opencode/plugin/stitch.ts +0 -307
- package/dist/template/.opencode/skill/stitch/SKILL.md +0 -164
- package/dist/template/.opencode/skill/stitch-design-taste/DESIGN.md +0 -121
- 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,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,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
|