@leanmcp/ui 0.1.0 → 0.2.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 +160 -0
- package/dist/chunk-3PV26V5F.js +50 -0
- package/dist/chunk-3PV26V5F.js.map +1 -0
- package/dist/chunk-WORZ46KI.mjs +42 -0
- package/dist/chunk-WORZ46KI.mjs.map +1 -0
- package/dist/index.css +312 -230
- package/dist/index.css.map +1 -1
- package/dist/index.d.mts +1210 -290
- package/dist/index.d.ts +1210 -290
- package/dist/index.js +3045 -404
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +2843 -360
- package/dist/index.mjs.map +1 -1
- package/dist/server.d.mts +65 -0
- package/dist/server.d.ts +65 -0
- package/dist/server.js +32 -0
- package/dist/server.js.map +1 -0
- package/dist/server.mjs +3 -0
- package/dist/server.mjs.map +1 -0
- package/package.json +40 -14
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import React__default from 'react';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* @UIApp Decorator
|
|
5
|
+
*
|
|
6
|
+
* Links an MCP tool to a React UI component.
|
|
7
|
+
* When applied to a tool method, it:
|
|
8
|
+
* 1. Adds _meta.ui/resourceUri to the tool definition
|
|
9
|
+
* 2. Auto-registers a resource that renders the component to HTML
|
|
10
|
+
*
|
|
11
|
+
* This decorator is designed to work with @leanmcp/core decorators.
|
|
12
|
+
*/
|
|
13
|
+
|
|
14
|
+
declare const UI_APP_COMPONENT_KEY = "ui:app:component";
|
|
15
|
+
declare const UI_APP_URI_KEY = "ui:app:uri";
|
|
16
|
+
declare const UI_APP_OPTIONS_KEY = "ui:app:options";
|
|
17
|
+
/**
|
|
18
|
+
* Options for @UIApp decorator
|
|
19
|
+
*/
|
|
20
|
+
interface UIAppOptions {
|
|
21
|
+
/**
|
|
22
|
+
* React component or path to component file (relative to service file).
|
|
23
|
+
* - Use path string (e.g., './WeatherCard') for CLI build - avoids importing browser code in server
|
|
24
|
+
* - Use component reference for direct SSR rendering
|
|
25
|
+
*/
|
|
26
|
+
component: React__default.ComponentType<any> | string;
|
|
27
|
+
/** Custom resource URI (auto-generated if not provided) */
|
|
28
|
+
uri?: string;
|
|
29
|
+
/** HTML document title */
|
|
30
|
+
title?: string;
|
|
31
|
+
/** Additional CSS styles */
|
|
32
|
+
styles?: string;
|
|
33
|
+
}
|
|
34
|
+
/**
|
|
35
|
+
* Decorator that links a tool to a UI component.
|
|
36
|
+
*
|
|
37
|
+
* When the tool is called, the host will fetch the UI resource
|
|
38
|
+
* which returns the component rendered as HTML.
|
|
39
|
+
*
|
|
40
|
+
* @example
|
|
41
|
+
* ```typescript
|
|
42
|
+
* import { Tool } from '@leanmcp/core';
|
|
43
|
+
* import { UIApp } from '@leanmcp/ui';
|
|
44
|
+
* import { WeatherCard } from './WeatherCard';
|
|
45
|
+
*
|
|
46
|
+
* class WeatherService {
|
|
47
|
+
* @Tool({ description: 'Get weather for a city' })
|
|
48
|
+
* @UIApp({ component: WeatherCard })
|
|
49
|
+
* async getWeather(args: { city: string }) {
|
|
50
|
+
* return { city: args.city, temp: 22 };
|
|
51
|
+
* }
|
|
52
|
+
* }
|
|
53
|
+
* ```
|
|
54
|
+
*/
|
|
55
|
+
declare function UIApp(options: UIAppOptions): MethodDecorator;
|
|
56
|
+
/**
|
|
57
|
+
* Helper to get UIApp metadata from a method
|
|
58
|
+
*/
|
|
59
|
+
declare function getUIAppMetadata(target: Function): UIAppOptions | undefined;
|
|
60
|
+
/**
|
|
61
|
+
* Helper to get the resource URI from a method
|
|
62
|
+
*/
|
|
63
|
+
declare function getUIAppUri(target: Function): string | undefined;
|
|
64
|
+
|
|
65
|
+
export { UIApp, type UIAppOptions, UI_APP_COMPONENT_KEY, UI_APP_OPTIONS_KEY, UI_APP_URI_KEY, getUIAppMetadata, getUIAppUri };
|
package/dist/server.d.ts
ADDED
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import React__default from 'react';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* @UIApp Decorator
|
|
5
|
+
*
|
|
6
|
+
* Links an MCP tool to a React UI component.
|
|
7
|
+
* When applied to a tool method, it:
|
|
8
|
+
* 1. Adds _meta.ui/resourceUri to the tool definition
|
|
9
|
+
* 2. Auto-registers a resource that renders the component to HTML
|
|
10
|
+
*
|
|
11
|
+
* This decorator is designed to work with @leanmcp/core decorators.
|
|
12
|
+
*/
|
|
13
|
+
|
|
14
|
+
declare const UI_APP_COMPONENT_KEY = "ui:app:component";
|
|
15
|
+
declare const UI_APP_URI_KEY = "ui:app:uri";
|
|
16
|
+
declare const UI_APP_OPTIONS_KEY = "ui:app:options";
|
|
17
|
+
/**
|
|
18
|
+
* Options for @UIApp decorator
|
|
19
|
+
*/
|
|
20
|
+
interface UIAppOptions {
|
|
21
|
+
/**
|
|
22
|
+
* React component or path to component file (relative to service file).
|
|
23
|
+
* - Use path string (e.g., './WeatherCard') for CLI build - avoids importing browser code in server
|
|
24
|
+
* - Use component reference for direct SSR rendering
|
|
25
|
+
*/
|
|
26
|
+
component: React__default.ComponentType<any> | string;
|
|
27
|
+
/** Custom resource URI (auto-generated if not provided) */
|
|
28
|
+
uri?: string;
|
|
29
|
+
/** HTML document title */
|
|
30
|
+
title?: string;
|
|
31
|
+
/** Additional CSS styles */
|
|
32
|
+
styles?: string;
|
|
33
|
+
}
|
|
34
|
+
/**
|
|
35
|
+
* Decorator that links a tool to a UI component.
|
|
36
|
+
*
|
|
37
|
+
* When the tool is called, the host will fetch the UI resource
|
|
38
|
+
* which returns the component rendered as HTML.
|
|
39
|
+
*
|
|
40
|
+
* @example
|
|
41
|
+
* ```typescript
|
|
42
|
+
* import { Tool } from '@leanmcp/core';
|
|
43
|
+
* import { UIApp } from '@leanmcp/ui';
|
|
44
|
+
* import { WeatherCard } from './WeatherCard';
|
|
45
|
+
*
|
|
46
|
+
* class WeatherService {
|
|
47
|
+
* @Tool({ description: 'Get weather for a city' })
|
|
48
|
+
* @UIApp({ component: WeatherCard })
|
|
49
|
+
* async getWeather(args: { city: string }) {
|
|
50
|
+
* return { city: args.city, temp: 22 };
|
|
51
|
+
* }
|
|
52
|
+
* }
|
|
53
|
+
* ```
|
|
54
|
+
*/
|
|
55
|
+
declare function UIApp(options: UIAppOptions): MethodDecorator;
|
|
56
|
+
/**
|
|
57
|
+
* Helper to get UIApp metadata from a method
|
|
58
|
+
*/
|
|
59
|
+
declare function getUIAppMetadata(target: Function): UIAppOptions | undefined;
|
|
60
|
+
/**
|
|
61
|
+
* Helper to get the resource URI from a method
|
|
62
|
+
*/
|
|
63
|
+
declare function getUIAppUri(target: Function): string | undefined;
|
|
64
|
+
|
|
65
|
+
export { UIApp, type UIAppOptions, UI_APP_COMPONENT_KEY, UI_APP_OPTIONS_KEY, UI_APP_URI_KEY, getUIAppMetadata, getUIAppUri };
|
package/dist/server.js
ADDED
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var chunk3PV26V5F_js = require('./chunk-3PV26V5F.js');
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
Object.defineProperty(exports, "UIApp", {
|
|
8
|
+
enumerable: true,
|
|
9
|
+
get: function () { return chunk3PV26V5F_js.UIApp; }
|
|
10
|
+
});
|
|
11
|
+
Object.defineProperty(exports, "UI_APP_COMPONENT_KEY", {
|
|
12
|
+
enumerable: true,
|
|
13
|
+
get: function () { return chunk3PV26V5F_js.UI_APP_COMPONENT_KEY; }
|
|
14
|
+
});
|
|
15
|
+
Object.defineProperty(exports, "UI_APP_OPTIONS_KEY", {
|
|
16
|
+
enumerable: true,
|
|
17
|
+
get: function () { return chunk3PV26V5F_js.UI_APP_OPTIONS_KEY; }
|
|
18
|
+
});
|
|
19
|
+
Object.defineProperty(exports, "UI_APP_URI_KEY", {
|
|
20
|
+
enumerable: true,
|
|
21
|
+
get: function () { return chunk3PV26V5F_js.UI_APP_URI_KEY; }
|
|
22
|
+
});
|
|
23
|
+
Object.defineProperty(exports, "getUIAppMetadata", {
|
|
24
|
+
enumerable: true,
|
|
25
|
+
get: function () { return chunk3PV26V5F_js.getUIAppMetadata; }
|
|
26
|
+
});
|
|
27
|
+
Object.defineProperty(exports, "getUIAppUri", {
|
|
28
|
+
enumerable: true,
|
|
29
|
+
get: function () { return chunk3PV26V5F_js.getUIAppUri; }
|
|
30
|
+
});
|
|
31
|
+
//# sourceMappingURL=server.js.map
|
|
32
|
+
//# sourceMappingURL=server.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","file":"server.js"}
|
package/dist/server.mjs
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","file":"server.mjs"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@leanmcp/ui",
|
|
3
|
-
"version": "0.
|
|
4
|
-
"description": "
|
|
3
|
+
"version": "0.2.0",
|
|
4
|
+
"description": "MCP-Native UI SDK - React components with first-class tool integration for building MCP Apps",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.mjs",
|
|
7
7
|
"types": "dist/index.d.ts",
|
|
@@ -16,6 +16,11 @@
|
|
|
16
16
|
"require": "./dist/index.js",
|
|
17
17
|
"import": "./dist/index.mjs"
|
|
18
18
|
},
|
|
19
|
+
"./server": {
|
|
20
|
+
"types": "./dist/server.d.ts",
|
|
21
|
+
"require": "./dist/server.js",
|
|
22
|
+
"import": "./dist/server.mjs"
|
|
23
|
+
},
|
|
19
24
|
"./styles.css": "./dist/index.css"
|
|
20
25
|
},
|
|
21
26
|
"sideEffects": [
|
|
@@ -27,8 +32,9 @@
|
|
|
27
32
|
"LICENSE"
|
|
28
33
|
],
|
|
29
34
|
"scripts": {
|
|
30
|
-
"build": "tsup src/index.ts --format esm,cjs --dts",
|
|
31
|
-
"dev": "tsup src/index.ts --format esm,cjs --dts --watch",
|
|
35
|
+
"build": "tsup src/index.ts src/server.ts --format esm,cjs --dts",
|
|
36
|
+
"dev": "tsup src/index.ts src/server.ts --format esm,cjs --dts --watch",
|
|
37
|
+
"showcase": "vite --config vite.showcase.config.ts",
|
|
32
38
|
"test": "jest --passWithNoTests",
|
|
33
39
|
"clean": "rm -rf dist"
|
|
34
40
|
},
|
|
@@ -37,28 +43,48 @@
|
|
|
37
43
|
"react-dom": "^18.0.0 || ^19.0.0"
|
|
38
44
|
},
|
|
39
45
|
"dependencies": {
|
|
46
|
+
"@hookform/resolvers": "^5.2.2",
|
|
40
47
|
"@modelcontextprotocol/ext-apps": "git+https://github.com/modelcontextprotocol/ext-apps.git",
|
|
41
48
|
"@modelcontextprotocol/sdk": "^1.23.0",
|
|
42
|
-
"@radix-ui/react-checkbox": "^1.
|
|
43
|
-
"@radix-ui/react-dialog": "^1.1.
|
|
44
|
-
"@radix-ui/react-
|
|
45
|
-
"@radix-ui/react-
|
|
46
|
-
"@radix-ui/react-
|
|
47
|
-
"@radix-ui/react-
|
|
48
|
-
"@radix-ui/react-
|
|
49
|
-
"@radix-ui/react-
|
|
49
|
+
"@radix-ui/react-checkbox": "^1.3.3",
|
|
50
|
+
"@radix-ui/react-dialog": "^1.1.15",
|
|
51
|
+
"@radix-ui/react-dropdown-menu": "^2.1.16",
|
|
52
|
+
"@radix-ui/react-label": "^2.1.8",
|
|
53
|
+
"@radix-ui/react-popover": "^1.1.15",
|
|
54
|
+
"@radix-ui/react-progress": "^1.1.8",
|
|
55
|
+
"@radix-ui/react-scroll-area": "^1.2.10",
|
|
56
|
+
"@radix-ui/react-select": "^2.2.6",
|
|
57
|
+
"@radix-ui/react-separator": "^1.1.8",
|
|
58
|
+
"@radix-ui/react-slider": "^1.3.6",
|
|
59
|
+
"@radix-ui/react-slot": "^1.2.4",
|
|
60
|
+
"@radix-ui/react-switch": "^1.2.6",
|
|
61
|
+
"@radix-ui/react-tabs": "^1.1.13",
|
|
62
|
+
"@radix-ui/react-tooltip": "^1.2.8",
|
|
50
63
|
"@tanstack/react-table": "^8.20.6",
|
|
64
|
+
"autoprefixer": "^10.4.23",
|
|
51
65
|
"chart.js": "^4.4.7",
|
|
66
|
+
"class-variance-authority": "^0.7.1",
|
|
52
67
|
"clsx": "^2.1.1",
|
|
68
|
+
"cmdk": "^1.1.1",
|
|
69
|
+
"lucide-react": "^0.561.0",
|
|
70
|
+
"next-themes": "^0.4.6",
|
|
71
|
+
"postcss": "^8.5.6",
|
|
53
72
|
"prism-react-renderer": "^2.4.1",
|
|
54
73
|
"react-chartjs-2": "^5.3.0",
|
|
55
|
-
"
|
|
74
|
+
"react-hook-form": "^7.68.0",
|
|
75
|
+
"reflect-metadata": "^0.2.2",
|
|
76
|
+
"sonner": "^2.0.7",
|
|
77
|
+
"tailwind-merge": "^3.4.0",
|
|
78
|
+
"tailwindcss": "^3.4.17",
|
|
79
|
+
"tailwindcss-animate": "^1.0.7",
|
|
80
|
+
"zod": "^4.2.1"
|
|
56
81
|
},
|
|
57
82
|
"devDependencies": {
|
|
58
83
|
"@types/react": "^18.3.0",
|
|
59
84
|
"@types/react-dom": "^18.3.0",
|
|
60
85
|
"react": "^18.3.0",
|
|
61
|
-
"react-dom": "^18.3.0"
|
|
86
|
+
"react-dom": "^18.3.0",
|
|
87
|
+
"tsup": "^8.5.1"
|
|
62
88
|
},
|
|
63
89
|
"repository": {
|
|
64
90
|
"type": "git",
|