@primereact/mcp 11.0.0-rc.3 → 11.0.0-rc.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 +8 -9
- package/data/llms/headless/components/carousel/api.json +1 -1
- package/data/llms/headless/components/contextmenu/api.json +2 -2
- package/data/llms/headless/components/inputcolor/api.json +1 -1
- package/data/llms/headless/components/menu/api.json +2 -2
- package/data/llms/headless/guides/ai/mcp.md +9 -9
- package/data/llms/headless/guides/ai/plugin.md +12 -11
- package/data/llms/llms-full.txt +109 -99
- package/data/llms/primitive/components/carousel/api.json +1 -1
- package/data/llms/primitive/components/contextmenu/api.json +2 -2
- package/data/llms/primitive/components/inputcolor/api.json +1 -1
- package/data/llms/primitive/components/menu/api.json +8 -8
- package/data/llms/primitive/guides/ai/mcp.md +9 -9
- package/data/llms/primitive/guides/ai/plugin.md +12 -11
- package/data/llms/styled/components/dialog.md +11 -8
- package/data/llms/styled/components/fileupload.md +3 -3
- package/data/llms/styled/guides/ai/mcp.md +9 -9
- package/data/llms/styled/guides/ai/plugin.md +12 -11
- package/data/llms/tailwind/components/dialog.md +11 -8
- package/data/llms/tailwind/guides/ai/mcp.md +9 -9
- package/data/llms/tailwind/guides/ai/plugin.md +12 -11
- package/data/manifest.json +46 -46
- package/data/mcp-data.json +4 -4
- package/dist/index.js +1 -1
- package/package.json +7 -3
|
@@ -1312,7 +1312,7 @@
|
|
|
1312
1312
|
},
|
|
1313
1313
|
{
|
|
1314
1314
|
"name": "getItemProps",
|
|
1315
|
-
"type": "(value: unknown
|
|
1315
|
+
"type": "(value: unknown) => UseCarouselItemProps",
|
|
1316
1316
|
"default": "",
|
|
1317
1317
|
"description": "Returns props for an individual carousel item."
|
|
1318
1318
|
},
|
|
@@ -1781,7 +1781,7 @@
|
|
|
1781
1781
|
"description": "The original browser event that triggered the change."
|
|
1782
1782
|
},
|
|
1783
1783
|
{
|
|
1784
|
-
"name": "
|
|
1784
|
+
"name": "value",
|
|
1785
1785
|
"type": "boolean",
|
|
1786
1786
|
"default": "",
|
|
1787
1787
|
"description": "The open state of the menu."
|
|
@@ -2298,7 +2298,7 @@
|
|
|
2298
2298
|
"description": "The original browser event that triggered the change."
|
|
2299
2299
|
},
|
|
2300
2300
|
{
|
|
2301
|
-
"name": "
|
|
2301
|
+
"name": "value",
|
|
2302
2302
|
"type": "boolean",
|
|
2303
2303
|
"default": "",
|
|
2304
2304
|
"description": "The open state of the submenu."
|
|
@@ -1176,7 +1176,7 @@
|
|
|
1176
1176
|
},
|
|
1177
1177
|
{
|
|
1178
1178
|
"name": "getInputProps",
|
|
1179
|
-
"type": "(options?: { channel?: ColorInputChannel; disabled?: boolean }) => { data-scope: \"inputcolor\"; data-part: \"input\"; type: \"number\" | \"text\"; spellCheck: boolean; autoComplete: \"off\"; disabled: boolean; data-channel: ColorInputChannel; aria-label: ColorInputChannel; min: number; max: number; step: number;
|
|
1179
|
+
"type": "(options?: { channel?: ColorInputChannel; disabled?: boolean }) => { data-scope: \"inputcolor\"; data-part: \"input\"; type: \"number\" | \"text\"; spellCheck: boolean; autoComplete: \"off\"; disabled: boolean; data-channel: ColorInputChannel; aria-label: ColorInputChannel; min: number; max: number; step: number; value: string | number; onChange: (event: ChangeEvent<HTMLInputElement>) => void; onBlur: (event: FocusEvent<HTMLInputElement>) => void; onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void }",
|
|
1180
1180
|
"default": "",
|
|
1181
1181
|
"description": "Provides input props for a color channel."
|
|
1182
1182
|
},
|
|
@@ -2582,7 +2582,7 @@
|
|
|
2582
2582
|
"description": "The original browser event that triggered the change."
|
|
2583
2583
|
},
|
|
2584
2584
|
{
|
|
2585
|
-
"name": "
|
|
2585
|
+
"name": "value",
|
|
2586
2586
|
"type": "boolean",
|
|
2587
2587
|
"default": "",
|
|
2588
2588
|
"description": "The open state of the menu."
|
|
@@ -3217,7 +3217,7 @@
|
|
|
3217
3217
|
"description": "The original browser event that triggered the change."
|
|
3218
3218
|
},
|
|
3219
3219
|
{
|
|
3220
|
-
"name": "
|
|
3220
|
+
"name": "value",
|
|
3221
3221
|
"type": "boolean",
|
|
3222
3222
|
"default": "",
|
|
3223
3223
|
"description": "The open state of the submenu."
|
|
@@ -3326,6 +3326,12 @@
|
|
|
3326
3326
|
"default": "false",
|
|
3327
3327
|
"description": "Default open state for uncontrolled mode."
|
|
3328
3328
|
},
|
|
3329
|
+
{
|
|
3330
|
+
"name": "disabled",
|
|
3331
|
+
"type": "boolean",
|
|
3332
|
+
"default": "false",
|
|
3333
|
+
"description": "Whether the submenu is disabled."
|
|
3334
|
+
},
|
|
3329
3335
|
{
|
|
3330
3336
|
"name": "openDelay",
|
|
3331
3337
|
"type": "number",
|
|
@@ -3344,12 +3350,6 @@
|
|
|
3344
3350
|
"default": "true",
|
|
3345
3351
|
"description": "When true, the submenu opens on pointer hover over the subtrigger."
|
|
3346
3352
|
},
|
|
3347
|
-
{
|
|
3348
|
-
"name": "disabled",
|
|
3349
|
-
"type": "boolean",
|
|
3350
|
-
"default": "false",
|
|
3351
|
-
"description": "Whether the submenu is disabled."
|
|
3352
|
-
},
|
|
3353
3353
|
{
|
|
3354
3354
|
"name": "onOpenChange",
|
|
3355
3355
|
"type": "(event: MenuSubmenuOpenChangeEvent) => void",
|
|
@@ -4,7 +4,7 @@ Connect AI assistants to PrimeReact component documentation, guides, examples, s
|
|
|
4
4
|
|
|
5
5
|
## Introduction
|
|
6
6
|
|
|
7
|
-
[Model Context Protocol (MCP)](https://modelcontextprotocol.io/) lets AI assistants call external tools. The `@primereact/mcp
|
|
7
|
+
[Model Context Protocol (MCP)](https://modelcontextprotocol.io/) lets AI assistants call external tools. The `@primereact/mcp` package uses those tools to search and read the PrimeReact documentation included with the package.
|
|
8
8
|
|
|
9
9
|
- Find components, guides, examples, setup instructions, and hooks.
|
|
10
10
|
- Read mode-scoped component APIs and documentation sections.
|
|
@@ -15,11 +15,11 @@ The server requires Node.js 22 or newer. It is read-only and does not change you
|
|
|
15
15
|
|
|
16
16
|
## CLI Setup
|
|
17
17
|
|
|
18
|
-
The recommended setup is the [PrimeReact Plugin](./plugin). It installs this MCP server together with the PrimeReact skills for implementation, setup, theming,
|
|
18
|
+
The recommended setup is the [PrimeReact Plugin](./plugin). It installs this MCP server together with the PrimeReact skills for implementation, setup, theming, accessibility, and troubleshooting.
|
|
19
19
|
|
|
20
20
|
```bash
|
|
21
|
-
pnpm dlx @primeui/cli
|
|
22
|
-
pnpm dlx @primeui/cli
|
|
21
|
+
pnpm dlx @primeui/cli plugin install --tool copilot --library primereact
|
|
22
|
+
pnpm dlx @primeui/cli doctor --tool copilot --library primereact
|
|
23
23
|
```
|
|
24
24
|
|
|
25
25
|
Replace `copilot` with `claude`, `codex`, `gemini`, or `cursor` for another supported assistant. Use Manual Setup when you want the MCP server without the plugin skills.
|
|
@@ -31,7 +31,7 @@ Replace `copilot` with `claude`, `codex`, `gemini`, or `cursor` for another supp
|
|
|
31
31
|
Add the server to your user configuration to use it in every project, or omit `-s user` for the current project only.
|
|
32
32
|
|
|
33
33
|
```bash
|
|
34
|
-
claude mcp add primereact -s user -- npx -y @primereact/mcp
|
|
34
|
+
claude mcp add primereact -s user -- npx -y @primereact/mcp
|
|
35
35
|
```
|
|
36
36
|
|
|
37
37
|
See the [Claude Code MCP documentation](https://docs.anthropic.com/en/docs/claude-code/mcp) for client-specific options.
|
|
@@ -45,7 +45,7 @@ Create `.vscode/mcp.json` for project-level setup. To use the server across proj
|
|
|
45
45
|
"servers": {
|
|
46
46
|
"primereact": {
|
|
47
47
|
"command": "npx",
|
|
48
|
-
"args": ["-y", "@primereact/mcp
|
|
48
|
+
"args": ["-y", "@primereact/mcp"]
|
|
49
49
|
}
|
|
50
50
|
}
|
|
51
51
|
}
|
|
@@ -58,13 +58,13 @@ See the [VS Code MCP documentation](https://code.visualstudio.com/docs/copilot/c
|
|
|
58
58
|
Add the server with the Codex CLI, or add the same configuration to `~/.codex/config.toml`.
|
|
59
59
|
|
|
60
60
|
```bash
|
|
61
|
-
codex mcp add primereact -- npx -y @primereact/mcp
|
|
61
|
+
codex mcp add primereact -- npx -y @primereact/mcp
|
|
62
62
|
```
|
|
63
63
|
|
|
64
64
|
```toml
|
|
65
65
|
[mcp_servers.primereact]
|
|
66
66
|
command = "npx"
|
|
67
|
-
args = ["-y", "@primereact/mcp
|
|
67
|
+
args = ["-y", "@primereact/mcp"]
|
|
68
68
|
```
|
|
69
69
|
|
|
70
70
|
See the [OpenAI Codex MCP documentation](https://developers.openai.com/codex/mcp/) for more details.
|
|
@@ -78,7 +78,7 @@ Create `.cursor/mcp.json` in your project or `~/.cursor/mcp.json` for global con
|
|
|
78
78
|
"mcpServers": {
|
|
79
79
|
"primereact": {
|
|
80
80
|
"command": "npx",
|
|
81
|
-
"args": ["-y", "@primereact/mcp
|
|
81
|
+
"args": ["-y", "@primereact/mcp"]
|
|
82
82
|
}
|
|
83
83
|
}
|
|
84
84
|
}
|
|
@@ -6,21 +6,21 @@ Install PrimeReact workflow skills and the PrimeReact MCP server in a supported
|
|
|
6
6
|
|
|
7
7
|
The PrimeReact Plugin adds PrimeReact skills and the PrimeReact MCP server to Claude Code, Codex, GitHub Copilot, Cursor, or Gemini CLI. Plugins installed through GitHub Copilot CLI are also available in VS Code. Install the plugin when you want the assistant to follow PrimeReact-specific, mode-aware workflows as well as read the current component documentation.
|
|
8
8
|
|
|
9
|
-
The plugin is published from the [primefaces/primeui-plugins](https://github.com/primefaces/primeui-plugins) repository. Use `@primeui/cli
|
|
9
|
+
The plugin is published from the [primefaces/primeui-plugins](https://github.com/primefaces/primeui-plugins) repository. Use `@primeui/cli` for the same installation flow across supported assistants, or follow the manual setup for your client.
|
|
10
10
|
|
|
11
11
|
## What It Installs
|
|
12
12
|
|
|
13
13
|
Installing the PrimeReact Plugin adds:
|
|
14
14
|
|
|
15
|
-
-
|
|
16
|
-
- The PrimeReact MCP server, configured with `@primereact/mcp
|
|
15
|
+
- Six focused skills covering routing, implementation, setup, theming, accessibility, and troubleshooting.
|
|
16
|
+
- The PrimeReact MCP server, configured with `@primereact/mcp`.
|
|
17
17
|
- The manifest required by the selected assistant.
|
|
18
18
|
|
|
19
19
|
PrimeVue and PrimeNG are separate plugins. Installing this plugin does not change your application or install PrimeReact dependencies in the project.
|
|
20
20
|
|
|
21
21
|
## Skills
|
|
22
22
|
|
|
23
|
-
Each skill covers one type of PrimeReact work. The skills use `@primereact/mcp
|
|
23
|
+
Each skill covers one type of PrimeReact work. The skills use `@primereact/mcp` when they need mode-scoped component APIs, examples, setup guides, hooks, or usage validation.
|
|
24
24
|
|
|
25
25
|
| Skill | Use it for |
|
|
26
26
|
| ------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
|
|
@@ -29,9 +29,10 @@ Each skill covers one type of PrimeReact work. The skills use `@primereact/mcp@1
|
|
|
29
29
|
| `primereact-setup-installation` | Configure a supported React environment in `styled`, `tailwind`, `primitive`, or `headless` mode. |
|
|
30
30
|
| `primereact-theming-customization` | Work with styled presets and tokens, Tailwind-owned components, primitives, headless markup, or pass-through APIs without mixing modes. |
|
|
31
31
|
| `primereact-accessibility-icons` | Review semantics, keyboard behavior, focus, accessible names, PrimeIcons, and custom icons in the selected mode. |
|
|
32
|
-
| `primereact-migration` | Plan and apply source-backed version or mode changes using current PrimeReact guides. |
|
|
33
32
|
| `primereact-audit-troubleshooting` | Find invalid APIs and troubleshoot components, setup, MCP, plugin, or duplicate configurations. |
|
|
34
33
|
|
|
34
|
+
The current PrimeReact v11 documentation does not provide a supported version migration guide, so the plugin does not advertise a migration workflow.
|
|
35
|
+
|
|
35
36
|
Skill names use the `primereact-` prefix because assistants may keep skills from several plugins in one shared namespace.
|
|
36
37
|
|
|
37
38
|
## How Skills Work
|
|
@@ -50,7 +51,7 @@ After implementation, run the checks required by your project, including type ch
|
|
|
50
51
|
Set `--tool` to the assistant you use. Keep `--library primereact` when you run the command outside a project or from a project that uses more than one PrimeUI library.
|
|
51
52
|
|
|
52
53
|
```bash
|
|
53
|
-
pnpm dlx @primeui/cli
|
|
54
|
+
pnpm dlx @primeui/cli plugin install --tool copilot --library primereact
|
|
54
55
|
```
|
|
55
56
|
|
|
56
57
|
Supported tool values are `claude`, `codex`, `copilot`, `cursor`, and `gemini`. Use `copilot` for GitHub Copilot CLI and VS Code.
|
|
@@ -60,13 +61,13 @@ Supported tool values are `claude`, `codex`, `copilot`, `cursor`, and `gemini`.
|
|
|
60
61
|
Use the same CLI to check the installation, update the plugin, or remove it. Each command applies only to PrimeReact in the selected assistant.
|
|
61
62
|
|
|
62
63
|
```bash
|
|
63
|
-
pnpm dlx @primeui/cli
|
|
64
|
-
pnpm dlx @primeui/cli
|
|
65
|
-
pnpm dlx @primeui/cli
|
|
66
|
-
pnpm dlx @primeui/cli
|
|
64
|
+
pnpm dlx @primeui/cli plugin status --tool copilot --library primereact
|
|
65
|
+
pnpm dlx @primeui/cli plugin update --tool copilot --library primereact
|
|
66
|
+
pnpm dlx @primeui/cli plugin remove --tool copilot --library primereact
|
|
67
|
+
pnpm dlx @primeui/cli doctor --tool copilot --library primereact
|
|
67
68
|
|
|
68
69
|
# Machine-readable diagnostics
|
|
69
|
-
pnpm dlx @primeui/cli
|
|
70
|
+
pnpm dlx @primeui/cli doctor --tool copilot --library primereact --json
|
|
70
71
|
```
|
|
71
72
|
|
|
72
73
|
Run `doctor` when the plugin or MCP server is not working as expected. It checks the installation, starts the MCP server, confirms the available tools, and tests documentation retrieval and component validation. Checks that an assistant does not expose are reported as unsupported.
|
|
@@ -43,7 +43,7 @@ export default function Preview() {
|
|
|
43
43
|
<Label htmlFor="name" className="text-sm font-semibold">
|
|
44
44
|
Name
|
|
45
45
|
</Label>
|
|
46
|
-
<InputText id="name" defaultValue="Amanda Miller" />
|
|
46
|
+
<InputText data-autofocus id="name" defaultValue="Amanda Miller" />
|
|
47
47
|
</div>
|
|
48
48
|
<div className="flex flex-col gap-1">
|
|
49
49
|
<Label htmlFor="username" className="text-sm font-semibold">
|
|
@@ -137,7 +137,7 @@ export default function BasicDemo() {
|
|
|
137
137
|
<div className="flex flex-col gap-4">
|
|
138
138
|
<div className="flex flex-col gap-1.5">
|
|
139
139
|
<Label htmlFor="name">Name</Label>
|
|
140
|
-
<InputText id="name" defaultValue="Amanda Miller" />
|
|
140
|
+
<InputText id="name" defaultValue="Amanda Miller" data-autofocus />
|
|
141
141
|
</div>
|
|
142
142
|
<div className="flex flex-col gap-1.5">
|
|
143
143
|
<Label htmlFor="email">Email</Label>
|
|
@@ -169,6 +169,7 @@ A dialog can be repositioned by dragging its header when the `draggable` prop is
|
|
|
169
169
|
import { Times } from '@primeicons/react/times';
|
|
170
170
|
import { Button } from '@primereact/ui/button';
|
|
171
171
|
import { Dialog } from '@primereact/ui/dialog';
|
|
172
|
+
import { Textarea } from '@primereact/ui/textarea';
|
|
172
173
|
|
|
173
174
|
export default function DraggableDemo() {
|
|
174
175
|
return (
|
|
@@ -192,8 +193,10 @@ export default function DraggableDemo() {
|
|
|
192
193
|
<p className="text-sm text-surface-500 dark:text-surface-400 mt-0 mb-0">
|
|
193
194
|
Drag this dialog by its header to reposition it anywhere on the screen.
|
|
194
195
|
</p>
|
|
195
|
-
<
|
|
196
|
-
|
|
196
|
+
<Textarea
|
|
197
|
+
data-autofocus
|
|
198
|
+
rows={4}
|
|
199
|
+
className="w-full resize-none"
|
|
197
200
|
placeholder="Type your note here..."
|
|
198
201
|
defaultValue="Remember to review the design specs for the new dashboard layout before the meeting tomorrow."
|
|
199
202
|
/>
|
|
@@ -289,7 +292,7 @@ export default function PositionDemo() {
|
|
|
289
292
|
<Label htmlFor="username" className="font-semibold">
|
|
290
293
|
Username
|
|
291
294
|
</Label>
|
|
292
|
-
<InputText id="username" />
|
|
295
|
+
<InputText data-autofocus id="username" />
|
|
293
296
|
</div>
|
|
294
297
|
<div className="flex flex-col gap-1">
|
|
295
298
|
<Label htmlFor="email" className="font-semibold">
|
|
@@ -477,7 +480,7 @@ export default function ModalDemo() {
|
|
|
477
480
|
<Label htmlFor="username" className="font-semibold">
|
|
478
481
|
Username
|
|
479
482
|
</Label>
|
|
480
|
-
<InputText id="username" />
|
|
483
|
+
<InputText data-autofocus id="username" />
|
|
481
484
|
</div>
|
|
482
485
|
<div className="flex flex-col gap-1">
|
|
483
486
|
<Label htmlFor="email" className="font-semibold">
|
|
@@ -537,7 +540,7 @@ export default function WithoutModalDemo() {
|
|
|
537
540
|
<Label htmlFor="username" className="font-semibold">
|
|
538
541
|
Username
|
|
539
542
|
</Label>
|
|
540
|
-
<InputText id="username" />
|
|
543
|
+
<InputText data-autofocus id="username" />
|
|
541
544
|
</div>
|
|
542
545
|
<div className="flex flex-col gap-1">
|
|
543
546
|
<Label htmlFor="email" className="font-semibold">
|
|
@@ -963,7 +966,7 @@ export default function ResponsiveDemo() {
|
|
|
963
966
|
<Label htmlFor="eventName" className="text-sm font-semibold">
|
|
964
967
|
Event Name
|
|
965
968
|
</Label>
|
|
966
|
-
<InputText id="eventName" placeholder="e.g. Team Standup" />
|
|
969
|
+
<InputText data-autofocus id="eventName" placeholder="e.g. Team Standup" />
|
|
967
970
|
</div>
|
|
968
971
|
<div className="flex flex-col md:flex-row gap-4">
|
|
969
972
|
<div className="flex flex-col gap-1 flex-1">
|
|
@@ -475,7 +475,7 @@ export default function InputGroupDemo() {
|
|
|
475
475
|
const { state, hasFiles } = instance;
|
|
476
476
|
|
|
477
477
|
return (
|
|
478
|
-
<FileUpload.Trigger as={Button} severity="secondary" variant="outlined" className="border-
|
|
478
|
+
<FileUpload.Trigger as={Button} severity="secondary" variant="outlined" className="border-transparent!">
|
|
479
479
|
<Upload className="mr-2" />
|
|
480
480
|
{hasFiles ? state.files.map((file) => file.name).join(', ') : 'Choose file'}
|
|
481
481
|
</FileUpload.Trigger>
|
|
@@ -492,7 +492,7 @@ export default function InputGroupDemo() {
|
|
|
492
492
|
const { state, hasFiles } = instance;
|
|
493
493
|
|
|
494
494
|
return (
|
|
495
|
-
<FileUpload.Trigger as={Button} severity="secondary" variant="outlined" className="border-
|
|
495
|
+
<FileUpload.Trigger as={Button} severity="secondary" variant="outlined" className="border-transparent!">
|
|
496
496
|
<Upload className="mr-2" />
|
|
497
497
|
{hasFiles ? state.files.map((file) => file.name).join(', ') : 'Choose file'}
|
|
498
498
|
</FileUpload.Trigger>
|
|
@@ -518,7 +518,7 @@ export default function InputGroupDemo() {
|
|
|
518
518
|
const { state, hasFiles } = instance;
|
|
519
519
|
|
|
520
520
|
return (
|
|
521
|
-
<FileUpload.Trigger as={Button} severity="secondary" variant="outlined" className="border-
|
|
521
|
+
<FileUpload.Trigger as={Button} severity="secondary" variant="outlined" className="border-transparent!">
|
|
522
522
|
<Upload className="mr-2" />
|
|
523
523
|
{hasFiles ? state.files.map((file) => file.name).join(', ') : 'Browse'}
|
|
524
524
|
</FileUpload.Trigger>
|
|
@@ -4,7 +4,7 @@ Connect AI assistants to PrimeReact component documentation, guides, examples, s
|
|
|
4
4
|
|
|
5
5
|
## Introduction
|
|
6
6
|
|
|
7
|
-
[Model Context Protocol (MCP)](https://modelcontextprotocol.io/) lets AI assistants call external tools. The `@primereact/mcp
|
|
7
|
+
[Model Context Protocol (MCP)](https://modelcontextprotocol.io/) lets AI assistants call external tools. The `@primereact/mcp` package uses those tools to search and read the PrimeReact documentation included with the package.
|
|
8
8
|
|
|
9
9
|
- Find components, guides, examples, setup instructions, and hooks.
|
|
10
10
|
- Read mode-scoped component APIs and documentation sections.
|
|
@@ -15,11 +15,11 @@ The server requires Node.js 22 or newer. It is read-only and does not change you
|
|
|
15
15
|
|
|
16
16
|
## CLI Setup
|
|
17
17
|
|
|
18
|
-
The recommended setup is the [PrimeReact Plugin](./plugin). It installs this MCP server together with the PrimeReact skills for implementation, setup, theming,
|
|
18
|
+
The recommended setup is the [PrimeReact Plugin](./plugin). It installs this MCP server together with the PrimeReact skills for implementation, setup, theming, accessibility, and troubleshooting.
|
|
19
19
|
|
|
20
20
|
```bash
|
|
21
|
-
pnpm dlx @primeui/cli
|
|
22
|
-
pnpm dlx @primeui/cli
|
|
21
|
+
pnpm dlx @primeui/cli plugin install --tool copilot --library primereact
|
|
22
|
+
pnpm dlx @primeui/cli doctor --tool copilot --library primereact
|
|
23
23
|
```
|
|
24
24
|
|
|
25
25
|
Replace `copilot` with `claude`, `codex`, `gemini`, or `cursor` for another supported assistant. Use Manual Setup when you want the MCP server without the plugin skills.
|
|
@@ -31,7 +31,7 @@ Replace `copilot` with `claude`, `codex`, `gemini`, or `cursor` for another supp
|
|
|
31
31
|
Add the server to your user configuration to use it in every project, or omit `-s user` for the current project only.
|
|
32
32
|
|
|
33
33
|
```bash
|
|
34
|
-
claude mcp add primereact -s user -- npx -y @primereact/mcp
|
|
34
|
+
claude mcp add primereact -s user -- npx -y @primereact/mcp
|
|
35
35
|
```
|
|
36
36
|
|
|
37
37
|
See the [Claude Code MCP documentation](https://docs.anthropic.com/en/docs/claude-code/mcp) for client-specific options.
|
|
@@ -45,7 +45,7 @@ Create `.vscode/mcp.json` for project-level setup. To use the server across proj
|
|
|
45
45
|
"servers": {
|
|
46
46
|
"primereact": {
|
|
47
47
|
"command": "npx",
|
|
48
|
-
"args": ["-y", "@primereact/mcp
|
|
48
|
+
"args": ["-y", "@primereact/mcp"]
|
|
49
49
|
}
|
|
50
50
|
}
|
|
51
51
|
}
|
|
@@ -58,13 +58,13 @@ See the [VS Code MCP documentation](https://code.visualstudio.com/docs/copilot/c
|
|
|
58
58
|
Add the server with the Codex CLI, or add the same configuration to `~/.codex/config.toml`.
|
|
59
59
|
|
|
60
60
|
```bash
|
|
61
|
-
codex mcp add primereact -- npx -y @primereact/mcp
|
|
61
|
+
codex mcp add primereact -- npx -y @primereact/mcp
|
|
62
62
|
```
|
|
63
63
|
|
|
64
64
|
```toml
|
|
65
65
|
[mcp_servers.primereact]
|
|
66
66
|
command = "npx"
|
|
67
|
-
args = ["-y", "@primereact/mcp
|
|
67
|
+
args = ["-y", "@primereact/mcp"]
|
|
68
68
|
```
|
|
69
69
|
|
|
70
70
|
See the [OpenAI Codex MCP documentation](https://developers.openai.com/codex/mcp/) for more details.
|
|
@@ -78,7 +78,7 @@ Create `.cursor/mcp.json` in your project or `~/.cursor/mcp.json` for global con
|
|
|
78
78
|
"mcpServers": {
|
|
79
79
|
"primereact": {
|
|
80
80
|
"command": "npx",
|
|
81
|
-
"args": ["-y", "@primereact/mcp
|
|
81
|
+
"args": ["-y", "@primereact/mcp"]
|
|
82
82
|
}
|
|
83
83
|
}
|
|
84
84
|
}
|
|
@@ -6,21 +6,21 @@ Install PrimeReact workflow skills and the PrimeReact MCP server in a supported
|
|
|
6
6
|
|
|
7
7
|
The PrimeReact Plugin adds PrimeReact skills and the PrimeReact MCP server to Claude Code, Codex, GitHub Copilot, Cursor, or Gemini CLI. Plugins installed through GitHub Copilot CLI are also available in VS Code. Install the plugin when you want the assistant to follow PrimeReact-specific, mode-aware workflows as well as read the current component documentation.
|
|
8
8
|
|
|
9
|
-
The plugin is published from the [primefaces/primeui-plugins](https://github.com/primefaces/primeui-plugins) repository. Use `@primeui/cli
|
|
9
|
+
The plugin is published from the [primefaces/primeui-plugins](https://github.com/primefaces/primeui-plugins) repository. Use `@primeui/cli` for the same installation flow across supported assistants, or follow the manual setup for your client.
|
|
10
10
|
|
|
11
11
|
## What It Installs
|
|
12
12
|
|
|
13
13
|
Installing the PrimeReact Plugin adds:
|
|
14
14
|
|
|
15
|
-
-
|
|
16
|
-
- The PrimeReact MCP server, configured with `@primereact/mcp
|
|
15
|
+
- Six focused skills covering routing, implementation, setup, theming, accessibility, and troubleshooting.
|
|
16
|
+
- The PrimeReact MCP server, configured with `@primereact/mcp`.
|
|
17
17
|
- The manifest required by the selected assistant.
|
|
18
18
|
|
|
19
19
|
PrimeVue and PrimeNG are separate plugins. Installing this plugin does not change your application or install PrimeReact dependencies in the project.
|
|
20
20
|
|
|
21
21
|
## Skills
|
|
22
22
|
|
|
23
|
-
Each skill covers one type of PrimeReact work. The skills use `@primereact/mcp
|
|
23
|
+
Each skill covers one type of PrimeReact work. The skills use `@primereact/mcp` when they need mode-scoped component APIs, examples, setup guides, hooks, or usage validation.
|
|
24
24
|
|
|
25
25
|
| Skill | Use it for |
|
|
26
26
|
| ------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
|
|
@@ -29,9 +29,10 @@ Each skill covers one type of PrimeReact work. The skills use `@primereact/mcp@1
|
|
|
29
29
|
| `primereact-setup-installation` | Configure a supported React environment in `styled`, `tailwind`, `primitive`, or `headless` mode. |
|
|
30
30
|
| `primereact-theming-customization` | Work with styled presets and tokens, Tailwind-owned components, primitives, headless markup, or pass-through APIs without mixing modes. |
|
|
31
31
|
| `primereact-accessibility-icons` | Review semantics, keyboard behavior, focus, accessible names, PrimeIcons, and custom icons in the selected mode. |
|
|
32
|
-
| `primereact-migration` | Plan and apply source-backed version or mode changes using current PrimeReact guides. |
|
|
33
32
|
| `primereact-audit-troubleshooting` | Find invalid APIs and troubleshoot components, setup, MCP, plugin, or duplicate configurations. |
|
|
34
33
|
|
|
34
|
+
The current PrimeReact v11 documentation does not provide a supported version migration guide, so the plugin does not advertise a migration workflow.
|
|
35
|
+
|
|
35
36
|
Skill names use the `primereact-` prefix because assistants may keep skills from several plugins in one shared namespace.
|
|
36
37
|
|
|
37
38
|
## How Skills Work
|
|
@@ -50,7 +51,7 @@ After implementation, run the checks required by your project, including type ch
|
|
|
50
51
|
Set `--tool` to the assistant you use. Keep `--library primereact` when you run the command outside a project or from a project that uses more than one PrimeUI library.
|
|
51
52
|
|
|
52
53
|
```bash
|
|
53
|
-
pnpm dlx @primeui/cli
|
|
54
|
+
pnpm dlx @primeui/cli plugin install --tool copilot --library primereact
|
|
54
55
|
```
|
|
55
56
|
|
|
56
57
|
Supported tool values are `claude`, `codex`, `copilot`, `cursor`, and `gemini`. Use `copilot` for GitHub Copilot CLI and VS Code.
|
|
@@ -60,13 +61,13 @@ Supported tool values are `claude`, `codex`, `copilot`, `cursor`, and `gemini`.
|
|
|
60
61
|
Use the same CLI to check the installation, update the plugin, or remove it. Each command applies only to PrimeReact in the selected assistant.
|
|
61
62
|
|
|
62
63
|
```bash
|
|
63
|
-
pnpm dlx @primeui/cli
|
|
64
|
-
pnpm dlx @primeui/cli
|
|
65
|
-
pnpm dlx @primeui/cli
|
|
66
|
-
pnpm dlx @primeui/cli
|
|
64
|
+
pnpm dlx @primeui/cli plugin status --tool copilot --library primereact
|
|
65
|
+
pnpm dlx @primeui/cli plugin update --tool copilot --library primereact
|
|
66
|
+
pnpm dlx @primeui/cli plugin remove --tool copilot --library primereact
|
|
67
|
+
pnpm dlx @primeui/cli doctor --tool copilot --library primereact
|
|
67
68
|
|
|
68
69
|
# Machine-readable diagnostics
|
|
69
|
-
pnpm dlx @primeui/cli
|
|
70
|
+
pnpm dlx @primeui/cli doctor --tool copilot --library primereact --json
|
|
70
71
|
```
|
|
71
72
|
|
|
72
73
|
Run `doctor` when the plugin or MCP server is not working as expected. It checks the installation, starts the MCP server, confirms the available tools, and tests documentation retrieval and component validation. Checks that an assistant does not expose are reported as unsupported.
|
|
@@ -56,7 +56,7 @@ export default function Preview() {
|
|
|
56
56
|
<Label htmlFor="tw-name" className="text-sm font-semibold">
|
|
57
57
|
Name
|
|
58
58
|
</Label>
|
|
59
|
-
<InputText id="tw-name" defaultValue="Amanda Miller" />
|
|
59
|
+
<InputText data-autofocus id="tw-name" defaultValue="Amanda Miller" />
|
|
60
60
|
</div>
|
|
61
61
|
<div className="flex flex-col gap-1">
|
|
62
62
|
<Label htmlFor="tw-username" className="text-sm font-semibold">
|
|
@@ -181,7 +181,7 @@ export default function BasicDemo() {
|
|
|
181
181
|
<div className="flex flex-col gap-4">
|
|
182
182
|
<div className="flex flex-col gap-1.5">
|
|
183
183
|
<Label htmlFor="name">Name</Label>
|
|
184
|
-
<InputText id="name" defaultValue="Amanda Miller" />
|
|
184
|
+
<InputText id="name" defaultValue="Amanda Miller" data-autofocus />
|
|
185
185
|
</div>
|
|
186
186
|
<div className="flex flex-col gap-1.5">
|
|
187
187
|
<Label htmlFor="email">Email</Label>
|
|
@@ -226,6 +226,7 @@ import {
|
|
|
226
226
|
DialogTitle,
|
|
227
227
|
DialogTrigger
|
|
228
228
|
} from '@/components/ui/dialog';
|
|
229
|
+
import { Textarea } from '@/components/ui/textarea';
|
|
229
230
|
|
|
230
231
|
export default function DraggableDemo() {
|
|
231
232
|
return (
|
|
@@ -249,8 +250,10 @@ export default function DraggableDemo() {
|
|
|
249
250
|
<p className="text-sm text-surface-500 dark:text-surface-400 mt-0 mb-0">
|
|
250
251
|
Drag this dialog by its header to reposition it anywhere on the screen.
|
|
251
252
|
</p>
|
|
252
|
-
<
|
|
253
|
-
|
|
253
|
+
<Textarea
|
|
254
|
+
data-autofocus
|
|
255
|
+
rows={4}
|
|
256
|
+
className="w-full resize-none"
|
|
254
257
|
placeholder="Type your note here..."
|
|
255
258
|
defaultValue="Remember to review the design specs for the new dashboard layout before the meeting tomorrow."
|
|
256
259
|
/>
|
|
@@ -357,7 +360,7 @@ export default function PositionDemo() {
|
|
|
357
360
|
<Label htmlFor="username" className="font-semibold">
|
|
358
361
|
Username
|
|
359
362
|
</Label>
|
|
360
|
-
<InputText id="username" />
|
|
363
|
+
<InputText data-autofocus id="username" />
|
|
361
364
|
</div>
|
|
362
365
|
<div className="flex flex-col gap-1">
|
|
363
366
|
<Label htmlFor="email" className="font-semibold">
|
|
@@ -582,7 +585,7 @@ export default function ModalDemo() {
|
|
|
582
585
|
<Label htmlFor="username" className="font-semibold">
|
|
583
586
|
Username
|
|
584
587
|
</Label>
|
|
585
|
-
<InputText id="username" />
|
|
588
|
+
<InputText data-autofocus id="username" />
|
|
586
589
|
</div>
|
|
587
590
|
<div className="flex flex-col gap-1">
|
|
588
591
|
<Label htmlFor="email" className="font-semibold">
|
|
@@ -653,7 +656,7 @@ export default function WithoutModalDemo() {
|
|
|
653
656
|
<Label htmlFor="username" className="font-semibold">
|
|
654
657
|
Username
|
|
655
658
|
</Label>
|
|
656
|
-
<InputText id="username" />
|
|
659
|
+
<InputText data-autofocus id="username" />
|
|
657
660
|
</div>
|
|
658
661
|
<div className="flex flex-col gap-1">
|
|
659
662
|
<Label htmlFor="email" className="font-semibold">
|
|
@@ -1139,7 +1142,7 @@ export default function ResponsiveDemo() {
|
|
|
1139
1142
|
<Label htmlFor="eventName" className="text-sm font-semibold">
|
|
1140
1143
|
Event Name
|
|
1141
1144
|
</Label>
|
|
1142
|
-
<InputText id="eventName" placeholder="e.g. Team Standup" />
|
|
1145
|
+
<InputText data-autofocus id="eventName" placeholder="e.g. Team Standup" />
|
|
1143
1146
|
</div>
|
|
1144
1147
|
<div className="flex flex-col md:flex-row gap-4">
|
|
1145
1148
|
<div className="flex flex-col gap-1 flex-1">
|
|
@@ -4,7 +4,7 @@ Connect AI assistants to PrimeReact component documentation, guides, examples, s
|
|
|
4
4
|
|
|
5
5
|
## Introduction
|
|
6
6
|
|
|
7
|
-
[Model Context Protocol (MCP)](https://modelcontextprotocol.io/) lets AI assistants call external tools. The `@primereact/mcp
|
|
7
|
+
[Model Context Protocol (MCP)](https://modelcontextprotocol.io/) lets AI assistants call external tools. The `@primereact/mcp` package uses those tools to search and read the PrimeReact documentation included with the package.
|
|
8
8
|
|
|
9
9
|
- Find components, guides, examples, setup instructions, and hooks.
|
|
10
10
|
- Read mode-scoped component APIs and documentation sections.
|
|
@@ -15,11 +15,11 @@ The server requires Node.js 22 or newer. It is read-only and does not change you
|
|
|
15
15
|
|
|
16
16
|
## CLI Setup
|
|
17
17
|
|
|
18
|
-
The recommended setup is the [PrimeReact Plugin](./plugin). It installs this MCP server together with the PrimeReact skills for implementation, setup, theming,
|
|
18
|
+
The recommended setup is the [PrimeReact Plugin](./plugin). It installs this MCP server together with the PrimeReact skills for implementation, setup, theming, accessibility, and troubleshooting.
|
|
19
19
|
|
|
20
20
|
```bash
|
|
21
|
-
pnpm dlx @primeui/cli
|
|
22
|
-
pnpm dlx @primeui/cli
|
|
21
|
+
pnpm dlx @primeui/cli plugin install --tool copilot --library primereact
|
|
22
|
+
pnpm dlx @primeui/cli doctor --tool copilot --library primereact
|
|
23
23
|
```
|
|
24
24
|
|
|
25
25
|
Replace `copilot` with `claude`, `codex`, `gemini`, or `cursor` for another supported assistant. Use Manual Setup when you want the MCP server without the plugin skills.
|
|
@@ -31,7 +31,7 @@ Replace `copilot` with `claude`, `codex`, `gemini`, or `cursor` for another supp
|
|
|
31
31
|
Add the server to your user configuration to use it in every project, or omit `-s user` for the current project only.
|
|
32
32
|
|
|
33
33
|
```bash
|
|
34
|
-
claude mcp add primereact -s user -- npx -y @primereact/mcp
|
|
34
|
+
claude mcp add primereact -s user -- npx -y @primereact/mcp
|
|
35
35
|
```
|
|
36
36
|
|
|
37
37
|
See the [Claude Code MCP documentation](https://docs.anthropic.com/en/docs/claude-code/mcp) for client-specific options.
|
|
@@ -45,7 +45,7 @@ Create `.vscode/mcp.json` for project-level setup. To use the server across proj
|
|
|
45
45
|
"servers": {
|
|
46
46
|
"primereact": {
|
|
47
47
|
"command": "npx",
|
|
48
|
-
"args": ["-y", "@primereact/mcp
|
|
48
|
+
"args": ["-y", "@primereact/mcp"]
|
|
49
49
|
}
|
|
50
50
|
}
|
|
51
51
|
}
|
|
@@ -58,13 +58,13 @@ See the [VS Code MCP documentation](https://code.visualstudio.com/docs/copilot/c
|
|
|
58
58
|
Add the server with the Codex CLI, or add the same configuration to `~/.codex/config.toml`.
|
|
59
59
|
|
|
60
60
|
```bash
|
|
61
|
-
codex mcp add primereact -- npx -y @primereact/mcp
|
|
61
|
+
codex mcp add primereact -- npx -y @primereact/mcp
|
|
62
62
|
```
|
|
63
63
|
|
|
64
64
|
```toml
|
|
65
65
|
[mcp_servers.primereact]
|
|
66
66
|
command = "npx"
|
|
67
|
-
args = ["-y", "@primereact/mcp
|
|
67
|
+
args = ["-y", "@primereact/mcp"]
|
|
68
68
|
```
|
|
69
69
|
|
|
70
70
|
See the [OpenAI Codex MCP documentation](https://developers.openai.com/codex/mcp/) for more details.
|
|
@@ -78,7 +78,7 @@ Create `.cursor/mcp.json` in your project or `~/.cursor/mcp.json` for global con
|
|
|
78
78
|
"mcpServers": {
|
|
79
79
|
"primereact": {
|
|
80
80
|
"command": "npx",
|
|
81
|
-
"args": ["-y", "@primereact/mcp
|
|
81
|
+
"args": ["-y", "@primereact/mcp"]
|
|
82
82
|
}
|
|
83
83
|
}
|
|
84
84
|
}
|