Skip to content

Commit c55ee63

Browse files
PederzhPederzh
committed
cleanup: move helpers into test file
1 parent b362e0c commit c55ee63

File tree

5 files changed

+199
-131
lines changed

5 files changed

+199
-131
lines changed

‎packages/mcp-use/src/server/adapters/mcp-ui-adapter.ts‎

Lines changed: 0 additions & 127 deletions
Original file line numberDiff line numberDiff line change
@@ -158,130 +158,3 @@ export function createUIResourceFromDefinition(
158158
}
159159
}
160160

161-
/**
162-
* Generate HTML content for a widget (utility function)
163-
*
164-
* @param definition - Base UI resource definition
165-
* @param props - Widget properties to inject
166-
* @returns Generated HTML string
167-
*/
168-
export function generateWidgetHtml(
169-
definition: Pick<UIResourceDefinition, 'name' | 'title' | 'description' | 'size'>,
170-
props?: Record<string, any>
171-
): string {
172-
const [width = '100%', height = '400px'] = definition.size || []
173-
const propsJson = props ? JSON.stringify(props) : '{}'
174-
175-
return `<!DOCTYPE html>
176-
<html>
177-
<head>
178-
<meta charset="UTF-8">
179-
<title>${definition.title || definition.name}</title>
180-
<style>
181-
body {
182-
margin: 0;
183-
padding: 20px;
184-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
185-
}
186-
.widget-container {
187-
width: ${width};
188-
height: ${height};
189-
border: 1px solid #e0e0e0;
190-
border-radius: 8px;
191-
overflow: auto;
192-
padding: 20px;
193-
background: white;
194-
}
195-
.widget-title {
196-
font-size: 1.5em;
197-
font-weight: 600;
198-
margin-bottom: 10px;
199-
}
200-
.widget-description {
201-
color: #666;
202-
margin-bottom: 20px;
203-
}
204-
</style>
205-
</head>
206-
<body>
207-
<div class="widget-container">
208-
<div class="widget-title">${definition.title || definition.name}</div>
209-
${definition.description ? `<div class="widget-description">${definition.description}</div>` : ''}
210-
<div id="widget-root"></div>
211-
</div>
212-
<script>
213-
// Widget props passed from server
214-
window.__WIDGET_PROPS__ = ${propsJson};
215-
216-
// Placeholder for widget initialization
217-
console.log('Widget ${definition.name} loaded with props:', window.__WIDGET_PROPS__);
218-
219-
// Communication with parent window
220-
window.addEventListener('message', (event) => {
221-
console.log('Received message:', event.data);
222-
});
223-
224-
// Example tool call
225-
function callTool(toolName, params) {
226-
window.parent.postMessage({
227-
type: 'tool',
228-
payload: { toolName, params }
229-
}, '*');
230-
}
231-
</script>
232-
</body>
233-
</html>`
234-
}
235-
236-
/**
237-
* Generate a Remote DOM script for a widget (utility function)
238-
*
239-
* @param definition - Base UI resource definition
240-
* @param props - Widget properties to inject
241-
* @returns Generated JavaScript string
242-
*/
243-
export function generateRemoteDomScript(
244-
definition: Pick<UIResourceDefinition, 'name' | 'title' | 'description'>,
245-
props?: Record<string, any>
246-
): string {
247-
return `
248-
// Remote DOM script for ${definition.name}
249-
const container = document.createElement('div');
250-
container.style.padding = '20px';
251-
252-
// Create title
253-
const title = document.createElement('h2');
254-
title.textContent = '${definition.title || definition.name}';
255-
container.appendChild(title);
256-
257-
${definition.description ? `
258-
// Add description
259-
const description = document.createElement('p');
260-
description.textContent = '${definition.description}';
261-
description.style.color = '#666';
262-
container.appendChild(description);
263-
` : ''}
264-
265-
// Widget props
266-
const props = ${JSON.stringify(props || {})};
267-
268-
// Create interactive button
269-
const button = document.createElement('ui-button');
270-
button.setAttribute('label', 'Interact with ${definition.name}');
271-
button.addEventListener('press', () => {
272-
window.parent.postMessage({
273-
type: 'tool',
274-
payload: {
275-
toolName: 'ui_${definition.name}',
276-
params: props
277-
}
278-
}, '*');
279-
});
280-
container.appendChild(button);
281-
282-
// Add custom widget logic here
283-
console.log('Remote DOM widget ${definition.name} initialized with props:', props);
284-
285-
// Append to root
286-
root.appendChild(container);`
287-
}

‎packages/mcp-use/src/server/index.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,5 @@ export {
1212
createRawHtmlResource,
1313
createRemoteDomResource,
1414
createUIResourceFromDefinition,
15-
generateWidgetHtml,
16-
generateRemoteDomScript,
1715
type UrlConfig
1816
} from './adapters/mcp-ui-adapter.js'

