@json-render/mcp 0.12.0 → 0.12.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/dist/app.d.mts +2 -47
- package/dist/app.d.ts +2 -47
- package/dist/app.mjs +4 -22
- package/dist/app.mjs.map +1 -1
- package/dist/build-app-html-entry.d.mts +47 -0
- package/dist/build-app-html-entry.d.ts +47 -0
- package/dist/build-app-html-entry.js +52 -0
- package/dist/build-app-html-entry.js.map +1 -0
- package/dist/build-app-html-entry.mjs +7 -0
- package/dist/build-app-html-entry.mjs.map +1 -0
- package/dist/chunk-UZ7LXWZJ.mjs +26 -0
- package/dist/chunk-UZ7LXWZJ.mjs.map +1 -0
- package/package.json +8 -3
package/dist/app.d.mts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { Spec } from '@json-render/core';
|
|
2
2
|
import { App } from '@modelcontextprotocol/ext-apps';
|
|
3
|
+
export { BuildAppHtmlOptions, buildAppHtml } from './build-app-html-entry.mjs';
|
|
3
4
|
|
|
4
5
|
/**
|
|
5
6
|
* Options for the `useJsonRenderApp` hook.
|
|
@@ -42,50 +43,4 @@ interface UseJsonRenderAppReturn {
|
|
|
42
43
|
*/
|
|
43
44
|
declare function useJsonRenderApp(options?: UseJsonRenderAppOptions): UseJsonRenderAppReturn;
|
|
44
45
|
|
|
45
|
-
|
|
46
|
-
* Options for `buildAppHtml`.
|
|
47
|
-
*/
|
|
48
|
-
interface BuildAppHtmlOptions {
|
|
49
|
-
/** Title for the HTML page. Defaults to `"json-render"`. */
|
|
50
|
-
title?: string;
|
|
51
|
-
/**
|
|
52
|
-
* Inline CSS to inject into the page `<style>` tag.
|
|
53
|
-
* Use this to include Tailwind output or custom styles.
|
|
54
|
-
*/
|
|
55
|
-
css?: string;
|
|
56
|
-
/**
|
|
57
|
-
* Bundled JavaScript for the app entry point.
|
|
58
|
-
* This should be the output of a bundler (Vite, esbuild, etc.)
|
|
59
|
-
* that bundles your React app, registry, and the
|
|
60
|
-
* `useJsonRenderApp` hook into a single script.
|
|
61
|
-
*/
|
|
62
|
-
js: string;
|
|
63
|
-
/**
|
|
64
|
-
* Additional `<head>` content (meta tags, font links, etc.).
|
|
65
|
-
*/
|
|
66
|
-
head?: string;
|
|
67
|
-
}
|
|
68
|
-
/**
|
|
69
|
-
* Build a self-contained HTML string for an MCP App UI resource.
|
|
70
|
-
*
|
|
71
|
-
* The resulting HTML is designed to be served as a `ui://` resource
|
|
72
|
-
* via `registerJsonRenderResource` or `createMcpApp`.
|
|
73
|
-
*
|
|
74
|
-
* Typically you'd use a bundler (Vite + `vite-plugin-singlefile`, or
|
|
75
|
-
* esbuild) to produce the `js` and `css` strings, then pass them here.
|
|
76
|
-
*
|
|
77
|
-
* @example
|
|
78
|
-
* ```ts
|
|
79
|
-
* import { buildAppHtml } from "@json-render/mcp/app";
|
|
80
|
-
* import { readFileSync } from "node:fs";
|
|
81
|
-
*
|
|
82
|
-
* const html = buildAppHtml({
|
|
83
|
-
* title: "Dashboard",
|
|
84
|
-
* js: readFileSync("dist/app.js", "utf-8"),
|
|
85
|
-
* css: readFileSync("dist/app.css", "utf-8"),
|
|
86
|
-
* });
|
|
87
|
-
* ```
|
|
88
|
-
*/
|
|
89
|
-
declare function buildAppHtml(options: BuildAppHtmlOptions): string;
|
|
90
|
-
|
|
91
|
-
export { type BuildAppHtmlOptions, type UseJsonRenderAppOptions, type UseJsonRenderAppReturn, buildAppHtml, useJsonRenderApp };
|
|
46
|
+
export { type UseJsonRenderAppOptions, type UseJsonRenderAppReturn, useJsonRenderApp };
|
package/dist/app.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { Spec } from '@json-render/core';
|
|
2
2
|
import { App } from '@modelcontextprotocol/ext-apps';
|
|
3
|
+
export { BuildAppHtmlOptions, buildAppHtml } from './build-app-html-entry.js';
|
|
3
4
|
|
|
4
5
|
/**
|
|
5
6
|
* Options for the `useJsonRenderApp` hook.
|
|
@@ -42,50 +43,4 @@ interface UseJsonRenderAppReturn {
|
|
|
42
43
|
*/
|
|
43
44
|
declare function useJsonRenderApp(options?: UseJsonRenderAppOptions): UseJsonRenderAppReturn;
|
|
44
45
|
|
|
45
|
-
|
|
46
|
-
* Options for `buildAppHtml`.
|
|
47
|
-
*/
|
|
48
|
-
interface BuildAppHtmlOptions {
|
|
49
|
-
/** Title for the HTML page. Defaults to `"json-render"`. */
|
|
50
|
-
title?: string;
|
|
51
|
-
/**
|
|
52
|
-
* Inline CSS to inject into the page `<style>` tag.
|
|
53
|
-
* Use this to include Tailwind output or custom styles.
|
|
54
|
-
*/
|
|
55
|
-
css?: string;
|
|
56
|
-
/**
|
|
57
|
-
* Bundled JavaScript for the app entry point.
|
|
58
|
-
* This should be the output of a bundler (Vite, esbuild, etc.)
|
|
59
|
-
* that bundles your React app, registry, and the
|
|
60
|
-
* `useJsonRenderApp` hook into a single script.
|
|
61
|
-
*/
|
|
62
|
-
js: string;
|
|
63
|
-
/**
|
|
64
|
-
* Additional `<head>` content (meta tags, font links, etc.).
|
|
65
|
-
*/
|
|
66
|
-
head?: string;
|
|
67
|
-
}
|
|
68
|
-
/**
|
|
69
|
-
* Build a self-contained HTML string for an MCP App UI resource.
|
|
70
|
-
*
|
|
71
|
-
* The resulting HTML is designed to be served as a `ui://` resource
|
|
72
|
-
* via `registerJsonRenderResource` or `createMcpApp`.
|
|
73
|
-
*
|
|
74
|
-
* Typically you'd use a bundler (Vite + `vite-plugin-singlefile`, or
|
|
75
|
-
* esbuild) to produce the `js` and `css` strings, then pass them here.
|
|
76
|
-
*
|
|
77
|
-
* @example
|
|
78
|
-
* ```ts
|
|
79
|
-
* import { buildAppHtml } from "@json-render/mcp/app";
|
|
80
|
-
* import { readFileSync } from "node:fs";
|
|
81
|
-
*
|
|
82
|
-
* const html = buildAppHtml({
|
|
83
|
-
* title: "Dashboard",
|
|
84
|
-
* js: readFileSync("dist/app.js", "utf-8"),
|
|
85
|
-
* css: readFileSync("dist/app.css", "utf-8"),
|
|
86
|
-
* });
|
|
87
|
-
* ```
|
|
88
|
-
*/
|
|
89
|
-
declare function buildAppHtml(options: BuildAppHtmlOptions): string;
|
|
90
|
-
|
|
91
|
-
export { type BuildAppHtmlOptions, type UseJsonRenderAppOptions, type UseJsonRenderAppReturn, buildAppHtml, useJsonRenderApp };
|
|
46
|
+
export { type UseJsonRenderAppOptions, type UseJsonRenderAppReturn, useJsonRenderApp };
|
package/dist/app.mjs
CHANGED
|
@@ -1,3 +1,7 @@
|
|
|
1
|
+
import {
|
|
2
|
+
buildAppHtml
|
|
3
|
+
} from "./chunk-UZ7LXWZJ.mjs";
|
|
4
|
+
|
|
1
5
|
// src/use-json-render-app.ts
|
|
2
6
|
import { useState, useEffect, useCallback, useRef } from "react";
|
|
3
7
|
import { App } from "@modelcontextprotocol/ext-apps";
|
|
@@ -70,28 +74,6 @@ function useJsonRenderApp(options = {}) {
|
|
|
70
74
|
callServerTool
|
|
71
75
|
};
|
|
72
76
|
}
|
|
73
|
-
|
|
74
|
-
// src/build-app-html.ts
|
|
75
|
-
function buildAppHtml(options) {
|
|
76
|
-
const { title = "json-render", css = "", js, head = "" } = options;
|
|
77
|
-
return `<!DOCTYPE html>
|
|
78
|
-
<html lang="en">
|
|
79
|
-
<head>
|
|
80
|
-
<meta charset="UTF-8" />
|
|
81
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
82
|
-
<title>${escapeHtml(title)}</title>
|
|
83
|
-
${head}
|
|
84
|
-
<style>${css}</style>
|
|
85
|
-
</head>
|
|
86
|
-
<body>
|
|
87
|
-
<div id="root"></div>
|
|
88
|
-
<script type="module">${js}</script>
|
|
89
|
-
</body>
|
|
90
|
-
</html>`;
|
|
91
|
-
}
|
|
92
|
-
function escapeHtml(str) {
|
|
93
|
-
return str.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """);
|
|
94
|
-
}
|
|
95
77
|
export {
|
|
96
78
|
buildAppHtml,
|
|
97
79
|
useJsonRenderApp
|
package/dist/app.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/use-json-render-app.ts"
|
|
1
|
+
{"version":3,"sources":["../src/use-json-render-app.ts"],"sourcesContent":["import { useState, useEffect, useCallback, useRef } from \"react\";\nimport type { Spec } from \"@json-render/core\";\nimport { App } from \"@modelcontextprotocol/ext-apps\";\n\n/**\n * Options for the `useJsonRenderApp` hook.\n */\nexport interface UseJsonRenderAppOptions {\n /** App name shown during initialization. Defaults to `\"json-render\"`. */\n name?: string;\n /** App version. Defaults to `\"1.0.0\"`. */\n version?: string;\n}\n\n/**\n * Return value of `useJsonRenderApp`.\n */\nexport interface UseJsonRenderAppReturn {\n /** The current json-render spec (null until the first tool result). */\n spec: Spec | null;\n /** Whether the app is still connecting to the host. */\n connecting: boolean;\n /** Whether the app is connected to the host. */\n connected: boolean;\n /** Connection error, if any. */\n error: Error | null;\n /** Whether the spec is still being received / parsed. */\n loading: boolean;\n /** The underlying MCP App instance. */\n app: App | null;\n /**\n * Call a tool on the MCP server and update the spec from the result.\n * Useful for refresh / drill-down interactions.\n */\n callServerTool: (\n name: string,\n args?: Record<string, unknown>,\n ) => Promise<void>;\n}\n\ninterface ToolResultContent {\n type: string;\n text?: string;\n}\n\nfunction parseSpecFromToolResult(result: {\n content?: ToolResultContent[];\n}): Spec | null {\n const textContent = result.content?.find(\n (c: ToolResultContent) => c.type === \"text\",\n );\n if (!textContent?.text) return null;\n try {\n const parsed = JSON.parse(textContent.text);\n if (parsed && typeof parsed === \"object\" && \"spec\" in parsed) {\n return parsed.spec as Spec;\n }\n return parsed as Spec;\n } catch {\n return null;\n }\n}\n\n/**\n * React hook that connects to the MCP host, listens for tool results,\n * and maintains the current json-render spec.\n *\n * Follows the official MCP Apps pattern: create an `App` instance,\n * register the `ontoolresult` handler, then call `app.connect()`\n * which internally creates a PostMessageTransport to the host.\n */\nexport function useJsonRenderApp(\n options: UseJsonRenderAppOptions = {},\n): UseJsonRenderAppReturn {\n const { name = \"json-render\", version = \"1.0.0\" } = options;\n\n const [spec, setSpec] = useState<Spec | null>(null);\n const [loading, setLoading] = useState(true);\n const [connected, setConnected] = useState(false);\n const [error, setError] = useState<Error | null>(null);\n const appRef = useRef<App | null>(null);\n\n useEffect(() => {\n const app = new App({ name, version });\n appRef.current = app;\n\n app.ontoolresult = (result: { content?: ToolResultContent[] }) => {\n const parsed = parseSpecFromToolResult(result);\n if (parsed) {\n setSpec(parsed);\n setLoading(false);\n }\n };\n\n // Let the App class handle transport creation internally,\n // matching the official MCP Apps quickstart pattern.\n app\n .connect()\n .then(() => {\n setConnected(true);\n })\n .catch((err: unknown) => {\n setError(err instanceof Error ? err : new Error(String(err)));\n });\n\n return () => {\n app.close().catch(() => {});\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const callServerTool = useCallback(\n async (toolName: string, args: Record<string, unknown> = {}) => {\n if (!appRef.current) return;\n setLoading(true);\n try {\n const result = await appRef.current.callServerTool({\n name: toolName,\n arguments: args,\n });\n const parsed = parseSpecFromToolResult(result);\n if (parsed) setSpec(parsed);\n } finally {\n setLoading(false);\n }\n },\n [],\n );\n\n return {\n spec,\n connecting: !connected && !error,\n connected,\n error,\n loading,\n app: appRef.current,\n callServerTool,\n };\n}\n"],"mappings":";;;;;AAAA,SAAS,UAAU,WAAW,aAAa,cAAc;AAEzD,SAAS,WAAW;AA2CpB,SAAS,wBAAwB,QAEjB;AACd,QAAM,cAAc,OAAO,SAAS;AAAA,IAClC,CAAC,MAAyB,EAAE,SAAS;AAAA,EACvC;AACA,MAAI,CAAC,aAAa,KAAM,QAAO;AAC/B,MAAI;AACF,UAAM,SAAS,KAAK,MAAM,YAAY,IAAI;AAC1C,QAAI,UAAU,OAAO,WAAW,YAAY,UAAU,QAAQ;AAC5D,aAAO,OAAO;AAAA,IAChB;AACA,WAAO;AAAA,EACT,QAAQ;AACN,WAAO;AAAA,EACT;AACF;AAUO,SAAS,iBACd,UAAmC,CAAC,GACZ;AACxB,QAAM,EAAE,OAAO,eAAe,UAAU,QAAQ,IAAI;AAEpD,QAAM,CAAC,MAAM,OAAO,IAAI,SAAsB,IAAI;AAClD,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,IAAI;AAC3C,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAuB,IAAI;AACrD,QAAM,SAAS,OAAmB,IAAI;AAEtC,YAAU,MAAM;AACd,UAAM,MAAM,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACrC,WAAO,UAAU;AAEjB,QAAI,eAAe,CAAC,WAA8C;AAChE,YAAM,SAAS,wBAAwB,MAAM;AAC7C,UAAI,QAAQ;AACV,gBAAQ,MAAM;AACd,mBAAW,KAAK;AAAA,MAClB;AAAA,IACF;AAIA,QACG,QAAQ,EACR,KAAK,MAAM;AACV,mBAAa,IAAI;AAAA,IACnB,CAAC,EACA,MAAM,CAAC,QAAiB;AACvB,eAAS,eAAe,QAAQ,MAAM,IAAI,MAAM,OAAO,GAAG,CAAC,CAAC;AAAA,IAC9D,CAAC;AAEH,WAAO,MAAM;AACX,UAAI,MAAM,EAAE,MAAM,MAAM;AAAA,MAAC,CAAC;AAAA,IAC5B;AAAA,EAEF,GAAG,CAAC,CAAC;AAEL,QAAM,iBAAiB;AAAA,IACrB,OAAO,UAAkB,OAAgC,CAAC,MAAM;AAC9D,UAAI,CAAC,OAAO,QAAS;AACrB,iBAAW,IAAI;AACf,UAAI;AACF,cAAM,SAAS,MAAM,OAAO,QAAQ,eAAe;AAAA,UACjD,MAAM;AAAA,UACN,WAAW;AAAA,QACb,CAAC;AACD,cAAM,SAAS,wBAAwB,MAAM;AAC7C,YAAI,OAAQ,SAAQ,MAAM;AAAA,MAC5B,UAAE;AACA,mBAAW,KAAK;AAAA,MAClB;AAAA,IACF;AAAA,IACA,CAAC;AAAA,EACH;AAEA,SAAO;AAAA,IACL;AAAA,IACA,YAAY,CAAC,aAAa,CAAC;AAAA,IAC3B;AAAA,IACA;AAAA,IACA;AAAA,IACA,KAAK,OAAO;AAAA,IACZ;AAAA,EACF;AACF;","names":[]}
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Options for `buildAppHtml`.
|
|
3
|
+
*/
|
|
4
|
+
interface BuildAppHtmlOptions {
|
|
5
|
+
/** Title for the HTML page. Defaults to `"json-render"`. */
|
|
6
|
+
title?: string;
|
|
7
|
+
/**
|
|
8
|
+
* Inline CSS to inject into the page `<style>` tag.
|
|
9
|
+
* Use this to include Tailwind output or custom styles.
|
|
10
|
+
*/
|
|
11
|
+
css?: string;
|
|
12
|
+
/**
|
|
13
|
+
* Bundled JavaScript for the app entry point.
|
|
14
|
+
* This should be the output of a bundler (Vite, esbuild, etc.)
|
|
15
|
+
* that bundles your React app, registry, and the
|
|
16
|
+
* `useJsonRenderApp` hook into a single script.
|
|
17
|
+
*/
|
|
18
|
+
js: string;
|
|
19
|
+
/**
|
|
20
|
+
* Additional `<head>` content (meta tags, font links, etc.).
|
|
21
|
+
*/
|
|
22
|
+
head?: string;
|
|
23
|
+
}
|
|
24
|
+
/**
|
|
25
|
+
* Build a self-contained HTML string for an MCP App UI resource.
|
|
26
|
+
*
|
|
27
|
+
* The resulting HTML is designed to be served as a `ui://` resource
|
|
28
|
+
* via `registerJsonRenderResource` or `createMcpApp`.
|
|
29
|
+
*
|
|
30
|
+
* Typically you'd use a bundler (Vite + `vite-plugin-singlefile`, or
|
|
31
|
+
* esbuild) to produce the `js` and `css` strings, then pass them here.
|
|
32
|
+
*
|
|
33
|
+
* @example
|
|
34
|
+
* ```ts
|
|
35
|
+
* import { buildAppHtml } from "@json-render/mcp/app";
|
|
36
|
+
* import { readFileSync } from "node:fs";
|
|
37
|
+
*
|
|
38
|
+
* const html = buildAppHtml({
|
|
39
|
+
* title: "Dashboard",
|
|
40
|
+
* js: readFileSync("dist/app.js", "utf-8"),
|
|
41
|
+
* css: readFileSync("dist/app.css", "utf-8"),
|
|
42
|
+
* });
|
|
43
|
+
* ```
|
|
44
|
+
*/
|
|
45
|
+
declare function buildAppHtml(options: BuildAppHtmlOptions): string;
|
|
46
|
+
|
|
47
|
+
export { type BuildAppHtmlOptions, buildAppHtml };
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Options for `buildAppHtml`.
|
|
3
|
+
*/
|
|
4
|
+
interface BuildAppHtmlOptions {
|
|
5
|
+
/** Title for the HTML page. Defaults to `"json-render"`. */
|
|
6
|
+
title?: string;
|
|
7
|
+
/**
|
|
8
|
+
* Inline CSS to inject into the page `<style>` tag.
|
|
9
|
+
* Use this to include Tailwind output or custom styles.
|
|
10
|
+
*/
|
|
11
|
+
css?: string;
|
|
12
|
+
/**
|
|
13
|
+
* Bundled JavaScript for the app entry point.
|
|
14
|
+
* This should be the output of a bundler (Vite, esbuild, etc.)
|
|
15
|
+
* that bundles your React app, registry, and the
|
|
16
|
+
* `useJsonRenderApp` hook into a single script.
|
|
17
|
+
*/
|
|
18
|
+
js: string;
|
|
19
|
+
/**
|
|
20
|
+
* Additional `<head>` content (meta tags, font links, etc.).
|
|
21
|
+
*/
|
|
22
|
+
head?: string;
|
|
23
|
+
}
|
|
24
|
+
/**
|
|
25
|
+
* Build a self-contained HTML string for an MCP App UI resource.
|
|
26
|
+
*
|
|
27
|
+
* The resulting HTML is designed to be served as a `ui://` resource
|
|
28
|
+
* via `registerJsonRenderResource` or `createMcpApp`.
|
|
29
|
+
*
|
|
30
|
+
* Typically you'd use a bundler (Vite + `vite-plugin-singlefile`, or
|
|
31
|
+
* esbuild) to produce the `js` and `css` strings, then pass them here.
|
|
32
|
+
*
|
|
33
|
+
* @example
|
|
34
|
+
* ```ts
|
|
35
|
+
* import { buildAppHtml } from "@json-render/mcp/app";
|
|
36
|
+
* import { readFileSync } from "node:fs";
|
|
37
|
+
*
|
|
38
|
+
* const html = buildAppHtml({
|
|
39
|
+
* title: "Dashboard",
|
|
40
|
+
* js: readFileSync("dist/app.js", "utf-8"),
|
|
41
|
+
* css: readFileSync("dist/app.css", "utf-8"),
|
|
42
|
+
* });
|
|
43
|
+
* ```
|
|
44
|
+
*/
|
|
45
|
+
declare function buildAppHtml(options: BuildAppHtmlOptions): string;
|
|
46
|
+
|
|
47
|
+
export { type BuildAppHtmlOptions, buildAppHtml };
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
|
|
20
|
+
// src/build-app-html-entry.ts
|
|
21
|
+
var build_app_html_entry_exports = {};
|
|
22
|
+
__export(build_app_html_entry_exports, {
|
|
23
|
+
buildAppHtml: () => buildAppHtml
|
|
24
|
+
});
|
|
25
|
+
module.exports = __toCommonJS(build_app_html_entry_exports);
|
|
26
|
+
|
|
27
|
+
// src/build-app-html.ts
|
|
28
|
+
function buildAppHtml(options) {
|
|
29
|
+
const { title = "json-render", css = "", js, head = "" } = options;
|
|
30
|
+
return `<!DOCTYPE html>
|
|
31
|
+
<html lang="en">
|
|
32
|
+
<head>
|
|
33
|
+
<meta charset="UTF-8" />
|
|
34
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
35
|
+
<title>${escapeHtml(title)}</title>
|
|
36
|
+
${head}
|
|
37
|
+
<style>${css}</style>
|
|
38
|
+
</head>
|
|
39
|
+
<body>
|
|
40
|
+
<div id="root"></div>
|
|
41
|
+
<script type="module">${js}</script>
|
|
42
|
+
</body>
|
|
43
|
+
</html>`;
|
|
44
|
+
}
|
|
45
|
+
function escapeHtml(str) {
|
|
46
|
+
return str.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """);
|
|
47
|
+
}
|
|
48
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
49
|
+
0 && (module.exports = {
|
|
50
|
+
buildAppHtml
|
|
51
|
+
});
|
|
52
|
+
//# sourceMappingURL=build-app-html-entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/build-app-html-entry.ts","../src/build-app-html.ts"],"sourcesContent":["/**\n * Server-side utility for building self-contained MCP App HTML.\n *\n * This entry point does NOT depend on React and is safe to import\n * in Node.js / server environments.\n *\n * @packageDocumentation\n */\n\nexport { buildAppHtml } from \"./build-app-html.js\";\nexport type { BuildAppHtmlOptions } from \"./build-app-html.js\";\n","/**\n * Options for `buildAppHtml`.\n */\nexport interface BuildAppHtmlOptions {\n /** Title for the HTML page. Defaults to `\"json-render\"`. */\n title?: string;\n /**\n * Inline CSS to inject into the page `<style>` tag.\n * Use this to include Tailwind output or custom styles.\n */\n css?: string;\n /**\n * Bundled JavaScript for the app entry point.\n * This should be the output of a bundler (Vite, esbuild, etc.)\n * that bundles your React app, registry, and the\n * `useJsonRenderApp` hook into a single script.\n */\n js: string;\n /**\n * Additional `<head>` content (meta tags, font links, etc.).\n */\n head?: string;\n}\n\n/**\n * Build a self-contained HTML string for an MCP App UI resource.\n *\n * The resulting HTML is designed to be served as a `ui://` resource\n * via `registerJsonRenderResource` or `createMcpApp`.\n *\n * Typically you'd use a bundler (Vite + `vite-plugin-singlefile`, or\n * esbuild) to produce the `js` and `css` strings, then pass them here.\n *\n * @example\n * ```ts\n * import { buildAppHtml } from \"@json-render/mcp/app\";\n * import { readFileSync } from \"node:fs\";\n *\n * const html = buildAppHtml({\n * title: \"Dashboard\",\n * js: readFileSync(\"dist/app.js\", \"utf-8\"),\n * css: readFileSync(\"dist/app.css\", \"utf-8\"),\n * });\n * ```\n */\nexport function buildAppHtml(options: BuildAppHtmlOptions): string {\n const { title = \"json-render\", css = \"\", js, head = \"\" } = options;\n\n return `<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>${escapeHtml(title)}</title>\n ${head}\n <style>${css}</style>\n</head>\n<body>\n <div id=\"root\"></div>\n <script type=\"module\">${js}</script>\n</body>\n</html>`;\n}\n\nfunction escapeHtml(str: string): string {\n return str\n .replace(/&/g, \"&\")\n .replace(/</g, \"<\")\n .replace(/>/g, \">\")\n .replace(/\"/g, \""\");\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;AC6CO,SAAS,aAAa,SAAsC;AACjE,QAAM,EAAE,QAAQ,eAAe,MAAM,IAAI,IAAI,OAAO,GAAG,IAAI;AAE3D,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA,WAKE,WAAW,KAAK,CAAC;AAAA,IACxB,IAAI;AAAA,WACG,GAAG;AAAA;AAAA;AAAA;AAAA,0BAIY,EAAE;AAAA;AAAA;AAG5B;AAEA,SAAS,WAAW,KAAqB;AACvC,SAAO,IACJ,QAAQ,MAAM,OAAO,EACrB,QAAQ,MAAM,MAAM,EACpB,QAAQ,MAAM,MAAM,EACpB,QAAQ,MAAM,QAAQ;AAC3B;","names":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
// src/build-app-html.ts
|
|
2
|
+
function buildAppHtml(options) {
|
|
3
|
+
const { title = "json-render", css = "", js, head = "" } = options;
|
|
4
|
+
return `<!DOCTYPE html>
|
|
5
|
+
<html lang="en">
|
|
6
|
+
<head>
|
|
7
|
+
<meta charset="UTF-8" />
|
|
8
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
9
|
+
<title>${escapeHtml(title)}</title>
|
|
10
|
+
${head}
|
|
11
|
+
<style>${css}</style>
|
|
12
|
+
</head>
|
|
13
|
+
<body>
|
|
14
|
+
<div id="root"></div>
|
|
15
|
+
<script type="module">${js}</script>
|
|
16
|
+
</body>
|
|
17
|
+
</html>`;
|
|
18
|
+
}
|
|
19
|
+
function escapeHtml(str) {
|
|
20
|
+
return str.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
export {
|
|
24
|
+
buildAppHtml
|
|
25
|
+
};
|
|
26
|
+
//# sourceMappingURL=chunk-UZ7LXWZJ.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/build-app-html.ts"],"sourcesContent":["/**\n * Options for `buildAppHtml`.\n */\nexport interface BuildAppHtmlOptions {\n /** Title for the HTML page. Defaults to `\"json-render\"`. */\n title?: string;\n /**\n * Inline CSS to inject into the page `<style>` tag.\n * Use this to include Tailwind output or custom styles.\n */\n css?: string;\n /**\n * Bundled JavaScript for the app entry point.\n * This should be the output of a bundler (Vite, esbuild, etc.)\n * that bundles your React app, registry, and the\n * `useJsonRenderApp` hook into a single script.\n */\n js: string;\n /**\n * Additional `<head>` content (meta tags, font links, etc.).\n */\n head?: string;\n}\n\n/**\n * Build a self-contained HTML string for an MCP App UI resource.\n *\n * The resulting HTML is designed to be served as a `ui://` resource\n * via `registerJsonRenderResource` or `createMcpApp`.\n *\n * Typically you'd use a bundler (Vite + `vite-plugin-singlefile`, or\n * esbuild) to produce the `js` and `css` strings, then pass them here.\n *\n * @example\n * ```ts\n * import { buildAppHtml } from \"@json-render/mcp/app\";\n * import { readFileSync } from \"node:fs\";\n *\n * const html = buildAppHtml({\n * title: \"Dashboard\",\n * js: readFileSync(\"dist/app.js\", \"utf-8\"),\n * css: readFileSync(\"dist/app.css\", \"utf-8\"),\n * });\n * ```\n */\nexport function buildAppHtml(options: BuildAppHtmlOptions): string {\n const { title = \"json-render\", css = \"\", js, head = \"\" } = options;\n\n return `<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>${escapeHtml(title)}</title>\n ${head}\n <style>${css}</style>\n</head>\n<body>\n <div id=\"root\"></div>\n <script type=\"module\">${js}</script>\n</body>\n</html>`;\n}\n\nfunction escapeHtml(str: string): string {\n return str\n .replace(/&/g, \"&\")\n .replace(/</g, \"<\")\n .replace(/>/g, \">\")\n .replace(/\"/g, \""\");\n}\n"],"mappings":";AA6CO,SAAS,aAAa,SAAsC;AACjE,QAAM,EAAE,QAAQ,eAAe,MAAM,IAAI,IAAI,OAAO,GAAG,IAAI;AAE3D,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA,WAKE,WAAW,KAAK,CAAC;AAAA,IACxB,IAAI;AAAA,WACG,GAAG;AAAA;AAAA;AAAA;AAAA,0BAIY,EAAE;AAAA;AAAA;AAG5B;AAEA,SAAS,WAAW,KAAqB;AACvC,SAAO,IACJ,QAAQ,MAAM,OAAO,EACrB,QAAQ,MAAM,MAAM,EACpB,QAAQ,MAAM,MAAM,EACpB,QAAQ,MAAM,QAAQ;AAC3B;","names":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@json-render/mcp",
|
|
3
|
-
"version": "0.12.
|
|
3
|
+
"version": "0.12.1",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"description": "MCP Apps integration for @json-render/core. Serve json-render UIs as interactive MCP Apps in Claude, ChatGPT, Cursor, and VS Code.",
|
|
6
6
|
"keywords": [
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
"url": "git+https://github.com/vercel-labs/json-render.git",
|
|
23
23
|
"directory": "packages/mcp"
|
|
24
24
|
},
|
|
25
|
-
"homepage": "https://
|
|
25
|
+
"homepage": "https://json-render.dev",
|
|
26
26
|
"bugs": {
|
|
27
27
|
"url": "https://github.com/vercel-labs/json-render/issues"
|
|
28
28
|
},
|
|
@@ -42,6 +42,11 @@
|
|
|
42
42
|
"types": "./dist/app.d.ts",
|
|
43
43
|
"import": "./dist/app.mjs",
|
|
44
44
|
"require": "./dist/app.js"
|
|
45
|
+
},
|
|
46
|
+
"./build-app-html": {
|
|
47
|
+
"types": "./dist/build-app-html-entry.d.ts",
|
|
48
|
+
"import": "./dist/build-app-html-entry.mjs",
|
|
49
|
+
"require": "./dist/build-app-html-entry.js"
|
|
45
50
|
}
|
|
46
51
|
},
|
|
47
52
|
"files": [
|
|
@@ -50,7 +55,7 @@
|
|
|
50
55
|
"dependencies": {
|
|
51
56
|
"@modelcontextprotocol/ext-apps": "^1.2.0",
|
|
52
57
|
"@modelcontextprotocol/sdk": "^1.27.1",
|
|
53
|
-
"@json-render/core": "0.12.
|
|
58
|
+
"@json-render/core": "0.12.1"
|
|
54
59
|
},
|
|
55
60
|
"devDependencies": {
|
|
56
61
|
"@types/react": "19.2.3",
|