feat: add UIResourceRenderer Web Component

README.md

@@ -73,6 +73,10 @@ interface UIResource {
 
 The UI Resource is rendered in the `<UIResourceRenderer />` component. It automatically detects the resource type and renders the appropriate component.
 
+It is available as a React component and as a Web Component.
+
+**React Component**
+
 It accepts the following props:
 - **`resource`**: The resource object from an MCP Tool response. It must include `uri`, `mimeType`, and content (`text`, `blob`)
 - **`onUIAction`**: Optional callback for handling UI actions from the resource:
@@ -94,6 +98,27 @@ It accepts the following props:
   - **`library`**: Optional component library for Remote DOM resources (defaults to `basicComponentLibrary`)
   - **`remoteElements`**: remote element definitions for Remote DOM resources.
 
+**Web Component**
+
+The Web Component is available as `<ui-resource-renderer>`. It accepts the same props as the React component, but they must be passed as strings.
+
+Example:
+```html
+<ui-resource-renderer
+  resource='{ "mimeType": "text/html", "text": "<h2>Hello from the Web Component!</h2>" }'
+></ui-resource-renderer>
+```
+
+The `onUIAction` prop can be handled by attaching an event listener to the component:
+```javascript
+const renderer = document.querySelector('ui-resource-renderer');
+renderer.addEventListener('onUIAction', (event) => {
+  console.log('Action:', event.detail);
+});
+```
+
+The Web Component is available in the `@mcp-ui/client` package at `dist/ui-resource-renderer.wc.js`.
+
 ### Supported Resource Types
 
 #### HTML (`text/html` and `text/uri-list`)
@@ -260,9 +285,10 @@ These guides will show you how to add a `mcp-ui` endpoint to an existing server,
 ## 🌍 Examples
 
 **Client Examples**
-* [ui-inspector](https://github.com/idosal/ui-inspector) - inspect local `mcp-ui`-enabled servers. 
+* [ui-inspector](https://github.com/idosal/ui-inspector) - inspect local `mcp-ui`-enabled servers.
 * [MCP-UI Chat](https://github.com/idosal/scira-mcp-ui-chat) - interactive chat built with the `mcp-ui` client. Check out the [hosted version](https://scira-mcp-chat-git-main-idosals-projects.vercel.app/)!
 * MCP-UI RemoteDOM Playground (`examples/remote-dom-demo`) - local demo app to test RemoteDOM resources (intended for hosts)
+* MCP-UI Web Component Demo (`examples/wc-demo`) - local demo app to test the Web Component
 
 **Server Examples**
 * **TypeScript**: A [full-featured server](examples/server) that is deployed to a hosted environment for easy testing.

docs/src/.vitepress/config.ts

@@ -136,24 +136,23 @@ export default defineConfig({
                   link: '/guide/client/resource-renderer',
                 },
                 {
-                  text: 'Custom Component Libraries',
-                  link: '/guide/client/custom-component-libraries',
+                  text: 'React Usage & Examples',
+                  link: '/guide/client/react-usage-examples'
                 },
                 {
-                  text: 'Using a Proxy',
-                  link: '/guide/client/using-a-proxy',
-                },
-                {
-                  text: 'HTMLResourceRenderer',
-                  link: '/guide/client/html-resource',
-                },
-                {
-                  text: 'RemoteDOMResourceRenderer',
-                  link: '/guide/client/remote-dom-resource',
-                },
+                  text: 'Web Component Usage & Examples',
+                  link: '/guide/client/wc-usage-examples',
+                }
               ],
             },
-            { text: 'Usage & Examples', link: '/guide/client/usage-examples' },
+            {
+              text: 'Custom Component Libraries',
+              link: '/guide/client/custom-component-libraries',
+            },
+            {
+              text: 'Using a Proxy',
+              link: '/guide/client/using-a-proxy',
+            }
           ],
         },
       ],

docs/src/guide/client/html-resource.md

@@ -67,7 +67,7 @@ By default, the iframe stretches to 100% width and is at least 200px tall. You c
 
 ## Example Usage
 
