elij-ui-library-mcp 0.3.1 → 1.0.0

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.
Files changed (2) hide show
  1. package/README.md +156 -12
  2. package/package.json +2 -2
package/README.md CHANGED
@@ -1,20 +1,56 @@
1
1
  # Elij UI Library MCP
2
2
 
3
- An MCP server that lets AI clients discover components from the published Elij UI Library registry.
3
+ An MCP server that lets AI clients discover components, props, categories, and Storybook stories from the published Elij UI Library registry.
4
+
5
+ ## What it does
6
+
7
+ The server exposes three read-only tools:
8
+
9
+ - `list_components` — list all components or filter by category
10
+ - `search_components` — search names, categories, and descriptions
11
+ - `get_component` — inspect one component's metadata and props
12
+
13
+ It uses the MCP **stdio** transport. MCP messages stay on stdout and diagnostic logs are written to stderr.
4
14
 
5
15
  ## Quick start
6
16
 
7
- Run it without installing globally:
17
+ Run the latest published version without installing globally:
8
18
 
9
19
  ```bash
10
20
  npx -y elij-ui-library-mcp
11
21
  ```
12
22
 
13
- The server uses the MCP stdio transport. Keep stdout reserved for MCP messages; diagnostic output is written to stderr.
23
+ For a reproducible setup, pin a version instead:
24
+
25
+ ```bash
26
+ npx -y elij-ui-library-mcp@1.0.0
27
+ ```
28
+
29
+ The unpinned command is convenient for trying the latest release. Pinning is recommended for production or shared team configuration.
14
30
 
15
- ## MCP client configuration
31
+ ## Configure an MCP Host
16
32
 
17
- Add the following server entry to an MCP-compatible client such as Claude Desktop, Cursor, or VS Code:
33
+ ### VS Code
34
+
35
+ Create or open `.vscode/mcp.json` in your workspace and add:
36
+
37
+ ```json
38
+ {
39
+ "servers": {
40
+ "elijUiLibrary": {
41
+ "type": "stdio",
42
+ "command": "npx",
43
+ "args": ["-y", "elij-ui-library-mcp"]
44
+ }
45
+ }
46
+ }
47
+ ```
48
+
49
+ You can replace the package argument with `elij-ui-library-mcp@1.0.0` when you need a fixed version. After saving, run `MCP: List Servers` from the Command Palette and start `elijUiLibrary`.
50
+
51
+ ### Claude Desktop and Cursor
52
+
53
+ Add this entry to the client's MCP configuration:
18
54
 
19
55
  ```json
20
56
  {
@@ -27,27 +63,135 @@ Add the following server entry to an MCP-compatible client such as Claude Deskto
27
63
  }
28
64
  ```
29
65
 
30
- If the client supports a local executable configuration, the equivalent command is:
66
+ Restart the client after saving the configuration. If the client supports a local executable, the equivalent command is:
31
67
 
32
68
  ```bash
33
69
  elij-ui-library-mcp
34
70
  ```
35
71
 
36
- ## Available tools
72
+ ## Verify the connection
73
+
74
+ After starting the server, confirm that the Host discovers these tools:
75
+
76
+ ```text
77
+ list_components
78
+ search_components
79
+ get_component
80
+ ```
81
+
82
+ Then try these prompts in the Host chat:
83
+
84
+ ```text
85
+ List all available Elij UI components.
86
+ ```
87
+
88
+ ```text
89
+ Find components suitable for a pricing card.
90
+ ```
91
+
92
+ ```text
93
+ Show me the props and Storybook story for EventCarousel.
94
+ ```
95
+
96
+ ```text
97
+ Search for components related to WhatsApp contact buttons.
98
+ ```
99
+
100
+ ## Tool examples
37
101
 
38
102
  ### `list_components`
39
103
 
