@morya-ui/mcp 0.3.3 → 0.3.4
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 +151 -151
- package/bin/morya-ui-mcp.js +2 -2
- package/data/catalog.json +39 -28
- package/data/example-coverage.json +6 -4
- package/data/golden-pages/dashboard-page.vue +138 -138
- package/data/golden-pages/detail-page.vue +178 -178
- package/data/golden-pages/empty-state.vue +56 -56
- package/data/golden-pages/form-in-dialog.vue +166 -166
- package/data/golden-pages/form-page.vue +107 -107
- package/data/golden-pages/landing-page.vue +358 -358
- package/data/golden-pages/list-page-dense.vue +166 -0
- package/data/golden-pages/list-page-rail.vue +270 -0
- package/data/golden-pages/list-page.vue +220 -216
- package/data/golden-pages/login-page.vue +231 -231
- package/data/golden-pages/result-page.vue +84 -84
- package/data/golden-pages/settings-page.vue +163 -163
- package/data/golden-pages/wizard-form.vue +182 -182
- package/dist/__tests__/tools.test.js +76 -1
- package/dist/decisions.js +42 -1
- package/dist/golden-pages.d.ts +13 -0
- package/dist/golden-pages.js +55 -2
- package/dist/index.js +9 -3
- package/dist/page-snippets.js +254 -225
- package/dist/patterns.d.ts +2 -2
- package/dist/patterns.js +20 -9
- package/dist/style-presets.d.ts +52 -0
- package/dist/style-presets.js +322 -0
- package/dist/tools.d.ts +20 -0
- package/dist/tools.js +313 -204
- package/package.json +13 -11
- package/LICENSE +0 -21
package/README.md
CHANGED
|
@@ -1,151 +1,151 @@
|
|
|
1
|
-
# @morya-ui/mcp
|
|
2
|
-
|
|
3
|
-
Optional [Model Context Protocol](https://modelcontextprotocol.io/) (stdio) server for [`morya-ui`](https://www.npmjs.com/package/morya-ui).
|
|
4
|
-
|
|
5
|
-
It indexes component docs, guides, examples, and reusable page patterns so **any MCP-capable AI client** can look up the real API before writing code. It does **not** replace installing the UI library:
|
|
6
|
-
|
|
7
|
-
```bash
|
|
8
|
-
pnpm add morya-ui
|
|
9
|
-
```
|
|
10
|
-
|
|
11
|
-
Public docs: run the docs site (`pnpm dev`) and open **Docs → MCP**.
|
|
12
|
-
|
|
13
|
-
## Run
|
|
14
|
-
|
|
15
|
-
```bash
|
|
16
|
-
npx -y @morya-ui/mcp
|
|
17
|
-
```
|
|
18
|
-
|
|
19
|
-
Typical client config (field names vary by client):
|
|
20
|
-
|
|
21
|
-
```json
|
|
22
|
-
{
|
|
23
|
-
"command": "npx",
|
|
24
|
-
"args": ["-y", "@morya-ui/mcp"]
|
|
25
|
-
}
|
|
26
|
-
```
|
|
27
|
-
|
|
28
|
-
Local checkout:
|
|
29
|
-
|
|
30
|
-
```bash
|
|
31
|
-
pnpm --filter @morya-ui/mcp build
|
|
32
|
-
node packages/ui-mcp/bin/morya-ui-mcp.js
|
|
33
|
-
```
|
|
34
|
-
|
|
35
|
-
## Tools
|
|
36
|
-
|
|
37
|
-
MCP also exposes **resources** and **resource templates** for clients that support `resources/list`, `resources/templates/list`, and `resources/read`. Call `version` to see the current resource and template counts.
|
|
38
|
-
|
|
39
|
-
Static resources:
|
|
40
|
-
|
|
41
|
-
- `m://catalog/index.json`
|
|
42
|
-
- `m://design-rules.json`
|
|
43
|
-
|
|
44
|
-
Resource templates:
|
|
45
|
-
|
|
46
|
-
- `component-docs` → `m://components/{component}/docs/{locale}`
|
|
47
|
-
- `component-api` → `m://components/{component}/api.json`
|
|
48
|
-
- `guide-docs` → `m://guides/{guide}/docs/{locale}`
|
|
49
|
-
|
|
50
|
-
### Core — component docs
|
|
51
|
-
|
|
52
|
-
| Tool | Purpose |
|
|
53
|
-
| ---------------- | -------------------------------------------- |
|
|
54
|
-
| `list` | List components / guides / examples / categories / patterns |
|
|
55
|
-
| `search` | Search docs, examples, patterns, and decisions |
|
|
56
|
-
| `get_component` | Component metadata and API |
|
|
57
|
-
| `get_example` | One source-backed example |
|
|
58
|
-
| `get_guide` | Guide docs |
|
|
59
|
-
| `get_setup` | Install / setup bundle |
|
|
60
|
-
| `validate_usage` | Soft-check props / events |
|
|
61
|
-
| `version` | Package + catalog status |
|
|
62
|
-
|
|
63
|
-
### Advanced — page composition (optional)
|
|
64
|
-
|
|
65
|
-
| Tool | Purpose |
|
|
66
|
-
| --------------------- | ------------------------------------------------------------- |
|
|
67
|
-
| `list_patterns` | List reusable page composition patterns |
|
|
68
|
-
| `get_pattern` | Read a pattern's structure, layout, and rules |
|
|
69
|
-
| `recommend_page` | Recommend a pattern from page intent; optional starter scaffold |
|
|
70
|
-
| `get_design_rules` | Design-token and composition rules |
|
|
71
|
-
| `recommend_component` | List, read, or recommend component selection guides |
|
|
72
|
-
| `list_golden_pages` | List golden page samples (list / form / dashboard) |
|
|
73
|
-
| `get_golden_page` | Read golden page Vue source |
|
|
74
|
-
| `list_page_snippets` | List section snippets for local page edits |
|
|
75
|
-
| `get_page_snippet` | Read a section snippet (`filters`, `toolbar`, `form-actions`…) |
|
|
76
|
-
| `validate_page` | Check page composition, spacing, and border anti-patterns |
|
|
77
|
-
|
|
78
|
-
`mode`: `zh` (default) or `en`.
|
|
79
|
-
|
|
80
|
-
Component lookup accepts common aliases such as `DataTable`, `数据表格`, `Pager`, and `确认弹窗`.
|
|
81
|
-
|
|
82
|
-
### Recommended workflow
|
|
83
|
-
|
|
84
|
-
**Look up a component:**
|
|
85
|
-
|
|
86
|
-
1. `search` or `get_component`
|
|
87
|
-
2. `get_example` for unfamiliar APIs
|
|
88
|
-
3. `validate_usage` on generated snippets
|
|
89
|
-
|
|
90
|
-
**Plan a page:**
|
|
91
|
-
|
|
92
|
-
1. `recommend_page` with business intent, page type, and features
|
|
93
|
-
2. `get_golden_page` for the matched golden sample (`list-page`, `form-page`, `form-in-dialog`, `detail-page`, `dashboard-page`, `login-page`, `landing-page`, `empty-state`, `result-page`, `settings-page`, `wizard-form`). `includeScaffold` returns that golden source when available.
|
|
94
|
-
3. `get_pattern` for the returned `matchedPattern`
|
|
95
|
-
4. `get_design_rules` for MPage* composition recipes
|
|
96
|
-
5. `get_component` / `get_example` for core components (including `Page`)
|
|
97
|
-
6. `recommend_component` when choosing between similar components
|
|
98
|
-
7. `validate_page` on generated Vue code before finishing
|
|
99
|
-
|
|
100
|
-
**Edit one section of an existing page:**
|
|
101
|
-
|
|
102
|
-
1. `list_page_snippets` with `query` or `pageType`
|
|
103
|
-
2. `get_page_snippet` for the matched section (`list-filters`, `form-actions`, …)
|
|
104
|
-
3. `get_component` / `get_example` for unfamiliar imports
|
|
105
|
-
4. `validate_usage` + `validate_page` on the merged result
|
|
106
|
-
|
|
107
|
-
For a starter Vue file, pass `includeScaffold: true` to `recommend_page`:
|
|
108
|
-
|
|
109
|
-
```json
|
|
110
|
-
{
|
|
111
|
-
"intent": "Oil well management list",
|
|
112
|
-
"pageType": "list",
|
|
113
|
-
"features": ["filters", "create", "pagination"],
|
|
114
|
-
"mode": "en",
|
|
115
|
-
"includeScaffold": true
|
|
116
|
-
}
|
|
117
|
-
```
|
|
118
|
-
|
|
119
|
-
`recommend_component` modes:
|
|
120
|
-
|
|
121
|
-
- omit `query` and `decision` → list decision guides
|
|
122
|
-
- `decision` only → read one guide with **when / avoidWhen / recipe (props, slots, events) / antiPatterns** (e.g. `overlay-choice`, `selection-choice`, `feedback-choice`, `confirm-choice`)
|
|
123
|
-
- `query` → recommend a guide for a UI question (same recipe payload)
|
|
124
|
-
|
|
125
|
-
Offline mirror for the page skill: `design-kit/.../references/decision-recipes.md` (regenerate with `pnpm --filter @morya-ui/mcp generate:recipes`).
|
|
126
|
-
|
|
127
|
-
## Develop
|
|
128
|
-
|
|
129
|
-
```bash
|
|
130
|
-
pnpm install
|
|
131
|
-
pnpm mcp:generate
|
|
132
|
-
pnpm mcp:build
|
|
133
|
-
```
|
|
134
|
-
|
|
135
|
-
After editing `src/decisions.ts`, run `pnpm --filter @morya-ui/mcp generate:recipes` (also runs as part of `build`) so the skill offline recipes stay in sync.
|
|
136
|
-
|
|
137
|
-
```bash
|
|
138
|
-
pnpm mcp:generate
|
|
139
|
-
pnpm mcp:check-catalog
|
|
140
|
-
pnpm mcp:validate-catalog
|
|
141
|
-
pnpm mcp:audit-examples
|
|
142
|
-
```
|
|
143
|
-
|
|
144
|
-
## Release
|
|
145
|
-
|
|
146
|
-
From the repo root (version syncs from `morya-ui`):
|
|
147
|
-
|
|
148
|
-
```bash
|
|
149
|
-
pnpm release:mcp -- --dry-run
|
|
150
|
-
pnpm release:mcp
|
|
151
|
-
```
|
|
1
|
+
# @morya-ui/mcp
|
|
2
|
+
|
|
3
|
+
Optional [Model Context Protocol](https://modelcontextprotocol.io/) (stdio) server for [`morya-ui`](https://www.npmjs.com/package/morya-ui).
|
|
4
|
+
|
|
5
|
+
It indexes component docs, guides, examples, and reusable page patterns so **any MCP-capable AI client** can look up the real API before writing code. It does **not** replace installing the UI library:
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
pnpm add morya-ui
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
Public docs: run the docs site (`pnpm dev`) and open **Docs → MCP**.
|
|
12
|
+
|
|
13
|
+
## Run
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
npx -y @morya-ui/mcp
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
Typical client config (field names vary by client):
|
|
20
|
+
|
|
21
|
+
```json
|
|
22
|
+
{
|
|
23
|
+
"command": "npx",
|
|
24
|
+
"args": ["-y", "@morya-ui/mcp"]
|
|
25
|
+
}
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
Local checkout:
|
|
29
|
+
|
|
30
|
+
```bash
|
|
31
|
+
pnpm --filter @morya-ui/mcp build
|
|
32
|
+
node packages/ui-mcp/bin/morya-ui-mcp.js
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
## Tools
|
|
36
|
+
|
|
37
|
+
MCP also exposes **resources** and **resource templates** for clients that support `resources/list`, `resources/templates/list`, and `resources/read`. Call `version` to see the current resource and template counts.
|
|
38
|
+
|
|
39
|
+
Static resources:
|
|
40
|
+
|
|
41
|
+
- `m://catalog/index.json`
|
|
42
|
+
- `m://design-rules.json`
|
|
43
|
+
|
|
44
|
+
Resource templates:
|
|
45
|
+
|
|
46
|
+
- `component-docs` → `m://components/{component}/docs/{locale}`
|
|
47
|
+
- `component-api` → `m://components/{component}/api.json`
|
|
48
|
+
- `guide-docs` → `m://guides/{guide}/docs/{locale}`
|
|
49
|
+
|
|
50
|
+
### Core — component docs
|
|
51
|
+
|
|
52
|
+
| Tool | Purpose |
|
|
53
|
+
| ---------------- | -------------------------------------------- |
|
|
54
|
+
| `list` | List components / guides / examples / categories / patterns |
|
|
55
|
+
| `search` | Search docs, examples, patterns, and decisions |
|
|
56
|
+
| `get_component` | Component metadata and API |
|
|
57
|
+
| `get_example` | One source-backed example |
|
|
58
|
+
| `get_guide` | Guide docs |
|
|
59
|
+
| `get_setup` | Install / setup bundle |
|
|
60
|
+
| `validate_usage` | Soft-check props / events |
|
|
61
|
+
| `version` | Package + catalog status |
|
|
62
|
+
|
|
63
|
+
### Advanced — page composition (optional)
|
|
64
|
+
|
|
65
|
+
| Tool | Purpose |
|
|
66
|
+
| --------------------- | ------------------------------------------------------------- |
|
|
67
|
+
| `list_patterns` | List reusable page composition patterns |
|
|
68
|
+
| `get_pattern` | Read a pattern's structure, layout, and rules |
|
|
69
|
+
| `recommend_page` | Recommend a pattern from page intent; optional starter scaffold |
|
|
70
|
+
| `get_design_rules` | Design-token and composition rules |
|
|
71
|
+
| `recommend_component` | List, read, or recommend component selection guides |
|
|
72
|
+
| `list_golden_pages` | List golden page samples (list / form / dashboard) |
|
|
73
|
+
| `get_golden_page` | Read golden page Vue source |
|
|
74
|
+
| `list_page_snippets` | List section snippets for local page edits |
|
|
75
|
+
| `get_page_snippet` | Read a section snippet (`filters`, `toolbar`, `form-actions`…) |
|
|
76
|
+
| `validate_page` | Check page composition, spacing, and border anti-patterns |
|
|
77
|
+
|
|
78
|
+
`mode`: `zh` (default) or `en`.
|
|
79
|
+
|
|
80
|
+
Component lookup accepts common aliases such as `DataTable`, `数据表格`, `Pager`, and `确认弹窗`.
|
|
81
|
+
|
|
82
|
+
### Recommended workflow
|
|
83
|
+
|
|
84
|
+
**Look up a component:**
|
|
85
|
+
|
|
86
|
+
1. `search` or `get_component`
|
|
87
|
+
2. `get_example` for unfamiliar APIs
|
|
88
|
+
3. `validate_usage` on generated snippets
|
|
89
|
+
|
|
90
|
+
**Plan a page:**
|
|
91
|
+
|
|
92
|
+
1. `recommend_page` with business intent, page type, and features
|
|
93
|
+
2. `get_golden_page` for the matched golden sample (`list-page`, `form-page`, `form-in-dialog`, `detail-page`, `dashboard-page`, `login-page`, `landing-page`, `empty-state`, `result-page`, `settings-page`, `wizard-form`). `includeScaffold` returns that golden source when available.
|
|
94
|
+
3. `get_pattern` for the returned `matchedPattern`
|
|
95
|
+
4. `get_design_rules` for MPage* composition recipes
|
|
96
|
+
5. `get_component` / `get_example` for core components (including `Page`)
|
|
97
|
+
6. `recommend_component` when choosing between similar components
|
|
98
|
+
7. `validate_page` on generated Vue code before finishing
|
|
99
|
+
|
|
100
|
+
**Edit one section of an existing page:**
|
|
101
|
+
|
|
102
|
+
1. `list_page_snippets` with `query` or `pageType`
|
|
103
|
+
2. `get_page_snippet` for the matched section (`list-filters`, `form-actions`, …)
|
|
104
|
+
3. `get_component` / `get_example` for unfamiliar imports
|
|
105
|
+
4. `validate_usage` + `validate_page` on the merged result
|
|
106
|
+
|
|
107
|
+
For a starter Vue file, pass `includeScaffold: true` to `recommend_page`:
|
|
108
|
+
|
|
109
|
+
```json
|
|
110
|
+
{
|
|
111
|
+
"intent": "Oil well management list",
|
|
112
|
+
"pageType": "list",
|
|
113
|
+
"features": ["filters", "create", "pagination"],
|
|
114
|
+
"mode": "en",
|
|
115
|
+
"includeScaffold": true
|
|
116
|
+
}
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
`recommend_component` modes:
|
|
120
|
+
|
|
121
|
+
- omit `query` and `decision` → list decision guides
|
|
122
|
+
- `decision` only → read one guide with **when / avoidWhen / recipe (props, slots, events) / antiPatterns** (e.g. `overlay-choice`, `selection-choice`, `feedback-choice`, `confirm-choice`)
|
|
123
|
+
- `query` → recommend a guide for a UI question (same recipe payload)
|
|
124
|
+
|
|
125
|
+
Offline mirror for the page skill: `design-kit/.../references/decision-recipes.md` (regenerate with `pnpm --filter @morya-ui/mcp generate:recipes`).
|
|
126
|
+
|
|
127
|
+
## Develop
|
|
128
|
+
|
|
129
|
+
```bash
|
|
130
|
+
pnpm install
|
|
131
|
+
pnpm mcp:generate
|
|
132
|
+
pnpm mcp:build
|
|
133
|
+
```
|
|
134
|
+
|
|
135
|
+
After editing `src/decisions.ts`, run `pnpm --filter @morya-ui/mcp generate:recipes` (also runs as part of `build`) so the skill offline recipes stay in sync.
|
|
136
|
+
|
|
137
|
+
```bash
|
|
138
|
+
pnpm mcp:generate
|
|
139
|
+
pnpm mcp:check-catalog
|
|
140
|
+
pnpm mcp:validate-catalog
|
|
141
|
+
pnpm mcp:audit-examples
|
|
142
|
+
```
|
|
143
|
+
|
|
144
|
+
## Release
|
|
145
|
+
|
|
146
|
+
From the repo root (version syncs from `morya-ui`):
|
|
147
|
+
|
|
148
|
+
```bash
|
|
149
|
+
pnpm release:mcp -- --dry-run
|
|
150
|
+
pnpm release:mcp
|
|
151
|
+
```
|
package/bin/morya-ui-mcp.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
#!/usr/bin/env node
|
|
2
|
-
import '../dist/index.js'
|
|
1
|
+
#!/usr/bin/env node
|
|
2
|
+
import '../dist/index.js'
|