@kjaniec-dev/ui-mcp 0.4.1
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 +71 -0
- package/data/components.json +1101 -0
- package/data/tokens.json +898 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +274 -0
- package/dist/index.js.map +1 -0
- package/package.json +43 -0
package/README.md
ADDED
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
# @kjaniec-dev/ui-mcp
|
|
2
|
+
|
|
3
|
+
Model Context Protocol (MCP) server for the KJ Product Kit design system and UI components. This server allows AI agents (like Antigravity, Claude, Cursor, and Codex) to browse design tokens, query style definitions, and read React component reference sheets directly.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- **List Components**: Fetch all React components available in the UI library, along with their one-line descriptions and variant groups.
|
|
8
|
+
- **Get Component**: Get component details, including custom properties, JSDoc definitions, CVA variants and options, and minimal usage snippets pulled from the story files.
|
|
9
|
+
- **Search Components**: Perform keyword search matching component names, descriptions, and use-cases to find the right component.
|
|
10
|
+
- **Get Design Tokens**: Retrieve semantic design tokens by category (color, radius, shadow, font) including light/dark values and the Tailwind utility classes they map to.
|
|
11
|
+
- **Get Setup**: Retrieve package installation commands and the required CSS `@import` order.
|
|
12
|
+
|
|
13
|
+
## Resources
|
|
14
|
+
|
|
15
|
+
- `design://tokens`: Raw tokens JSON data.
|
|
16
|
+
- `ui://components/index`: Generated components index in markdown format.
|
|
17
|
+
- `ui://component/{name}`: Dynamic per-component reference docs in markdown format.
|
|
18
|
+
|
|
19
|
+
## Configuration
|
|
20
|
+
|
|
21
|
+
To integrate this server with your AI assistant, configure your MCP client.
|
|
22
|
+
|
|
23
|
+
### Client Configuration
|
|
24
|
+
|
|
25
|
+
Add this server configuration to your MCP config file (e.g. Cursor's MCP settings, Claude Desktop, or your local `.mcp.json`):
|
|
26
|
+
|
|
27
|
+
```json
|
|
28
|
+
{
|
|
29
|
+
"mcpServers": {
|
|
30
|
+
"kj-ui": {
|
|
31
|
+
"type": "stdio",
|
|
32
|
+
"command": "npx",
|
|
33
|
+
"args": ["-y", "@kjaniec-dev/ui-mcp"]
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
### Local Development Configuration
|
|
40
|
+
|
|
41
|
+
To test your local changes, point your client configuration to the built index file:
|
|
42
|
+
|
|
43
|
+
```json
|
|
44
|
+
{
|
|
45
|
+
"mcpServers": {
|
|
46
|
+
"kj-ui-local": {
|
|
47
|
+
"type": "stdio",
|
|
48
|
+
"command": "node",
|
|
49
|
+
"args": ["/Users/kjaniec-dev/dev/projects/kj-product-kit-starter/packages/mcp/dist/index.js"]
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
## Local Development
|
|
56
|
+
|
|
57
|
+
From the repository root:
|
|
58
|
+
|
|
59
|
+
```bash
|
|
60
|
+
# Install dependencies
|
|
61
|
+
npm install
|
|
62
|
+
|
|
63
|
+
# Build the MCP package (extracts component metadata and builds server)
|
|
64
|
+
npm run mcp:build
|
|
65
|
+
|
|
66
|
+
# Run tests
|
|
67
|
+
npm run mcp:test
|
|
68
|
+
|
|
69
|
+
# Start in development watch mode
|
|
70
|
+
npm run mcp:dev
|
|
71
|
+
```
|