@neuctra/ui-mcp 0.4.4 → 0.4.6
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 +106 -383
- package/data/layouts.json +790 -0
- package/data/seoGuide.json +100 -6
- package/data/theme.json +1 -1
- package/package.json +1 -1
- package/src/load-data.mjs +20 -0
- package/src/seo.mjs +3 -3
- package/src/server.mjs +19 -495
- package/src/tools/get-design-rules/index.mjs +42 -0
- package/src/tools/get-neuctra-ui-component/index.mjs +160 -0
- package/src/tools/neuctra-ui-page-builder/index.mjs +157 -0
- package/src/tools/neuctra-ui-seo-setup/index.mjs +62 -0
- package/src/tools/neuctra-ui-setup/index.mjs +114 -0
- package/src/tools/neuctra-ui-setup/register.mjs +28 -0
- package/src/tools/neuctra-ui-theme-setup/index.mjs +17 -0
package/README.md
CHANGED
|
@@ -1,463 +1,186 @@
|
|
|
1
1
|
# @neuctra/ui-mcp
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
Antigravity, or anything else that speaks MCP) ground-truth knowledge of the
|
|
5
|
-
[`@neuctra/ui`](../neuctra-ui-package) component library, so they write correct code
|
|
6
|
-
instead of guessing.
|
|
3
|
+
Give your AI coding assistant accurate, ready-to-use knowledge of [`@neuctra/ui`](https://www.npmjs.com/package/@neuctra/ui). The Neuctra UI MCP server helps an assistant set up a project, plan pages, find components with their real props, apply Neuctra design rules, and follow framework-specific SEO guidance.
|
|
7
4
|
|
|
8
|
-
|
|
5
|
+
## What you can do
|
|
9
6
|
|
|
10
|
-
|
|
7
|
+
- Set up Neuctra UI in a React project with the guided setup tool.
|
|
8
|
+
- Plan a tool page, blog, dashboard, form, store page, and more with the page builder.
|
|
9
|
+
- Find the right prebuilt component from a natural-language description and get its exact import, props, and example.
|
|
10
|
+
- Retrieve Neuctra UI theme tokens and design rules.
|
|
11
|
+
- Get SEO, AEO, and GEO rules with implementation guidance for your framework.
|
|
11
12
|
|
|
12
|
-
##
|
|
13
|
+
## Install and connect
|
|
13
14
|
|
|
14
|
-
|
|
15
|
+
You do not need to install this package into your app. Add it as an MCP server in your AI coding client; the client runs it with `npx`.
|
|
15
16
|
|
|
16
|
-
|
|
17
|
-
a small library), it has nothing to recall. It will pattern-match against libraries it
|
|
18
|
-
*does* know (shadcn/ui, MUI, Chakra) and invent plausible-looking but wrong props —
|
|
19
|
-
`<Input variant="outline" />` when your `Input` has no `variant` prop, or
|
|
20
|
-
`<Button color="blue">` when colors come from `bg-primary`-style tokens, not a `color`
|
|
21
|
-
prop.
|
|
22
|
-
- **Read your source files.** Possible, but slow (it has to find and open several
|
|
23
|
-
`.tsx` files), token-expensive, and it still has to reverse-engineer the API from
|
|
24
|
-
implementation code rather than being told it directly.
|
|
17
|
+
### Claude Code
|
|
25
18
|
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
forms?", "what color classes should I use?" — and gets back exact, structured answers
|
|
29
|
-
generated from your actual TypeScript source. No guessing, no file-spelunking.
|
|
30
|
-
|
|
31
|
-
---
|
|
32
|
-
|
|
33
|
-
## 2. How the pieces fit together
|
|
34
|
-
|
|
35
|
-
```
|
|
36
|
-
neuctra-ui-package/src/components/basic/*.tsx (your actual component source)
|
|
37
|
-
│
|
|
38
|
-
│ npm run registry:generate (ts-morph reads props/JSDoc/defaults,
|
|
39
|
-
│ scrapes one description + example per
|
|
40
|
-
│ component from neuctra-ui-docs-v2)
|
|
41
|
-
▼
|
|
42
|
-
neuctra-ui-package/registry/components.json (source of truth)
|
|
43
|
-
│
|
|
44
|
-
│ npm run sync-registry (plain file copy)
|
|
45
|
-
▼
|
|
46
|
-
neuctra-ui-mcp/data/components.json (this package's local copy)
|
|
47
|
-
│
|
|
48
|
-
│ read once at server startup
|
|
49
|
-
▼
|
|
50
|
-
neuctra-ui-mcp/src/server.mjs (defines 5 MCP tools over that data)
|
|
51
|
-
│
|
|
52
|
-
│ spoken over stdio (stdin/stdout), JSON-RPC under the hood
|
|
53
|
-
▼
|
|
54
|
-
Claude Code / Cursor / Antigravity / any MCP client
|
|
19
|
+
```bash
|
|
20
|
+
claude mcp add neuctra-ui -- npx -y @neuctra/ui-mcp
|
|
55
21
|
```
|
|
56
22
|
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
Never edit this by hand; run `npm run sync-registry` after the upstream file changes.
|
|
61
|
-
- **`data/theme.json`** — hand-curated from `neuctra-ui-cli/lib/update-css.js` (the CSS
|
|
62
|
-
the setup CLI generates for consumers). Update it manually if the token set changes —
|
|
63
|
-
it doesn't have an automated generator because it also encodes *rules*, not just data:
|
|
64
|
-
the color-token rules ("never hardcode colors"), the anti-AI-look rules ("no
|
|
65
|
-
gradients/shadows/blurs/glows/emoji-icons"), the recommended `@neuctra/ui-cli init`
|
|
66
|
-
setup command, and how the standalone `toast()` API works.
|
|
67
|
-
- **`data/aiDesignRules.json`** — also hand-curated, no generator. A 63-section
|
|
68
|
-
product/UX design guide (design philosophy, visual hierarchy, page/sidebar/navigation
|
|
69
|
-
structure, per-component usage guidance, spacing/color/border/radius/shadow
|
|
70
|
-
conventions, responsive design, accessibility, and a final UI quality checklist).
|
|
71
|
-
`theme.json`'s `rules`/`antiAiLookRules` are the mechanical, CSS-level rules; this file
|
|
72
|
-
is the higher-level product-design layer — both are served together by
|
|
73
|
-
`get_design_rules`.
|
|
74
|
-
- **`data/seoGuide.json`** — hand-curated, no generator. A 16-topic SEO / AEO / GEO
|
|
75
|
-
playbook (technical SEO, Core Web Vitals, on-page, keywords and intent, E-E-A-T, answer
|
|
76
|
-
engine and generative engine optimisation, schema weaving, FAQs, the per-page meta
|
|
77
|
-
checklist, where metadata goes in each framework plus Next.js metadata gotchas, page
|
|
78
|
-
templates for tool/category/home pages, site-wide essentials, ads readiness, off-page
|
|
79
|
-
and monitoring, and a launch checklist). Served by `get_seo_guide`; the logic behind `generate_page_seo` and
|
|
80
|
-
`audit_page_seo` lives in `src/seo.mjs`.
|
|
81
|
-
|
|
82
|
-
---
|
|
83
|
-
|
|
84
|
-
## 3. What MCP actually is (30-second primer)
|
|
85
|
-
|
|
86
|
-
MCP (**M**odel **C**ontext **P**rotocol) is a standard for connecting an AI assistant to
|
|
87
|
-
external tools. Three roles:
|
|
88
|
-
|
|
89
|
-
- **Host** — the AI app itself (Claude Code, Cursor, Antigravity).
|
|
90
|
-
- **Client** — the part of the host that manages a connection to one server.
|
|
91
|
-
- **Server** — a small program (this package) that exposes **tools** (named actions with
|
|
92
|
-
typed inputs) the AI can decide to call.
|
|
93
|
-
|
|
94
|
-
The host starts your server as a subprocess and talks to it over **stdio** — your
|
|
95
|
-
server's stdout carries JSON-RPC messages, not human-readable logs (that's why
|
|
96
|
-
`bin/cli.mjs` prints nothing except protocol traffic; use `console.error`, never
|
|
97
|
-
`console.log`, if you ever add debug output). On connect, the client asks "what tools do
|
|
98
|
-
you have?", gets back the 5 tool definitions below, and adds them to the AI's available
|
|
99
|
-
actions — the same way the tools listed in *this* conversation's system prompt work.
|
|
100
|
-
From then on, the AI decides on its own when a tool call would help, calls it, and reads
|
|
101
|
-
the result back into its context before continuing.
|
|
102
|
-
|
|
103
|
-
---
|
|
104
|
-
|
|
105
|
-
## 4. Recommended workflow
|
|
106
|
-
|
|
107
|
-
The tools are designed to be called in roughly this order when generating UI, not
|
|
108
|
-
grabbed ad hoc:
|
|
109
|
-
|
|
110
|
-
1. **`neuctra-ui-builder`** — use this for routine UI generation. It infers the UI
|
|
111
|
-
category, returns a focused UX plan, core styling and accessibility rules, relevant
|
|
112
|
-
design-guide sections, component candidates, and preference questions when useful.
|
|
113
|
-
2. Ask any high-impact questions returned in `uxPlan.preferenceQuestions`, then pass
|
|
114
|
-
answers back through `preferences` if they change the implementation.
|
|
115
|
-
3. **`list_components`** (filtered by category) or **`search_components`** (keyword) —
|
|
116
|
-
confirm which real components exist for what you need. This matters specifically
|
|
117
|
-
because the design guide can describe a *pattern* (e.g. a sidebar nav item) without
|
|
118
|
-
there being a dedicated component for it — don't assume one exists, confirm here.
|
|
119
|
-
4. **`get_component`** — full spec for every unfamiliar component before writing code against it.
|
|
120
|
-
Do this every time you touch a component you haven't already pulled specs for in the
|
|
121
|
-
current conversation, not just once at the start. Never guess prop names from memory.
|
|
122
|
-
5. **Write the UI**, applying the design rules, the tokens, and the exact props from
|
|
123
|
-
step 4.
|
|
124
|
-
6. **Self-check** against the "Final UI Quality Checklist" section (§49, found by
|
|
125
|
-
its `number` field in `productDesignGuide.sections` — not by array index) and
|
|
126
|
-
`antiAiLookRules` from `get_design_rules` before considering the UI
|
|
127
|
-
done — reread them, don't just rely on having read them once at the start.
|
|
128
|
-
|
|
129
|
-
7. **For public pages**, call **`get_seo_guide`** once, then **`generate_page_seo`** for
|
|
130
|
-
each page (meta, OpenGraph and a woven JSON-LD graph in the project's framework) and
|
|
131
|
-
**`audit_page_seo`** to check the finished page.
|
|
132
|
-
|
|
133
|
-
Call `get_design_rules` for broad design reviews or unresolved edge cases, and `get_theme`
|
|
134
|
-
when the complete token/setup reference is needed. The full guide remains the source of
|
|
135
|
-
truth; the builder selects relevant sections for each request.
|
|
136
|
-
|
|
137
|
-
---
|
|
138
|
-
|
|
139
|
-
## 5. The nine tools, in detail
|
|
140
|
-
|
|
141
|
-
### `neuctra-ui-builder`
|
|
142
|
-
|
|
143
|
-
Creates a compact, category-aware brief for the host model. It infers or accepts a UI
|
|
144
|
-
category, selects relevant UX rules and component candidates, includes essential Neuctra
|
|
145
|
-
styling rules and semantic token names, and asks about visual direction, density, or the
|
|
146
|
-
primary action when those preferences are missing. It plans and curates context; the host
|
|
147
|
-
model writes the UI. Use `get_component` for exact props before implementing an unfamiliar
|
|
148
|
-
component.
|
|
149
|
-
|
|
150
|
-
**Input:** `{ request: string, category?: "auto" | "dashboard" | "landing-page" | "form" | "settings" | "authentication" | "data-table" | "ecommerce" | "documentation" | "custom", preferences?: { visualDirection?, density?, primaryAction?, platform?, audience? } }`
|
|
23
|
+
### Cursor
|
|
24
|
+
|
|
25
|
+
Add this server to your project’s `.cursor/mcp.json` (create the file if needed):
|
|
151
26
|
|
|
152
27
|
```json
|
|
153
28
|
{
|
|
154
|
-
"
|
|
155
|
-
|
|
156
|
-
|
|
29
|
+
"mcpServers": {
|
|
30
|
+
"neuctra-ui": {
|
|
31
|
+
"command": "npx",
|
|
32
|
+
"args": ["-y", "@neuctra/ui-mcp"]
|
|
33
|
+
}
|
|
34
|
+
}
|
|
157
35
|
}
|
|
158
36
|
```
|
|
159
37
|
|
|
160
|
-
###
|
|
38
|
+
### Other MCP clients
|
|
161
39
|
|
|
162
|
-
|
|
163
|
-
(no props) — meant for browsing, not for writing code against.
|
|
40
|
+
Add a server with command `npx` and arguments `-y`, `@neuctra/ui-mcp`. If your client uses JSON configuration, the server entry is:
|
|
164
41
|
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
[
|
|
171
|
-
{ "name": "Calendar", "category": "form", "description": "", "propCount": 9 },
|
|
172
|
-
{ "name": "Checkbox", "category": "form", "description": "A flexible checkbox component...", "propCount": 29 },
|
|
173
|
-
{ "name": "DatePicker", "category": "form", "description": "", "propCount": 15 }
|
|
174
|
-
// ...
|
|
175
|
-
]
|
|
42
|
+
```json
|
|
43
|
+
{
|
|
44
|
+
"command": "npx",
|
|
45
|
+
"args": ["-y", "@neuctra/ui-mcp"]
|
|
46
|
+
}
|
|
176
47
|
```
|
|
177
48
|
|
|
178
|
-
|
|
49
|
+
Restart or reload your AI client after changing its MCP settings. On first launch, `npx` downloads the package from npm.
|
|
179
50
|
|
|
180
|
-
|
|
181
|
-
type, whether it's required, its default value, its JSDoc description if it has one,
|
|
182
|
-
and a real usage snippet. The AI is instructed (via the tool's own description) to call
|
|
183
|
-
this before writing code against any component it hasn't already used in the
|
|
184
|
-
conversation.
|
|
51
|
+
## Recommended workflow
|
|
185
52
|
|
|
186
|
-
|
|
53
|
+
1. Ask your assistant to analyze the current project with `neuctra-ui-setup`.
|
|
54
|
+
2. Use `neuctra-ui-page-builder` to plan a page from its goal and user needs.
|
|
55
|
+
3. Use the returned component specs and examples to implement the page. For additional component discovery, call `get-neuctra-ui-component`.
|
|
56
|
+
4. Use `neuctra-ui-theme-setup` and `get_design_rules` for theme tokens, composition guidance, accessibility, and visual rules.
|
|
57
|
+
5. For public pages, use `neuctra-ui-seo-setup` with the project’s framework so the assistant can apply the right SEO steps.
|
|
187
58
|
|
|
188
|
-
|
|
189
|
-
```jsonc
|
|
190
|
-
// get_component({ name: "Button" })
|
|
191
|
-
{
|
|
192
|
-
"name": "Button",
|
|
193
|
-
"category": "actions",
|
|
194
|
-
"description": "The Button component is a flexible, highly customizable UI primitive...",
|
|
195
|
-
"props": [
|
|
196
|
-
{ "name": "children", "type": "React.ReactNode", "required": false, "default": null,
|
|
197
|
-
"description": "Optional so icon-only buttons are possible — pair with `aria-label`." },
|
|
198
|
-
{ "name": "loading", "type": "boolean", "required": false, "default": "false", "description": "" },
|
|
199
|
-
{ "name": "variant", "type": "\"default\" | \"outline\" | \"ghost\" | \"secondary\" | \"destructive\" | \"success\" | \"warning\" | \"info\"", "required": false, "default": null, "description": "" }
|
|
200
|
-
// ...
|
|
201
|
-
],
|
|
202
|
-
"example": "import { Button } from '@neuctra/ui';\n\nfunction BasicExample() {\n return (\n <Button onClick={() => console.log('Button clicked')}>\n Click Me\n </Button>\n );\n}"
|
|
203
|
-
}
|
|
204
|
-
```
|
|
59
|
+
The assistant writes the application code. The page builder supplies a layout plan and verified component guidance; it does not generate an entire page file by itself.
|
|
205
60
|
|
|
206
|
-
|
|
207
|
-
substring-matched suggestions (e.g. asking for `"Inpu"` suggests `"Input"`), so the AI
|
|
208
|
-
can self-correct instead of giving up.
|
|
61
|
+
## Available tools
|
|
209
62
|
|
|
210
|
-
### `
|
|
63
|
+
### `neuctra-ui-setup`
|
|
211
64
|
|
|
212
|
-
|
|
213
|
-
state", "icon button". Matches against name, category, description, and prop names.
|
|
65
|
+
Analyze a project and guide or run Neuctra UI setup.
|
|
214
66
|
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
{ "name": "TagInput", ... } // matched because it has an "updatedAt"-style prop, etc.
|
|
222
|
-
]
|
|
223
|
-
```
|
|
224
|
-
|
|
225
|
-
### `get_theme`
|
|
67
|
+
- First call with `action: "analyze"` to detect the existing framework and project state.
|
|
68
|
+
- Then call with `action: "setup"` and choose `setupMode: "cli"` or `"manual"`.
|
|
69
|
+
- Supported setup frameworks: `nextjs`, `vite`, `remix`, and `react-router`.
|
|
70
|
+
- If no framework is specified, Next.js App Router with JavaScript, Tailwind, and static export is the recommended default.
|
|
71
|
+
- Existing matching projects are initialized in place. Replacing or clearing files requires explicit confirmation.
|
|
72
|
+
- CLI setup runs `npx @neuctra/ui-cli@latest init` and installs `lucide-react`.
|
|
226
73
|
|
|
227
|
-
|
|
228
|
-
pointing the AI at the `@neuctra/ui-cli` `init` command instead of hand-writing token CSS
|
|
229
|
-
or a theme context, and a **toastNote** explaining the standalone `toast()` import.
|
|
230
|
-
Without `get_theme`, an AI would happily write `className="bg-blue-500"`, ignoring the
|
|
231
|
-
consumer's actual theme. `get_theme` does **not** carry the design/anti-AI-look rules —
|
|
232
|
-
see `get_design_rules` below for those; call both together, not one instead of the other.
|
|
74
|
+
Example analyze request:
|
|
233
75
|
|
|
234
|
-
|
|
235
|
-
```jsonc
|
|
76
|
+
```json
|
|
236
77
|
{
|
|
237
|
-
"
|
|
238
|
-
"tokens": [
|
|
239
|
-
{ "token": "primary", "className": "bg-primary / text-primary / border-primary",
|
|
240
|
-
"pairsWith": "primary-foreground", "light": "#00c214", "dark": "#00c214",
|
|
241
|
-
"usage": "Brand color: primary buttons, active states, links, focus accents." },
|
|
242
|
-
// ...23 tokens total
|
|
243
|
-
],
|
|
244
|
-
"note": "Values shown are the CLI-generated defaults...",
|
|
245
|
-
"setup": {
|
|
246
|
-
"recommendedCommand": "npx @neuctra/ui-cli@latest init",
|
|
247
|
-
"whatItDoes": ["Installs @neuctra/ui.", "Checks/upgrades React and Tailwind CSS.", "..."],
|
|
248
|
-
"whenToSuggestIt": "..."
|
|
249
|
-
},
|
|
250
|
-
"toastNote": "@neuctra/ui's toast notification system is a standalone function..."
|
|
78
|
+
"action": "analyze"
|
|
251
79
|
}
|
|
252
80
|
```
|
|
253
81
|
|
|
254
|
-
|
|
82
|
+
Example setup request after selecting Next.js and CLI setup:
|
|
255
83
|
|
|
256
|
-
|
|
257
|
-
**`stylingRules`** (token usage, surface/background conventions, component composition
|
|
258
|
-
requirements — e.g. `CardBody` is compulsory whenever `Card` has body content, since
|
|
259
|
-
`Card` itself renders no padding — and component-specific gotchas like Dropdown's
|
|
260
|
-
trigger already stopping propagation internally) and **`antiAiLookRules`** (no
|
|
261
|
-
gradients/shadows/blurs/glows/emoji-icons/em-dashes — the visual tells that make UI read
|
|
262
|
-
as AI-generated), plus **`productDesignGuide`** — a 63-section product/UX design guide
|
|
263
|
-
covering design philosophy, visual hierarchy, page/sidebar/navigation structure,
|
|
264
|
-
per-component usage guidance (when to reach for `Card` vs plain whitespace, `Modal` vs
|
|
265
|
-
`Drawer`, `Table` vs `List`, etc.), spacing/color/border/radius/shadow conventions,
|
|
266
|
-
responsive design, accessibility, interaction design, and a final UI quality checklist.
|
|
267
|
-
|
|
268
|
-
Use this for full-guide reviews and edge cases. For routine generation, use
|
|
269
|
-
`neuctra-ui-builder` to retrieve the rules relevant to the request.
|
|
270
|
-
|
|
271
|
-
**Response shape (trimmed):**
|
|
272
|
-
```jsonc
|
|
84
|
+
```json
|
|
273
85
|
{
|
|
274
|
-
"
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
// ...9 rules total
|
|
278
|
-
],
|
|
279
|
-
"antiAiLookRules": [
|
|
280
|
-
"No gradients, compulsory...",
|
|
281
|
-
"No shadows, compulsory...",
|
|
282
|
-
"No blur effects, compulsory...",
|
|
283
|
-
// ...17 rules total
|
|
284
|
-
],
|
|
285
|
-
"productDesignGuide": {
|
|
286
|
-
"title": "Neuctra UI — AI Design Rules",
|
|
287
|
-
"intro": "You are a senior product designer and frontend UI engineer using `@neuctra/ui`...",
|
|
288
|
-
"sections": [
|
|
289
|
-
{ "number": 1, "title": "Core Design Philosophy", "content": "..." },
|
|
290
|
-
{ "number": 7, "title": "Cards", "content": "..." },
|
|
291
|
-
// ...63 sections total
|
|
292
|
-
],
|
|
293
|
-
"goldenRule": { "title": "Golden Rule", "content": "..." }
|
|
294
|
-
}
|
|
86
|
+
"action": "setup",
|
|
87
|
+
"framework": "nextjs",
|
|
88
|
+
"setupMode": "cli"
|
|
295
89
|
}
|
|
296
90
|
```
|
|
297
91
|
|
|
298
|
-
### `
|
|
92
|
+
### `neuctra-ui-page-builder`
|
|
299
93
|
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
`site-wide`, `ads-readiness`, `off-page-monitoring`, `launch-checklist`).
|
|
94
|
+
Describe the page and the task it should support. The tool infers a page type, selects a matching layout recipe, and combines it with relevant Neuctra UI component specs, design rules, and framework-aware SEO guidance.
|
|
95
|
+
|
|
96
|
+
Supported page recipes include tool pages, blog pages, dashboards, landing pages, forms, authentication, settings, data tables, ecommerce, documentation, and custom pages.
|
|
304
97
|
|
|
305
98
|
```json
|
|
306
|
-
{
|
|
99
|
+
{
|
|
100
|
+
"request": "Build an online image compressor with upload, preview, and download steps.",
|
|
101
|
+
"pageType": "auto",
|
|
102
|
+
"framework": "auto"
|
|
103
|
+
}
|
|
307
104
|
```
|
|
308
105
|
|
|
309
|
-
|
|
106
|
+
Use `pageType: "auto"` to infer the layout from the request. The assistant can also choose a specific page type, such as `tool-page`, `blog-page`, or `dashboard`. Use `framework: "auto"` to have the assistant identify the project framework, or provide a framework such as `nextjs-app`, `react-vite`, `react-router`, or `remix`.
|
|
310
107
|
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
BreadcrumbList, the page-type node (TechArticle, BlogPosting, SoftwareApplication for
|
|
315
|
-
tool and product pages, Product with offers), HowTo (from the visible `steps`), ItemList
|
|
316
|
-
(from a category's `items`) and FAQPage together by stable `@id`s (the same scheme as
|
|
317
|
-
`neuctra-ui-docs-v2/lib/seo/schemas`). Returns a ready-to-paste snippet for
|
|
318
|
-
`nextjs-app`, `nextjs-pages`, `react-vite`, `react-router`, `astro`, `tanstack-start`,
|
|
319
|
-
`gatsby` or `html`, plus warnings and AEO/GEO follow-ups.
|
|
108
|
+
### `get-neuctra-ui-component`
|
|
109
|
+
|
|
110
|
+
Find components by describing what the interface needs. Results include the component’s exact package import, full prop definitions, and documented usage example.
|
|
320
111
|
|
|
321
112
|
```json
|
|
322
113
|
{
|
|
323
|
-
"
|
|
324
|
-
"
|
|
325
|
-
"siteName": "Neuctra UI",
|
|
326
|
-
"siteUrl": "https://ui.neuctra.com",
|
|
327
|
-
"path": "/docs/card",
|
|
328
|
-
"primaryKeyword": "react card component",
|
|
329
|
-
"description": "Composable React card component with header, body and footer sections...",
|
|
330
|
-
"faqs": [{ "question": "Does Card support dark mode?", "answer": "Yes. ..." }]
|
|
114
|
+
"request": "A responsive carousel for product images",
|
|
115
|
+
"limit": 3
|
|
331
116
|
}
|
|
332
117
|
```
|
|
333
118
|
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
Rule-based check of one page. The easiest input is the page's built HTML (`html`, from
|
|
337
|
-
view-source or the `out/` / `dist/` folder): title, description, canonical, headings,
|
|
338
|
-
og:image, JSON-LD types, alt text and word count are extracted from it. Explicit fields
|
|
339
|
-
override the extracted ones, and checks without input are skipped. It catches doubled or
|
|
340
|
-
missing brand suffixes (with `brandName`), duplicate schema nodes, JSON-LD that doesn't
|
|
341
|
-
parse, and pages that render client-only (no H1 in the HTML). Returns a 0–100 score and a sorted
|
|
342
|
-
list of `fail` / `warn` / `pass` items, each with the exact fix.
|
|
119
|
+
You can also provide an exact `componentName` such as `Container`, `Input`, `Carousel`, `Card`, `Modal`, or `Drawer`. Use `category` to browse a component group (`layout`, `typography`, `form`, `actions`, `data-display`, `feedback`, `overlay`, or `navigation`).
|
|
343
120
|
|
|
344
|
-
|
|
121
|
+
Example component usage:
|
|
345
122
|
|
|
346
|
-
|
|
123
|
+
```jsx
|
|
124
|
+
import { Container } from "@neuctra/ui";
|
|
347
125
|
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
126
|
+
function BasicExample() {
|
|
127
|
+
return (
|
|
128
|
+
<Container size="md" center className="bg-zinc-800 p-4 rounded-lg">
|
|
129
|
+
Hello Developer! I am a container.
|
|
130
|
+
</Container>
|
|
131
|
+
);
|
|
132
|
+
}
|
|
352
133
|
```
|
|
353
134
|
|
|
354
|
-
|
|
355
|
-
to it, not for a human to type at it). To actually exercise it, either wire it into a
|
|
356
|
-
real client (section 7) or write a small script using
|
|
357
|
-
`@modelcontextprotocol/sdk`'s `Client` + `StdioClientTransport` to spawn `bin/cli.mjs`
|
|
358
|
-
and call the tools programmatically — that's how this server was verified while building
|
|
359
|
-
it.
|
|
135
|
+
Check the returned props and example before using a component. Component APIs can differ from similarly named components in other libraries.
|
|
360
136
|
|
|
361
|
-
|
|
137
|
+
### `neuctra-ui-theme-setup`
|
|
362
138
|
|
|
363
|
-
|
|
139
|
+
Returns the Neuctra UI semantic theme tokens, Tailwind theme mappings, and theme setup guidance. Use these tokens (such as `bg-primary` and `text-foreground`) so components work with the configured light and dark themes. The tool also explains the `toast()` API.
|
|
364
140
|
|
|
365
|
-
|
|
366
|
-
file lives.
|
|
141
|
+
### `get_design_rules`
|
|
367
142
|
|
|
368
|
-
|
|
369
|
-
```bash
|
|
370
|
-
claude mcp add neuctra-ui -- npx -y @neuctra/ui-mcp
|
|
371
|
-
```
|
|
372
|
-
or by hand in `.mcp.json` at the repo root:
|
|
373
|
-
```json
|
|
374
|
-
{
|
|
375
|
-
"mcpServers": {
|
|
376
|
-
"neuctra-ui": { "command": "npx", "args": ["-y", "@neuctra/ui-mcp"] }
|
|
377
|
-
}
|
|
378
|
-
}
|
|
379
|
-
```
|
|
143
|
+
Returns Neuctra UI’s design guidance, including component composition requirements, theme usage, accessibility, responsive behavior, spacing, hierarchy, and visual consistency. Use it when planning or reviewing an interface. The page builder includes the rules most relevant to its selected page layout.
|
|
380
144
|
|
|
381
|
-
|
|
382
|
-
(project) / `~/.cursor/mcp.json` (global) with the same JSON shape as above.
|
|
145
|
+
### `neuctra-ui-seo-setup`
|
|
383
146
|
|
|
384
|
-
|
|
385
|
-
using the same `mcpServers` shape (or a form asking for command + args — use `npx` and
|
|
386
|
-
`-y @neuctra/ui-mcp`).
|
|
147
|
+
Returns the complete SEO, AEO, and GEO rules and ordered implementation steps. Framework matters: Next.js metadata APIs differ from Vite React, Remix, and React Router. Pass a framework or use `auto` and give the assistant the project context when useful.
|
|
387
148
|
|
|
388
|
-
**Local development, any client** (before publishing, or to test changes):
|
|
389
149
|
```json
|
|
390
150
|
{
|
|
391
|
-
"
|
|
392
|
-
|
|
393
|
-
"command": "node",
|
|
394
|
-
"args": ["/absolute/path/to/neuctra-ui-mcp/bin/cli.mjs"]
|
|
395
|
-
}
|
|
396
|
-
}
|
|
151
|
+
"framework": "auto",
|
|
152
|
+
"projectContext": "React Router app using server rendering"
|
|
397
153
|
}
|
|
398
154
|
```
|
|
399
155
|
|
|
400
|
-
|
|
156
|
+
The guidance covers titles and descriptions, keyword and search intent, heading structure, canonical URLs, robots directives, sitemaps, structured data (JSON-LD), visible FAQs, performance, trust signals, and framework-specific implementation. It is a reference for the assistant; it does not generate a one-off metadata snippet or audit a page.
|
|
401
157
|
|
|
402
|
-
|
|
158
|
+
## Tips for better results
|
|
403
159
|
|
|
404
|
-
|
|
160
|
+
- Describe the page’s purpose and the user’s main task, not just its visual style.
|
|
161
|
+
- Mention the framework and router when you know them.
|
|
162
|
+
- Include important constraints such as mobile-first layout, primary actions, or existing project conventions.
|
|
163
|
+
- Ask the assistant to inspect component specs before writing code with unfamiliar components.
|
|
164
|
+
- For public pages, ask it to keep metadata and JSON-LD consistent with content that is actually visible.
|
|
405
165
|
|
|
406
|
-
|
|
166
|
+
## Troubleshooting
|
|
407
167
|
|
|
408
|
-
|
|
409
|
-
cd neuctra-ui-package
|
|
410
|
-
npm run registry:generate # re-parses source, re-scrapes docs examples
|
|
168
|
+
**The tools do not appear in my client**
|
|
411
169
|
|
|
412
|
-
|
|
413
|
-
npm run sync-registry # copies the updated file in
|
|
414
|
-
```
|
|
170
|
+
Check that the MCP server entry uses command `npx` with arguments `-y` and `@neuctra/ui-mcp`, then restart or reload the client. Confirm that Node.js and npm are installed and available to the client process.
|
|
415
171
|
|
|
416
|
-
|
|
417
|
-
`prepublishOnly`, and `sync-registry` runs automatically as part of this package's own
|
|
418
|
-
`prepublishOnly` — so a normal `npm publish` in each package keeps things current without
|
|
419
|
-
remembering these steps by hand. `data/theme.json` and `data/aiDesignRules.json` are the
|
|
420
|
-
two files with no generator; edit them directly — `theme.json` if the token set in
|
|
421
|
-
`neuctra-ui-cli/lib/update-css.js` ever changes or a rule needs adding, `aiDesignRules.json`
|
|
422
|
-
if the product-design guidance itself needs revising.
|
|
172
|
+
**The assistant selected the wrong page layout**
|
|
423
173
|
|
|
424
|
-
|
|
174
|
+
Specify `pageType` directly (for example, `tool-page`, `blog-page`, or `dashboard`) and describe the main user task more clearly.
|
|
425
175
|
|
|
426
|
-
|
|
176
|
+
**The assistant is unsure which component to use**
|
|
427
177
|
|
|
428
|
-
|
|
429
|
-
npm run sync-registry
|
|
430
|
-
npm publish --access public # --access public is required: scoped packages default to private
|
|
431
|
-
```
|
|
432
|
-
|
|
433
|
-
---
|
|
178
|
+
Call `get-neuctra-ui-component` with a concrete need, such as “date input with calendar selection” or “drawer for mobile filters.” Review the returned component names and props before implementation.
|
|
434
179
|
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
```
|
|
438
|
-
neuctra-ui-mcp/
|
|
439
|
-
├── bin/
|
|
440
|
-
│ └── cli.mjs # entry point: connects the server to a stdio transport
|
|
441
|
-
├── src/
|
|
442
|
-
│ ├── server.mjs # defines the 9 tools and their handlers
|
|
443
|
-
│ └── seo.mjs # pure builders behind generate_page_seo / audit_page_seo
|
|
444
|
-
├── scripts/
|
|
445
|
-
│ └── sync-registry.mjs # copies registry/components.json from neuctra-ui-package
|
|
446
|
-
├── data/
|
|
447
|
-
│ ├── components.json # synced (generated) — don't edit by hand
|
|
448
|
-
│ ├── theme.json # hand-curated token + styling/anti-AI-look rules
|
|
449
|
-
│ ├── aiDesignRules.json # hand-curated 63-section product/UX design guide
|
|
450
|
-
│ └── seoGuide.json # hand-curated SEO / AEO / GEO playbook
|
|
451
|
-
└── package.json
|
|
452
|
-
```
|
|
180
|
+
**SEO instructions do not match my app**
|
|
453
181
|
|
|
454
|
-
|
|
182
|
+
Pass the actual framework and router, such as `nextjs-app`, `react-vite`, `react-router`, or `remix`. For `auto`, provide relevant project details or ask the assistant to inspect the project configuration first.
|
|
455
183
|
|
|
456
|
-
##
|
|
184
|
+
## License
|
|
457
185
|
|
|
458
|
-
|
|
459
|
-
`list_categories`), open `src/server.mjs` and add another `server.registerTool(...)`
|
|
460
|
-
call following the existing pattern: a name, a `title`/`description` (the description is
|
|
461
|
-
what the AI reads to decide *when* to call it — be specific), a `zod` input schema, and
|
|
462
|
-
an async handler returning `{ content: [{ type: "text", text: ... }] }`. No other file
|
|
463
|
-
needs to change — `bin/cli.mjs` just connects whatever `createServer()` returns.
|
|
186
|
+
MIT
|