@fundamental-ngx/mcp 0.62.4-rc.8 → 0.63.0-rc.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.
- package/README.md +128 -89
- package/package.json +1 -1
- package/src/index.js +0 -2
- package/src/index.js.map +1 -1
- package/src/server.d.ts +0 -2
- package/src/server.js +0 -371
- package/src/server.js.map +1 -1
- package/src/types/component-metadata.d.ts +0 -26
- package/src/extractors/changelog-extractor.d.ts +0 -6
- package/src/extractors/changelog-extractor.js +0 -118
- package/src/extractors/changelog-extractor.js.map +0 -1
- package/src/extractors/token-extractor.d.ts +0 -6
- package/src/extractors/token-extractor.js +0 -348
- package/src/extractors/token-extractor.js.map +0 -1
package/README.md
CHANGED
|
@@ -7,11 +7,7 @@ MCP (Model Context Protocol) server that exposes the entire Fundamental NGX comp
|
|
|
7
7
|
AI coding assistants (Claude Code, Cursor, VS Code Copilot, Windsurf, etc.) can connect to this MCP server and get structured access to:
|
|
8
8
|
|
|
9
9
|
- **1000+ components** across 8 libraries (core, platform, btp, cx, cdk, ui5-webcomponents, ui5-webcomponents-fiori, ui5-webcomponents-ai)
|
|
10
|
-
- **Full API metadata** — inputs, outputs, slots, methods, enum values, CSS properties
|
|
11
|
-
- **Component recommendations** — describe what you want to build and get matching components
|
|
12
|
-
- **Design tokens** — SAP theming CSS custom properties and utility classes
|
|
13
|
-
- **Migration guidance** — breaking changes and upgrade paths from changelogs
|
|
14
|
-
- **Accessibility guidance** — ARIA inputs, keyboard handling, and a11y examples
|
|
10
|
+
- **Full API metadata** — inputs, outputs, slots, methods, enum values, CSS properties, and keyboard interactions
|
|
15
11
|
- **Component comparison** — side-by-side comparison of alternative components
|
|
16
12
|
- **Usage guides** — decision trees and composition patterns for complex components (dialog, table, card, etc.)
|
|
17
13
|
- **Selector classification** — whether a component is an element, attribute directive, or both, with correct template usage
|
|
@@ -21,13 +17,26 @@ This eliminates hallucinated APIs and outdated documentation — the assistant w
|
|
|
21
17
|
|
|
22
18
|
## Quick Start
|
|
23
19
|
|
|
24
|
-
###
|
|
20
|
+
### With Claude Code
|
|
25
21
|
|
|
26
|
-
|
|
22
|
+
**Option 1: Using claude mcp add (Recommended)**
|
|
23
|
+
|
|
24
|
+
```bash
|
|
25
|
+
# Install latest version
|
|
26
|
+
claude mcp add fundamental-ngx -- npx -y @fundamental-ngx/mcp
|
|
27
|
+
|
|
28
|
+
# Or install a specific version
|
|
29
|
+
claude mcp add fundamental-ngx -- npx -y @fundamental-ngx/mcp@0.62.4
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
This command automatically adds the MCP server to your `.claude/mcp.json` configuration.
|
|
33
|
+
|
|
34
|
+
**Option 2: Manual configuration**
|
|
27
35
|
|
|
28
36
|
```json
|
|
37
|
+
// .claude/mcp.json
|
|
29
38
|
{
|
|
30
|
-
"
|
|
39
|
+
"mcpServers": {
|
|
31
40
|
"fundamental-ngx": {
|
|
32
41
|
"command": "npx",
|
|
33
42
|
"args": ["-y", "@fundamental-ngx/mcp"]
|
|
@@ -36,93 +45,114 @@ Create or edit `.vscode/mcp.json` in your project root:
|
|
|
36
45
|
}
|
|
37
46
|
```
|
|
38
47
|
|
|
39
|
-
###
|
|
48
|
+
### With Cursor
|
|
40
49
|
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
50
|
+
```json
|
|
51
|
+
// .cursor/mcp.json
|
|
52
|
+
{
|
|
53
|
+
"mcpServers": {
|
|
54
|
+
"fundamental-ngx": {
|
|
55
|
+
"command": "npx",
|
|
56
|
+
"args": ["-y", "@fundamental-ngx/mcp"]
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
}
|
|
45
60
|
```
|
|
46
61
|
|
|
47
|
-
|
|
62
|
+
### With VS Code (Copilot)
|
|
48
63
|
|
|
49
|
-
```
|
|
50
|
-
|
|
64
|
+
```json
|
|
65
|
+
// .vscode/mcp.json
|
|
66
|
+
{
|
|
67
|
+
"servers": {
|
|
68
|
+
"fundamental-ngx": {
|
|
69
|
+
"command": "npx",
|
|
70
|
+
"args": ["-y", "@fundamental-ngx/mcp"],
|
|
71
|
+
"type": "stdio"
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
}
|
|
51
75
|
```
|
|
52
76
|
|
|
53
|
-
|
|
77
|
+
### How it works
|
|
78
|
+
|
|
79
|
+
`npx -y @fundamental-ngx/mcp` starts a Node.js process that listens on **stdio** for JSON-RPC messages following the [Model Context Protocol](https://modelcontextprotocol.io/). Running it directly in a terminal will appear to hang — that is intentional. The process is idle, waiting for a client to send tool requests over stdin. It is designed to be launched and managed by an MCP client (Claude Code, Cursor, VS Code Copilot), not run interactively.
|
|
80
|
+
|
|
81
|
+
To explore the server's tools from a browser UI, use the MCP Inspector instead (see below).
|
|
82
|
+
|
|
83
|
+
**Debugging with MCP Inspector:**
|
|
84
|
+
|
|
85
|
+
The [MCP Inspector](https://github.com/modelcontextprotocol/inspector) is a web UI for testing MCP servers interactively:
|
|
54
86
|
|
|
55
87
|
```bash
|
|
56
|
-
|
|
88
|
+
npx @modelcontextprotocol/inspector npx -y @fundamental-ngx/mcp
|
|
57
89
|
```
|
|
58
90
|
|
|
59
|
-
|
|
91
|
+
This opens a browser UI where you can:
|
|
60
92
|
|
|
61
|
-
|
|
93
|
+
- Browse all 10 available tools
|
|
94
|
+
- Send test requests with custom parameters
|
|
95
|
+
- View formatted JSON responses
|
|
96
|
+
- Debug tool behavior without an AI client
|
|
97
|
+
|
|
98
|
+
The server communicates over **stdio** using the MCP JSON-RPC protocol.
|
|
99
|
+
|
|
100
|
+
## Tools
|
|
101
|
+
|
|
102
|
+
| Tool | Purpose | Example Query |
|
|
103
|
+
| ------------------------ | ---------------------------------------------------------------- | ------------------------------------------------------------- |
|
|
104
|
+
| `list_components` | List all components, filter by library/category | `{ "library": "core", "category": "Form" }` |
|
|
105
|
+
| `search_components` | Keyword search across names, selectors, descriptions, properties | `{ "query": "date picker" }` |
|
|
106
|
+
| `get_component_api` | Full API details for a specific component | `{ "name": "fd-button" }` or `{ "name": "ui5-table" }` |
|
|
107
|
+
| `get_component_examples` | Usage examples from the docs app | `{ "name": "fd-dialog" }` |
|
|
108
|
+
| `compare_components` | Side-by-side comparison of two components | `{ "component_a": "fd-button", "component_b": "ui5-button" }` |
|
|
109
|
+
| `get_usage_guide` | Decision tree and composition patterns for a component | `{ "component": "dialog" }` |
|
|
110
|
+
|
|
111
|
+
## Example Queries
|
|
62
112
|
|
|
63
|
-
```json
|
|
64
|
-
{
|
|
65
|
-
"mcpServers": {
|
|
66
|
-
"fundamental-ngx": {
|
|
67
|
-
"command": "npx",
|
|
68
|
-
"args": ["-y", "@fundamental-ngx/mcp"]
|
|
69
|
-
}
|
|
70
|
-
}
|
|
71
|
-
}
|
|
72
113
|
```
|
|
114
|
+
"What components are available in the core library?"
|
|
115
|
+
→ list_components with library "core"
|
|
73
116
|
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
templateUsage: string; // "<button fd-button>...</button>"
|
|
101
|
-
library: Library; // "@fundamental-ngx/core"
|
|
102
|
-
category: string; // "Actions", "Form", "Layout"
|
|
103
|
-
description: string;
|
|
104
|
-
deprecated?: string; // deprecation message
|
|
105
|
-
inputs: InputMetadata[];
|
|
106
|
-
outputs: OutputMetadata[];
|
|
107
|
-
slots: SlotMetadata[]; // UI5 components
|
|
108
|
-
methods: MethodMetadata[];
|
|
109
|
-
cssProperties: CssPropertyMetadata[];
|
|
110
|
-
keyboardHandling?: string; // keyboard interaction notes (UI5 components)
|
|
111
|
-
source: 'cem' | 'typedoc';
|
|
112
|
-
}
|
|
117
|
+
"Find a component for selecting a date range"
|
|
118
|
+
→ search_components with query "date range"
|
|
119
|
+
|
|
120
|
+
"What inputs does fd-button accept?"
|
|
121
|
+
→ get_component_api with name "fd-button"
|
|
122
|
+
|
|
123
|
+
"Show me HTML examples for fd-dialog"
|
|
124
|
+
→ get_component_examples with name "fd-dialog"
|
|
125
|
+
|
|
126
|
+
"I need to build a filterable data table with pagination"
|
|
127
|
+
→ recommend_components with description "filterable data table with pagination"
|
|
128
|
+
|
|
129
|
+
"What broke between 0.60.0 and 0.62.0?"
|
|
130
|
+
→ get_migration_guide with from_version "0.60.0", to_version "0.62.0"
|
|
131
|
+
|
|
132
|
+
"What SAP design tokens are available for background colors?"
|
|
133
|
+
→ get_design_tokens with query "background color", category "color"
|
|
134
|
+
|
|
135
|
+
"How do I handle keyboard navigation in fd-menu?"
|
|
136
|
+
→ get_accessibility_guide with name "fd-menu"
|
|
137
|
+
|
|
138
|
+
"What is the difference between fd-table and fdp-table?"
|
|
139
|
+
→ compare_components with component_a "fd-table", component_b "fdp-table"
|
|
140
|
+
|
|
141
|
+
"Which dialog API should I use?"
|
|
142
|
+
→ get_usage_guide with component "dialog"
|
|
113
143
|
```
|
|
114
144
|
|
|
115
|
-
|
|
145
|
+
## Contributing
|
|
116
146
|
|
|
117
|
-
|
|
147
|
+
### Prerequisites
|
|
118
148
|
|
|
119
|
-
|
|
149
|
+
- Node.js 18+
|
|
150
|
+
- Yarn 4.x (the monorepo uses Yarn workspaces)
|
|
120
151
|
|
|
121
|
-
1. **Discover** — Use `
|
|
152
|
+
1. **Discover** — Use `search_components` or `list_components` to find the right components for your UI
|
|
122
153
|
2. **Decide** — Use `get_usage_guide` to choose the right variant (e.g., which dialog API surface)
|
|
123
154
|
3. **Learn** — Use `get_component_api` and `get_component_examples` for API details and working code
|
|
124
|
-
4. **
|
|
125
|
-
5. **Compare** — Use `compare_components` when choosing between alternatives (e.g., `fd-table` vs `fdp-table`)
|
|
155
|
+
4. **Compare** — Use `compare_components` when choosing between alternatives (e.g., `fd-table` vs `fdp-table`)
|
|
126
156
|
|
|
127
157
|
### Usage Guides
|
|
128
158
|
|
|
@@ -144,26 +174,35 @@ Each component now includes `selectorType` and `templateUsage` fields to prevent
|
|
|
144
174
|
| `attribute` | Use as an attribute on a host element | `<h2 fd-title>...</h2>` |
|
|
145
175
|
| `both` | Element + attribute combined | `<button fd-button>...</button>` |
|
|
146
176
|
|
|
147
|
-
|
|
177
|
+
```bash
|
|
178
|
+
# From the repo root
|
|
179
|
+
yarn install
|
|
180
|
+
```
|
|
148
181
|
|
|
149
|
-
|
|
182
|
+
### Build
|
|
150
183
|
|
|
151
|
-
|
|
184
|
+
```bash
|
|
185
|
+
npx nx build mcp-server
|
|
186
|
+
```
|
|
187
|
+
|
|
188
|
+
This compiles TypeScript and copies data assets (JSON files) into `dist/libs/mcp-server/`.
|
|
189
|
+
|
|
190
|
+
### Extract metadata
|
|
191
|
+
|
|
192
|
+
The server's component catalog is generated from the built library artifacts. Re-run this after changing component source files:
|
|
152
193
|
|
|
153
194
|
```bash
|
|
154
|
-
npx
|
|
195
|
+
npx nx run mcp-server:extract-metadata
|
|
155
196
|
```
|
|
156
197
|
|
|
157
|
-
|
|
198
|
+
Use `--dry-run` to validate without writing:
|
|
199
|
+
|
|
200
|
+
```bash
|
|
201
|
+
npx nx run mcp-server:check-metadata
|
|
202
|
+
```
|
|
158
203
|
|
|
159
|
-
|
|
160
|
-
| ------------------- | ---------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
161
|
-
| `setup-project` | `/setup-project my-app horizon` | Creates a new Angular app, installs `@fundamental-ngx/core`, applies a SAP Fiori theme, and verifies the setup with a smoke-test component |
|
|
162
|
-
| `build-form` | `/build-form UserProfile firstName:text role:select` | Generates a reactive form with `FormGroup` wiring, `fdp-form-field` composition, typed interface, and automatic error message setup |
|
|
163
|
-
| `build-table` | `/build-table Orders sort filter paginate select=multiple` | Generates a platform data table with `FdpTableDataSource`, column definitions, sort/filter directives, pagination, and row selection |
|
|
164
|
-
| `build-page-layout` | `/build-page-layout ProductDetail subheader footer` | Generates an `fd-dynamic-page` with collapsing header, subheader, scrollable content, floating footer, and optional tabs or FCL integration |
|
|
165
|
-
| `scaffold` | `/scaffold dialog component-ref` | Generates a working component for any supported pattern (dialog, table, card, form, shell, layout-grid) using live MCP data |
|
|
166
|
-
| `migrate` | `/migrate src/app/my-component` | Migrates a component to Angular 21+ signal-based patterns (`@Input→input()`, `@HostBinding→host`, `*ngIf→@if`, `BehaviorSubject→signal()`) |
|
|
167
|
-
| `a11y-audit` | `/a11y-audit fd-menu` | Audits a component for WCAG AA compliance — semantic HTML, ARIA, keyboard navigation, focus management |
|
|
204
|
+
### Test
|
|
168
205
|
|
|
169
|
-
|
|
206
|
+
```bash
|
|
207
|
+
npx nx test mcp-server
|
|
208
|
+
```
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fundamental-ngx/mcp",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.63.0-rc.0",
|
|
4
4
|
"description": "MCP server exposing Fundamental NGX component metadata for AI coding assistants. Includes companion Claude Code skills for project setup, forms, tables, page layouts, and more",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
package/src/index.js
CHANGED
|
@@ -30,7 +30,6 @@ else {
|
|
|
30
30
|
});
|
|
31
31
|
}
|
|
32
32
|
async function runListTools() {
|
|
33
|
-
await (0, server_1.loadData)();
|
|
34
33
|
const [serverTransport, clientTransport] = inMemory_js_1.InMemoryTransport.createLinkedPair();
|
|
35
34
|
await server_1.server.connect(serverTransport);
|
|
36
35
|
const client = new index_js_1.Client({ name: 'cli', version: '1.0' });
|
|
@@ -48,7 +47,6 @@ async function runCallTool(toolName, rawArgs) {
|
|
|
48
47
|
console.error(`Invalid JSON arguments: ${rawArgs}`);
|
|
49
48
|
process.exit(1);
|
|
50
49
|
}
|
|
51
|
-
await (0, server_1.loadData)();
|
|
52
50
|
const [serverTransport, clientTransport] = inMemory_js_1.InMemoryTransport.createLinkedPair();
|
|
53
51
|
await server_1.server.connect(serverTransport);
|
|
54
52
|
const client = new index_js_1.Client({ name: 'cli', version: '1.0' });
|
package/src/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../libs/mcp-server/src/index.ts"],"names":[],"mappings":";;;AACA,wEAAmE;AACnE,uEAA0E;AAC1E,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../libs/mcp-server/src/index.ts"],"names":[],"mappings":"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"}
|
package/src/server.d.ts
CHANGED
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
|
|
2
2
|
declare const server: McpServer;
|
|
3
|
-
/** Load design tokens and changelog data. Must be called before tool handlers that use them. */
|
|
4
|
-
export declare function loadData(): Promise<void>;
|
|
5
3
|
/** Start in MCP stdio transport mode (normal operation). */
|
|
6
4
|
export declare function startStdioServer(): Promise<void>;
|
|
7
5
|
export { server };
|