diff --git a/README.md b/README.md
index 92043235..eb2a3423 100644
--- a/README.md
+++ b/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.
diff --git a/docs/src/.vitepress/config.ts b/docs/src/.vitepress/config.ts
index 2ec1f5d6..8782e232 100644
--- a/docs/src/.vitepress/config.ts
+++ b/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',
+            }
           ],
         },
       ],
diff --git a/docs/src/guide/client/html-resource.md b/docs/src/guide/client/html-resource.md
index 9274a766..10ddef44 100644
--- a/docs/src/guide/client/html-resource.md
+++ b/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
 
diff --git a/docs/src/guide/client/overview.md b/docs/src/guide/client/overview.md
index d0b82be9..f1955768 100644
--- a/docs/src/guide/client/overview.md
+++ b/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)
diff --git a/docs/src/guide/client/usage-examples.md b/docs/src/guide/client/react-usage-examples.md
similarity index 99%
rename from docs/src/guide/client/usage-examples.md
rename to docs/src/guide/client/react-usage-examples.md
index 1f39945b..9ec80ace 100644
--- a/docs/src/guide/client/usage-examples.md
+++ b/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
 
diff --git a/docs/src/guide/client/resource-renderer.md b/docs/src/guide/client/resource-renderer.md
index 26d95c45..3f6e0ebd 100644
--- a/docs/src/guide/client/resource-renderer.md
+++ b/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.
diff --git a/docs/src/guide/client/wc-usage-examples.md b/docs/src/guide/client/wc-usage-examples.md
new file mode 100644
index 00000000..f620a73c
--- /dev/null
+++ b/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.
diff --git a/docs/src/guide/getting-started.md b/docs/src/guide/getting-started.md
index 99f6690f..37ec48b0 100644
--- a/docs/src/guide/getting-started.md
+++ b/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)
diff --git a/docs/src/guide/introduction.md b/docs/src/guide/introduction.md
index 72e34570..32a86c9d 100644
--- a/docs/src/guide/introduction.md
+++ b/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
diff --git a/docs/src/index.md b/docs/src/index.md
index 64fac9b4..0bbb5647 100644
--- a/docs/src/index.md
+++ b/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 {
diff --git a/examples/wc-demo/index.html b/examples/wc-demo/index.html
new file mode 100644
index 00000000..d9ce41ca
--- /dev/null
+++ b/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>
diff --git a/examples/wc-demo/main.js b/examples/wc-demo/main.js
new file mode 100644
index 00000000..f2913ee9
--- /dev/null
+++ b/examples/wc-demo/main.js
@@ -0,0 +1,32 @@
+// main.js
+
+// This is the correct way to import and register the Web Component.
+// Your build tool (like Vite) will resolve this path to the correct file
+// in `node_modules/@mcp-ui/client/`.
+import '@mcp-ui/client/ui-resource-renderer.wc.js';
+
+// --- Example of how to interact with the component ---
+
+// This object would typically come from your MCP response
+const mcpResource = {
+  resource: {
+    uri: 'ui://user-form/1',
+    mimeType: 'text/uri-list',
+    text: 'https://remote-mcp-server-authless.idosalomon.workers.dev/task'
+  }
+};
+
+// Wait for the component to be defined and ready
+window.addEventListener('DOMContentLoaded', () => {
+  const renderer = document.getElementById('resource-renderer');
+
+  if (renderer) {
+    // Set the resource property
+    renderer.setAttribute('resource', JSON.stringify(mcpResource.resource));
+
+    // Listen for events
+    renderer.addEventListener('onUIAction', (event) => {
+      console.log('User action:', event.detail);
+    });
+  }
+});
diff --git a/examples/wc-demo/package.json b/examples/wc-demo/package.json
new file mode 100644
index 00000000..eb82e71f
--- /dev/null
+++ b/examples/wc-demo/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "wc-demo",
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@mcp-ui/client": "workspace:*"
+  },
+  "devDependencies": {
+    "vite": "^5.0.0"
+  }
+}
\ No newline at end of file
diff --git a/examples/wc-demo/vite.config.js b/examples/wc-demo/vite.config.js
new file mode 100644
index 00000000..8c4d5034
--- /dev/null
+++ b/examples/wc-demo/vite.config.js
@@ -0,0 +1,11 @@
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  root: '.',
+  server: {
+    port: 3000,
+    fs: {
+      allow: ['..', '../..'],
+    },
+  },
+});
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 966e0c08..04c394bf 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -114,6 +114,15 @@ importers:
         specifier: ^1.0.4
         version: 1.6.1(@types/node@22.15.33)(jsdom@23.2.0)(lightningcss@1.30.1)
 
