openuispec 0.1.44 → 0.1.45
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/README.md +78 -55
- package/cli/init.ts +9 -1
- package/mcp-server/index.ts +69 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -52,25 +52,91 @@ cd your-project
|
|
|
52
52
|
openuispec init
|
|
53
53
|
```
|
|
54
54
|
|
|
55
|
-
This scaffolds a spec directory, starter tokens,
|
|
56
|
-
Use `openuispec init --no-configure-targets` if you want to scaffold first and choose target stacks later.
|
|
55
|
+
This scaffolds a spec directory, starter tokens, and **configures the MCP server** for your AI coding agent (Claude Code, VS Code/Copilot, Codex). Use `openuispec init --no-configure-targets` to scaffold first and choose target stacks later.
|
|
57
56
|
|
|
58
|
-
|
|
57
|
+
## AI integration (MCP)
|
|
59
58
|
|
|
60
|
-
|
|
59
|
+
OpenUISpec is designed to be used by AI coding agents. The package includes an **MCP server** that exposes tools AI assistants call automatically during UI work — no manual prompting needed.
|
|
60
|
+
|
|
61
|
+
### How it works
|
|
62
|
+
|
|
63
|
+
```
|
|
64
|
+
openuispec init → configures MCP for your agent → AI calls tools automatically
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
When you ask your AI to "add a settings page" or "update the home feed," the MCP server:
|
|
68
|
+
|
|
69
|
+
1. **Schema reference** — `openuispec_spec_types` and `openuispec_spec_schema` give the AI the exact format for any spec file it needs to create or edit
|
|
70
|
+
2. **Before generation** — `openuispec_prepare` gives the AI your spec context, platform config, and constraints
|
|
71
|
+
3. **During generation** — `openuispec_read_specs` feeds the AI the actual spec file contents as the authoritative source
|
|
72
|
+
4. **After generation** — `openuispec_check` returns a concrete audit checklist derived from your spec (every contract `must_handle` item, every screen section, every locale key) and the AI verifies its code matches
|
|
73
|
+
|
|
74
|
+
This replaces the old approach of writing instructions in CLAUDE.md and hoping the AI follows them. MCP tools are called reliably because they're part of the AI's tool-calling loop, not a text instruction it can skip.
|
|
75
|
+
|
|
76
|
+
### Setup
|
|
77
|
+
|
|
78
|
+
`openuispec init` and `openuispec update-rules` automatically configure MCP for all supported agents:
|
|
79
|
+
|
|
80
|
+
| Agent | Config file | Created automatically |
|
|
81
|
+
|-------|------------|----------------------|
|
|
82
|
+
| **Claude Code** | `.mcp.json` | Always |
|
|
83
|
+
| **Codex** | `.codex/config.toml` | Always |
|
|
84
|
+
| **VS Code / Copilot** | `.vscode/mcp.json` | If `.vscode/` exists |
|
|
85
|
+
|
|
86
|
+
Manual setup (if needed):
|
|
87
|
+
|
|
88
|
+
**Claude Code** (`.mcp.json`), **VS Code / Copilot** (`.vscode/mcp.json`):
|
|
89
|
+
```json
|
|
90
|
+
{
|
|
91
|
+
"mcpServers": {
|
|
92
|
+
"openuispec": {
|
|
93
|
+
"command": "openuispec",
|
|
94
|
+
"args": ["mcp"]
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
**Codex** (`.codex/config.toml`):
|
|
101
|
+
```toml
|
|
102
|
+
[mcp_servers.openuispec]
|
|
103
|
+
command = "openuispec"
|
|
104
|
+
args = ["mcp"]
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
Or run directly: `openuispec mcp`
|
|
108
|
+
|
|
109
|
+
### Tools
|
|
61
110
|
|
|
62
|
-
|
|
111
|
+
| Tool | When | What it does |
|
|
112
|
+
|------|------|-------------|
|
|
113
|
+
| `openuispec_spec_types` | Before creating spec files | Lists all available spec types with descriptions — discover what kinds of spec files exist |
|
|
114
|
+
| `openuispec_spec_schema` | Before creating/editing spec files | Returns the full JSON schema for a specific spec type — exact structure, required fields, allowed values |
|
|
115
|
+
| `openuispec_prepare` | Before UI code generation | Returns spec context, platform config, generation constraints |
|
|
116
|
+
| `openuispec_read_specs` | Before and after generation | Loads spec file contents — the authoritative source for tokens, screens, contracts |
|
|
117
|
+
| `openuispec_check` | After generation | Schema validation + concrete audit checklist from your spec |
|
|
118
|
+
| `openuispec_validate` | After spec edits | Schema-only validation, optionally filtered by group |
|
|
119
|
+
| `openuispec_drift` | Before updates | Detect spec drift since last snapshot, with semantic explanation |
|
|
120
|
+
| `openuispec_status` | Anytime | Cross-target summary: baselines, drift, next steps |
|
|
121
|
+
|
|
122
|
+
The server includes **protocol-level instructions** that trigger on UI-related requests independently of CLAUDE.md rules — so even if CLAUDE.md is buried under other project rules, the MCP enforcement still works.
|
|
123
|
+
|
|
124
|
+
## Using without MCP
|
|
125
|
+
|
|
126
|
+
You can also use OpenUISpec with any AI by providing context manually:
|
|
127
|
+
|
|
128
|
+
> Generate a native iOS app from this OpenUISpec. Follow all contract state machines, apply token ranges for iOS, and implement navigation flows as defined. Use `platform/ios.yaml` for SwiftUI-specific overrides.
|
|
63
129
|
|
|
64
130
|
For platform generation, treat these as hard output constraints:
|
|
65
131
|
|
|
66
|
-
- Generate a valid native project
|
|
67
|
-
- Do not ship unresolved resource identifiers
|
|
68
|
-
-
|
|
132
|
+
- Generate a valid native project that bundles every required runtime resource
|
|
133
|
+
- Do not ship unresolved resource identifiers (raw locale keys, token refs, placeholder paths)
|
|
134
|
+
- Define behavior for every supported size class and form factor
|
|
69
135
|
|
|
70
|
-
See the examples for
|
|
136
|
+
See the examples for reference:
|
|
71
137
|
|
|
72
|
-
- [TaskFlow](./examples/taskflow/openuispec/)
|
|
73
|
-
- [Todo Orbit](./examples/todo-orbit/openuispec/)
|
|
138
|
+
- [TaskFlow](./examples/taskflow/openuispec/) — compact reference spec covering all 7 contract families
|
|
139
|
+
- [Todo Orbit](./examples/todo-orbit/openuispec/) — bilingual task app with localization, custom contracts, and generated native/web targets
|
|
74
140
|
|
|
75
141
|
## Repository structure
|
|
76
142
|
|
|
@@ -117,7 +183,7 @@ openuispec/
|
|
|
117
183
|
│ ├── index.ts # Entry point
|
|
118
184
|
│ └── init.ts # Project scaffolding + AI rules
|
|
119
185
|
├── mcp-server/ # MCP server (openuispec-mcp)
|
|
120
|
-
│ └── index.ts # Stdio transport,
|
|
186
|
+
│ └── index.ts # Stdio transport, 8 tools
|
|
121
187
|
├── check/ # Composite validation command
|
|
122
188
|
│ └── index.ts # Schema + semantic + readiness
|
|
123
189
|
├── drift/ # Drift detection (spec change tracking)
|
|
@@ -245,49 +311,6 @@ to see which targets are already up to date and which ones still need to catch u
|
|
|
245
311
|
|
|
246
312
|
`drift --snapshot` is bookkeeping. It does not prove that the target code matches the spec, and it will not create a missing target output directory for you.
|
|
247
313
|
|
|
248
|
-
## MCP server
|
|
249
|
-
|
|
250
|
-
OpenUISpec includes an MCP (Model Context Protocol) server that exposes CLI commands as tools for AI assistants. This is the recommended way to integrate with Claude Code and other MCP-compatible clients — tools are called more reliably than CLAUDE.md instructions.
|
|
251
|
-
|
|
252
|
-
### Setup
|
|
253
|
-
|
|
254
|
-
`openuispec init` automatically configures the MCP server for your coding agent. For existing projects, run `openuispec update-rules` or add the config manually:
|
|
255
|
-
|
|
256
|
-
**Claude Code** (`.mcp.json`), **VS Code / Copilot** (`.vscode/mcp.json`):
|
|
257
|
-
```json
|
|
258
|
-
{
|
|
259
|
-
"mcpServers": {
|
|
260
|
-
"openuispec": {
|
|
261
|
-
"command": "openuispec",
|
|
262
|
-
"args": ["mcp"]
|
|
263
|
-
}
|
|
264
|
-
}
|
|
265
|
-
}
|
|
266
|
-
```
|
|
267
|
-
|
|
268
|
-
**Codex** (`.codex/config.toml`):
|
|
269
|
-
```toml
|
|
270
|
-
[mcp_servers.openuispec]
|
|
271
|
-
command = "openuispec"
|
|
272
|
-
args = ["mcp"]
|
|
273
|
-
```
|
|
274
|
-
|
|
275
|
-
Or run directly: `openuispec mcp`
|
|
276
|
-
|
|
277
|
-
Set `OPENUISPEC_PROJECT_DIR` to override the working directory.
|
|
278
|
-
|
|
279
|
-
### Tools
|
|
280
|
-
|
|
281
|
-
| Tool | Description |
|
|
282
|
-
|------|-------------|
|
|
283
|
-
| `openuispec_prepare` | Build AI-ready work bundle for a target. **Call before any UI code generation.** |
|
|
284
|
-
| `openuispec_check` | Schema validation + semantic lint + prepare readiness. Call after spec edits. |
|
|
285
|
-
| `openuispec_status` | Cross-target summary: baselines, drift, next steps. |
|
|
286
|
-
| `openuispec_validate` | Schema-only validation, optionally filtered by group. |
|
|
287
|
-
| `openuispec_drift` | Detect spec drift since last snapshot, with optional semantic explanation. |
|
|
288
|
-
|
|
289
|
-
All tools return structured JSON. The server includes protocol-level instructions that tell AI assistants to call `openuispec_prepare` before any UI work — this works independently of CLAUDE.md rules.
|
|
290
|
-
|
|
291
314
|
## Spec at a glance
|
|
292
315
|
|
|
293
316
|
| Section | What it defines |
|
package/cli/init.ts
CHANGED
|
@@ -268,11 +268,14 @@ When the openuispec MCP server is configured, AI assistants should use these too
|
|
|
268
268
|
|
|
269
269
|
| Tool | When to use |
|
|
270
270
|
|------|-------------|
|
|
271
|
+
| \`openuispec_spec_types\` | Discover available spec types and their descriptions. |
|
|
272
|
+
| \`openuispec_spec_schema\` | Get the full JSON schema for a specific spec type — exact structure, required fields, allowed values. |
|
|
271
273
|
| \`openuispec_prepare\` | **Before any UI code generation.** Returns spec context, platform config, and constraints. |
|
|
274
|
+
| \`openuispec_read_specs\` | Load spec file contents — the authoritative source for tokens, screens, contracts. |
|
|
272
275
|
| \`openuispec_check\` | After editing spec files. Validates schema + semantics + readiness. |
|
|
273
|
-
| \`openuispec_status\` | To understand cross-target state (baselines, drift, next steps). |
|
|
274
276
|
| \`openuispec_validate\` | Schema-only validation, optionally by group. |
|
|
275
277
|
| \`openuispec_drift\` | Detect spec changes since last snapshot. |
|
|
278
|
+
| \`openuispec_status\` | To understand cross-target state (baselines, drift, next steps). |
|
|
276
279
|
|
|
277
280
|
## CLI commands
|
|
278
281
|
|
|
@@ -337,6 +340,11 @@ Call these MCP tools directly. They return structured JSON with everything you n
|
|
|
337
340
|
- Navigation targets match flow definitions
|
|
338
341
|
8. Report any real gaps found and fix them before finishing.
|
|
339
342
|
|
|
343
|
+
**Creating new spec files:**
|
|
344
|
+
- Call \`openuispec_spec_types\` to discover available spec types.
|
|
345
|
+
- Call \`openuispec_spec_schema\` with the specific type to get the full JSON schema.
|
|
346
|
+
- Write the spec file following the schema exactly.
|
|
347
|
+
|
|
340
348
|
**Other tools:**
|
|
341
349
|
- \`openuispec_status\` — cross-target summary, good starting point
|
|
342
350
|
- \`openuispec_drift\` with \`explain: true\` — property-level spec changes
|
package/mcp-server/index.ts
CHANGED
|
@@ -91,6 +91,12 @@ POST-GENERATION (do this EVERY TIME after writing UI code):
|
|
|
91
91
|
- Navigation targets match flow definitions
|
|
92
92
|
Report any real gaps found and fix them before finishing.
|
|
93
93
|
|
|
94
|
+
CREATING NEW SPEC FILES:
|
|
95
|
+
When you need to create or edit spec files and are unsure of the format:
|
|
96
|
+
1. Call openuispec_spec_types to discover available spec types.
|
|
97
|
+
2. Call openuispec_spec_schema with the specific type to get the full JSON schema.
|
|
98
|
+
3. Write the spec file following the schema exactly.
|
|
99
|
+
|
|
94
100
|
Skip these tools ONLY when the request is purely non-UI (API logic, database, infrastructure, etc.)
|
|
95
101
|
or explicitly platform-specific polish that doesn't affect shared UI semantics.`,
|
|
96
102
|
}
|
|
@@ -363,6 +369,69 @@ server.registerTool(
|
|
|
363
369
|
}
|
|
364
370
|
);
|
|
365
371
|
|
|
372
|
+
// ── schema type catalog ─────────────────────────────────────────
|
|
373
|
+
|
|
374
|
+
const SCHEMA_CATALOG: Record<string, { file: string; title: string; description: string }> = {
|
|
375
|
+
manifest: { file: "openuispec.schema.json", title: "Root Manifest", description: "Root manifest (openuispec.yaml): project info, includes, generation targets, data model, API endpoints, formatters, mappers" },
|
|
376
|
+
screen: { file: "screen.schema.json", title: "Screen", description: "Screen composition: layout, sections, navigation, surfaces, data/state bindings, adaptive breakpoints" },
|
|
377
|
+
flow: { file: "flow.schema.json", title: "Flow", description: "Navigation flow definitions: steps, transitions, guards, and entry points" },
|
|
378
|
+
platform: { file: "platform.schema.json", title: "Platform", description: "Platform-specific generation config: architecture, naming, CSS framework, component mapping" },
|
|
379
|
+
contract: { file: "contract.schema.json", title: "Contract", description: "Built-in UI contract definitions: variants, props, must_handle states, generation hints" },
|
|
380
|
+
"custom-contract":{ file: "custom-contract.schema.json", title: "Custom Contract", description: "User-defined UI contract definitions (x_ prefixed)" },
|
|
381
|
+
locale: { file: "locale.schema.json", title: "Locale", description: "Locale translation files: flat key-value string maps" },
|
|
382
|
+
"tokens/color": { file: "tokens/color.schema.json", title: "Color Tokens", description: "Color tokens: brand, surface, text, semantic, border groups with HSL ranges and contrast" },
|
|
383
|
+
"tokens/typography": { file: "tokens/typography.schema.json", title: "Typography Tokens", description: "Typography tokens: font families, sizes, weights, line heights, letter spacing" },
|
|
384
|
+
"tokens/spacing": { file: "tokens/spacing.schema.json", title: "Spacing Tokens", description: "Spacing tokens: named spacing scale values" },
|
|
385
|
+
"tokens/elevation": { file: "tokens/elevation.schema.json", title: "Elevation Tokens", description: "Elevation tokens: shadow definitions per level" },
|
|
386
|
+
"tokens/motion": { file: "tokens/motion.schema.json", title: "Motion Tokens", description: "Motion tokens: animation duration and easing curves" },
|
|
387
|
+
"tokens/layout": { file: "tokens/layout.schema.json", title: "Layout Tokens", description: "Layout tokens: radii, breakpoints, max widths, grid columns" },
|
|
388
|
+
"tokens/themes": { file: "tokens/themes.schema.json", title: "Theme Tokens", description: "Theme definitions: token overrides per theme (e.g. dark mode)" },
|
|
389
|
+
"tokens/icons": { file: "tokens/icons.schema.json", title: "Icon Tokens", description: "Icon tokens: icon set, size scale, default size" },
|
|
390
|
+
};
|
|
391
|
+
|
|
392
|
+
// ── tool: openuispec_spec_types ──────────────────────────────────
|
|
393
|
+
|
|
394
|
+
server.registerTool(
|
|
395
|
+
"openuispec_spec_types",
|
|
396
|
+
{
|
|
397
|
+
description: "List all available OpenUISpec spec types with brief descriptions. Use this to discover what kinds of spec files can be created and what schema format each one follows. Call openuispec_spec_schema with a specific type to get the full JSON schema.",
|
|
398
|
+
},
|
|
399
|
+
async () => {
|
|
400
|
+
const types = Object.entries(SCHEMA_CATALOG).map(([type, info]) => ({
|
|
401
|
+
type,
|
|
402
|
+
title: info.title,
|
|
403
|
+
description: info.description,
|
|
404
|
+
}));
|
|
405
|
+
return toolResult(types);
|
|
406
|
+
}
|
|
407
|
+
);
|
|
408
|
+
|
|
409
|
+
// ── tool: openuispec_spec_schema ─────────────────────────────────
|
|
410
|
+
|
|
411
|
+
server.registerTool(
|
|
412
|
+
"openuispec_spec_schema",
|
|
413
|
+
{
|
|
414
|
+
description: "Get the full JSON schema for a specific OpenUISpec spec type. Returns the complete schema definition so you know the exact format when creating or editing spec files. Call openuispec_spec_types first to see available types.",
|
|
415
|
+
inputSchema: {
|
|
416
|
+
type: z.string().describe("Spec type to get schema for (e.g. 'screen', 'tokens/color', 'contract'). Use openuispec_spec_types to list all available types."),
|
|
417
|
+
},
|
|
418
|
+
},
|
|
419
|
+
async ({ type }) => {
|
|
420
|
+
const entry = SCHEMA_CATALOG[type];
|
|
421
|
+
if (!entry) {
|
|
422
|
+
return toolError(`Unknown spec type "${type}". Call openuispec_spec_types to see available types.`);
|
|
423
|
+
}
|
|
424
|
+
try {
|
|
425
|
+
const __dirname = dirname(fileURLToPath(import.meta.url));
|
|
426
|
+
const schemaPath = join(__dirname, "..", "schema", entry.file);
|
|
427
|
+
const schema = JSON.parse(readFileSync(schemaPath, "utf-8"));
|
|
428
|
+
return toolResult({ type, title: entry.title, schema });
|
|
429
|
+
} catch (err) {
|
|
430
|
+
return toolError(err);
|
|
431
|
+
}
|
|
432
|
+
}
|
|
433
|
+
);
|
|
434
|
+
|
|
366
435
|
// ── start server ─────────────────────────────────────────────────────
|
|
367
436
|
|
|
368
437
|
export async function startMcpServer() {
|