-See [Client SDK Usage & Examples](./usage-examples.md) for examples using the recommended `<UIResourceRenderer />` component.
+See [Client SDK Usage & Examples](./react-usage-examples.md) for examples using the recommended `<UIResourceRenderer />` component.
 
 ## Auto-Resizing the Iframe
 

docs/src/guide/client/overview.md

@@ -29,4 +29,5 @@ See the following pages for more details:
 - [UIResourceRenderer Component](./resource-renderer.md) - **Main entry point**
 - [HTMLResourceRenderer Component](./html-resource.md)
 - [RemoteDOMResourceRenderer Component](./remote-dom-resource.md)
-- [Client SDK Usage & Examples](./usage-examples.md)
+- [React Usage & Examples](./react-usage-examples.md)
+- [Web Component Usage & Examples](./wc-usage-examples.md)

docs/src/guide/client/usage-examples.md → docs/src/guide/client/react-usage-examples.md

@@ -1,6 +1,6 @@
-# @mcp-ui/client Usage & Examples
+# React Usage & Examples
 
-Here's how to use the `<UIResourceRenderer />` component from `@mcp-ui/client`.
+Here's how to use the `<UIResourceRenderer />` component from `@mcp-ui/client` in a React environment.
 
 ## Installation
 

docs/src/guide/client/resource-renderer.md

@@ -1,6 +1,17 @@
 # UIResourceRenderer Component
 
-The `<UIResourceRenderer />` component is the **main entry point** for rendering MCP-UI resources in your React application. It automatically detects the resource type and renders the appropriate component internally.
+The `UIResourceRenderer` component is the **main entry point** for rendering MCP-UI resources in your application. It automatically detects the resource type and renders the appropriate component internally.
+It is available as a React component and as a Web Component.
+
+## React Component
+
+React applications may use the `<UIResourceRenderer />` component.
+
+## Web Component
+
+For developers using frameworks other than React, a Web Component version is available. It can be used as a standard HTML element (`<ui-resource-renderer>`) and styled with regular CSS.
+
+[**» See the Web Component Usage & Examples for more details**](./wc-usage-examples.md)
 
 ## Why use `UIResourceRenderer`?
 
