@intlayer/design-system 9.5.3 → 9.5.4
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 +6 -6
- package/dist/esm/api/useAuth/useOAuth2.mjs +1 -1
- package/dist/esm/api/useAuth/useSession.mjs +2 -2
- package/dist/esm/components/DictionaryFieldEditor/DictionaryCreationForm/useDictionaryFormSchema.mjs +6 -6
- package/dist/esm/components/DictionaryFieldEditor/DictionaryCreationForm/useDictionaryFormSchema.mjs.map +1 -1
- package/dist/esm/components/DictionaryFieldEditor/DictionaryDetails/useDictionaryDetailsSchema.mjs +11 -11
- package/dist/esm/components/DictionaryFieldEditor/DictionaryDetails/useDictionaryDetailsSchema.mjs.map +1 -1
- package/dist/esm/components/Form/FormBase.mjs +17 -3
- package/dist/esm/components/Form/FormBase.mjs.map +1 -1
- package/dist/esm/components/Form/elements/FormElement.mjs +4 -1
- package/dist/esm/components/Form/elements/FormElement.mjs.map +1 -1
- package/dist/esm/components/Form/elements/FormElementWrapper.mjs +2 -2
- package/dist/esm/components/Form/elements/FormElementWrapper.mjs.map +1 -1
- package/dist/esm/components/Form/index.mjs +2 -2
- package/dist/esm/components/Status/index.mjs +2 -5
- package/dist/esm/components/Status/index.mjs.map +1 -1
- package/dist/esm/components/index.mjs +2 -2
- package/dist/esm/hooks/index.mjs +10 -8
- package/dist/esm/hooks/useRemoteMcpTools.mjs +56 -0
- package/dist/esm/hooks/useRemoteMcpTools.mjs.map +1 -0
- package/dist/esm/hooks/useWebMCPTools.mjs +44 -0
- package/dist/esm/hooks/useWebMCPTools.mjs.map +1 -0
- package/dist/esm/providers/index.mjs +1 -1
- package/dist/esm/structured-data/index.mjs +6 -6
- package/dist/esm/webmcp/createRemoteMcpTools.mjs +65 -0
- package/dist/esm/webmcp/createRemoteMcpTools.mjs.map +1 -0
- package/dist/esm/webmcp/getModelContext.mjs +28 -0
- package/dist/esm/webmcp/getModelContext.mjs.map +1 -0
- package/dist/esm/webmcp/index.mjs +5 -0
- package/dist/esm/webmcp/registerWebMCPTools.mjs +54 -0
- package/dist/esm/webmcp/registerWebMCPTools.mjs.map +1 -0
- package/dist/esm/webmcp/types.mjs +0 -0
- package/dist/types/components/DictionaryFieldEditor/DictionaryCreationForm/useDictionaryFormSchema.d.ts +7 -7
- package/dist/types/components/DictionaryFieldEditor/DictionaryCreationForm/useDictionaryFormSchema.d.ts.map +1 -1
- package/dist/types/components/DictionaryFieldEditor/DictionaryDetails/useDictionaryDetailsSchema.d.ts +10 -10
- package/dist/types/components/DictionaryFieldEditor/DictionaryDetails/useDictionaryDetailsSchema.d.ts.map +1 -1
- package/dist/types/components/Form/FormBase.d.ts +27 -4
- package/dist/types/components/Form/FormBase.d.ts.map +1 -1
- package/dist/types/components/Form/elements/FormElement.d.ts +1 -0
- package/dist/types/components/Form/elements/FormElement.d.ts.map +1 -1
- package/dist/types/components/Form/elements/FormElementWrapper.d.ts +3 -3
- package/dist/types/components/Form/index.d.ts +2 -2
- package/dist/types/components/index.d.ts +2 -2
- package/dist/types/hooks/index.d.ts +3 -1
- package/dist/types/hooks/useRemoteMcpTools.d.ts +18 -0
- package/dist/types/hooks/useRemoteMcpTools.d.ts.map +1 -0
- package/dist/types/hooks/useWebMCPTools.d.ts +22 -0
- package/dist/types/hooks/useWebMCPTools.d.ts.map +1 -0
- package/dist/types/webmcp/createRemoteMcpTools.d.ts +52 -0
- package/dist/types/webmcp/createRemoteMcpTools.d.ts.map +1 -0
- package/dist/types/webmcp/getModelContext.d.ts +18 -0
- package/dist/types/webmcp/getModelContext.d.ts.map +1 -0
- package/dist/types/webmcp/index.d.ts +5 -0
- package/dist/types/webmcp/registerWebMCPTools.d.ts +19 -0
- package/dist/types/webmcp/registerWebMCPTools.d.ts.map +1 -0
- package/dist/types/webmcp/types.d.ts +74 -0
- package/dist/types/webmcp/types.d.ts.map +1 -0
- package/package.json +33 -27
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
//#region src/webmcp/createRemoteMcpTools.ts
|
|
2
|
+
const isReadOnly = (tool) => tool.annotations?.readOnlyHint === true;
|
|
3
|
+
/**
|
|
4
|
+
* Sends one JSON-RPC request to a streamable-HTTP MCP server.
|
|
5
|
+
*
|
|
6
|
+
* Each call opens its own session: the browser cannot read the
|
|
7
|
+
* `mcp-session-id` response header (it is not CORS-exposed), and the server
|
|
8
|
+
* answers stateless `tools/list` / `tools/call` requests without one.
|
|
9
|
+
*/
|
|
10
|
+
const callJsonRpc = async (serverUrl, method, params, fetchImplementation, signal) => {
|
|
11
|
+
const response = await fetchImplementation(serverUrl, {
|
|
12
|
+
method: "POST",
|
|
13
|
+
headers: {
|
|
14
|
+
"Content-Type": "application/json",
|
|
15
|
+
Accept: "application/json, text/event-stream"
|
|
16
|
+
},
|
|
17
|
+
body: JSON.stringify({
|
|
18
|
+
jsonrpc: "2.0",
|
|
19
|
+
id: 1,
|
|
20
|
+
method,
|
|
21
|
+
params
|
|
22
|
+
}),
|
|
23
|
+
signal
|
|
24
|
+
});
|
|
25
|
+
if (!response.ok) throw new Error(`MCP server answered HTTP ${response.status}`);
|
|
26
|
+
const payload = await response.json();
|
|
27
|
+
if (payload.error) throw new Error(payload.error.message);
|
|
28
|
+
if (payload.result === void 0) throw new Error("MCP server returned an empty result");
|
|
29
|
+
return payload.result;
|
|
30
|
+
};
|
|
31
|
+
/** Flattens an MCP tool result into the text an agent can read. */
|
|
32
|
+
const formatRemoteMcpResult = (result) => {
|
|
33
|
+
const text = (result.content ?? []).map((entry) => entry.text).filter((entry) => typeof entry === "string").join("\n\n");
|
|
34
|
+
if (result.isError) return text ? `Error: ${text}` : "The tool reported an error.";
|
|
35
|
+
return text || "The tool returned no text content.";
|
|
36
|
+
};
|
|
37
|
+
/**
|
|
38
|
+
* Discovers the tools of a remote MCP server and wraps each as a WebMCP tool
|
|
39
|
+
* forwarding its calls, so a page can expose an existing MCP server (the
|
|
40
|
+
* Intlayer documentation server, for instance) to browser agents without
|
|
41
|
+
* re-implementing its tools.
|
|
42
|
+
*
|
|
43
|
+
* @returns The wrapped tools, ready for `registerWebMCPTools`.
|
|
44
|
+
*/
|
|
45
|
+
const createRemoteMcpTools = async ({ serverUrl, filter = isReadOnly, namePrefix = "", renameTool = (name) => name, signal, fetch: fetchImplementation = globalThis.fetch }) => {
|
|
46
|
+
const { tools } = await callJsonRpc(serverUrl, "tools/list", void 0, fetchImplementation, signal);
|
|
47
|
+
return tools.filter(filter).map((tool) => ({
|
|
48
|
+
name: `${namePrefix}${renameTool(tool.name)}`,
|
|
49
|
+
title: tool.title,
|
|
50
|
+
description: tool.description ?? tool.name,
|
|
51
|
+
inputSchema: tool.inputSchema ?? {
|
|
52
|
+
type: "object",
|
|
53
|
+
properties: {}
|
|
54
|
+
},
|
|
55
|
+
annotations: tool.annotations,
|
|
56
|
+
execute: async (input, options) => formatRemoteMcpResult(await callJsonRpc(serverUrl, "tools/call", {
|
|
57
|
+
name: tool.name,
|
|
58
|
+
arguments: input ?? {}
|
|
59
|
+
}, fetchImplementation, options?.signal))
|
|
60
|
+
}));
|
|
61
|
+
};
|
|
62
|
+
|
|
63
|
+
//#endregion
|
|
64
|
+
export { createRemoteMcpTools, formatRemoteMcpResult };
|
|
65
|
+
//# sourceMappingURL=createRemoteMcpTools.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"createRemoteMcpTools.mjs","names":[],"sources":["../../../src/webmcp/createRemoteMcpTools.ts"],"sourcesContent":["import type {\n WebMCPJsonSchema,\n WebMCPTool,\n WebMCPToolAnnotations,\n} from './types';\n\n/** A tool as described by an MCP server's `tools/list` response. */\nexport type RemoteMcpToolDescriptor = {\n name: string;\n title?: string;\n description?: string;\n inputSchema?: WebMCPJsonSchema;\n annotations?: WebMCPToolAnnotations;\n};\n\n/** Text-bearing entry of an MCP `tools/call` result. */\ntype RemoteMcpContent = { type: string; text?: string };\n\ntype RemoteMcpToolCallResult = {\n content?: RemoteMcpContent[];\n isError?: boolean;\n};\n\ntype JsonRpcResponse<TResult> = {\n jsonrpc: '2.0';\n id: number;\n result?: TResult;\n error?: { code: number; message: string };\n};\n\nexport type CreateRemoteMcpToolsOptions = {\n /** Streamable-HTTP endpoint of the MCP server (`https://mcp.intlayer.org`). */\n serverUrl: string;\n /**\n * Keeps only the tools worth exposing to a browser agent. Defaults to\n * read-only tools, which excludes anything needing credentials.\n */\n filter?: (tool: RemoteMcpToolDescriptor) => boolean;\n /** Prepended to every tool name to avoid collisions with page tools. */\n namePrefix?: string;\n /**\n * Rewrites a server tool name before it is exposed, e.g. to camelCase a\n * kebab-case name. The server still receives the original name.\n */\n renameTool?: (name: string) => string;\n /** Aborts the discovery request. */\n signal?: AbortSignal;\n /** Injectable for tests. Defaults to the global `fetch`. */\n fetch?: typeof globalThis.fetch;\n};\n\nconst isReadOnly = (tool: RemoteMcpToolDescriptor): boolean =>\n tool.annotations?.readOnlyHint === true;\n\n/**\n * Sends one JSON-RPC request to a streamable-HTTP MCP server.\n *\n * Each call opens its own session: the browser cannot read the\n * `mcp-session-id` response header (it is not CORS-exposed), and the server\n * answers stateless `tools/list` / `tools/call` requests without one.\n */\nconst callJsonRpc = async <TResult>(\n serverUrl: string,\n method: string,\n params: Record<string, unknown> | undefined,\n fetchImplementation: typeof globalThis.fetch,\n signal?: AbortSignal\n): Promise<TResult> => {\n const response = await fetchImplementation(serverUrl, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n Accept: 'application/json, text/event-stream',\n },\n body: JSON.stringify({ jsonrpc: '2.0', id: 1, method, params }),\n signal,\n });\n\n if (!response.ok) {\n throw new Error(`MCP server answered HTTP ${response.status}`);\n }\n\n const payload = (await response.json()) as JsonRpcResponse<TResult>;\n\n if (payload.error) {\n throw new Error(payload.error.message);\n }\n\n if (payload.result === undefined) {\n throw new Error('MCP server returned an empty result');\n }\n\n return payload.result;\n};\n\n/** Flattens an MCP tool result into the text an agent can read. */\nexport const formatRemoteMcpResult = (\n result: RemoteMcpToolCallResult\n): string => {\n const text = (result.content ?? [])\n .map((entry) => entry.text)\n .filter((entry): entry is string => typeof entry === 'string')\n .join('\\n\\n');\n\n if (result.isError) {\n return text ? `Error: ${text}` : 'The tool reported an error.';\n }\n\n return text || 'The tool returned no text content.';\n};\n\n/**\n * Discovers the tools of a remote MCP server and wraps each as a WebMCP tool\n * forwarding its calls, so a page can expose an existing MCP server (the\n * Intlayer documentation server, for instance) to browser agents without\n * re-implementing its tools.\n *\n * @returns The wrapped tools, ready for `registerWebMCPTools`.\n */\nexport const createRemoteMcpTools = async ({\n serverUrl,\n filter = isReadOnly,\n namePrefix = '',\n renameTool = (name) => name,\n signal,\n fetch: fetchImplementation = globalThis.fetch,\n}: CreateRemoteMcpToolsOptions): Promise<WebMCPTool[]> => {\n const { tools } = await callJsonRpc<{ tools: RemoteMcpToolDescriptor[] }>(\n serverUrl,\n 'tools/list',\n undefined,\n fetchImplementation,\n signal\n );\n\n return tools.filter(filter).map((tool) => ({\n name: `${namePrefix}${renameTool(tool.name)}`,\n title: tool.title,\n description: tool.description ?? tool.name,\n inputSchema: tool.inputSchema ?? { type: 'object', properties: {} },\n annotations: tool.annotations,\n execute: async (input, options) =>\n formatRemoteMcpResult(\n await callJsonRpc<RemoteMcpToolCallResult>(\n serverUrl,\n 'tools/call',\n { name: tool.name, arguments: input ?? {} },\n fetchImplementation,\n options?.signal\n )\n ),\n }));\n};\n"],"mappings":";AAmDA,MAAM,cAAc,SAClB,KAAK,aAAa,iBAAiB;;;;;;;;AASrC,MAAM,cAAc,OAClB,WACA,QACA,QACA,qBACA,WACqB;CACrB,MAAM,WAAW,MAAM,oBAAoB,WAAW;EACpD,QAAQ;EACR,SAAS;GACP,gBAAgB;GAChB,QAAQ;EACV;EACA,MAAM,KAAK,UAAU;GAAE,SAAS;GAAO,IAAI;GAAG;GAAQ;EAAO,CAAC;EAC9D;CACF,CAAC;CAED,IAAI,CAAC,SAAS,IACZ,MAAM,IAAI,MAAM,4BAA4B,SAAS,QAAQ;CAG/D,MAAM,UAAW,MAAM,SAAS,KAAK;CAErC,IAAI,QAAQ,OACV,MAAM,IAAI,MAAM,QAAQ,MAAM,OAAO;CAGvC,IAAI,QAAQ,WAAW,QACrB,MAAM,IAAI,MAAM,qCAAqC;CAGvD,OAAO,QAAQ;AACjB;;AAGA,MAAa,yBACX,WACW;CACX,MAAM,QAAQ,OAAO,WAAW,CAAC,EAAC,CAC/B,KAAK,UAAU,MAAM,IAAI,CAAC,CAC1B,QAAQ,UAA2B,OAAO,UAAU,QAAQ,CAAC,CAC7D,KAAK,MAAM;CAEd,IAAI,OAAO,SACT,OAAO,OAAO,UAAU,SAAS;CAGnC,OAAO,QAAQ;AACjB;;;;;;;;;AAUA,MAAa,uBAAuB,OAAO,EACzC,WACA,SAAS,YACT,aAAa,IACb,cAAc,SAAS,MACvB,QACA,OAAO,sBAAsB,WAAW,YACgB;CACxD,MAAM,EAAE,UAAU,MAAM,YACtB,WACA,cACA,QACA,qBACA,MACF;CAEA,OAAO,MAAM,OAAO,MAAM,CAAC,CAAC,KAAK,UAAU;EACzC,MAAM,GAAG,aAAa,WAAW,KAAK,IAAI;EAC1C,OAAO,KAAK;EACZ,aAAa,KAAK,eAAe,KAAK;EACtC,aAAa,KAAK,eAAe;GAAE,MAAM;GAAU,YAAY,CAAC;EAAE;EAClE,aAAa,KAAK;EAClB,SAAS,OAAO,OAAO,YACrB,sBACE,MAAM,YACJ,WACA,cACA;GAAE,MAAM,KAAK;GAAM,WAAW,SAAS,CAAC;EAAE,GAC1C,qBACA,SAAS,MACX,CACF;CACJ,EAAE;AACJ"}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
//#region src/webmcp/getModelContext.ts
|
|
2
|
+
/**
|
|
3
|
+
* Resolves the WebMCP entry point exposed by the current browser, if any.
|
|
4
|
+
*
|
|
5
|
+
* Candidates are probed in order: `navigator.modelContextTesting` (Chrome with
|
|
6
|
+
* the `#enable-webmcp-testing` flag), `navigator.modelContext` (Chrome early
|
|
7
|
+
* preview / origin trial) and `document.modelContext` (W3C draft). Only an
|
|
8
|
+
* object able to register tools is returned, so callers can rely on
|
|
9
|
+
* `registerTool` being present.
|
|
10
|
+
*
|
|
11
|
+
* @returns The model context, or `null` outside a supporting browser.
|
|
12
|
+
*/
|
|
13
|
+
const getModelContext = () => {
|
|
14
|
+
if (typeof navigator === "undefined") return null;
|
|
15
|
+
const navigatorHost = navigator;
|
|
16
|
+
const documentHost = typeof document === "undefined" ? void 0 : document;
|
|
17
|
+
return [
|
|
18
|
+
navigatorHost.modelContextTesting,
|
|
19
|
+
navigatorHost.modelContext,
|
|
20
|
+
documentHost?.modelContext
|
|
21
|
+
].find((candidate) => typeof candidate?.registerTool === "function") ?? null;
|
|
22
|
+
};
|
|
23
|
+
/** Whether the current browser exposes a usable WebMCP entry point. */
|
|
24
|
+
const isWebMCPAvailable = () => getModelContext() !== null;
|
|
25
|
+
|
|
26
|
+
//#endregion
|
|
27
|
+
export { getModelContext, isWebMCPAvailable };
|
|
28
|
+
//# sourceMappingURL=getModelContext.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"getModelContext.mjs","names":[],"sources":["../../../src/webmcp/getModelContext.ts"],"sourcesContent":["import type { ModelContext, ModelContextHost } from './types';\n\n/**\n * Resolves the WebMCP entry point exposed by the current browser, if any.\n *\n * Candidates are probed in order: `navigator.modelContextTesting` (Chrome with\n * the `#enable-webmcp-testing` flag), `navigator.modelContext` (Chrome early\n * preview / origin trial) and `document.modelContext` (W3C draft). Only an\n * object able to register tools is returned, so callers can rely on\n * `registerTool` being present.\n *\n * @returns The model context, or `null` outside a supporting browser.\n */\nexport const getModelContext = (): ModelContext | null => {\n if (typeof navigator === 'undefined') return null;\n\n const navigatorHost = navigator as Navigator & ModelContextHost;\n const documentHost =\n typeof document === 'undefined'\n ? undefined\n : (document as Document & ModelContextHost);\n\n const candidates: (ModelContext | undefined)[] = [\n navigatorHost.modelContextTesting,\n navigatorHost.modelContext,\n documentHost?.modelContext,\n ];\n\n return (\n candidates.find(\n (candidate) => typeof candidate?.registerTool === 'function'\n ) ?? null\n );\n};\n\n/** Whether the current browser exposes a usable WebMCP entry point. */\nexport const isWebMCPAvailable = (): boolean => getModelContext() !== null;\n"],"mappings":";;;;;;;;;;;;AAaA,MAAa,wBAA6C;CACxD,IAAI,OAAO,cAAc,aAAa,OAAO;CAE7C,MAAM,gBAAgB;CACtB,MAAM,eACJ,OAAO,aAAa,cAChB,SACC;CAQP,OACE;EANA,cAAc;EACd,cAAc;EACd,cAAc;CAIL,CAAC,CAAC,MACR,cAAc,OAAO,WAAW,iBAAiB,UACpD,KAAK;AAET;;AAGA,MAAa,0BAAmC,gBAAgB,MAAM"}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { getModelContext, isWebMCPAvailable } from "./getModelContext.mjs";
|
|
2
|
+
import { formatToolResult, registerWebMCPTools } from "./registerWebMCPTools.mjs";
|
|
3
|
+
import { createRemoteMcpTools, formatRemoteMcpResult } from "./createRemoteMcpTools.mjs";
|
|
4
|
+
|
|
5
|
+
export { createRemoteMcpTools, formatRemoteMcpResult, formatToolResult, getModelContext, isWebMCPAvailable, registerWebMCPTools };
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import { getModelContext } from "./getModelContext.mjs";
|
|
2
|
+
|
|
3
|
+
//#region src/webmcp/registerWebMCPTools.ts
|
|
4
|
+
/** Serializes a tool result the way the browser would, for logging and errors. */
|
|
5
|
+
const formatToolResult = (result) => typeof result === "string" ? result : JSON.stringify(result, null, 2);
|
|
6
|
+
/**
|
|
7
|
+
* Wraps `execute` so a thrown error reaches the agent as a readable message
|
|
8
|
+
* instead of a rejected promise the browser may surface opaquely.
|
|
9
|
+
*/
|
|
10
|
+
const toSafeTool = (tool) => ({
|
|
11
|
+
...tool,
|
|
12
|
+
execute: async (input, options) => {
|
|
13
|
+
try {
|
|
14
|
+
return await tool.execute(input, options);
|
|
15
|
+
} catch (error) {
|
|
16
|
+
const message = error instanceof Error ? error.message : String(error);
|
|
17
|
+
return `Tool "${tool.name}" failed: ${message}`;
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
});
|
|
21
|
+
/**
|
|
22
|
+
* Registers tools with the WebMCP API and returns a function undoing it.
|
|
23
|
+
*
|
|
24
|
+
* Unregistration goes through `unregisterTool(name)` when the browser has it,
|
|
25
|
+
* and through the `AbortSignal` handed to `registerTool` otherwise. Without a
|
|
26
|
+
* model context the call is a no-op returning a no-op, so callers do not need
|
|
27
|
+
* to feature-detect.
|
|
28
|
+
*
|
|
29
|
+
* @param tools - Tools to expose. Names must be unique within the page.
|
|
30
|
+
* @param modelContext - Defaults to the entry point of the current browser.
|
|
31
|
+
* @returns A cleanup function removing every tool this call registered.
|
|
32
|
+
*/
|
|
33
|
+
const registerWebMCPTools = (tools, modelContext = getModelContext()) => {
|
|
34
|
+
if (!modelContext?.registerTool) return () => {};
|
|
35
|
+
const abortController = new AbortController();
|
|
36
|
+
const registeredNames = [];
|
|
37
|
+
for (const tool of tools) try {
|
|
38
|
+
modelContext.registerTool(toSafeTool(tool), { signal: abortController.signal });
|
|
39
|
+
registeredNames.push(tool.name);
|
|
40
|
+
} catch (error) {
|
|
41
|
+
console.warn(`[WebMCP] Could not register tool "${tool.name}"`, error);
|
|
42
|
+
}
|
|
43
|
+
return () => {
|
|
44
|
+
abortController.abort();
|
|
45
|
+
if (typeof modelContext.unregisterTool !== "function") return;
|
|
46
|
+
for (const name of registeredNames) try {
|
|
47
|
+
modelContext.unregisterTool(name);
|
|
48
|
+
} catch {}
|
|
49
|
+
};
|
|
50
|
+
};
|
|
51
|
+
|
|
52
|
+
//#endregion
|
|
53
|
+
export { formatToolResult, registerWebMCPTools };
|
|
54
|
+
//# sourceMappingURL=registerWebMCPTools.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"registerWebMCPTools.mjs","names":[],"sources":["../../../src/webmcp/registerWebMCPTools.ts"],"sourcesContent":["import { getModelContext } from './getModelContext';\nimport type {\n ModelContext,\n WebMCPTool,\n WebMCPToolExecuteOptions,\n WebMCPToolResult,\n} from './types';\n\n/** Serializes a tool result the way the browser would, for logging and errors. */\nexport const formatToolResult = (result: WebMCPToolResult): string =>\n typeof result === 'string' ? result : JSON.stringify(result, null, 2);\n\n/**\n * Wraps `execute` so a thrown error reaches the agent as a readable message\n * instead of a rejected promise the browser may surface opaquely.\n */\nconst toSafeTool = <TInput>(tool: WebMCPTool<TInput>): WebMCPTool<TInput> => ({\n ...tool,\n execute: async (input: TInput, options?: WebMCPToolExecuteOptions) => {\n try {\n return await tool.execute(input, options);\n } catch (error) {\n const message = error instanceof Error ? error.message : String(error);\n return `Tool \"${tool.name}\" failed: ${message}`;\n }\n },\n});\n\n/**\n * Registers tools with the WebMCP API and returns a function undoing it.\n *\n * Unregistration goes through `unregisterTool(name)` when the browser has it,\n * and through the `AbortSignal` handed to `registerTool` otherwise. Without a\n * model context the call is a no-op returning a no-op, so callers do not need\n * to feature-detect.\n *\n * @param tools - Tools to expose. Names must be unique within the page.\n * @param modelContext - Defaults to the entry point of the current browser.\n * @returns A cleanup function removing every tool this call registered.\n */\nexport const registerWebMCPTools = (\n tools: WebMCPTool<never>[],\n modelContext: ModelContext | null = getModelContext()\n): (() => void) => {\n if (!modelContext?.registerTool) return () => {};\n\n const abortController = new AbortController();\n const registeredNames: string[] = [];\n\n for (const tool of tools) {\n try {\n void modelContext.registerTool(toSafeTool(tool), {\n signal: abortController.signal,\n });\n registeredNames.push(tool.name);\n } catch (error) {\n console.warn(`[WebMCP] Could not register tool \"${tool.name}\"`, error);\n }\n }\n\n return () => {\n abortController.abort();\n\n if (typeof modelContext.unregisterTool !== 'function') return;\n\n for (const name of registeredNames) {\n try {\n void modelContext.unregisterTool(name);\n } catch {\n // Already gone (page-level clearContext, abort handled it, …).\n }\n }\n };\n};\n"],"mappings":";;;;AASA,MAAa,oBAAoB,WAC/B,OAAO,WAAW,WAAW,SAAS,KAAK,UAAU,QAAQ,MAAM,CAAC;;;;;AAMtE,MAAM,cAAsB,UAAkD;CAC5E,GAAG;CACH,SAAS,OAAO,OAAe,YAAuC;EACpE,IAAI;GACF,OAAO,MAAM,KAAK,QAAQ,OAAO,OAAO;EAC1C,SAAS,OAAO;GACd,MAAM,UAAU,iBAAiB,QAAQ,MAAM,UAAU,OAAO,KAAK;GACrE,OAAO,SAAS,KAAK,KAAK,YAAY;EACxC;CACF;AACF;;;;;;;;;;;;;AAcA,MAAa,uBACX,OACA,eAAoC,gBAAgB,MACnC;CACjB,IAAI,CAAC,cAAc,cAAc,aAAa,CAAC;CAE/C,MAAM,kBAAkB,IAAI,gBAAgB;CAC5C,MAAM,kBAA4B,CAAC;CAEnC,KAAK,MAAM,QAAQ,OACjB,IAAI;EACF,AAAK,aAAa,aAAa,WAAW,IAAI,GAAG,EAC/C,QAAQ,gBAAgB,OAC1B,CAAC;EACD,gBAAgB,KAAK,KAAK,IAAI;CAChC,SAAS,OAAO;EACd,QAAQ,KAAK,qCAAqC,KAAK,KAAK,IAAI,KAAK;CACvE;CAGF,aAAa;EACX,gBAAgB,MAAM;EAEtB,IAAI,OAAO,aAAa,mBAAmB,YAAY;EAEvD,KAAK,MAAM,QAAQ,iBACjB,IAAI;GACF,AAAK,aAAa,eAAe,IAAI;EACvC,QAAQ,CAER;CAEJ;AACF"}
|
|
File without changes
|
|
@@ -1,17 +1,17 @@
|
|
|
1
|
-
import { z } from "zod";
|
|
1
|
+
import { z } from "zod/mini";
|
|
2
2
|
//#region src/components/DictionaryFieldEditor/DictionaryCreationForm/useDictionaryFormSchema.d.ts
|
|
3
3
|
export declare const QUALIFIER_TYPES: readonly ['none', 'item', 'variant'];
|
|
4
4
|
export type QualifierType = (typeof QUALIFIER_TYPES)[number];
|
|
5
|
-
export declare const useDictionarySchema: (projectId: string) => z.
|
|
6
|
-
key: z.
|
|
7
|
-
projectIds: z.
|
|
8
|
-
qualifierType: z.
|
|
5
|
+
export declare const useDictionarySchema: (projectId: string) => z.ZodMiniObject<{
|
|
6
|
+
key: z.ZodMiniDefault<z.ZodMiniString<string>>;
|
|
7
|
+
projectIds: z.ZodMiniDefault<z.ZodMiniArray<z.ZodMiniString<string>>>;
|
|
8
|
+
qualifierType: z.ZodMiniDefault<z.ZodMiniEnum<{
|
|
9
9
|
item: "item";
|
|
10
10
|
none: "none";
|
|
11
11
|
variant: "variant";
|
|
12
12
|
}>>;
|
|
13
|
-
item: z.
|
|
14
|
-
variant: z.
|
|
13
|
+
item: z.ZodMiniOptional<z.ZodMiniNumber<unknown>>;
|
|
14
|
+
variant: z.ZodMiniOptional<z.ZodMiniString<string>>;
|
|
15
15
|
}, z.core.$strip>;
|
|
16
16
|
export type DictionaryFormData = z.infer<ReturnType<typeof useDictionarySchema>>;
|
|
17
17
|
//#endregion
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useDictionaryFormSchema.d.ts","names":[],"sources":["../../../../../src/components/DictionaryFieldEditor/DictionaryCreationForm/useDictionaryFormSchema.ts"],"mappings":";;qBAGa;YACD,wBAAwB;qBAEvB,sBAAmB,sBAAqB,EAAA;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"useDictionaryFormSchema.d.ts","names":[],"sources":["../../../../../src/components/DictionaryFieldEditor/DictionaryCreationForm/useDictionaryFormSchema.ts"],"mappings":";;qBAGa;YACD,wBAAwB;qBAEvB,sBAAmB,sBAAqB,EAAA;;;;;;;;;;GAmCpD,EAAA,KAAA;YAEW,qBAAqB,EAAE,MACjC,kBAAkB"}
|
|
@@ -1,23 +1,23 @@
|
|
|
1
|
-
import { z } from "zod";
|
|
1
|
+
import { z } from "zod/mini";
|
|
2
2
|
//#region src/components/DictionaryFieldEditor/DictionaryDetails/useDictionaryDetailsSchema.d.ts
|
|
3
|
-
export declare const useDictionaryDetailsSchema: (projectId: string) => z.
|
|
4
|
-
title: z.
|
|
5
|
-
key: z.
|
|
6
|
-
description: z.
|
|
7
|
-
projectIds: z.
|
|
8
|
-
tags: z.
|
|
9
|
-
location: z.
|
|
3
|
+
export declare const useDictionaryDetailsSchema: (projectId: string) => z.ZodMiniObject<{
|
|
4
|
+
title: z.ZodMiniOptional<z.ZodMiniString<string>>;
|
|
5
|
+
key: z.ZodMiniDefault<z.ZodMiniString<string>>;
|
|
6
|
+
description: z.ZodMiniOptional<z.ZodMiniString<string>>;
|
|
7
|
+
projectIds: z.ZodMiniDefault<z.ZodMiniArray<z.ZodMiniString<string>>>;
|
|
8
|
+
tags: z.ZodMiniDefault<z.ZodMiniArray<z.ZodMiniString<string>>>;
|
|
9
|
+
location: z.ZodMiniOptional<z.ZodMiniEnum<{
|
|
10
10
|
hybrid: "hybrid";
|
|
11
11
|
local: "local";
|
|
12
12
|
plugin: "plugin";
|
|
13
13
|
remote: "remote";
|
|
14
14
|
}>>;
|
|
15
|
-
importMode: z.
|
|
15
|
+
importMode: z.ZodMiniOptional<z.ZodMiniEnum<{
|
|
16
16
|
dynamic: "dynamic";
|
|
17
17
|
fetch: "fetch";
|
|
18
18
|
static: "static";
|
|
19
19
|
}>>;
|
|
20
|
-
filePath: z.
|
|
20
|
+
filePath: z.ZodMiniOptional<z.ZodMiniString<string>>;
|
|
21
21
|
}, z.core.$strip>;
|
|
22
22
|
export type DictionaryDetailsFormData = z.infer<ReturnType<typeof useDictionaryDetailsSchema>>;
|
|
23
23
|
//#endregion
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useDictionaryDetailsSchema.d.ts","names":[],"sources":["../../../../../src/components/DictionaryFieldEditor/DictionaryDetails/useDictionaryDetailsSchema.ts"],"mappings":";;qBAGa,6BAA0B,sBAAqB,EAAA;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"useDictionaryDetailsSchema.d.ts","names":[],"sources":["../../../../../src/components/DictionaryFieldEditor/DictionaryDetails/useDictionaryDetailsSchema.ts"],"mappings":";;qBAGa,6BAA0B,sBAAqB,EAAA;;;;;;;;;;;;;;;;;;GA8F3D,EAAA,KAAA;YAEW,4BAA4B,EAAE,MACxC,kBAAkB"}
|
|
@@ -1,18 +1,41 @@
|
|
|
1
1
|
import { HTMLAttributes } from "react";
|
|
2
|
-
import {
|
|
2
|
+
import { ZodMiniObject, z } from "zod/mini";
|
|
3
3
|
import { FormProviderProps, UseFormProps } from "react-hook-form";
|
|
4
4
|
//#region src/components/Form/FormBase.d.ts
|
|
5
|
-
|
|
5
|
+
/**
|
|
6
|
+
* Declarative WebMCP registration: a form carrying `toolname` becomes a tool
|
|
7
|
+
* browser agents can fill and submit, its controls' `name` attributes forming
|
|
8
|
+
* the input schema.
|
|
9
|
+
*
|
|
10
|
+
* @see https://github.com/webmachinelearning/webmcp/blob/main/declarative-api-explainer.md
|
|
11
|
+
*/
|
|
12
|
+
export type FormWebMCPProps = {
|
|
13
|
+
/** Tool name exposed to agents (verb + noun, e.g. `subscribeToNewsletter`). */
|
|
14
|
+
toolName?: string;
|
|
15
|
+
/** What submitting the form does, for the agent. */
|
|
16
|
+
toolDescription?: string;
|
|
17
|
+
/**
|
|
18
|
+
* Lets an agent submit without the user reviewing the filled form first.
|
|
19
|
+
* Leave unset for anything consequential (payments, messages, sign-ups).
|
|
20
|
+
*/
|
|
21
|
+
toolAutoSubmit?: boolean;
|
|
22
|
+
};
|
|
23
|
+
type FormProps<T extends ZodMiniObject> = HTMLAttributes<HTMLFormElement> & FormProviderProps<z.infer<T>> & FormWebMCPProps & {
|
|
6
24
|
schema?: T;
|
|
7
25
|
onSubmit?: (data: z.infer<T>) => void | Promise<void>;
|
|
8
26
|
onSubmitSuccess?: (data: z.infer<T>) => void | Promise<void>;
|
|
9
27
|
onSubmitError?: (error: Error) => void | Promise<void>;
|
|
10
28
|
autoComplete?: boolean;
|
|
11
29
|
};
|
|
12
|
-
|
|
30
|
+
/**
|
|
31
|
+
* Maps the camelCase props onto the lowercase attributes the browser reads.
|
|
32
|
+
* Typed as a plain record: React's JSX types do not know these attributes yet.
|
|
33
|
+
*/
|
|
34
|
+
export declare const getFormWebMCPAttributes: ({ toolName, toolDescription, toolAutoSubmit }: FormWebMCPProps) => Record<string, string | undefined>;
|
|
35
|
+
export declare const Form: <T extends ZodMiniObject>({ schema, onSubmit: onSubmitProp, onSubmitSuccess: onSubmitSuccessProp, onSubmitError: onSubmitErrorProp, className, children, autoComplete, method, toolName, toolDescription, toolAutoSubmit, ...props }: FormProps<T> & {
|
|
13
36
|
method?: string;
|
|
14
37
|
}) => import("react").JSX.Element;
|
|
15
|
-
export declare const useForm: <T extends
|
|
38
|
+
export declare const useForm: <T extends ZodMiniObject>(schema: T, props?: UseFormProps<z.infer<T>>) => {
|
|
16
39
|
form: import("react-hook-form").UseFormReturn<z.infer<T>, any, z.infer<T>>;
|
|
17
40
|
isSubmitting: boolean;
|
|
18
41
|
isSubmitted: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormBase.d.ts","names":[],"sources":["../../../../src/components/Form/FormBase.tsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"FormBase.d.ts","names":[],"sources":["../../../../src/components/Form/FormBase.tsx"],"mappings":";;;;;;;;;;;YAqBY;;EAEV;;EAEA;;;;;EAKA;;KAGG,UAAU,UAAU,iBAAiB,eAAe,mBACvD,kBAAkB,EAAE,MAAM,MAC1B;EACE,SAAS;EACT,YAAY,MAAM,EAAE,MAAM,cAAc;EACxC,mBAAmB,MAAM,EAAE,MAAM,cAAc;EAC/C,iBAAiB,OAAO,iBAAiB;EACzC;;;;;;qBAOS,4BAAuB,UAAA,iBAAA,kBAIjC,oBAAkB;qBAqBR,OAAQ,UAAU,iBAAa,QAAA,UAAA,cAAA,iBAAA,qBAAA,eAAA,mBAAA,WAAA,UAAA,cAAA,QAAA,UAAA,iBAAA,mBAAA,SAazC,UAAU;EAAO;sBAAiB,IAAA;qBA6DxB,UAAW,UAAU,eAAa,QACrC,GAAC,QACD,aAAa,EAAE,MAAM"}
|
|
@@ -11,6 +11,7 @@ export type FormElementProps<T extends ElementType> = {
|
|
|
11
11
|
showErrorMessage?: boolean;
|
|
12
12
|
focus?: boolean;
|
|
13
13
|
layoutClassName?: string;
|
|
14
|
+
toolParamDescription?: string;
|
|
14
15
|
} & Omit<FormItemLayoutProps, 'children'>;
|
|
15
16
|
/**
|
|
16
17
|
* FormElement is a component that allows you to create a form element with a label, description, error message, and validation.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormElement.d.ts","names":[],"sources":["../../../../../src/components/Form/elements/FormElement.tsx"],"mappings":";;;;YAWY,iBAAiB,UAAU;EACrC;EACA,SAAS;EACT,QAAQ;EACR;EACA;EACA;EACA;EACA;IACE,KAAK;;;;;;;;
|
|
1
|
+
{"version":3,"file":"FormElement.d.ts","names":[],"sources":["../../../../../src/components/Form/elements/FormElement.tsx"],"mappings":";;;;YAWY,iBAAiB,UAAU;EACrC;EACA,SAAS;EACT,QAAQ;EACR;EACA;EACA;EACA;EACA;EACA;IACE,KAAK;;;;;;;;qBAuFI,cAAe,UAAU,aAAW,OACxC,iBAAiB,KAAK,eAAe,uBAAE,IAAA"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { FC, HTMLProps } from "react";
|
|
2
|
-
import { z } from "zod";
|
|
2
|
+
import { z } from "zod/mini";
|
|
3
3
|
//#region src/components/Form/elements/FormElementWrapper.d.ts
|
|
4
4
|
type FormElementWrapperProps = HTMLProps<HTMLFormElement> & {
|
|
5
|
-
schema?: z.
|
|
6
|
-
values?: z.infer<z.
|
|
5
|
+
schema?: z.ZodMiniObject;
|
|
6
|
+
values?: z.infer<z.ZodMiniObject>;
|
|
7
7
|
};
|
|
8
8
|
export declare const FormElementWrapper: FC<FormElementWrapperProps>;
|
|
9
9
|
//#endregion
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Button } from "../Button/Button.js";
|
|
2
2
|
import "../Button/index.js";
|
|
3
|
-
import { useForm } from "./FormBase.js";
|
|
3
|
+
import { FormWebMCPProps, getFormWebMCPAttributes, useForm } from "./FormBase.js";
|
|
4
4
|
import { Form } from "./Form.js";
|
|
5
5
|
import { FormControl } from "./FormControl.js";
|
|
6
6
|
import { FormDescription } from "./FormDescription.js";
|
|
@@ -22,4 +22,4 @@ import { SearchInputElement } from "./elements/SearchInputElement.js";
|
|
|
22
22
|
import { SelectElement } from "./elements/SelectElement.js";
|
|
23
23
|
import { SwitchSelectorElement } from "./elements/SwitchSelectorElement.js";
|
|
24
24
|
import { TextAreaElement } from "./elements/TextAreaElement.js";
|
|
25
|
-
export { Form, AutoSizedTextAreaElement as FormAutoSizedTextArea, Button as FormButton, CheckboxElement as FormCheckbox, FormControl, FormDescription, EditableFieldInputElement as FormEditableFieldInput, EditableFieldTextAreaElement as FormEditableFieldTextArea, FormElement, FormField, InputElement as FormInput, InputPasswordElement as FormInputPassword, FormItem, FormLabelLayout as FormLabel, FormMessage, MultiSelectElement as FormMultiSelect, OTPElement as FormOTP, SearchInputElement as FormSearchInput, SelectElement as FormSelect, SwitchSelectorElement as FormSwitchSelector, TextAreaElement as FormTextArea, useForm, useFormField };
|
|
25
|
+
export { Form, AutoSizedTextAreaElement as FormAutoSizedTextArea, Button as FormButton, CheckboxElement as FormCheckbox, FormControl, FormDescription, EditableFieldInputElement as FormEditableFieldInput, EditableFieldTextAreaElement as FormEditableFieldTextArea, FormElement, FormField, InputElement as FormInput, InputPasswordElement as FormInputPassword, FormItem, FormLabelLayout as FormLabel, FormMessage, MultiSelectElement as FormMultiSelect, OTPElement as FormOTP, SearchInputElement as FormSearchInput, SelectElement as FormSelect, SwitchSelectorElement as FormSwitchSelector, TextAreaElement as FormTextArea, type FormWebMCPProps, getFormWebMCPAttributes, useForm, useFormField };
|
|
@@ -56,7 +56,7 @@ import { Flag } from "./Flags/Flag.js";
|
|
|
56
56
|
import { flags_d_exports } from "./Flags/flags.js";
|
|
57
57
|
import "./Flags/index.js";
|
|
58
58
|
import { Footer, FooterLink, LinkGroup } from "./Footer/index.js";
|
|
59
|
-
import { useForm } from "./Form/FormBase.js";
|
|
59
|
+
import { FormWebMCPProps, getFormWebMCPAttributes, useForm } from "./Form/FormBase.js";
|
|
60
60
|
import { Form } from "./Form/Form.js";
|
|
61
61
|
import { FormControl } from "./Form/FormControl.js";
|
|
62
62
|
import { FormDescription } from "./Form/FormDescription.js";
|
|
@@ -184,4 +184,4 @@ import { reducer, toast, useToast } from "./Toaster/useToast.js";
|
|
|
184
184
|
import "./Toaster/index.js";
|
|
185
185
|
import { WithResizer } from "./WithResizer/index.js";
|
|
186
186
|
import { MarkdownRenderer, ParsedMarkdown, baseMarkdownComponents, getIntlayerMarkdownOptions } from "./MarkDownRender/MarkDownRender.js";
|
|
187
|
-
export { Accordion, AccordionProps, AutoCompleteTextarea, AutoSizedTextArea, AutoSizedTextAreaProps, AutocompleteTextAreaProps, Avatar, AvatarProps, Badge, BadgeColor, BadgeProps, BadgeSize, BadgeVariant, BadgeVariantProps, BitbucketLogo, Breadcrumb, BreadcrumbLink, BreadcrumbProps, Browser, BrowserProps, Burger, Button, ButtonColor, ButtonProps, ButtonSize, ButtonTextAlign, ButtonVariant, Carousel, Checkbox, CheckboxColor, CheckboxProps, CheckboxSize, ClickOutsideDiv, ClickOutsideDivProps, Code, CodeBlock, CodeBlockProps, CodeCompAttributes, CodeDefault, CodeHighlighted, type CodeLanguage, CollapsibleTable, CollapsibleTableProps, Command, CommandRoot, Container, ContainerBackground, ContainerBorderColor, ContainerGap, ContainerPadding, ContainerProps, ContainerRoundedSize, ContainerSeparator, ContainerTransparency, ContentEditableTextArea, ContentEditableTextAreaHandle, ContentEditableTextAreaProps, ContentEditor, ContentEditorInput, ContentEditorInputProps, ContentEditorProps, ContentEditorTextArea, ContentEditorTextAreaProps, ContentSelector, CopyButton, CopyToClipboard, CopyToClipboardProps, type CreateEditorUploadFnOptions, DesktopNavbar, DesktopThemeSwitcher, Detail, DetailProps, DictionaryCreationForm, DictionaryEditor, DictionaryFieldEditor, DiscordLogo, DotPattern, DropDown, DropDownAlign, DropDownProps, DropDownType, DropDownYAlign, EditableFieldInput, EditableFieldTextArea, ExpandCollapse, ExpandCollapseProps, FacebookLogo, FileList, FileListProps, Flag, flags_d_exports as Flags, Footer, FooterLink, Form, AutoSizedTextAreaElement as FormAutoSizedTextArea, Button as FormButton, CheckboxElement as FormCheckbox, FormControl, FormDescription, EditableFieldInputElement as FormEditableFieldInput, EditableFieldTextAreaElement as FormEditableFieldTextArea, FormElement, FormField, InputElement as FormInput, InputPasswordElement as FormInputPassword, FormItem, FormLabelLayout as FormLabel, FormMessage, MultiSelectElement as FormMultiSelect, OTPElement as FormOTP, SearchInputElement as FormSearchInput, SelectElement as FormSelect, SwitchSelectorElement as FormSwitchSelector, TextAreaElement as FormTextArea, GitHubLogo, GitLabLogo, GoogleLogo, GridDistortionPattern, GridPattern, H1, H2, H3, H4, H5, H6, HTMLRenderer, HeadingProps, HeightResizer, HideShow, HideShowProps, Hr, IDE, IDEProps, InformationTag, Input, InputIndicator, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, InputPassword, InputProps, InputSize, InputVariant, InstagramLogo, KeyList, KeyPathBreadcrumb, KeyboardScreenAdapter, KeyboardShortcut, KeyboardShortcutProps, KeyboardShortcutType, Label, LabelProps, LanguageBackground, LanguageSection, Link, LinkColor, LinkGroup, LinkProps, LinkRoundedSize, LinkSize, LinkUnderlined, LinkVariant, LinkedInLogo, Loader, LoaderProps, LocalCardList, LocaleSwitcher, LocaleSwitcherContent, LocaleSwitcherContentProps, LocaleSwitcherContentProvider, LocaleSwitcherProps, Logo, LogoTextOnly, LogoWithText, LogoWithTextBelow, MarkDownIframe, MarkdownEditor, type MarkdownEditorProps, MarkdownRenderer, MaxHeightSmoother, MaxWidthSmoother, MobileNavbar, MobileThemeSwitcher, Modal, ModalSize, Modes, MultiSelect, Navbar, NodeEditor, NodeEditorProps, NumberItemsSelector, NumberItemsSelectorProps, OTPInput, OTPInputContext, OTPInputProps, Pagination, PaginationProps, PaginationSize, PaginationVariant, PanelProps, type ParsedMarkdown, Popover, PopoverProps, PopoverStatic, PopoverType, PopoverXAlign, PopoverYAlign, PressableSpan, ProductHuntLogo, Radio, RadioColor, RadioProps, RadioSize, RenderProps, RightDrawer, SaveForm, SearchInput, Select, SelectContent, SelectContentPosition, SelectLabel, SelectSeparator, ShowingResultsNumberItems, ShowingResultsNumberItemsProps, SlotProps, SmartTable, SocialNetworks, Spotlight, Step, Steps, SwitchSelector, SwitchSelectorBaseProps, SwitchSelectorChoice, SwitchSelectorChoices, SwitchSelectorColor, SwitchSelectorProps, SwitchSelectorSize, Tab, TabItemProps, TabProps, TabSelector, TabSelectorColor, TabSelectorItemProps, TabSelectorProps, Table, TableProps, Tag, TagBackground, TagBorder, TagColor, TagRoundedSize, TagSize, Td, TechLogo, type TechLogoName, techLogos_d_exports as TechLogos, Terminal, TerminalProps, TextArea, TextAreaProps, TextEditor, TextEditorContainer, TextEditorProps, Th, TiktokLogo, Toast, ToastAction, ToastActionElement, ToastClose, ToastDescription, ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Tr, TriggerProps, type UploadImageFn, VersionSwitcher, VersionSwitcherProps, VersionSwitcherProvider, VerticalSwitchSelector, VerticalSwitchSelectorProps, WithResizer, XLogo, YoutubeLogo, badgeVariants, baseMarkdownComponents, buttonVariants, checkIsExternalLink, checkboxVariants, choiceVariant, containerVariants, createEditorUploadFn, defaultChoices, drawerManager, getCapitals, getIntlayerHTMLOptions, getIntlayerMarkdownOptions, getYoutubeEmbedUrl, getYoutubeVideoId, getYoutubeWatchUrl, indicatorVariant, inputSlotVariants, inputVariants, isTextChildren, linkVariants, paginationVariants, radioVariants, reducer, shikiWrapperClassName, switchSelectorVariant, toast, toastVariants, traceKeys, useContentEditable, useCopyToClipboard, useForm, useFormField, useIsRightDrawerOpen, useLocaleSwitcherContent, usePasswordManagerBadge, usePopoverIds, usePrevious, useRightDrawer, useRightDrawerActions, useToast, useVersionSwitcher };
|
|
187
|
+
export { Accordion, AccordionProps, AutoCompleteTextarea, AutoSizedTextArea, AutoSizedTextAreaProps, AutocompleteTextAreaProps, Avatar, AvatarProps, Badge, BadgeColor, BadgeProps, BadgeSize, BadgeVariant, BadgeVariantProps, BitbucketLogo, Breadcrumb, BreadcrumbLink, BreadcrumbProps, Browser, BrowserProps, Burger, Button, ButtonColor, ButtonProps, ButtonSize, ButtonTextAlign, ButtonVariant, Carousel, Checkbox, CheckboxColor, CheckboxProps, CheckboxSize, ClickOutsideDiv, ClickOutsideDivProps, Code, CodeBlock, CodeBlockProps, CodeCompAttributes, CodeDefault, CodeHighlighted, type CodeLanguage, CollapsibleTable, CollapsibleTableProps, Command, CommandRoot, Container, ContainerBackground, ContainerBorderColor, ContainerGap, ContainerPadding, ContainerProps, ContainerRoundedSize, ContainerSeparator, ContainerTransparency, ContentEditableTextArea, ContentEditableTextAreaHandle, ContentEditableTextAreaProps, ContentEditor, ContentEditorInput, ContentEditorInputProps, ContentEditorProps, ContentEditorTextArea, ContentEditorTextAreaProps, ContentSelector, CopyButton, CopyToClipboard, CopyToClipboardProps, type CreateEditorUploadFnOptions, DesktopNavbar, DesktopThemeSwitcher, Detail, DetailProps, DictionaryCreationForm, DictionaryEditor, DictionaryFieldEditor, DiscordLogo, DotPattern, DropDown, DropDownAlign, DropDownProps, DropDownType, DropDownYAlign, EditableFieldInput, EditableFieldTextArea, ExpandCollapse, ExpandCollapseProps, FacebookLogo, FileList, FileListProps, Flag, flags_d_exports as Flags, Footer, FooterLink, Form, AutoSizedTextAreaElement as FormAutoSizedTextArea, Button as FormButton, CheckboxElement as FormCheckbox, FormControl, FormDescription, EditableFieldInputElement as FormEditableFieldInput, EditableFieldTextAreaElement as FormEditableFieldTextArea, FormElement, FormField, InputElement as FormInput, InputPasswordElement as FormInputPassword, FormItem, FormLabelLayout as FormLabel, FormMessage, MultiSelectElement as FormMultiSelect, OTPElement as FormOTP, SearchInputElement as FormSearchInput, SelectElement as FormSelect, SwitchSelectorElement as FormSwitchSelector, TextAreaElement as FormTextArea, type FormWebMCPProps, GitHubLogo, GitLabLogo, GoogleLogo, GridDistortionPattern, GridPattern, H1, H2, H3, H4, H5, H6, HTMLRenderer, HeadingProps, HeightResizer, HideShow, HideShowProps, Hr, IDE, IDEProps, InformationTag, Input, InputIndicator, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, InputPassword, InputProps, InputSize, InputVariant, InstagramLogo, KeyList, KeyPathBreadcrumb, KeyboardScreenAdapter, KeyboardShortcut, KeyboardShortcutProps, KeyboardShortcutType, Label, LabelProps, LanguageBackground, LanguageSection, Link, LinkColor, LinkGroup, LinkProps, LinkRoundedSize, LinkSize, LinkUnderlined, LinkVariant, LinkedInLogo, Loader, LoaderProps, LocalCardList, LocaleSwitcher, LocaleSwitcherContent, LocaleSwitcherContentProps, LocaleSwitcherContentProvider, LocaleSwitcherProps, Logo, LogoTextOnly, LogoWithText, LogoWithTextBelow, MarkDownIframe, MarkdownEditor, type MarkdownEditorProps, MarkdownRenderer, MaxHeightSmoother, MaxWidthSmoother, MobileNavbar, MobileThemeSwitcher, Modal, ModalSize, Modes, MultiSelect, Navbar, NodeEditor, NodeEditorProps, NumberItemsSelector, NumberItemsSelectorProps, OTPInput, OTPInputContext, OTPInputProps, Pagination, PaginationProps, PaginationSize, PaginationVariant, PanelProps, type ParsedMarkdown, Popover, PopoverProps, PopoverStatic, PopoverType, PopoverXAlign, PopoverYAlign, PressableSpan, ProductHuntLogo, Radio, RadioColor, RadioProps, RadioSize, RenderProps, RightDrawer, SaveForm, SearchInput, Select, SelectContent, SelectContentPosition, SelectLabel, SelectSeparator, ShowingResultsNumberItems, ShowingResultsNumberItemsProps, SlotProps, SmartTable, SocialNetworks, Spotlight, Step, Steps, SwitchSelector, SwitchSelectorBaseProps, SwitchSelectorChoice, SwitchSelectorChoices, SwitchSelectorColor, SwitchSelectorProps, SwitchSelectorSize, Tab, TabItemProps, TabProps, TabSelector, TabSelectorColor, TabSelectorItemProps, TabSelectorProps, Table, TableProps, Tag, TagBackground, TagBorder, TagColor, TagRoundedSize, TagSize, Td, TechLogo, type TechLogoName, techLogos_d_exports as TechLogos, Terminal, TerminalProps, TextArea, TextAreaProps, TextEditor, TextEditorContainer, TextEditorProps, Th, TiktokLogo, Toast, ToastAction, ToastActionElement, ToastClose, ToastDescription, ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Tr, TriggerProps, type UploadImageFn, VersionSwitcher, VersionSwitcherProps, VersionSwitcherProvider, VerticalSwitchSelector, VerticalSwitchSelectorProps, WithResizer, XLogo, YoutubeLogo, badgeVariants, baseMarkdownComponents, buttonVariants, checkIsExternalLink, checkboxVariants, choiceVariant, containerVariants, createEditorUploadFn, defaultChoices, drawerManager, getCapitals, getFormWebMCPAttributes, getIntlayerHTMLOptions, getIntlayerMarkdownOptions, getYoutubeEmbedUrl, getYoutubeVideoId, getYoutubeWatchUrl, indicatorVariant, inputSlotVariants, inputVariants, isTextChildren, linkVariants, paginationVariants, radioVariants, reducer, shikiWrapperClassName, switchSelectorVariant, toast, toastVariants, traceKeys, useContentEditable, useCopyToClipboard, useForm, useFormField, useIsRightDrawerOpen, useLocaleSwitcherContent, usePasswordManagerBadge, usePopoverIds, usePrevious, useRightDrawer, useRightDrawerActions, useToast, useVersionSwitcher };
|
|
@@ -7,10 +7,12 @@ import { useIsMounted } from "./useIsMounted.js";
|
|
|
7
7
|
import { useKeyboardDetector } from "./useKeyboardDetector.js";
|
|
8
8
|
import { NO_HIGHLIGHTED_INDEX, UseListKeyboardNavigationProps, useListKeyboardNavigation } from "./useListKeyboardNavigation.js";
|
|
9
9
|
import { usePersistedStore } from "./usePersistedStore.js";
|
|
10
|
+
import { UseRemoteMcpToolsOptions, useRemoteMcpTools } from "./useRemoteMcpTools.js";
|
|
10
11
|
import { useScreenWidth } from "./useScreenWidth.js";
|
|
11
12
|
import { useScrollBlockage } from "./useScrollBlockage/index.js";
|
|
12
13
|
import { useScrollDetection } from "./useScrollDetection.js";
|
|
13
14
|
import { useScrollY } from "./useScrollY.js";
|
|
14
15
|
import { useSearch } from "./useSearch.js";
|
|
15
16
|
import { StickToBottomRefs, useStickToBottom } from "./useStickToBottom.js";
|
|
16
|
-
|
|
17
|
+
import { AnyWebMCPTool, useWebMCPTools } from "./useWebMCPTools.js";
|
|
18
|
+
export { AnyWebMCPTool, DeviceState, HorizontalSwipeConfig, HorizontalSwipeHook, ItemSelectorOrientation, NO_HIGHLIGHTED_INDEX, SizeType, StickToBottomRefs, UseListKeyboardNavigationProps, UseRemoteMcpToolsOptions, calculateIsMobile, checkIsIOS, checkIsIphoneOrSafariDevice, checkIsMac, checkIsMobileScreen, checkIsMobileUserAgent, getBreakpointFromSize, useDevice, useGetElementById, useGetElementOrWindow, useHorizontalSwipe, useIsMounted, useItemSelector, useKeyboardDetector, useListKeyboardNavigation, usePersistedStore, useRemoteMcpTools, useScreenWidth, useScrollBlockage, useScrollDetection, useScrollY, useSearch, useStickToBottom, useWebMCPTools };
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { WebMCPTool } from "../webmcp/types.js";
|
|
2
|
+
import { CreateRemoteMcpToolsOptions } from "../webmcp/createRemoteMcpTools.js";
|
|
3
|
+
//#region src/hooks/useRemoteMcpTools.d.ts
|
|
4
|
+
export type UseRemoteMcpToolsOptions = Partial<Omit<CreateRemoteMcpToolsOptions, 'signal'>>;
|
|
5
|
+
/**
|
|
6
|
+
* Bridges the tools of a remote MCP server into the page, so an agent in the
|
|
7
|
+
* browser gets the same retrieval an IDE agent has, without the page
|
|
8
|
+
* re-implementing them.
|
|
9
|
+
*
|
|
10
|
+
* Defaults to the documentation tools of the Intlayer MCP server. Discovery
|
|
11
|
+
* runs once per `serverUrl`; the other options are read at that moment.
|
|
12
|
+
*
|
|
13
|
+
* @returns The wrapped tools, empty until discovery completes or when no
|
|
14
|
+
* browser agent could use them.
|
|
15
|
+
*/
|
|
16
|
+
export declare const useRemoteMcpTools: (options?: UseRemoteMcpToolsOptions) => WebMCPTool[];
|
|
17
|
+
//#endregion
|
|
18
|
+
//# sourceMappingURL=useRemoteMcpTools.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useRemoteMcpTools.d.ts","names":[],"sources":["../../../src/hooks/useRemoteMcpTools.ts"],"mappings":";;;YA8BY,2BAA2B,QACrC,KAAK;;;;;;;;;;;;qBAcM,oBAAiB,UACnB,6BACR"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { WebMCPTool } from "../webmcp/types.js";
|
|
2
|
+
//#region src/hooks/useWebMCPTools.d.ts
|
|
3
|
+
/**
|
|
4
|
+
* A tool of any input type. `never` is assignable from every input, so tools
|
|
5
|
+
* declared with a precise input type fit in one list; the browser hands each
|
|
6
|
+
* `execute` the object it parsed from the agent's JSON.
|
|
7
|
+
*/
|
|
8
|
+
export type AnyWebMCPTool = WebMCPTool<never>;
|
|
9
|
+
/**
|
|
10
|
+
* Exposes tools to browser agents for as long as the calling component is
|
|
11
|
+
* mounted, which scopes page-specific tools (a formatter, a scanner) to the
|
|
12
|
+
* page they belong to.
|
|
13
|
+
*
|
|
14
|
+
* Registration happens once per distinct tool set; `execute` handlers are
|
|
15
|
+
* read through a ref, so tools may close over fresh React state without being
|
|
16
|
+
* re-registered on every render. Renders nothing on the server.
|
|
17
|
+
*
|
|
18
|
+
* @param tools - Tools to expose while mounted.
|
|
19
|
+
*/
|
|
20
|
+
export declare const useWebMCPTools: (tools: AnyWebMCPTool[]) => void;
|
|
21
|
+
//#endregion
|
|
22
|
+
//# sourceMappingURL=useWebMCPTools.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useWebMCPTools.d.ts","names":[],"sources":["../../../src/hooks/useWebMCPTools.ts"],"mappings":";;;;;;;YAWY,gBAAgB;;;;;;;;;;;;qBAwBf,iBAAc,OAAW"}
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import { WebMCPJsonSchema, WebMCPTool, WebMCPToolAnnotations } from "./types.js";
|
|
2
|
+
//#region src/webmcp/createRemoteMcpTools.d.ts
|
|
3
|
+
/** A tool as described by an MCP server's `tools/list` response. */
|
|
4
|
+
export type RemoteMcpToolDescriptor = {
|
|
5
|
+
name: string;
|
|
6
|
+
title?: string;
|
|
7
|
+
description?: string;
|
|
8
|
+
inputSchema?: WebMCPJsonSchema;
|
|
9
|
+
annotations?: WebMCPToolAnnotations;
|
|
10
|
+
};
|
|
11
|
+
/** Text-bearing entry of an MCP `tools/call` result. */
|
|
12
|
+
type RemoteMcpContent = {
|
|
13
|
+
type: string;
|
|
14
|
+
text?: string;
|
|
15
|
+
};
|
|
16
|
+
type RemoteMcpToolCallResult = {
|
|
17
|
+
content?: RemoteMcpContent[];
|
|
18
|
+
isError?: boolean;
|
|
19
|
+
};
|
|
20
|
+
export type CreateRemoteMcpToolsOptions = {
|
|
21
|
+
/** Streamable-HTTP endpoint of the MCP server (`https://mcp.intlayer.org`). */
|
|
22
|
+
serverUrl: string;
|
|
23
|
+
/**
|
|
24
|
+
* Keeps only the tools worth exposing to a browser agent. Defaults to
|
|
25
|
+
* read-only tools, which excludes anything needing credentials.
|
|
26
|
+
*/
|
|
27
|
+
filter?: (tool: RemoteMcpToolDescriptor) => boolean;
|
|
28
|
+
/** Prepended to every tool name to avoid collisions with page tools. */
|
|
29
|
+
namePrefix?: string;
|
|
30
|
+
/**
|
|
31
|
+
* Rewrites a server tool name before it is exposed, e.g. to camelCase a
|
|
32
|
+
* kebab-case name. The server still receives the original name.
|
|
33
|
+
*/
|
|
34
|
+
renameTool?: (name: string) => string;
|
|
35
|
+
/** Aborts the discovery request. */
|
|
36
|
+
signal?: AbortSignal;
|
|
37
|
+
/** Injectable for tests. Defaults to the global `fetch`. */
|
|
38
|
+
fetch?: typeof globalThis.fetch;
|
|
39
|
+
};
|
|
40
|
+
/** Flattens an MCP tool result into the text an agent can read. */
|
|
41
|
+
export declare const formatRemoteMcpResult: (result: RemoteMcpToolCallResult) => string;
|
|
42
|
+
/**
|
|
43
|
+
* Discovers the tools of a remote MCP server and wraps each as a WebMCP tool
|
|
44
|
+
* forwarding its calls, so a page can expose an existing MCP server (the
|
|
45
|
+
* Intlayer documentation server, for instance) to browser agents without
|
|
46
|
+
* re-implementing its tools.
|
|
47
|
+
*
|
|
48
|
+
* @returns The wrapped tools, ready for `registerWebMCPTools`.
|
|
49
|
+
*/
|
|
50
|
+
export declare const createRemoteMcpTools: ({ serverUrl, filter, namePrefix, renameTool, signal, fetch: fetchImplementation }: CreateRemoteMcpToolsOptions) => Promise<WebMCPTool[]>;
|
|
51
|
+
//#endregion
|
|
52
|
+
//# sourceMappingURL=createRemoteMcpTools.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"createRemoteMcpTools.d.ts","names":[],"sources":["../../../src/webmcp/createRemoteMcpTools.ts"],"mappings":";;;YAOY;EACV;EACA;EACA;EACA,cAAc;EACd,cAAc;;;KAIX;EAAqB;EAAc;;KAEnC;EACH,UAAU;EACV;;YAUU;;EAEV;;;;;EAKA,UAAU,MAAM;;EAEhB;;;;;EAKA,cAAc;;EAEd,SAAS;;EAET,eAAe,WAAW;;;qBAgDf,wBAAqB,QACxB;;;;;;;;;qBAsBG,yBAAoB,WAAA,QAAA,YAAA,YAAA,QAAA,OAAA,uBAO9B,gCAA8B,QAAQ"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { ModelContext } from "./types.js";
|
|
2
|
+
//#region src/webmcp/getModelContext.d.ts
|
|
3
|
+
/**
|
|
4
|
+
* Resolves the WebMCP entry point exposed by the current browser, if any.
|
|
5
|
+
*
|
|
6
|
+
* Candidates are probed in order: `navigator.modelContextTesting` (Chrome with
|
|
7
|
+
* the `#enable-webmcp-testing` flag), `navigator.modelContext` (Chrome early
|
|
8
|
+
* preview / origin trial) and `document.modelContext` (W3C draft). Only an
|
|
9
|
+
* object able to register tools is returned, so callers can rely on
|
|
10
|
+
* `registerTool` being present.
|
|
11
|
+
*
|
|
12
|
+
* @returns The model context, or `null` outside a supporting browser.
|
|
13
|
+
*/
|
|
14
|
+
export declare const getModelContext: () => ModelContext | null;
|
|
15
|
+
/** Whether the current browser exposes a usable WebMCP entry point. */
|
|
16
|
+
export declare const isWebMCPAvailable: () => boolean;
|
|
17
|
+
//#endregion
|
|
18
|
+
//# sourceMappingURL=getModelContext.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"getModelContext.d.ts","names":[],"sources":["../../../src/webmcp/getModelContext.ts"],"mappings":";;;;;;;;;;;;;qBAaa,uBAAsB;;qBAuBtB"}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { ModelContext, ModelContextHost, WebMCPJsonSchema, WebMCPRegisterToolOptions, WebMCPTool, WebMCPToolAnnotations, WebMCPToolExecuteOptions, WebMCPToolResult } from "./types.js";
|
|
2
|
+
import { CreateRemoteMcpToolsOptions, RemoteMcpToolDescriptor, createRemoteMcpTools, formatRemoteMcpResult } from "./createRemoteMcpTools.js";
|
|
3
|
+
import { getModelContext, isWebMCPAvailable } from "./getModelContext.js";
|
|
4
|
+
import { formatToolResult, registerWebMCPTools } from "./registerWebMCPTools.js";
|
|
5
|
+
export { type CreateRemoteMcpToolsOptions, type ModelContext, type ModelContextHost, type RemoteMcpToolDescriptor, type WebMCPJsonSchema, type WebMCPRegisterToolOptions, type WebMCPTool, type WebMCPToolAnnotations, type WebMCPToolExecuteOptions, type WebMCPToolResult, createRemoteMcpTools, formatRemoteMcpResult, formatToolResult, getModelContext, isWebMCPAvailable, registerWebMCPTools };
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { ModelContext, WebMCPTool, WebMCPToolResult } from "./types.js";
|
|
2
|
+
//#region src/webmcp/registerWebMCPTools.d.ts
|
|
3
|
+
/** Serializes a tool result the way the browser would, for logging and errors. */
|
|
4
|
+
export declare const formatToolResult: (result: WebMCPToolResult) => string;
|
|
5
|
+
/**
|
|
6
|
+
* Registers tools with the WebMCP API and returns a function undoing it.
|
|
7
|
+
*
|
|
8
|
+
* Unregistration goes through `unregisterTool(name)` when the browser has it,
|
|
9
|
+
* and through the `AbortSignal` handed to `registerTool` otherwise. Without a
|
|
10
|
+
* model context the call is a no-op returning a no-op, so callers do not need
|
|
11
|
+
* to feature-detect.
|
|
12
|
+
*
|
|
13
|
+
* @param tools - Tools to expose. Names must be unique within the page.
|
|
14
|
+
* @param modelContext - Defaults to the entry point of the current browser.
|
|
15
|
+
* @returns A cleanup function removing every tool this call registered.
|
|
16
|
+
*/
|
|
17
|
+
export declare const registerWebMCPTools: (tools: WebMCPTool<never>[], modelContext?: ModelContext | null) => (() => void);
|
|
18
|
+
//#endregion
|
|
19
|
+
//# sourceMappingURL=registerWebMCPTools.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"registerWebMCPTools.d.ts","names":[],"sources":["../../../src/webmcp/registerWebMCPTools.ts"],"mappings":";;;qBASa,mBAAgB,QAAY;;;;;;;;;;;;;qBA+B5B,sBAAmB,OACvB,qBAAmB,eACZ"}
|