+  docs:
+    devDependencies:
+      vitepress:
+        specifier: ^1.0.0-rc.44
+        version: 1.6.3(@algolia/client-search@5.29.0)(@types/node@22.15.33)(@types/react@18.3.23)(lightningcss@1.30.1)(postcss@8.5.6)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(search-insights@2.17.3)(typescript@5.8.3)
+      vue:
+        specifier: ^3.3.0
+        version: 3.5.17(typescript@5.8.3)
+
   examples/external-url-demo:
     dependencies:
       '@mcp-ui/client':
@@ -355,6 +364,16 @@ importers:
         specifier: ^1.0.0
         version: 1.6.1(@types/node@20.19.1)(lightningcss@1.30.1)
 
+  examples/wc-demo:
+    dependencies:
+      '@mcp-ui/client':
+        specifier: workspace:*
+        version: link:../../sdks/typescript/client
+    devDependencies:
+      vite:
+        specifier: ^5.0.0
+        version: 5.4.19(@types/node@22.15.33)(lightningcss@1.30.1)
+
   sdks/typescript/client:
     dependencies:
       '@modelcontextprotocol/sdk':
@@ -363,6 +382,9 @@ importers:
       '@quilted/threads':
         specifier: ^3.1.3
         version: 3.1.3(@preact/signals-core@1.10.0)
+      '@r2wc/react-to-web-component':
+        specifier: ^2.0.4
+        version: 2.0.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@remote-dom/core':
         specifier: ^1.8.0
         version: 1.8.1(@preact/signals-core@1.10.0)
@@ -1865,6 +1887,15 @@ packages:
       '@preact/signals-core':
         optional: true
 
+  '@r2wc/core@1.2.0':
+    resolution: {integrity: sha512-vAfiuS5KywtV54SRzc4maEHcpdgeUyJzln+ATpNCOkO+ArIuOkTXd92b5YauVAd0A8B2rV/y9OeVW19vb73bUQ==}
+
+  '@r2wc/react-to-web-component@2.0.4':
+    resolution: {integrity: sha512-g1dtTTEGETNUimYldTW+2hxY3mmJZjzPEca0vqCutUht2GHmpK9mT5r/urmEI7uSbOkn6HaymosgVy26lvU1JQ==}
+    peerDependencies:
+      react: ^18.0.0 || ^19.0.0
+      react-dom: ^18.0.0 || ^19.0.0
+
   '@radix-ui/primitive@1.1.2':
     resolution: {integrity: sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA==}
 
@@ -8199,6 +8230,17 @@ snapshots:
 
   '@docsearch/css@3.8.2': {}
 