40
- Lists all components in the registry. Pass an optional `category` to filter the result.
104
+ Use it to browse the registry:
105
+
106
+ ```text
107
+ List components in the content category.
108
+ ```
109
+
110
+ Optional input:
111
+
112
+ ```json
113
+ { "category": "content" }
114
+ ```
41
115
 
42
116
  ### `search_components`
43
117
 
44
- Searches component names, categories, and descriptions. It accepts `query`, an optional `category`, and an optional `limit` from 1 to 50.
118
+ Use it to find a component by concept:
119
+
120
+ ```text
121
+ Search for a component that supports event image carousels.
122
+ ```
123
+
124
+ Inputs include `query`, optional `category`, and `limit` from 1 to 50:
125
+
126
+ ```json
127
+ {
128
+ "query": "carousel",
129
+ "category": "content",
130
+ "limit": 10
131
+ }
132
+ ```
45
133
 
46
134
  ### `get_component`
47
135
 
48
- Returns the import path, category, description, props, and Storybook story for a component by name.
136
+ Use it when you need implementation details:
137
+
138
+ ```text
139
+ Get the import path, props, and Storybook story for WhatsAppButton.
140
+ ```
141
+
142
+ Input:
143
+
144
+ ```json
145
+ { "name": "WhatsAppButton" }
146
+ ```
147
+
148
+ If the component does not exist, the server returns an MCP error response instead of silently returning an empty result.
149
+
150
+ ## Example AI-assisted workflow
151
+
152
+ ```text
153
+ 1. Ask the Host to search for a suitable component.
154
+ 2. Ask for its props and Storybook story.
155
+ 3. Ask for an import example using the returned component name.
156
+ 4. Check the Storybook story before adding it to your application.
157
+ ```
158
+
159
+ Example conversation:
160
+
161
+ ```text
162
+ User: Find a component for a pricing card.
163
+ AI: Card is suitable. I can show its props and Storybook story.
164
+
165
+ User: Show the props and import example.
166
+ AI: Import Card from "elij-ui-library" and use the returned props from the registry.
167
+ ```
168
+
169
+ ## Troubleshooting
170
+
171
+ ### Server not found
172
+
173
+ Check that Node.js and npm are available:
174
+
175
+ ```bash
176
+ node --version
177
+ npm --version
178
+ ```
179
+
180
+ Then test the package directly:
181
+
182
+ ```bash
183
+ npx -y elij-ui-library-mcp
184
+ ```
185
+
186
+ ### No tools discovered
187
+
188
+ Restart the MCP server from the Host, confirm the configuration uses `elij-ui-library-mcp` (not the CLI package), and inspect the Host's MCP output log.
189
+
190
+ ### Registry data is unavailable
191
+
192
+ The MCP package reads registry metadata from the published `elij-ui-library` dependency. Check npm connectivity and make sure the dependency version is available in the configured registry.
49
193
 
50
- ## Development
194
+ ### Local development
51
195
 
52
196
  From the monorepo root:
53
197
 
@@ -56,4 +200,4 @@ corepack yarn workspace elij-ui-library-mcp build
56
200
  corepack yarn workspace elij-ui-library-mcp test
57
201
  ```
58
202
 
59
- The server depends on the published `elij-ui-library` registry package, so the registry data remains versioned with the UI library release.
203
+ The server is read-only and does not modify your application files.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "elij-ui-library-mcp",
3
- "version": "0.3.1",
3
+ "version": "1.0.0",
4
4
  "description": "MCP server for discovering Elij UI components",
5
5
  "type": "module",
6
6
  "bin": "./dist/index.js",
@@ -14,7 +14,7 @@
14
14
  },
15
15
  "dependencies": {
16
16
  "@modelcontextprotocol/server": "^2.0.0",
17
- "elij-ui-library": "^0.3.1",
17
+ "elij-ui-library": "^1.0.0",
18
18
  "zod": "^4.2.0"
19
19
  },
20
20
  "devDependencies": {