=> {
type: 'resource',
resource: {
uri: 'ui://remote-component/action-button',
- mimeType: 'application/vnd.mcp-ui.remote-dom+javascript; flavor=react',
+ mimeType: 'application/vnd.mcp-ui.remote-dom+javascript; framework=react',
text: remoteDomScript,
},
};
diff --git a/docs/src/guide/getting-started.md b/docs/src/guide/getting-started.md
index 13a07fa3..6d61a76e 100644
--- a/docs/src/guide/getting-started.md
+++ b/docs/src/guide/getting-started.md
@@ -62,7 +62,7 @@ const myHtmlPayload = `Hello from Server!
Timestamp: ${new Date().toI
const resourceBlock = createUIResource({
uri: 'ui://server-generated/item1',
content: { type: 'rawHtml', htmlString: myHtmlPayload },
- delivery: 'text',
+ encoding: 'text',
});
diff --git a/docs/src/guide/introduction.md b/docs/src/guide/introduction.md
index 9f3b36c3..ec911bb6 100644
--- a/docs/src/guide/introduction.md
+++ b/docs/src/guide/introduction.md
@@ -56,7 +56,7 @@ import { createUIResource } from '@mcp-ui/server';
const resource = createUIResource({
uri: 'ui://my-tool/dashboard',
content: { type: 'rawHtml', htmlString: '
Dashboard
' },
- delivery: 'text'
+ encoding: 'text'
});
// Return in MCP response
diff --git a/docs/src/guide/protocol-details.md b/docs/src/guide/protocol-details.md
index 2ae212ed..54fbb262 100644
--- a/docs/src/guide/protocol-details.md
+++ b/docs/src/guide/protocol-details.md
@@ -31,7 +31,7 @@ export interface UIResource {
- URL content: Embedding a Grafana dashboard, a third-party widget, a mini-application
- RemoteDOM content: A component to be rendered with the host's look-and-feel (component library)
-## Content Delivery: `text` vs. `blob`
+## Content encoding: `text` vs. `blob`
- **`text`**: Simple, direct string. Good for smaller, less complex content.
- **`blob`**: Base64 encoded string.
diff --git a/docs/src/guide/server/overview.md b/docs/src/guide/server/overview.md
index 8bf77e24..543af1ff 100644
--- a/docs/src/guide/server/overview.md
+++ b/docs/src/guide/server/overview.md
@@ -5,13 +5,13 @@ The `@mcp-ui/server` package provides server-side utilities to help construct `U
## Key Exports
- **`createUIResource(options: CreateUIResourceOptions): UIResource`**:
- The primary function for creating UI snippets. It takes an options object to define the URI, content (direct HTML or external URL), and delivery method (text or blob).
+ The primary function for creating UI snippets. It takes an options object to define the URI, content (direct HTML or external URL), and encoding method (text or blob).
## Purpose
- **Ease of Use**: Simplifies the creation of valid `UIResource` objects.
- **Validation**: Includes basic validation (e.g., URI prefixes matching content type).
-- **Encoding**: Handles Base64 encoding when `delivery: 'blob'` is specified.
+- **Encoding**: Handles Base64 encoding when `encoding: 'blob'` is specified.
## Building
diff --git a/docs/src/guide/server/usage-examples.md b/docs/src/guide/server/usage-examples.md
index 12d00f64..30f848cf 100644
--- a/docs/src/guide/server/usage-examples.md
+++ b/docs/src/guide/server/usage-examples.md
@@ -26,7 +26,7 @@ console.log('Shared Enum from server usage:', PlaceholderEnum.FOO);
const resource1 = createUIResource({
uri: 'ui://my-component/instance-1',
content: { type: 'rawHtml', htmlString: 'Hello World
' },
- delivery: 'text',
+ encoding: 'text',
});
console.log('Resource 1:', JSON.stringify(resource1, null, 2));
/* Output for Resource 1:
@@ -44,7 +44,7 @@ console.log('Resource 1:', JSON.stringify(resource1, null, 2));
const resource2 = createUIResource({
uri: 'ui://my-component/instance-2',
content: { type: 'rawHtml', htmlString: 'Complex HTML
' },
- delivery: 'blob',
+ encoding: 'blob',
});
console.log(
'Resource 2 (blob will be Base64):',
@@ -61,12 +61,12 @@ console.log(
}
*/
-// Example 3: External URL, text delivery
+// Example 3: External URL, text encoding
const dashboardUrl = 'https://my.analytics.com/dashboard/123';
const resource3 = createUIResource({
uri: 'ui://analytics-dashboard/main',
content: { type: 'externalUrl', iframeUrl: dashboardUrl },
- delivery: 'text',
+ encoding: 'text',
});
console.log('Resource 3:', JSON.stringify(resource3, null, 2));
/* Output for Resource 3:
@@ -80,12 +80,12 @@ console.log('Resource 3:', JSON.stringify(resource3, null, 2));
}
*/
-// Example 4: External URL, blob delivery (URL is Base64 encoded)
+// Example 4: External URL, blob encoding (URL is Base64 encoded)
const chartApiUrl = 'https://charts.example.com/api?type=pie&data=1,2,3';
const resource4 = createUIResource({
uri: 'ui://live-chart/session-xyz',
content: { type: 'externalUrl', iframeUrl: chartApiUrl },
- delivery: 'blob',
+ encoding: 'blob',
});
console.log(
'Resource 4 (blob will be Base64 of URL):',
@@ -102,7 +102,7 @@ console.log(
}
*/
-// Example 5: Remote DOM script, text delivery
+// Example 5: Remote DOM script, text encoding
const remoteDomScript = `
const button = document.createElement('ui-button');
button.setAttribute('label', 'Click me for a tool call!');
@@ -117,9 +117,9 @@ const resource5 = createUIResource({
content: {
type: 'remoteDom',
script: remoteDomScript,
- flavor: 'react', // or 'webcomponents'
+ framework: 'react', // or 'webcomponents'
},
- delivery: 'text',
+ encoding: 'text',
});
console.log('Resource 5:', JSON.stringify(resource5, null, 2));
/* Output for Resource 5:
@@ -127,7 +127,7 @@ console.log('Resource 5:', JSON.stringify(resource5, null, 2));
"type": "resource",
"resource": {
"uri": "ui://remote-component/action-button",
- "mimeType": "application/vnd.mcp-ui.remote-dom+javascript; flavor=react",
+ "mimeType": "application/vnd.mcp-ui.remote-dom+javascript; framework=react",
"text": "\\n const button = document.createElement('ui-button');\\n button.setAttribute('label', 'Click me for a tool call!');\\n button.addEventListener('press', () => {\\n window.parent.postMessage({ type: 'tool', payload: { toolName: 'uiInteraction', params: { action: 'button-click', from: 'remote-dom' } } }, '*');\\n });\\n root.appendChild(button);\\n"
}
}
@@ -154,7 +154,7 @@ https://emergency.dashboard.example.com/main`;
const resource6 = createUIResource({
uri: 'ui://dashboard-with-fallbacks/session-123',
content: { type: 'externalUrl', iframeUrl: multiUrlContent },
- delivery: 'text',
+ encoding: 'text',
});
/* The client will:
@@ -176,10 +176,10 @@ try {
createUIResource({
uri: 'invalid://should-be-ui',
content: { type: 'externalUrl', iframeUrl: 'https://example.com' },
- delivery: 'text',
+ encoding: 'text',
});
} catch (e: any) {
console.error('Caught expected error:', e.message);
- // MCP SDK: URI must start with 'ui://' when content.type is 'externalUrl'.
+ // MCP-UI SDK: URI must start with 'ui://' when content.type is 'externalUrl'.
}
```
\ No newline at end of file
diff --git a/docs/src/index.md b/docs/src/index.md
index 1dd04cb2..fd23a651 100644
--- a/docs/src/index.md
+++ b/docs/src/index.md
@@ -56,7 +56,7 @@ const interactiveForm = createUIResource({
type: 'externalUrl',
iframeUrl: 'https://yourapp.com'
},
- delivery: 'text',
+ encoding: 'text',
});
```
diff --git a/examples/remote-dom-demo/src/App.tsx b/examples/remote-dom-demo/src/App.tsx
index 06e5f731..31a874a6 100644
--- a/examples/remote-dom-demo/src/App.tsx
+++ b/examples/remote-dom-demo/src/App.tsx
@@ -98,7 +98,7 @@ function App() {
const mockResourceReact = useMemo(
() => ({
- mimeType: 'application/vnd.mcp-ui.remote-dom+javascript; flavor=react',
+ mimeType: 'application/vnd.mcp-ui.remote-dom+javascript; framework=react',
text: scriptContent,
}),
[scriptContent],
@@ -106,7 +106,7 @@ function App() {
const mockResourceWebComponents = useMemo(
() => ({
- mimeType: 'application/vnd.mcp-ui.remote-dom+javascript; flavor=webcomponents',
+ mimeType: 'application/vnd.mcp-ui.remote-dom+javascript; framework=webcomponents',
text: scriptContent,
}),
[scriptContent],
diff --git a/examples/server/src/index.ts b/examples/server/src/index.ts
index c112dedd..b81b3287 100644
--- a/examples/server/src/index.ts
+++ b/examples/server/src/index.ts
@@ -153,7 +153,7 @@ export class MyMCP extends McpAgent {
const resourceBlock = createUIResource({
uri: uniqueUIAppUri,
content: { type: 'externalUrl', iframeUrl: pickerPageUrl },
- delivery: 'text', // The URL itself is delivered as text
+ encoding: 'text', // The URL itself is delivered as text
});
return {
@@ -177,7 +177,7 @@ export class MyMCP extends McpAgent {
const resourceBlock = createUIResource({
uri: uniqueUIAppUri,
content: { type: 'externalUrl', iframeUrl: pickerPageUrl },
- delivery: 'text', // The URL itself is delivered as text
+ encoding: 'text', // The URL itself is delivered as text
});
return {
@@ -189,10 +189,10 @@ export class MyMCP extends McpAgent {
this.server.tool('show_remote_dom_react', 'Shows a react remote-dom component', async () => {
const resourceBlock = createUIResource({
uri: `ui://remote-dom-react/${Date.now()}` as `ui://${string}`,
- delivery: 'text',
+ encoding: 'text',
content: {
type: 'remoteDom',
- flavor: 'react',
+ framework: 'react',
script: `
// Create a state variable to track the current logo
let isDarkMode = false;
@@ -262,10 +262,10 @@ export class MyMCP extends McpAgent {
async () => {
const resourceBlock = createUIResource({
uri: `ui://remote-dom-wc/${Date.now()}` as `ui://${string}`,
- delivery: 'text',
+ encoding: 'text',
content: {
type: 'remoteDom',
- flavor: 'webcomponents',
+ framework: 'webcomponents',
script: `
// Create a state variable to track the current logo
let isDarkMode = false;
diff --git a/packages/client/README.md b/packages/client/README.md
index 5ae218db..6a36993e 100644
--- a/packages/client/README.md
+++ b/packages/client/README.md
@@ -102,7 +102,7 @@ Rendered using the `` component, which displays content
Rendered using the `` component, which uses Shopify's [`remote-dom`](https://github.com/Shopify/remote-dom). The server responds with a script that describes the UI and events. On the host, the script is securely rendered in a sandboxed iframe, and the UI changes are communicated to the host in JSON, where they're rendered using the host's component library. This is more flexible than iframes and allows for UIs that match the host's look-and-feel.
-* **`mimeType`**: `application/vnd.mcp-ui.remote-dom; flavor={react | webcomponents}`
+* **`mimeType`**: `application/vnd.mcp-ui.remote-dom+javascript; framework={react | webcomponents}`
### UI Action
@@ -139,14 +139,14 @@ You can use [GitMCP](https://gitmcp.io/idosal/mcp-ui) to give your IDE access to
const htmlResource = createUIResource({
uri: 'ui://greeting/1',
content: { type: 'rawHtml', htmlString: 'Hello, MCP UI!
' },
- delivery: 'text',
+ encoding: 'text',
});
// External URL
const externalUrlResource = createUIResource({
uri: 'ui://greeting/1',
content: { type: 'externalUrl', iframeUrl: 'https://example.com' },
- delivery: 'text',
+ encoding: 'text',
});
// remote-dom
@@ -162,9 +162,9 @@ You can use [GitMCP](https://gitmcp.io/idosal/mcp-ui) to give your IDE access to
});
root.appendChild(button);
`,
- flavor: 'react', // or 'webcomponents'
+ framework: 'react', // or 'webcomponents'
},
- delivery: 'text',
+ encoding: 'text',
});
```
diff --git a/packages/client/src/components/RemoteDOMResourceRenderer.tsx b/packages/client/src/components/RemoteDOMResourceRenderer.tsx
index c5138cc7..41e5a88a 100644
--- a/packages/client/src/components/RemoteDOMResourceRenderer.tsx
+++ b/packages/client/src/components/RemoteDOMResourceRenderer.tsx
@@ -36,19 +36,19 @@ export const RemoteDOMResourceRenderer: React.FC = ({
const threadRef = useRef | null>(null);
const [error, setError] = useState(null);
- const flavor = useMemo(() => {
+ const framework = useMemo(() => {
const mimeType = resource.mimeType || '';
- if (mimeType.includes('flavor=react')) {
+ if (mimeType.includes('framework=react')) {
return 'react';
}
// Default to webcomponents for legacy or unspecified
return 'webcomponents';
}, [resource.mimeType]);
- const componentKey = `${library?.name}-${flavor}`;
+ const componentKey = `${library?.name}-${framework}`;
const { receiver, components } = useMemo(() => {
- switch (flavor) {
+ switch (framework) {
case 'react': {
const reactReceiver = new RemoteReceiver();
const componentLibrary = library || basicComponentLibrary;
@@ -131,7 +131,7 @@ export const RemoteDOMResourceRenderer: React.FC = ({
const options = {
code,
remoteElements,
- useReactRenderer: flavor === 'react',
+ useReactRenderer: framework === 'react',
componentLibrary: library?.name,
};
thread.imports
@@ -156,7 +156,7 @@ export const RemoteDOMResourceRenderer: React.FC = ({
onLoad={handleIframeLoad}
/>
- {flavor === 'react' && components ? (
+ {framework === 'react' && components ? (
) : (
diff --git a/packages/client/src/components/__tests__/RemoteDOMResourceRenderer.test.tsx b/packages/client/src/components/__tests__/RemoteDOMResourceRenderer.test.tsx
index 160dc497..a3ae7527 100644
--- a/packages/client/src/components/__tests__/RemoteDOMResourceRenderer.test.tsx
+++ b/packages/client/src/components/__tests__/RemoteDOMResourceRenderer.test.tsx
@@ -28,10 +28,10 @@ describe('', () => {
vi.clearAllMocks();
});
- it('should use React renderer when mimeType includes "flavor=react"', () => {
+ it('should use React renderer when mimeType includes "framework=react"', () => {
const resource = {
...baseResource,
- mimeType: 'application/vnd.mcp-ui.remote-dom+javascript; flavor=react',
+ mimeType: 'application/vnd.mcp-ui.remote-dom+javascript; framework=react',
};
render();
@@ -40,10 +40,10 @@ describe('', () => {
expect(screen.queryByTestId('standard-dom-renderer-container')).not.toBeInTheDocument();
});
- it('should use standard DOM renderer when mimeType includes "flavor=webcomponents"', () => {
+ it('should use standard DOM renderer when mimeType includes "framework=webcomponents"', () => {
const resource = {
...baseResource,
- mimeType: 'application/vnd.mcp-ui.remote-dom+javascript; flavor=webcomponents',
+ mimeType: 'application/vnd.mcp-ui.remote-dom+javascript; framework=webcomponents',
};
render();
@@ -61,10 +61,10 @@ describe('', () => {
expect(screen.queryByTestId('remote-root-renderer')).not.toBeInTheDocument();
});
- it('should default to standard DOM renderer for an unknown flavor', () => {
+ it('should default to standard DOM renderer for an unknown framework', () => {
const resource = {
...baseResource,
- mimeType: 'application/vnd.mcp-ui.remote-dom+javascript; flavor=unknown',
+ mimeType: 'application/vnd.mcp-ui.remote-dom+javascript; framework=unknown',
};
render();
@@ -76,7 +76,7 @@ describe('', () => {
it('should use the provided component library', () => {
const resource = {
...baseResource,
- mimeType: 'application/vnd.mcp-ui.remote-dom+javascript; flavor=react',
+ mimeType: 'application/vnd.mcp-ui.remote-dom+javascript; framework=react',
};
render();
diff --git a/packages/client/src/components/__tests__/UIResourceRenderer.test.tsx b/packages/client/src/components/__tests__/UIResourceRenderer.test.tsx
index a671a0a0..05e34afe 100644
--- a/packages/client/src/components/__tests__/UIResourceRenderer.test.tsx
+++ b/packages/client/src/components/__tests__/UIResourceRenderer.test.tsx
@@ -43,7 +43,7 @@ describe('', () => {
it('should render RemoteDOMResourceRenderer for "remote-dom" mimeType', () => {
const resource = {
...baseResource,
- mimeType: 'application/vnd.mcp-ui.remote-dom+javascript; flavor=react',
+ mimeType: 'application/vnd.mcp-ui.remote-dom+javascript; framework=react',
};
render();
expect(screen.getByTestId('remote-dom-resource')).toBeInTheDocument();
diff --git a/packages/server/README.md b/packages/server/README.md
index 5ae218db..6a36993e 100644
--- a/packages/server/README.md
+++ b/packages/server/README.md
@@ -102,7 +102,7 @@ Rendered using the `` component, which displays content
Rendered using the `` component, which uses Shopify's [`remote-dom`](https://github.com/Shopify/remote-dom). The server responds with a script that describes the UI and events. On the host, the script is securely rendered in a sandboxed iframe, and the UI changes are communicated to the host in JSON, where they're rendered using the host's component library. This is more flexible than iframes and allows for UIs that match the host's look-and-feel.
-* **`mimeType`**: `application/vnd.mcp-ui.remote-dom; flavor={react | webcomponents}`
+* **`mimeType`**: `application/vnd.mcp-ui.remote-dom+javascript; framework={react | webcomponents}`
### UI Action
@@ -139,14 +139,14 @@ You can use [GitMCP](https://gitmcp.io/idosal/mcp-ui) to give your IDE access to
const htmlResource = createUIResource({
uri: 'ui://greeting/1',
content: { type: 'rawHtml', htmlString: 'Hello, MCP UI!
' },
- delivery: 'text',
+ encoding: 'text',
});
// External URL
const externalUrlResource = createUIResource({
uri: 'ui://greeting/1',
content: { type: 'externalUrl', iframeUrl: 'https://example.com' },
- delivery: 'text',
+ encoding: 'text',
});
// remote-dom
@@ -162,9 +162,9 @@ You can use [GitMCP](https://gitmcp.io/idosal/mcp-ui) to give your IDE access to
});
root.appendChild(button);
`,
- flavor: 'react', // or 'webcomponents'
+ framework: 'react', // or 'webcomponents'
},
- delivery: 'text',
+ encoding: 'text',
});
```
diff --git a/packages/server/src/__tests__/index.test.ts b/packages/server/src/__tests__/index.test.ts
index 95a88cad..dd83d5d6 100644
--- a/packages/server/src/__tests__/index.test.ts
+++ b/packages/server/src/__tests__/index.test.ts
@@ -6,7 +6,7 @@ describe('@mcp-ui/server', () => {
const options = {
uri: 'ui://test-html' as const,
content: { type: 'rawHtml' as const, htmlString: 'Test
' },
- delivery: 'text' as const,
+ encoding: 'text' as const,
};
const resource = createUIResource(options);
expect(resource.type).toBe('resource');
@@ -20,7 +20,7 @@ describe('@mcp-ui/server', () => {
const options = {
uri: 'ui://test-html-blob' as const,
content: { type: 'rawHtml' as const, htmlString: 'Blob
' },
- delivery: 'blob' as const,
+ encoding: 'blob' as const,
};
const resource = createUIResource(options);
expect(resource.resource.blob).toBe(Buffer.from('Blob
').toString('base64'));
@@ -34,7 +34,7 @@ describe('@mcp-ui/server', () => {
type: 'externalUrl' as const,
iframeUrl: 'https://example.com',
},
- delivery: 'text' as const,
+ encoding: 'text' as const,
};
const resource = createUIResource(options);
expect(resource.resource.uri).toBe('ui://test-url');
@@ -50,7 +50,7 @@ describe('@mcp-ui/server', () => {
type: 'externalUrl' as const,
iframeUrl: 'https://example.com/blob',
},
- delivery: 'blob' as const,
+ encoding: 'blob' as const,
};
const resource = createUIResource(options);
expect(resource.resource.mimeType).toBe('text/uri-list');
@@ -64,7 +64,7 @@ describe('@mcp-ui/server', () => {
const options = {
uri: 'ui://test-html-blob' as const,
content: { type: 'rawHtml' as const, htmlString: 'Blob
' },
- delivery: 'blob' as const,
+ encoding: 'blob' as const,
};
const resource = createUIResource(options);
expect(resource.resource.mimeType).toBe('text/html');
@@ -76,11 +76,11 @@ describe('@mcp-ui/server', () => {
const options = {
uri: 'invalid://test-html' as const,
content: { type: 'rawHtml' as const, htmlString: 'Test
' },
- delivery: 'text' as const,
+ encoding: 'text' as const,
};
// @ts-expect-error We are intentionally passing an invalid URI to test the error.
expect(() => createUIResource(options)).toThrow(
- "MCP SDK: URI must start with 'ui://' when content.type is 'rawHtml'.",
+ "MCP-UI SDK: URI must start with 'ui://' when content.type is 'rawHtml'.",
);
});
@@ -91,47 +91,47 @@ describe('@mcp-ui/server', () => {
type: 'externalUrl' as const,
iframeUrl: 'https://example.com',
},
- delivery: 'text' as const,
+ encoding: 'text' as const,
};
// @ts-expect-error We are intentionally passing an invalid URI to test the error.
expect(() => createUIResource(options)).toThrow(
- "MCP SDK: URI must start with 'ui://' when content.type is 'externalUrl'.",
+ "MCP-UI SDK: URI must start with 'ui://' when content.type is 'externalUrl'.",
);
});
- it('should create a text-based remote DOM resource with React flavor', () => {
+ it('should create a text-based remote DOM resource with React framework', () => {
const options = {
uri: 'ui://test-remote-dom-react' as const,
content: {
type: 'remoteDom' as const,
script: 'React Component
',
- flavor: 'react' as const,
+ framework: 'react' as const,
},
- delivery: 'text' as const,
+ encoding: 'text' as const,
};
const resource = createUIResource(options);
expect(resource.type).toBe('resource');
expect(resource.resource.uri).toBe('ui://test-remote-dom-react');
expect(resource.resource.mimeType).toBe(
- 'application/vnd.mcp-ui.remote-dom+javascript; flavor=react',
+ 'application/vnd.mcp-ui.remote-dom+javascript; framework=react',
);
expect(resource.resource.text).toBe('React Component
');
expect(resource.resource.blob).toBeUndefined();
});
- it('should create a blob-based remote DOM resource with Web Components flavor', () => {
+ it('should create a blob-based remote DOM resource with Web Components framework', () => {
const options = {
uri: 'ui://test-remote-dom-wc' as const,
content: {
type: 'remoteDom' as const,
script: 'Web Component
',
- flavor: 'webcomponents' as const,
+ framework: 'webcomponents' as const,
},
- delivery: 'blob' as const,
+ encoding: 'blob' as const,
};
const resource = createUIResource(options);
expect(resource.resource.mimeType).toBe(
- 'application/vnd.mcp-ui.remote-dom+javascript; flavor=webcomponents',
+ 'application/vnd.mcp-ui.remote-dom+javascript; framework=webcomponents',
);
expect(resource.resource.blob).toBe(Buffer.from('Web Component
').toString('base64'));
expect(resource.resource.text).toBeUndefined();
@@ -143,13 +143,13 @@ describe('@mcp-ui/server', () => {
content: {
type: 'remoteDom' as const,
script: 'Invalid
',
- flavor: 'react' as const,
+ framework: 'react' as const,
},
- delivery: 'text' as const,
+ encoding: 'text' as const,
};
// @ts-expect-error We are intentionally passing an invalid URI to test the error.
expect(() => createUIResource(options)).toThrow(
- "MCP SDK: URI must start with 'ui://' when content.type is 'remoteDom'.",
+ "MCP-UI SDK: URI must start with 'ui://' when content.type is 'remoteDom'.",
);
});
});
diff --git a/packages/server/src/index.ts b/packages/server/src/index.ts
index cf1ecd9c..fb821e63 100644
--- a/packages/server/src/index.ts
+++ b/packages/server/src/index.ts
@@ -35,13 +35,13 @@ function robustUtf8ToBase64(str: string): string {
return btoa(binaryString);
} else {
console.warn(
- 'MCP SDK: Buffer API and TextEncoder/btoa not available. Base64 encoding might not be UTF-8 safe.',
+ 'MCP-UI SDK: Buffer API and TextEncoder/btoa not available. Base64 encoding might not be UTF-8 safe.',
);
try {
return btoa(str);
} catch (e) {
throw new Error(
- 'MCP SDK: Suitable UTF-8 to Base64 encoding method not found, and fallback btoa failed.',
+ 'MCP-UI SDK: Suitable UTF-8 to Base64 encoding method not found, and fallback btoa failed.',
);
}
}
@@ -59,46 +59,46 @@ export function createUIResource(options: CreateUIResourceOptions): UIResource {
if (options.content.type === 'rawHtml') {
if (!options.uri.startsWith('ui://')) {
- throw new Error("MCP SDK: URI must start with 'ui://' when content.type is 'rawHtml'.");
+ throw new Error("MCP-UI SDK: URI must start with 'ui://' when content.type is 'rawHtml'.");
}
actualContentString = options.content.htmlString;
if (typeof actualContentString !== 'string') {
throw new Error(
- "MCP SDK: content.htmlString must be provided as a string when content.type is 'rawHtml'.",
+ "MCP-UI SDK: content.htmlString must be provided as a string when content.type is 'rawHtml'.",
);
}
mimeType = 'text/html';
} else if (options.content.type === 'externalUrl') {
if (!options.uri.startsWith('ui://')) {
- throw new Error("MCP SDK: URI must start with 'ui://' when content.type is 'externalUrl'.");
+ throw new Error("MCP-UI SDK: URI must start with 'ui://' when content.type is 'externalUrl'.");
}
actualContentString = options.content.iframeUrl;
if (typeof actualContentString !== 'string') {
throw new Error(
- "MCP SDK: content.iframeUrl must be provided as a string when content.type is 'externalUrl'.",
+ "MCP-UI SDK: content.iframeUrl must be provided as a string when content.type is 'externalUrl'.",
);
}
mimeType = 'text/uri-list';
} else if (options.content.type === 'remoteDom') {
if (!options.uri.startsWith('ui://')) {
- throw new Error("MCP SDK: URI must start with 'ui://' when content.type is 'remoteDom'.");
+ throw new Error("MCP-UI SDK: URI must start with 'ui://' when content.type is 'remoteDom'.");
}
actualContentString = options.content.script;
if (typeof actualContentString !== 'string') {
throw new Error(
- "MCP SDK: content.script must be provided as a string when content.type is 'remoteDom'.",
+ "MCP-UI SDK: content.script must be provided as a string when content.type is 'remoteDom'.",
);
}
- mimeType = `application/vnd.mcp-ui.remote-dom+javascript; flavor=${options.content.flavor}`;
+ mimeType = `application/vnd.mcp-ui.remote-dom+javascript; framework=${options.content.framework}`;
} else {
// This case should ideally be prevented by TypeScript's discriminated union checks
const exhaustiveCheckContent: never = options.content;
- throw new Error(`MCP SDK: Invalid content.type specified: ${exhaustiveCheckContent}`);
+ throw new Error(`MCP-UI SDK: Invalid content.type specified: ${exhaustiveCheckContent}`);
}
let resource: UIResource['resource'];
- switch (options.delivery) {
+ switch (options.encoding) {
case 'text':
resource = {
uri: options.uri,
@@ -114,8 +114,8 @@ export function createUIResource(options: CreateUIResourceOptions): UIResource {
};
break;
default: {
- const exhaustiveCheck: never = options.delivery;
- throw new Error(`Invalid delivery type: ${exhaustiveCheck}`);
+ const exhaustiveCheck: never = options.encoding;
+ throw new Error(`MCP-UI SDK: Invalid encoding type: ${exhaustiveCheck}`);
}
}
diff --git a/packages/server/src/types.ts b/packages/server/src/types.ts
index e7835e24..e5ca0228 100644
--- a/packages/server/src/types.ts
+++ b/packages/server/src/types.ts
@@ -5,8 +5,8 @@ export type URI = `ui://${string}`;
export type MimeType =
| 'text/html'
| 'text/uri-list'
- | 'application/vnd.mcp-ui.remote-dom+javascript; flavor=react'
- | 'application/vnd.mcp-ui.remote-dom+javascript; flavor=webcomponents';
+ | 'application/vnd.mcp-ui.remote-dom+javascript; framework=react'
+ | 'application/vnd.mcp-ui.remote-dom+javascript; framework=webcomponents';
export type HTMLTextContent = {
uri: URI;
@@ -28,13 +28,13 @@ export type ResourceContentPayload =
| {
type: 'remoteDom';
script: string;
- flavor: 'react' | 'webcomponents';
+ framework: 'react' | 'webcomponents';
};
export interface CreateUIResourceOptions {
uri: URI;
content: ResourceContentPayload;
- delivery: 'text' | 'blob';
+ encoding: 'text' | 'blob';
}
export type UIActionType = 'tool' | 'prompt' | 'link' | 'intent' | 'notify';