‎packages/mcp-use/tests/helpers/widget-generators.ts‎

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
/**
2+
* Test Helper Utilities for Widget Generation
3+
*
4+
* These functions generate HTML and JavaScript content for testing purposes.
5+
* They are not part of the core UIResource creation flow.
6+
*/
7+
8+
import type { UIResourceDefinition } from '../../src/server/types/resource.js'
9+
10+
/**
11+
* Generate HTML content for a widget (utility function for tests)
12+
*
13+
* @param definition - Base UI resource definition
14+
* @param props - Widget properties to inject
15+
* @returns Generated HTML string
16+
*/
17+
export function generateWidgetHtml(
18+
definition: Pick<UIResourceDefinition, 'name' | 'title' | 'description' | 'size'>,
19+
props?: Record<string, any>
20+
): string {
21+
const [width = '100%', height = '400px'] = definition.size || []
22+
const propsJson = props ? JSON.stringify(props) : '{}'
23+
24+
return `<!DOCTYPE html>
25+
<html>
26+
<head>
27+
<meta charset="UTF-8">
28+
<title>${definition.title || definition.name}</title>
29+
<style>
30+
body {
31+
margin: 0;
32+
padding: 20px;
33+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
34+
}
35+
.widget-container {
36+
width: ${width};
37+
height: ${height};
38+
border: 1px solid #e0e0e0;
39+
border-radius: 8px;
40+
overflow: auto;
41+
padding: 20px;
42+
background: white;
43+
}
44+
.widget-title {
45+
font-size: 1.5em;
46+
font-weight: 600;
47+
margin-bottom: 10px;
48+
}
49+
.widget-description {
50+
color: #666;
51+
margin-bottom: 20px;
52+
}
53+
</style>
54+
</head>
55+
<body>
56+
<div class="widget-container">
57+
<div class="widget-title">${definition.title || definition.name}</div>
58+
${definition.description ? `<div class="widget-description">${definition.description}</div>` : ''}
59+
<div id="widget-root"></div>
60+
</div>
61+
<script>
62+
// Widget props passed from server
63+
window.__WIDGET_PROPS__ = ${propsJson};
64+
65+
// Placeholder for widget initialization
66+
console.log('Widget ${definition.name} loaded with props:', window.__WIDGET_PROPS__);
67+
68+
// Communication with parent window
69+
window.addEventListener('message', (event) => {
70+
console.log('Received message:', event.data);
71+
});
72+
73+
// Example tool call
74+
function callTool(toolName, params) {
75+
window.parent.postMessage({
76+
type: 'tool',
77+
payload: { toolName, params }
78+
}, '*');
79+
}
80+
</script>
81+
</body>
82+
</html>`
83+
}
84+
85+
/**
86+
* Generate a Remote DOM script for a widget (utility function for tests)
87+
*
88+
* @param definition - Base UI resource definition
89+
* @param props - Widget properties to inject
90+
* @returns Generated JavaScript string
91+
*/
92+
export function generateRemoteDomScript(
93+
definition: Pick<UIResourceDefinition, 'name' | 'title' | 'description'>,
94+
props?: Record<string, any>
95+
): string {
96+
return `
97+
// Remote DOM script for ${definition.name}
98+
const container = document.createElement('div');
99+
container.style.padding = '20px';
100+
101+
// Create title
102+
const title = document.createElement('h2');
103+
title.textContent = '${definition.title || definition.name}';
104+
container.appendChild(title);
105+
106+
${definition.description ? `
107+
// Add description
108+
const description = document.createElement('p');
109+
description.textContent = '${definition.description}';
110+
description.style.color = '#666';
111+
container.appendChild(description);
112+
` : ''}
113+
114+
// Widget props
115+
const props = ${JSON.stringify(props || {})};
116+
117+
// Create interactive button
118+
const button = document.createElement('ui-button');
119+
button.setAttribute('label', 'Interact with ${definition.name}');
120+
button.addEventListener('press', () => {
121+
window.parent.postMessage({
122+
type: 'tool',
123+
payload: {
124+
toolName: 'ui_${definition.name}',
125+
params: props
126+
}
127+
}, '*');
128+
});
129+
container.appendChild(button);
130+
131+
// Add custom widget logic here
132+
console.log('Remote DOM widget ${definition.name} initialized with props:', props);
133+
134+
// Append to root
135+
root.appendChild(container);`
136+
}
137+

‎packages/mcp-use/tests/mcp-ui-adapter.test.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,12 @@ import {
1212
createRawHtmlResource,
1313
createRemoteDomResource,
1414
createUIResourceFromDefinition,
15-
generateWidgetHtml,
16-
generateRemoteDomScript,
1715
type UrlConfig
1816
} from '../src/server/adapters/mcp-ui-adapter.js'
17+
import {
18+
generateWidgetHtml,
19+
generateRemoteDomScript
20+
} from './helpers/widget-generators.js'
1921
import type {
2022
ExternalUrlUIResource,
2123
RawHtmlUIResource,

‎pnpm-lock.yaml‎

Lines changed: 58 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)