@@ -348,4 +359,4 @@ const customLibrary: ComponentLibrary = {
 
 ## Examples
 
-See [Client SDK Usage & Examples](./usage-examples.md) for complete working examples.
+See [Client SDK Usage & Examples](./react-usage-examples.md) for complete working examples.

docs/src/guide/client/wc-usage-examples.md

@@ -0,0 +1,96 @@
+# Web Component Usage & Examples
+
+`UIResourceRenderer` is available as a Web Component and serves as a powerful tool for integrating MCP-UI resources into non-React frameworks such as Vue, Svelte, or vanilla JavaScript. It offers the same core functionality as its React counterpart but is used as a standard HTML element.
+
+A full, working example is available in the `examples/wc-demo` directory of the repository, demonstrating the recommended property-based approach.
+
+## 1. Install the package
+
+```bash
+npm install @mcp-ui/client
+```
+
+## 2. Import the Web Component
+
+In your project's main JavaScript or TypeScript file, import the Web Component script. This will register the `<ui-resource-renderer>` custom element, making it available throughout your application.
+
+```javascript
+import '@mcp-ui/client/ui-resource-renderer.wc.js';
+```
+
+Your build tool (e.g., Vite, Webpack, etc.) will automatically resolve this path from `node_modules`.
+
+## 3. Use the Custom Element
+
+Once the script is imported, you can use the `<ui-resource-renderer>` custom element in your HTML.
+
+```html
+<ui-resource-renderer id="my-renderer"></ui-resource-renderer>
+```
+
+## 4. Styling
+
+You can style the Web Component directly with CSS, just like any other HTML element. The internal `<iframe>` is designed to fill 100% of the custom element's dimensions, so you can control its size and appearance by styling the `<ui-resource-renderer>` tag.
+
+```css
+ui-resource-renderer {
+  display: block;
+  width: 100%;
+  height: 400px;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+}
+```
+
+## 5. Passing Data and Handling Actions
+
+There are two ways to pass data to the Web Component: as JavaScript **properties** or as HTML **attributes**.
+
+### Method 1: Using JavaScript Properties (Recommended)
+
+The standard and most powerful way to pass complex data (like objects and arrays) is by setting the component's JavaScript properties. This is the recommended approach for applications, especially when using frameworks like Vue or Svelte which handle this automatically.
+
+```javascript
+// This object would typically come from an MCP response
+const resourceObject = {
+  uri: 'ui://some-resource/1',
+  mimeType: 'text/uri-list',
+  text: 'https://example.com'
+};
+
+const renderer = document.getElementById('my-renderer');
+
+// Set the 'resource' property directly with the object
+// No stringification is needed
+renderer.resource = resourceObject;
+
+// Listen for events
+renderer.addEventListener('onUIAction', (event) => {
+  console.log('Action received:', event.detail);
+});
+```
+
+When using a framework like Vue or Svelte, you can bind to the property directly in your template:
+
+```vue
+<!-- Vue.js Example -->
+<ui-resource-renderer :resource="myResourceObject"></ui-resource-renderer>
+```
+
+### Method 2: Using HTML Attributes (for Static Data)
+
+If you need to set the initial data directly in your HTML, you can use attributes. Since HTML attributes can only be strings, you must provide a **stringified JSON** for any prop that is an object.
+
+This method is less common for dynamic data but can be useful for static content or simple examples.
+
+```html
+<ui-resource-renderer
+  resource='{ "mimeType": "text/uri-list", "text": "https://example.com" }'
+></ui-resource-renderer>
+```
+
+Our component wrapper will automatically parse these stringified attributes back into objects.
+
+### Available Properties/Attributes
+
+The Web Component accepts the same properties as the [`<UIResourceRenderer />` React component](./resource-renderer.md#props). For detailed information on all available props and their usage, please refer to the main component documentation.

docs/src/guide/getting-started.md

@@ -242,7 +242,8 @@ All resource types are handled automatically by `<UIResourceRenderer />`.
   - [TypeScript SDK Usage & Examples](./server/typescript/usage-examples.md)
   - [Ruby SDK Usage & Examples](./server/ruby/usage-examples.md)
 - **Client SDK**: Learn how to render resources.
-  - [Client SDK Usage & Examples](./client/usage-examples.md)
+  - [React Usage & Examples](./client/react-usage-examples.md)
+- [Web Component Usage & Examples](./client/wc-usage-examples.md)
 - **Protocol & Components**:
   - [Protocol Details](./protocol-details.md)
   - [UIResourceRenderer Component](./client/resource-renderer.md)

docs/src/guide/introduction.md

@@ -11,7 +11,7 @@ You can use [GitMCP](https://gitmcp.io/idosal/mcp-ui) to give your IDE access to
 
 MCP-UI provides SDKs for multiple languages, including:
 
-- **`@mcp-ui/client`**: A Typescript package with UI components (like `<UIResourceRenderer />`) for easy rendering of interactive UI.
+- **`@mcp-ui/client`**: A Typescript package with UI components for easy rendering of interactive UI. It includes a React component (`<UIResourceRenderer />`) and a standard Web Component (`<ui-resource-renderer>`).
 - **`@mcp-ui/server`**: A Typescript package with helper functions (like `createUIResource`) for server-side logic to easily construct `UIResource` objects.
 - **`mcp_ui_server`**: A Ruby gem with helper methods (like `create_ui_resource`) for server-side logic in Ruby applications.
 
@@ -46,7 +46,7 @@ interface UIResource {
 ## How It Works
 
 1. **Server Side**: Use the server SDK for your language to create `UIResource` objects.
-2. **Client Side**: Use `@mcp-ui/client` to render these resources in your React app.
+2. **Client Side**: Use `@mcp-ui/client` to render these resources in your frontend application.
 
 ### Example Flow
 
@@ -81,8 +81,10 @@ resource = McpUiServer.create_ui_resource(
 
 :::
 
-**Client (React App):**
-```tsx
+**Client (Frontend App):**
+::: code-group
+
+```tsx [React]
 import { UIResourceRenderer } from '@mcp-ui/client';
 
 function App({ mcpResponse }) {
@@ -103,6 +105,36 @@ function App({ mcpResponse }) {
 }
 ```
 
+```html [Web Component]
+<!-- index.html -->
+<ui-resource-renderer id="resource-renderer"></ui-resource-renderer>
+
+<!-- main.js -->
+<script type="module">
+  // 1. Import the script to register the component
+  import '@mcp-ui/client/ui-resource-renderer.wc.js';
+
+  // 2. This object would come from your MCP response
+  const mcpResource = {
+    resource: {
+      uri: 'ui://user-form/1',
+      mimeType: 'text/uri-list',
+      text: 'https://example.com'
+    }
+  };
+
+  // 3. Get the element and pass data
+  const renderer = document.getElementById('resource-renderer');
+  renderer.resource = mcpResource.resource;
+
+  // 4. Listen for events
+  renderer.addEventListener('onUIAction', (event) => {
+    console.log('User action:', event.detail);
+  });
+</script>
+```
+:::
+
 ## Key Benefits
 
 - **Standardized**: Consistent interface for UI resources across MCP applications

docs/src/index.md

@@ -25,7 +25,7 @@ hero:
 
 features:
   - title: ⚛️ Client SDK
-    details: React components and hooks for seamless frontend integration. Render interactive UI resources with the UIResourceRenderer component and handle UI actions effortlessly.
+    details: Provides a React component and Web Component for easy frontend integration. Render interactive UI resources and handle UI actions effortlessly.
   - title: 🛠️ Server SDKs
     details: Powerful utilities to construct interactive UI for MCP servers. Create HTML, React, Web Components, and external app UI with ergonomic APIs for Typescript and Ruby.
   - title: 🔒 Secure
@@ -80,9 +80,11 @@ interactive_form = McpUiServer.create_ui_resource(
 
 **Client Side** - Render on the host with a single component:
 
-```tsx
+::: code-group
+```tsx [React]
 import { UIResourceRenderer } from '@mcp-ui/client';
 
+// `mcpResource` would come from your MCP response
 function MyApp({ mcpResource }) {
   return (
     <UIResourceRenderer
@@ -95,6 +97,36 @@ function MyApp({ mcpResource }) {
 }
 ```
 
+```html [Web Component / HTML]
+<!-- index.html -->
+<ui-resource-renderer id="resource-renderer"></ui-resource-renderer>
+
+<!-- main.js -->
+<script type="module">
+  // 1. Import the script to register the component
+  import '@mcp-ui/client/ui-resource-renderer.wc.js';
+
+  // 2. This object would come from your MCP response
+  const mcpResource = {
+    resource: {
+      uri: 'ui://user-form/1',
+      mimeType: 'text/uri-list',
+      text: 'https://example.com'
+    }
+  };
+
+  // 3. Get the element and pass data
+  const renderer = document.getElementById('resource-renderer');
+  renderer.setAttribute('resource', JSON.stringify(mcpResource.resource));
+
+  // 4. Listen for events
+  renderer.addEventListener('onUIAction', (event) => {
+    console.log('User action:', event.detail);
+  });
+</script>
+```
+:::
+
 
 <style>
 .video-container {

examples/wc-demo/index.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en" style="height: 100%">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>UIResourceWC Demo</title>
+    <script type="module" src="./main.js"></script>
+    <style>
+      ui-resource-renderer {
+        display: block;
+        border: 2px solid green;
+        width: 100%;
+        height: 50%;
+      }
+    </style>
+  </head>
+  <body style="height: 100%; margin: 0">
+    <h1>UIResourceWC Demo</h1>
+    <ui-resource-renderer id="resource-renderer"></ui-resource-renderer>
+  </body>
+</html>