+  '@docsearch/js@3.8.2(@algolia/client-search@5.29.0)(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(search-insights@2.17.3)':
+    dependencies:
+      '@docsearch/react': 3.8.2(@algolia/client-search@5.29.0)(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(search-insights@2.17.3)
+      preact: 10.26.9
+    transitivePeerDependencies:
+      - '@algolia/client-search'
+      - '@types/react'
+      - react
+      - react-dom
+      - search-insights
+
   '@docsearch/js@3.8.2(@algolia/client-search@5.29.0)(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(search-insights@2.17.3)':
     dependencies:
       '@docsearch/react': 3.8.2(@algolia/client-search@5.29.0)(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(search-insights@2.17.3)
@@ -8210,6 +8252,20 @@ snapshots:
       - react-dom
       - search-insights
 
+  '@docsearch/react@3.8.2(@algolia/client-search@5.29.0)(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(search-insights@2.17.3)':
+    dependencies:
+      '@algolia/autocomplete-core': 1.17.7(@algolia/client-search@5.29.0)(algoliasearch@5.29.0)(search-insights@2.17.3)
+      '@algolia/autocomplete-preset-algolia': 1.17.7(@algolia/client-search@5.29.0)(algoliasearch@5.29.0)
+      '@docsearch/css': 3.8.2
+      algoliasearch: 5.29.0
+    optionalDependencies:
+      '@types/react': 18.3.23
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      search-insights: 2.17.3
+    transitivePeerDependencies:
+      - '@algolia/client-search'
+
   '@docsearch/react@3.8.2(@algolia/client-search@5.29.0)(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(search-insights@2.17.3)':
     dependencies:
       '@algolia/autocomplete-core': 1.17.7(@algolia/client-search@5.29.0)(algoliasearch@5.29.0)(search-insights@2.17.3)
@@ -9176,6 +9232,14 @@ snapshots:
     optionalDependencies:
       '@preact/signals-core': 1.10.0
 
+  '@r2wc/core@1.2.0': {}
+
+  '@r2wc/react-to-web-component@2.0.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@r2wc/core': 1.2.0
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
   '@radix-ui/primitive@1.1.2': {}
 
   '@radix-ui/react-checkbox@1.3.2(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
@@ -10810,7 +10874,7 @@ snapshots:
 
   agents@0.0.80(@cloudflare/workers-types@4.20250620.0)(react@19.1.0):
     dependencies:
-      '@modelcontextprotocol/sdk': 1.13.1
+      '@modelcontextprotocol/sdk': 1.16.0
       ai: 4.3.16(react@19.1.0)(zod@3.25.67)
       cron-schedule: 5.0.4
       nanoid: 5.1.5
@@ -15616,6 +15680,55 @@ snapshots:
       jiti: 2.4.2
       lightningcss: 1.30.1
 
+  vitepress@1.6.3(@algolia/client-search@5.29.0)(@types/node@22.15.33)(@types/react@18.3.23)(lightningcss@1.30.1)(postcss@8.5.6)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(search-insights@2.17.3)(typescript@5.8.3):
+    dependencies:
+      '@docsearch/css': 3.8.2
+      '@docsearch/js': 3.8.2(@algolia/client-search@5.29.0)(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(search-insights@2.17.3)
+      '@iconify-json/simple-icons': 1.2.40
+      '@shikijs/core': 2.5.0
+      '@shikijs/transformers': 2.5.0
+      '@shikijs/types': 2.5.0
+      '@types/markdown-it': 14.1.2
+      '@vitejs/plugin-vue': 5.2.4(vite@5.4.19(@types/node@22.15.33)(lightningcss@1.30.1))(vue@3.5.17(typescript@5.8.3))
+      '@vue/devtools-api': 7.7.7
+      '@vue/shared': 3.5.17
+      '@vueuse/core': 12.8.2(typescript@5.8.3)
+      '@vueuse/integrations': 12.8.2(focus-trap@7.6.5)(typescript@5.8.3)
+      focus-trap: 7.6.5
+      mark.js: 8.11.1
+      minisearch: 7.1.2
+      shiki: 2.5.0
+      vite: 5.4.19(@types/node@22.15.33)(lightningcss@1.30.1)
+      vue: 3.5.17(typescript@5.8.3)
+    optionalDependencies:
+      postcss: 8.5.6
+    transitivePeerDependencies:
+      - '@algolia/client-search'
+      - '@types/node'
+      - '@types/react'
+      - async-validator
+      - axios
+      - change-case
+      - drauu
+      - fuse.js
+      - idb-keyval
+      - jwt-decode
+      - less
+      - lightningcss
+      - nprogress
+      - qrcode
+      - react
+      - react-dom
+      - sass
+      - sass-embedded
+      - search-insights
+      - sortablejs
+      - stylus
+      - sugarss
+      - terser
+      - typescript
+      - universal-cookie
+
   vitepress@1.6.3(@algolia/client-search@5.29.0)(@types/node@22.15.33)(@types/react@19.1.8)(lightningcss@1.30.1)(postcss@8.5.6)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(search-insights@2.17.3)(typescript@5.8.3):
     dependencies:
       '@docsearch/css': 3.8.2
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 6dec9528..5a86096b 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -2,3 +2,4 @@ packages:
   # all packages in subdirs of sdks/typescript/
   - 'sdks/typescript/*'
   - 'examples/*'
+  - 'docs'
diff --git a/sdks/typescript/client/README.md b/sdks/typescript/client/README.md
index 76b1e1be..533fd323 100644
--- a/sdks/typescript/client/README.md
+++ b/sdks/typescript/client/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:
@@ -92,6 +96,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`)
diff --git a/sdks/typescript/client/package.json b/sdks/typescript/client/package.json
index 2bb2d592..b8347473 100644
--- a/sdks/typescript/client/package.json
+++ b/sdks/typescript/client/package.json
@@ -12,7 +12,8 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
       "require": "./dist/index.js"
-    }
+    },
+    "./ui-resource-renderer.wc.js": "./dist/ui-resource-renderer.wc.js"
   },
   "files": [
     "dist"
@@ -20,6 +21,7 @@
   "dependencies": {
     "@modelcontextprotocol/sdk": "*",
     "@quilted/threads": "^3.1.3",
+    "@r2wc/react-to-web-component": "^2.0.4",
     "@remote-dom/core": "^1.8.0",
     "@remote-dom/react": "^1.2.2",
     "react": "^18.3.1",
@@ -39,7 +41,8 @@
   },
   "scripts": {
     "prepublishOnly": "pnpm run build",
-    "build": "pnpm run bundle:iframe && tsc && vite build",
+    "build": "pnpm run bundle:iframe && tsc && vite build && pnpm run build:wc",
+    "build:wc": "vite build --config vite.config.wc.ts",
     "bundle:iframe": "node scripts/bundle-iframe.js",
     "dev": "pnpm run bundle:iframe && vite",
     "test": "vitest run",
diff --git a/sdks/typescript/client/src/components/HTMLResourceRenderer.tsx b/sdks/typescript/client/src/components/HTMLResourceRenderer.tsx
index f6e5d81d..c6d2460d 100644
--- a/sdks/typescript/client/src/components/HTMLResourceRenderer.tsx
+++ b/sdks/typescript/client/src/components/HTMLResourceRenderer.tsx
@@ -153,7 +153,7 @@ export const HTMLResourceRenderer = ({
       <iframe
         srcDoc={htmlString}
         sandbox="allow-scripts"
-        style={{ width: '100%', minHeight: 200, ...style }}
+        style={{ width: '100%', height: '100%', ...style }}
         title="MCP HTML Resource (Embedded Content)"
         {...iframeProps}
         ref={iframeRef}
@@ -172,7 +172,7 @@ export const HTMLResourceRenderer = ({
       <iframe
         src={iframeSrcToRender}
         sandbox="allow-scripts allow-same-origin"
-        style={{ width: '100%', minHeight: 200, ...style }}
+        style={{ width: '100%', height: '100%', ...style }}
         title="MCP HTML Resource (URL)"
         {...iframeProps}
         ref={iframeRef}
diff --git a/sdks/typescript/client/src/components/UIResourceRenderer.tsx b/sdks/typescript/client/src/components/UIResourceRenderer.tsx
index 5de26023..aea19deb 100644
--- a/sdks/typescript/client/src/components/UIResourceRenderer.tsx
+++ b/sdks/typescript/client/src/components/UIResourceRenderer.tsx
@@ -4,7 +4,7 @@ import { HTMLResourceRenderer, HTMLResourceRendererProps } from './HTMLResourceR
 import { RemoteDOMResourceProps, RemoteDOMResourceRenderer } from './RemoteDOMResourceRenderer';
 import { basicComponentLibrary } from '../remote-dom/component-libraries/basic';
 
-type UIResourceRendererProps = {
+export type UIResourceRendererProps = {
   resource: Partial<Resource>;
   onUIAction?: (result: UIActionResult) => Promise<unknown>;
   supportedContentTypes?: ResourceContentType[];
diff --git a/sdks/typescript/client/src/components/UIResourceRendererWC.test.tsx b/sdks/typescript/client/src/components/UIResourceRendererWC.test.tsx
new file mode 100644
index 00000000..ceccc222
--- /dev/null
+++ b/sdks/typescript/client/src/components/UIResourceRendererWC.test.tsx
@@ -0,0 +1,88 @@
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { render, screen, waitFor, cleanup, act } from '@testing-library/react';
+import React from 'react';
+import './UIResourceRendererWC';
+import { UIResourceRenderer } from './UIResourceRenderer';
+
+let triggerUIAction: (event: unknown) => void;
+
+// Mock the underlying renderer to control the onUIAction callback
+vi.mock('./UIResourceRenderer', () => ({
+  UIResourceRenderer: vi.fn((props) => {
+    // This mock simulates the renderer and allows us to trigger the action
+    triggerUIAction = (event: unknown) => props.onUIAction?.(event);
+    return (
+      <iframe title="MCP HTML Resource (Embedded Content)" srcDoc={props.resource?.text || ''} />
+    );
+  }),
+}));
+
+
+describe('UIResourceRendererWC', () => {
+  const resource = {
+    mimeType: 'text/html',
+    text: '<h1>Hello, World!</h1>',
+  };
+
+  afterEach(() => {
+    cleanup();
+    document.body.innerHTML = '';
+    vi.clearAllMocks();
+  });
+
+  it('should register the custom element', () => {
+    expect(customElements.get('ui-resource-renderer')).toBeDefined();
+  });
+
+  it('should render the component via custom element with stringified prop', async () => {
+    render(React.createElement('ui-resource-renderer', { resource: JSON.stringify(resource) }));
+
+    await waitFor(() => {
+      expect(UIResourceRenderer).toHaveBeenCalled();
+      const iframe = screen.getByTitle('MCP HTML Resource (Embedded Content)') as HTMLIFrameElement;
+      expect(iframe).toBeInTheDocument();
+      expect(iframe.srcdoc).toContain('<h1>Hello, World!</h1>');
+    });
+  });
+
+  it('should render with resource property after being added to the DOM', async () => {
+    const el = document.createElement('ui-resource-renderer');
+    document.body.appendChild(el);
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (el as any).resource = resource;
+
+    await waitFor(() => {
+        expect(UIResourceRenderer).toHaveBeenCalled();
+        const iframe = screen.getByTitle('MCP HTML Resource (Embedded Content)') as HTMLIFrameElement;
+        expect(iframe).toBeInTheDocument();
+        expect(iframe.srcdoc).toContain('<h1>Hello, World!</h1>');
+    });
+  });
+
+  it('should dispatch onUIAction event when the underlying component calls onUIAction', async () => {
+    const onUIAction = vi.fn();
+
+    const el = document.createElement('ui-resource-renderer');
+    el.addEventListener('onUIAction', onUIAction);
+    document.body.appendChild(el);
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (el as any).resource = resource;
+
+    // Wait for the component to render and our mock to be in place
+    await waitFor(() => {
+      expect(UIResourceRenderer).toHaveBeenCalled();
+    });
+
+    const mockEventPayload = { type: 'testAction', payload: { data: '123' } };
+
+    await act(async () => {
+      triggerUIAction(mockEventPayload);
+    });
+    
+    expect(onUIAction).toHaveBeenCalled();
+    const dispatchedEvent = onUIAction.mock.calls[0][0] as CustomEvent;
+    expect(dispatchedEvent.detail).toEqual(mockEventPayload);
+  });
+});
diff --git a/sdks/typescript/client/src/components/UIResourceRendererWC.tsx b/sdks/typescript/client/src/components/UIResourceRendererWC.tsx
new file mode 100644
index 00000000..7b138d55
--- /dev/null
+++ b/sdks/typescript/client/src/components/UIResourceRendererWC.tsx
@@ -0,0 +1,80 @@
+import r2wc from '@r2wc/react-to-web-component';
+import { UIResourceRenderer, type UIResourceRendererProps } from './UIResourceRenderer';
+import { FC, useCallback, useRef } from 'react';
+import { UIActionResult } from '../types';
+import { Resource } from '@modelcontextprotocol/sdk/types.js';
+
+
+type UIResourceRendererWCProps = Omit<UIResourceRendererProps, 'resource' | 'onUIAction'> & {
+    resource?: Resource | string;
+};
+
+function normalizeJsonProp(prop: unknown): Record<string, unknown> | undefined {
+    if (typeof prop === 'object' && prop !== null) {
+        return prop as Record<string, unknown>;
+    }
+    if (typeof prop === 'string' && prop.trim() !== '') {
+      try {
+        return JSON.parse(prop);
+      } catch (e) {
+        console.error('Failed to parse JSON prop:', { prop, error: e });
+        return undefined;
+      }
+    }
+}
+
+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>
+    );
+};
+
+
+customElements.define('ui-resource-renderer', r2wc(UIResourceRendererWCWrapper, {
+    props: {
+        resource: 'json',
+        supportedContentTypes: 'json',
+        htmlProps: 'json',
+        remoteDomProps: 'json',
+        /* `onUIAction` is intentionally omitted as the WC implements its own event dispatching mechanism for UI actions
+         * Consumers should listen for the `onUIAction` CustomEvent on the element instead of passing an `onUIAction` prop.
+         */
+    }
+}));
diff --git a/sdks/typescript/client/src/components/__tests__/UIResourceRenderer.unmocked.test.tsx b/sdks/typescript/client/src/components/__tests__/UIResourceRenderer.unmocked.test.tsx
index 33699ab8..0fea8c1f 100644
--- a/sdks/typescript/client/src/components/__tests__/UIResourceRenderer.unmocked.test.tsx
+++ b/sdks/typescript/client/src/components/__tests__/UIResourceRenderer.unmocked.test.tsx
@@ -49,7 +49,7 @@ describe('UIResourceRenderer', () => {
       payload: { width: 100, height: 100 },
     });
     expect(ref.current?.style.width).toBe('100px');
-    expect(ref.current?.style.height).toBe('');
+    expect(ref.current?.style.height).toBe('100%');
   });
 });
 
diff --git a/sdks/typescript/client/tsconfig.test.json b/sdks/typescript/client/tsconfig.test.json
new file mode 100644
index 00000000..bcab8747
--- /dev/null
+++ b/sdks/typescript/client/tsconfig.test.json
@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "composite": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"]
+}
diff --git a/sdks/typescript/client/vite.config.ts b/sdks/typescript/client/vite.config.ts
index 9f197f00..77ff4691 100644
--- a/sdks/typescript/client/vite.config.ts
+++ b/sdks/typescript/client/vite.config.ts
@@ -8,7 +8,7 @@ export default defineConfig({
     react(),
     dts({
       insertTypesEntry: true,
-      exclude: ['**/__tests__/**', '**/*.test.ts', '**/*.spec.ts'],
+      exclude: ['**/__tests__/**', '**/*.test.ts', '**/*.spec.ts', '**/UIResourceRendererWC.tsx'],
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
     }) as any,
   ],
diff --git a/sdks/typescript/client/vite.config.wc.ts b/sdks/typescript/client/vite.config.wc.ts
new file mode 100644
index 00000000..17a7c5ea
--- /dev/null
+++ b/sdks/typescript/client/vite.config.wc.ts
@@ -0,0 +1,22 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react-swc';
+import path from 'path';
+
+export default defineConfig({
+  plugins: [react()],
+  build: {
+    outDir: 'dist',
+    lib: {
+      entry: path.resolve(__dirname, 'src/components/UIResourceRendererWC.tsx'),
+      name: 'McpUiClientWC',
+      formats: ['es'],
+      fileName: () => 'ui-resource-renderer.wc.js',
+    },
+    rollupOptions: {
+      output: {
+        inlineDynamicImports: true,
+      },
+    },
+    sourcemap: false,
+  },
+});
diff --git a/sdks/typescript/client/vitest.config.ts b/sdks/typescript/client/vitest.config.ts
index 52e5d6f8..2bc3ce47 100644
--- a/sdks/typescript/client/vitest.config.ts
+++ b/sdks/typescript/client/vitest.config.ts
@@ -1,8 +1,9 @@
 import { defineConfig } from 'vitest/config';
 import react from '@vitejs/plugin-react-swc';
+import tsconfigPaths from 'vite-tsconfig-paths';
 
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), tsconfigPaths({ projects: ['./tsconfig.test.json'] })],
   test: {
     globals: true,
     environment: 'jsdom',