feat: add UIResourceRenderer Web Component

[idosal]

Add mcp-ui/client support for non-React projects

[cloudflare-workers-and-pages]

Deploying mcp-ui with    Cloudflare Pages

Latest commit:	e40e28b
Status:	✅  Deploy successful!
Preview URL:	https://225fb3fe.mcp-ui.pages.dev
Branch Preview URL:	https://feat-webcomponent.mcp-ui.pages.dev

View logs

[Copilot]

Pull Request Overview

This PR adds Web Component support to the MCP-UI client library, enabling usage in non-React frameworks like Vue, Svelte, or vanilla JavaScript. The Web Component wraps the existing React-based UIResourceRenderer component and provides the same functionality through a standard HTML custom element.

Key changes:

• Added UIResourceRendererWC Web Component wrapper with event dispatching
• Enhanced build system to generate the Web Component bundle
• Fixed iframe styling to use height: 100% instead of minHeight: 200px

Reviewed Changes

Copilot reviewed 26 out of 27 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
sdks/typescript/client/src/components/UIResourceRendererWC.tsx	New Web Component wrapper for UIResourceRenderer with JSON prop normalization
sdks/typescript/client/src/components/UIResourceRendererWC.test.tsx	Test suite for the Web Component functionality
sdks/typescript/client/vite.config.wc.ts	Vite configuration for building the Web Component bundle
sdks/typescript/client/package.json	Updated build scripts and added Web Component dependency
sdks/typescript/client/src/components/HTMLResourceRenderer.tsx	Changed iframe styling from minHeight to height: 100%
examples/wc-demo/	Demo application showcasing Web Component usage
Documentation files	Updated to include Web Component usage examples and guides

Files not reviewed (1)

• pnpm-lock.yaml: Language not supported

[Copilot]

Logging the entire prop value could expose sensitive data. Consider logging only the error message or a sanitized version of the prop.

Suggested change

	console.error('Failed to parse JSON prop:', { prop, error: e });
	// Avoid logging the full prop to prevent leaking sensitive data
	const propInfo = typeof prop === 'string'
	? { type: typeof prop, length: prop.length, preview: prop.slice(0, 50) }
	: { type: typeof prop };
	console.error('Failed to parse JSON prop:', { propInfo, error: e instanceof Error ? e.message : e });

[Copilot]

The type assertion as Resource bypasses type checking. Consider adding runtime validation to ensure the resource object has the required properties before casting.

Suggested change

	export const UIResourceRendererWCWrapper: FC<UIResourceRendererWCProps> = (props) => {
	const {
	resource: rawResource,
	supportedContentTypes: rawSupportedContentTypes,
	htmlProps: rawHtmlProps,
	remoteDomProps: rawRemoteDomProps,
	} = props;
	const resource = normalizeJsonProp(rawResource);
	const supportedContentTypes = normalizeJsonProp(rawSupportedContentTypes);
	const htmlProps = normalizeJsonProp(rawHtmlProps);
	const remoteDomProps = normalizeJsonProp(rawRemoteDomProps);
	const ref = useRef<HTMLDivElement>(null);
	const onUIActionCallback = useCallback(async (event: UIActionResult): Promise<void> => {
	if (ref.current) {
	const customEvent = new CustomEvent('onUIAction', {
	detail: event,
	composed: true,
	bubbles: true,
	});
	ref.current.dispatchEvent(customEvent);
	}
	}, []);
	if (!resource) {
	return <p style={{ color: 'red' }}>Resource not provided.</p>;
	}
	return (
	<div ref={ref}>
	<UIResourceRenderer
	resource={resource as Resource}
	supportedContentTypes={supportedContentTypes as unknown as UIResourceRendererProps['supportedContentTypes']}
	htmlProps={htmlProps}
	remoteDomProps={remoteDomProps}
	onUIAction={onUIActionCallback}
	/>
	</div>
	);
	};