diff --git a/docs/src/guide/client/overview.md b/docs/src/guide/client/overview.md
index 1764a872..5b91f917 100644
--- a/docs/src/guide/client/overview.md
+++ b/docs/src/guide/client/overview.md
@@ -4,11 +4,16 @@ The `@mcp-ui/client` package helps you render UI resources sent from an MCP-enab
 
 ## What's Included?
 
+### Components
 - **`<UIResourceRenderer />`**: The main component you'll use. It inspects the resource's `mimeType` and renders either `<HTMLResourceRenderer />` or `<RemoteDOMResourceRenderer />` internally.
 - **`<HTMLResourceRenderer />`**: Internal component for HTML/URL resources
 - **`<RemoteDOMResourceRenderer />`**: Internal component for remote DOM resources
 - **`isUIResource()`**: Utility function to check if content is a UI resource (replaces manual `content.type === 'resource' && content.resource.uri?.startsWith('ui://')` checks)
 
+### Utility Functions
+- **`getResourceMetadata(resource)`**: Extracts the resource's `_meta` content (standard MCP metadata)
+- **`getUIResourceMetadata(resource)`**: Extracts only the MCP-UI specific metadata keys (prefixed with `mcpui.dev/ui-`) from the resource's `_meta` content
+
 ## Purpose
 - **Standardized UI**: mcp-ui's client guarantees full compatibility with the latest MCP UI standards.
 - **Simplified Rendering**: Abstract away the complexities of handling different resource types.
@@ -25,6 +30,94 @@ To build just this package from the monorepo root:
 pnpm build --filter @mcp-ui/client
 ```
 
+## Utility Functions Reference
+
+### `getResourceMetadata(resource)`
+
+Extracts the standard MCP metadata from a resource's `_meta` property.
+
+```typescript
+import { getResourceMetadata } from '@mcp-ui/client';
+
+const resource = {
+  uri: 'ui://example/demo',
+  mimeType: 'text/html',
+  text: '<div>Hello</div>',
+  _meta: {
+    title: 'Demo Component',
+    version: '1.0.0',
+    'mcpui.dev/ui-preferred-frame-size': ['800px', '600px'],
+    'mcpui.dev/ui-initial-render-data': { theme: 'dark' },
+    author: 'Development Team'
+  }
+};
+
+const metadata = getResourceMetadata(resource);
+console.log(metadata);
+// Output: {
+//   title: 'Demo Component',
+//   version: '1.0.0',
+//   'mcpui.dev/ui-preferred-frame-size': ['800px', '600px'],
+//   'mcpui.dev/ui-initial-render-data': { theme: 'dark' },
+//   author: 'Development Team'
+// }
+```
+
+### `getUIResourceMetadata(resource)`
+
+Extracts only the MCP-UI specific metadata keys (those prefixed with `mcpui.dev/ui-`) from a resource's `_meta` property, with the prefixes removed for easier access.
+
+```typescript
+import { getUIResourceMetadata } from '@mcp-ui/client';
+
+const resource = {
+  uri: 'ui://example/demo',
+  mimeType: 'text/html',
+  text: '<div>Hello</div>',
+  _meta: {
+    title: 'Demo Component',
+    version: '1.0.0',
+    'mcpui.dev/ui-preferred-frame-size': ['800px', '600px'],
+    'mcpui.dev/ui-initial-render-data': { theme: 'dark' },
+    author: 'Development Team'
+  }
+};
+
+const uiMetadata = getUIResourceMetadata(resource);
+console.log(uiMetadata);
+// Output: {
+//   'preferred-frame-size': ['800px', '600px'],
+//   'initial-render-data': { theme: 'dark' },
+// }
+```
+
+### Usage Examples
+
+These utility functions are particularly useful when you need to access metadata programmatically:
+
+```typescript
+import { getUIResourceMetadata, UIResourceRenderer } from '@mcp-ui/client';
+
+function SmartResourceRenderer({ resource }) {
+  const uiMetadata = getUIResourceMetadata(resource);
+  
+  // Use metadata to make rendering decisions
+  const initialRenderData = uiMetadata['initial-render-data'];
+  const containerClass = initialRenderData.preferredContext === 'hero' ? 'hero-container' : 'default-container';
+  
+  return (
+    <div className={containerClass}>
+      {preferredContext === 'hero' && (
+        <h2>Featured Component</h2>
+      )}
+      <UIResourceRenderer resource={resource} />
+    </div>
+  );
+}
+```
+
+## See More
+
 See the following pages for more details:
 
 - [UIResourceRenderer Component](./resource-renderer.md) - **Main entry point**
diff --git a/docs/src/guide/client/resource-renderer.md b/docs/src/guide/client/resource-renderer.md
index 32324cf1..6d233705 100644
--- a/docs/src/guide/client/resource-renderer.md
+++ b/docs/src/guide/client/resource-renderer.md
@@ -28,6 +28,16 @@ For developers using frameworks other than React, a Web Component version is ava
 - **External URLs** (`text/uri-list`): External applications and websites
 - **Remote DOM Resources** (`application/vnd.mcp-ui.remote-dom`): Server-generated UI components using Shopify's remote-dom
 
+## Metadata Integration
+
+The `UIResourceRenderer` automatically detects and uses metadata from resources created with the server SDK's `createUIResource()` function. It looks for MCP-UI specific metadata keys prefixed with `mcpui.dev/ui-` in the resource's `_meta` property:
+
+### Automatic Frame Sizing
+- **`mcpui.dev/ui-preferred-frame-size`**: When present, this metadata is used as the initial size for iframe-based resources, overriding any default sizing behavior.
+
+### Automatic Data Passing
+- **`mcpui.dev/ui-initial-render-data`**: When present, this data is automatically merged with the `iframeRenderData` prop (if provided) and passed to the iframe using the `ui-lifecycle-iframe-render-data` mechanism.
+
 ## Props
 
 ```typescript
@@ -118,6 +128,57 @@ function App({ mcpResource }) {
 }
 ```
 
+## Metadata Usage Examples
+
+When a resource is created on the server with metadata, the `UIResourceRenderer` automatically applies the configuration:
+
+```tsx
+// Server-side resource creation (for reference)
+// const serverResource = createUIResource({
+//   uri: 'ui://chart/dashboard',
+//   content: { type: 'externalUrl', iframeUrl: 'https://charts.example.com' },
+//   encoding: 'text',
+//   uiMetadata: {
+//     'preferred-frame-size': [ '800px', '600px' ],
+//     'initial-render-data': { theme: 'dark', userId: '123' }
+//   }
+// });
+
+// Client-side rendering - metadata is automatically applied
+function Dashboard({ mcpResource }) {
+  const handleUIAction = async (result: UIActionResult) => {
+    // Handle UI actions
+    return { status: 'handled' };
+  };
+
+  return (
+    <UIResourceRenderer
+      resource={mcpResource.resource} // Contains metadata from server
+      htmlProps={{
+        // Additional render data can be merged with metadata
+        iframeRenderData: { 
+          sessionId: 'abc123',
+          permissions: ['read', 'write']
+        }
+      }}
+      onUIAction={handleUIAction}
+    />
+  );
+}
+
+// The UIResourceRenderer will:
+// 1. Use ['800px', '600px'] as the initial iframe size
+// 2. Merge server metadata with prop data:
+//    { theme: 'dark', userId: '123', sessionId: 'abc123', permissions: ['read', 'write'] }
+// 3. Pass the combined data to the iframe via ui-lifecycle-iframe-render-data
+```
+
+### Metadata Precedence
+
+When both server metadata and component props provide similar data:
+- **Frame sizing**: Server `preferred-frame-size` is used as the initial size, but can be overridden by component styling
+- **Render data**: Server `initial-render-data` is merged with the `iframeRenderData` prop, with prop values taking precedence for duplicate keys
+
 ## Utility Functions
 
 ### `isUIResource()`
diff --git a/docs/src/guide/server/typescript/overview.md b/docs/src/guide/server/typescript/overview.md
index d1568003..b07092ac 100644
--- a/docs/src/guide/server/typescript/overview.md
+++ b/docs/src/guide/server/typescript/overview.md
@@ -7,13 +7,30 @@ For a complete example, see the [`typescript-server-demo`](https://github.com/id
 ## 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 encoding 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), encoding method (text or blob), and metadata configuration.
 
 ## 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 `encoding: 'blob'` is specified.
+- **Metadata Support**: Provides flexible metadata configuration for enhanced client-side rendering and resource management.
+
+## Metadata Features
+
+The `createUIResource()` function supports three types of metadata configuration to enhance resource functionality:
+
+### `metadata`
+Standard MCP resource metadata that becomes the `_meta` property on the resource. This follows the MCP specification for resource metadata.
+
+### `uiMetadata`
+MCP-UI specific configuration options. These keys are automatically prefixed with `mcpui.dev/ui-` in the resource metadata:
+
+- **`preferred-frame-size`**: Define the resource's preferred initial frame size (e.g., `{ width: 800, height: 600 }`)
+- **`initial-render-data`**: Provide data that should be passed to the iframe when rendering
+
+### `resourceProps`
+Additional properties that are spread directly onto the resource definition, allowing you to add any MCP specification-supported properties like `annotations`.
 
 ## Building
 
diff --git a/docs/src/guide/server/typescript/usage-examples.md b/docs/src/guide/server/typescript/usage-examples.md
index f7431749..c77cded2 100644
--- a/docs/src/guide/server/typescript/usage-examples.md
+++ b/docs/src/guide/server/typescript/usage-examples.md
@@ -139,12 +139,120 @@ console.log('Resource 5:', JSON.stringify(resource5, null, 2));
 // of a toolResult in an MCP interaction.
 ```
 
+## Metadata Configuration Examples
+
+The `createUIResource` function supports three types of metadata configuration to enhance your UI resources:
+
+```typescript
+import { createUIResource } from '@mcp-ui/server';
+
+// Example 7: Using standard metadata
+const resourceWithMetadata = createUIResource({
+  uri: 'ui://analytics/dashboard',
+  content: { type: 'rawHtml', htmlString: '<div id="dashboard">Loading...</div>' },
+  encoding: 'text',
+  metadata: {
+    title: 'Analytics Dashboard',
+    description: 'Real-time analytics and metrics',
+    created: '2024-01-15T10:00:00Z',
+    author: 'Analytics Team',
+    preferredRenderContext: 'sidebar'
+  }
+});
+console.log('Resource with metadata:', JSON.stringify(resourceWithMetadata, null, 2));
+/* Output includes:
+{
+  "type": "resource",
+  "resource": {
+    "uri": "ui://analytics/dashboard",
+    "mimeType": "text/html",
+    "text": "<div id=\"dashboard\">Loading...</div>",
+    "_meta": {
+      "title": "Analytics Dashboard",
+      "description": "Real-time analytics and metrics",
+      "created": "2024-01-15T10:00:00Z",
+      "author": "Analytics Team",
+      "preferredRenderContext": "sidebar"
+    }
+  }
+}
+*/
+
+// Example 8: Using uiMetadata for client-side configuration
+const resourceWithUIMetadata = createUIResource({
+  uri: 'ui://chart/interactive',
+  content: { type: 'externalUrl', iframeUrl: 'https://charts.example.com/widget' },
+  encoding: 'text',
+  uiMetadata: {
+    'preferred-frame-size': ['800px', '600px'],
+    'initial-render-data': { 
+      theme: 'dark', 
+      chartType: 'bar',
+      dataSet: 'quarterly-sales' 
+    },
+  }
+});
+console.log('Resource with UI metadata:', JSON.stringify(resourceWithUIMetadata, null, 2));
+/* Output includes:
+{
+  "type": "resource",
+  "resource": {
+    "uri": "ui://chart/interactive",
+    "mimeType": "text/uri-list",
+    "text": "https://charts.example.com/widget",
+    "_meta": {
+      "mcpui.dev/ui-preferred-frame-size": ["800px", "600px"],
+      "mcpui.dev/ui-initial-render-data": { 
+        "theme": "dark", 
+        "chartType": "bar",
+        "dataSet": "quarterly-sales" 
+      },
+    }
+  }
+}
+*/
+
+// Example 9: Using resourceProps for additional MCP properties
+const resourceWithProps = createUIResource({
+  uri: 'ui://form/user-profile',
+  content: { type: 'rawHtml', htmlString: '<form id="profile">...</form>' },
+  encoding: 'text',
+  resourceProps: {
+    annotations: {
+      audience: ['developers', 'admins'],
+      priority: 'high'
+    }
+  }
+});
+console.log('Resource with additional props:', JSON.stringify(resourceWithProps, null, 2));
+/* Output includes:
+{
+  "type": "resource",
+  "resource": {
+    "uri": "ui://form/user-profile",
+    "mimeType": "text/html",
+    "text": "<form id=\"profile\">...</form>",
+    "annotations": {
+      "audience": ["developers", "admins"],
+      "priority": "high"
+    }
+  }
+}
+*/
+```
+
+### Metadata Best Practices
+
+- **Use `metadata` for standard MCP resource information** like titles, descriptions, timestamps, and authorship
+- **Use `uiMetadata` for client rendering hints** like preferred sizes, initial data, and context preferences  
+- **Use `resourceProps` for MCP specification properties** like annotations, descriptions at the resource level, and other standard fields
+
 ## Advanced URI List Example
 
 You can provide multiple URLs in the `text/uri-list` format for fallback purposes. However, **MCP-UI requires a single URL** and will only use the first valid URL found:
 
 ```typescript
-// Example 6: Multiple URLs with fallbacks (MCP-UI uses only the first)
+// Example 10: Multiple URLs with fallbacks (MCP-UI uses only the first)
 const multiUrlContent = `# Primary dashboard
 https://dashboard.example.com/main
 
@@ -154,7 +262,7 @@ https://backup.dashboard.example.com/main
 # Emergency fallback (will be logged but not used)  
 https://emergency.dashboard.example.com/main`;
 
-const resource6 = createUIResource({
+const resource = createUIResource({
   uri: 'ui://dashboard-with-fallbacks/session-123',
   content: { type: 'externalUrl', iframeUrl: multiUrlContent },
   encoding: 'text',
diff --git a/sdks/typescript/client/src/components/HTMLResourceRenderer.tsx b/sdks/typescript/client/src/components/HTMLResourceRenderer.tsx
index 1db9a721..01653298 100644
--- a/sdks/typescript/client/src/components/HTMLResourceRenderer.tsx
+++ b/sdks/typescript/client/src/components/HTMLResourceRenderer.tsx
@@ -1,7 +1,8 @@
 import React, { useCallback, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
 import type { Resource } from '@modelcontextprotocol/sdk/types.js';
-import { UIActionResult } from '../types';
+import { UIActionResult, UIMetadataKey } from '../types';
 import { processHTMLResource } from '../utils/processResource';
+import { getUIResourceMetadata } from '../utils/metadataUtils';
 
 export type HTMLResourceRendererProps = {
   resource: Partial<Resource>;
@@ -16,7 +17,7 @@ export type HTMLResourceRendererProps = {
   };
 };
 
-const InternalMessageType = {
+export const InternalMessageType = {
   UI_MESSAGE_RECEIVED: 'ui-message-received',
   UI_MESSAGE_RESPONSE: 'ui-message-response',
 
@@ -48,18 +49,32 @@ export const HTMLResourceRenderer = ({
     [resource, proxy],
   );
 
+  const uiMetadata = useMemo(() => getUIResourceMetadata(resource), [resource]);
+  const preferredFrameSize = uiMetadata[UIMetadataKey.PREFERRED_FRAME_SIZE] ?? ['100%', '100%'];
+  const metadataInitialRenderData = uiMetadata[UIMetadataKey.INITIAL_RENDER_DATA] ?? undefined;
+
+  const initialRenderData = useMemo(() => {
+    if (!iframeRenderData && !metadataInitialRenderData) {
+      return undefined;
+    }
+    return {
+      ...metadataInitialRenderData,
+      ...iframeRenderData,
+    };
+  }, [iframeRenderData, metadataInitialRenderData]);
+
   const iframeSrcToRender = useMemo(() => {
-    if (iframeSrc && iframeRenderData) {
+    if (iframeSrc && initialRenderData) {
       const iframeUrl = new URL(iframeSrc);
       iframeUrl.searchParams.set(ReservedUrlParams.WAIT_FOR_RENDER_DATA, 'true');
       return iframeUrl.toString();
     }
     return iframeSrc;
-  }, [iframeSrc, iframeRenderData]);
+  }, [iframeSrc, initialRenderData]);
 
   const onIframeLoad = useCallback(
     (event: React.SyntheticEvent<HTMLIFrameElement>) => {
-      if (iframeRenderData) {
+      if (initialRenderData) {
         const iframeWindow = event.currentTarget.contentWindow;
         const iframeOrigin = iframeSrcToRender ? new URL(iframeSrcToRender).origin : '*';
         postToFrame(
@@ -68,13 +83,13 @@ export const HTMLResourceRenderer = ({
           iframeOrigin,
           undefined,
           {
-            renderData: iframeRenderData,
+            renderData: initialRenderData,
           },
         );
       }
       iframeProps?.onLoad?.(event);
     },
-    [iframeRenderData, iframeSrcToRender, iframeProps?.onLoad],
+    [initialRenderData, iframeSrcToRender, iframeProps?.onLoad],
   );
 
   useEffect(() => {
@@ -83,14 +98,14 @@ export const HTMLResourceRenderer = ({
       // Only process the message if it came from this specific iframe
       if (iframeRef.current && source === iframeRef.current.contentWindow) {
         // if the iframe is ready, send the render data to the iframe
-        if (data?.type === InternalMessageType.UI_LIFECYCLE_IFRAME_READY && iframeRenderData) {
+        if (data?.type === InternalMessageType.UI_LIFECYCLE_IFRAME_READY && initialRenderData) {
           postToFrame(
             InternalMessageType.UI_LIFECYCLE_IFRAME_RENDER_DATA,
             source,
             origin,
             undefined,
             {
-              renderData: iframeRenderData,
+              renderData: initialRenderData,
             },
           );
           return;
@@ -163,7 +178,7 @@ export const HTMLResourceRenderer = ({
       <iframe
         srcDoc={htmlString}
         sandbox={sandbox}
-        style={{ width: '100%', height: '100%', ...style }}
+        style={{ width: preferredFrameSize[0], height: preferredFrameSize[1], ...style }}
         title="MCP HTML Resource (Embedded Content)"
         {...iframeProps}
         ref={iframeRef}
@@ -182,7 +197,7 @@ export const HTMLResourceRenderer = ({
       <iframe
         src={iframeSrcToRender}
         sandbox={sandbox}
-        style={{ width: '100%', height: '100%', ...style }}
+        style={{ width: preferredFrameSize[0], height: preferredFrameSize[1], ...style }}
         title="MCP HTML Resource (URL)"
         {...iframeProps}
         ref={iframeRef}
@@ -196,7 +211,7 @@ export const HTMLResourceRenderer = ({
 
 HTMLResourceRenderer.displayName = 'HTMLResourceRenderer';
 
-function postToFrame(
+export function postToFrame(
   type: (typeof InternalMessageType)[keyof typeof InternalMessageType],
   source: Window | null,
   origin: string,
@@ -220,4 +235,4 @@ function mergeSandboxPermissions(sandboxPermissions: string, defaultSandboxPermi
     .filter(Boolean)
     .map((permission) => permission.trim())
     .join(' ');
-}
\ No newline at end of file
+}
diff --git a/sdks/typescript/client/src/components/__tests__/HTMLResourceRenderer.test.tsx b/sdks/typescript/client/src/components/__tests__/HTMLResourceRenderer.test.tsx
index 3c5988c9..38f99ba5 100644
--- a/sdks/typescript/client/src/components/__tests__/HTMLResourceRenderer.test.tsx
+++ b/sdks/typescript/client/src/components/__tests__/HTMLResourceRenderer.test.tsx
@@ -3,11 +3,12 @@ import '@testing-library/jest-dom';
 import {
   HTMLResourceRenderer,
   HTMLResourceRendererProps,
+  InternalMessageType,
   ReservedUrlParams,
 } from '../HTMLResourceRenderer';
 import { vi } from 'vitest';
 import type { Resource } from '@modelcontextprotocol/sdk/types.js';
-import { UIActionResult } from '../../types.js';
+import { UI_METADATA_PREFIX, UIActionResult } from '../../types.js';
 import React from 'react';
 
 describe('HTMLResource component', () => {
@@ -385,6 +386,36 @@ describe('HTMLResource iframe communication', () => {
     );
     expect(ref.current).toBeInTheDocument();
     expect(ref.current?.src).toContain(`${ReservedUrlParams.WAIT_FOR_RENDER_DATA}=true`);
+    const iframeWindow = ref.current?.contentWindow as Window;
+    const spy = vi.spyOn(iframeWindow, 'postMessage');
+    dispatchMessage(iframeWindow, {
+      type: InternalMessageType.UI_LIFECYCLE_IFRAME_READY,
+    });
+    await waitFor(() => {
+      expect(spy).toHaveBeenCalledWith(
+        {
+          type: InternalMessageType.UI_LIFECYCLE_IFRAME_RENDER_DATA,
+          payload: { renderData: iframeRenderData },
+          messageId: undefined,
+        },
+        '*',
+      );
+    });
+  });
+
+  it('should hang the proper query params in the iframe src from resource metadata', async () => {
+    const resource = {
+      mimeType: 'text/uri-list',
+      text: 'https://example.com/app',
+      _meta: {
+        [`${UI_METADATA_PREFIX}preferred-frame-size`]: ['100px', '100px'],
+        [`${UI_METADATA_PREFIX}initial-render-data`]: { foo: 'baz' },
+      },
+    };
+    const ref = React.createRef<HTMLIFrameElement>();
+    render(<HTMLResourceRenderer resource={resource} iframeProps={{ ref }} />);
+    expect(ref.current).toBeInTheDocument();
+    expect(ref.current?.src).toContain(`${ReservedUrlParams.WAIT_FOR_RENDER_DATA}=true`);
   });
 
   it('shouldnt hang the query param if there is no render data', async () => {
@@ -394,13 +425,116 @@ describe('HTMLResource iframe communication', () => {
     };
     const ref = React.createRef<HTMLIFrameElement>();
     render(
-      <HTMLResourceRenderer resource={resource} iframeProps={{ ref }} iframeRenderData={undefined} />,
+      <HTMLResourceRenderer
+        resource={resource}
+        iframeProps={{ ref }}
+        iframeRenderData={undefined}
+      />,
     );
     expect(ref.current).toBeInTheDocument();
     expect(ref.current?.src).not.toContain(`${ReservedUrlParams.WAIT_FOR_RENDER_DATA}=true`);
   });
 });
 
+describe('HTMLResource metadata', () => {
+  it('should respect a preferred-frame-size metadata', () => {
+    const resource = {
+      mimeType: 'text/uri-list',
+      text: 'https://example.com/app',
+      _meta: { [`${UI_METADATA_PREFIX}preferred-frame-size`]: ['100px', '100px'] },
+    };
+    const ref = React.createRef<HTMLIFrameElement>();
+    render(<HTMLResourceRenderer resource={resource} iframeProps={{ ref }} />);
+    expect(ref.current).toBeInTheDocument();
+    expect(ref.current?.style.width).toBe('100px');
+    expect(ref.current?.style.height).toBe('100px');
+  });
+
+  it('should merge inline style with preferred-frame-size metadata', () => {
+    const resource = {
+      mimeType: 'text/uri-list',
+      text: 'https://example.com/app',
+      _meta: { [`${UI_METADATA_PREFIX}preferred-frame-size`]: ['100px', '100px'] },
+    };
+    const ref = React.createRef<HTMLIFrameElement>();
+    render(
+      <HTMLResourceRenderer
+        resource={resource}
+        iframeProps={{ ref }}
+        style={{ height: '200px' }}
+      />,
+    );
+    expect(ref.current).toBeInTheDocument();
+    expect(ref.current?.style.width).toBe('100px');
+    expect(ref.current?.style.height).toBe('200px');
+  });
+
+  it('should pass correct initial render data to the iframe', () => {
+    const renderData = { foo: 'baz' };
+    const resource = {
+      mimeType: 'text/uri-list',
+      text: 'https://example.com/app',
+      _meta: { [`${UI_METADATA_PREFIX}initial-render-data`]: renderData },
+    };
+    const ref = React.createRef<HTMLIFrameElement>();
+    render(<HTMLResourceRenderer resource={resource} iframeProps={{ ref }} />);
+    expect(ref.current).toBeInTheDocument();
+    expect(ref.current?.src).toContain(`${ReservedUrlParams.WAIT_FOR_RENDER_DATA}=true`);
+    const iframeWindow = ref.current?.contentWindow as Window;
+    const spy = vi.spyOn(iframeWindow, 'postMessage');
+    dispatchMessage(iframeWindow, {
+      type: InternalMessageType.UI_LIFECYCLE_IFRAME_READY,
+    });
+    expect(spy).toHaveBeenCalledWith(
+      {
+        type: InternalMessageType.UI_LIFECYCLE_IFRAME_RENDER_DATA,
+        payload: { renderData },
+        messageId: undefined,
+      },
+      '*',
+    );
+  });
+
+  it('should merge iframeRenderData and metadataInitialRenderData', () => {
+    const iframeRenderData = { priority: 'high', foo: 'bar' };
+    const metadataInitialRenderData = { priority: 'low', baz: 'qux' };
+    const resource = {
+      mimeType: 'text/uri-list',
+      text: 'https://example.com/app',
+      _meta: { [`${UI_METADATA_PREFIX}initial-render-data`]: metadataInitialRenderData },
+    };
+    const ref = React.createRef<HTMLIFrameElement>();
+    render(
+      <HTMLResourceRenderer
+        resource={resource}
+        iframeProps={{ ref }}
+        iframeRenderData={iframeRenderData}
+      />,
+    );
+    expect(ref.current).toBeInTheDocument();
+    expect(ref.current?.src).toContain(`${ReservedUrlParams.WAIT_FOR_RENDER_DATA}=true`);
+    const iframeWindow = ref.current?.contentWindow as Window;
+    const spy = vi.spyOn(iframeWindow, 'postMessage');
+    dispatchMessage(iframeWindow, {
+      type: InternalMessageType.UI_LIFECYCLE_IFRAME_READY,
+    });
+    expect(spy).toHaveBeenCalledWith(
+      {
+        type: InternalMessageType.UI_LIFECYCLE_IFRAME_RENDER_DATA,
+        payload: {
+          renderData: {
+            priority: 'high',
+            foo: 'bar',
+            baz: 'qux',
+          },
+        },
+        messageId: undefined,
+      },
+      '*',
+    );
+  });
+});
+
 // Helper to dispatch a message event
 const dispatchMessage = (source: Window | null, data: Record<string, unknown> | null) => {
   fireEvent(
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 0fea8c1f..785cc97c 100644
--- a/sdks/typescript/client/src/components/__tests__/UIResourceRenderer.unmocked.test.tsx
+++ b/sdks/typescript/client/src/components/__tests__/UIResourceRenderer.unmocked.test.tsx
@@ -3,6 +3,7 @@ import '@testing-library/jest-dom';
 import React from 'react';
 import { Resource } from '@modelcontextprotocol/sdk/types.js';
 import { UIResourceRenderer } from '../UIResourceRenderer';
+import { UI_METADATA_PREFIX } from '../../types';
 
 describe('UIResourceRenderer', () => {
   const testResource: Partial<Resource> = {
@@ -51,6 +52,22 @@ describe('UIResourceRenderer', () => {
     expect(ref.current?.style.width).toBe('100px');
     expect(ref.current?.style.height).toBe('100%');
   });
+
+  it('should respect a preferred-frame-size metadata', () => {
+    const ref = React.createRef<HTMLIFrameElement>();
+    render(
+      <UIResourceRenderer
+        resource={{
+          ...testResource,
+          _meta: { [`${UI_METADATA_PREFIX}preferred-frame-size`]: ['200px', '100px'] },
+        }}
+        htmlProps={{ iframeProps: { ref }, autoResizeIframe: true }}
+      />,
+    );
+    expect(ref.current).toBeInTheDocument();
+    expect(ref.current?.style.width).toBe('200px');
+    expect(ref.current?.style.height).toBe('100px');
+  });
 });
 
 const dispatchMessage = (source: Window | null, data: Record<string, unknown> | null) => {
diff --git a/sdks/typescript/client/src/index.ts b/sdks/typescript/client/src/index.ts
index b1033a5c..49734e7d 100644
--- a/sdks/typescript/client/src/index.ts
+++ b/sdks/typescript/client/src/index.ts
@@ -1,4 +1,5 @@
 export { UIResourceRenderer } from './components/UIResourceRenderer';
+export { getUIResourceMetadata, getResourceMetadata } from './utils/metadataUtils';
 export { isUIResource } from './utils/isUIResource';
 
 // The types needed to create a custom component library
diff --git a/sdks/typescript/client/src/types.ts b/sdks/typescript/client/src/types.ts
index fbea5efc..6f6aca69 100644
--- a/sdks/typescript/client/src/types.ts
+++ b/sdks/typescript/client/src/types.ts
@@ -85,3 +85,15 @@ export interface ComponentLibrary {
   name: string;
   elements: ComponentLibraryElement[];
 }
+
+export const UIMetadataKey = {
+  PREFERRED_FRAME_SIZE: 'preferred-frame-size',
+  INITIAL_RENDER_DATA: 'initial-render-data',
+} as const;
+
+export const UI_METADATA_PREFIX = 'mcpui.dev/ui-';
+
+export type UIResourceMetadata = {
+  [UIMetadataKey.PREFERRED_FRAME_SIZE]?: [string, string];
+  [UIMetadataKey.INITIAL_RENDER_DATA]?: Record<string, unknown>;
+};
diff --git a/sdks/typescript/client/src/utils/__tests__/metadataUtils.test.ts b/sdks/typescript/client/src/utils/__tests__/metadataUtils.test.ts
new file mode 100644
index 00000000..1eee9143
--- /dev/null
+++ b/sdks/typescript/client/src/utils/__tests__/metadataUtils.test.ts
@@ -0,0 +1,20 @@
+import { describe, it, expect } from 'vitest';
+import { getResourceMetadata, getUIResourceMetadata } from '../metadataUtils';
+import { UI_METADATA_PREFIX } from '../../types';
+
+describe('metadataUtils', () => {
+    it('should get resource metadata', () => {
+        const resource = { _meta: { foo: 'bar' } };
+        expect(getResourceMetadata(resource)).toEqual({ foo: 'bar' });
+    });
+
+    it('should get ui resource metadata', () => {
+        const resource = { _meta: { [`${UI_METADATA_PREFIX}foo`]: 'bar' } };
+        expect(getUIResourceMetadata(resource)).toEqual({ foo: 'bar' });
+    });
+
+    it('should get ui resource metadata with prefix and user defined metadata', () => {
+        const resource = { _meta: { [`${UI_METADATA_PREFIX}foo`]: 'bar', foo: 'baz' } };
+        expect(getUIResourceMetadata(resource)).toEqual({ foo: 'bar' });
+    });
+});
\ No newline at end of file
diff --git a/sdks/typescript/client/src/utils/__tests__/processResource.test.ts b/sdks/typescript/client/src/utils/__tests__/processResource.test.ts
index a1553ccb..b92815dd 100644
--- a/sdks/typescript/client/src/utils/__tests__/processResource.test.ts
+++ b/sdks/typescript/client/src/utils/__tests__/processResource.test.ts
@@ -110,7 +110,9 @@ describe('processHTMLResource', () => {
         text: ' ',
       };
       const result = processHTMLResource(resource);
-      expect(result.error).toBe('URL resource expects a non-empty text or blob field containing the URL.');
+      expect(result.error).toBe(
+        'URL resource expects a non-empty text or blob field containing the URL.',
+      );
     });
 
     it('should extract the first valid URL from a blob', () => {
@@ -193,7 +195,7 @@ describe('processHTMLResource', () => {
         expect(result.iframeSrc).toBe('https://proxy.mcpui.dev/?url=https%3A%2F%2Fexample.com');
         expect(result.iframeRenderMode).toBe('src');
       });
-    
+
       it('should handle proxy with existing query parameters', () => {
         const resource = {
           mimeType: 'text/uri-list',
@@ -201,10 +203,12 @@ describe('processHTMLResource', () => {
         };
         const result = processHTMLResource(resource, 'https://proxy.mcpui.dev/?a=1&b=2');
         expect(result.error).toBeUndefined();
-        expect(result.iframeSrc).toBe('https://proxy.mcpui.dev/?a=1&b=2&url=https%3A%2F%2Fexample.com');
+        expect(result.iframeSrc).toBe(
+          'https://proxy.mcpui.dev/?a=1&b=2&url=https%3A%2F%2Fexample.com',
+        );
         expect(result.iframeRenderMode).toBe('src');
       });
-    
+
       it('should fallback to direct URL if proxy is invalid', () => {
         const resource = {
           mimeType: 'text/uri-list',
@@ -215,7 +219,7 @@ describe('processHTMLResource', () => {
         expect(result.iframeSrc).toBe('https://example.com');
         expect(result.iframeRenderMode).toBe('src');
       });
-    
+
       it('should not use proxy when proxy is empty string', () => {
         const resource = {
           mimeType: 'text/uri-list',
@@ -226,7 +230,7 @@ describe('processHTMLResource', () => {
         expect(result.iframeSrc).toBe('https://example.com');
         expect(result.iframeRenderMode).toBe('src');
       });
-    
+
       it('should not use proxy when proxy is not provided', () => {
         const resource = {
           mimeType: 'text/uri-list',
diff --git a/sdks/typescript/client/src/utils/metadataUtils.ts b/sdks/typescript/client/src/utils/metadataUtils.ts
new file mode 100644
index 00000000..cd32c3da
--- /dev/null
+++ b/sdks/typescript/client/src/utils/metadataUtils.ts
@@ -0,0 +1,19 @@
+import { Resource } from '@modelcontextprotocol/sdk/types.js';
+import { UI_METADATA_PREFIX, UIResourceMetadata } from '../types';
+
+export function getResourceMetadata(resource: Partial<Resource>): Record<string, unknown> {
+  return resource._meta ?? {};
+}
+
+export function getUIResourceMetadata(
+  resource: Partial<Resource>,
+): UIResourceMetadata & Record<string, unknown> {
+  const metadata = getResourceMetadata(resource);
+  const uiMetadata: UIResourceMetadata & Record<string, unknown> = {};
+  Object.entries(metadata).forEach(([key, value]) => {
+    if (key.startsWith(UI_METADATA_PREFIX)) {
+      uiMetadata[key.slice(UI_METADATA_PREFIX.length)] = value;
+    }
+  });
+  return uiMetadata;
+}
diff --git a/sdks/typescript/client/src/utils/processResource.ts b/sdks/typescript/client/src/utils/processResource.ts
index c1f9cdd1..7fba442b 100644
--- a/sdks/typescript/client/src/utils/processResource.ts
+++ b/sdks/typescript/client/src/utils/processResource.ts
@@ -59,7 +59,7 @@ export function processHTMLResource(
         error: 'URL content is empty.',
       };
     }
-    
+
     // Parse uri-list format: URIs separated by newlines, comments start with #
     // MCP-UI requires a single URL - if multiple are found, use first and warn about others
     const lines = urlContent
diff --git a/sdks/typescript/server/src/__tests__/index.test.ts b/sdks/typescript/server/src/__tests__/index.test.ts
index 5fa0a266..e1524f07 100644
--- a/sdks/typescript/server/src/__tests__/index.test.ts
+++ b/sdks/typescript/server/src/__tests__/index.test.ts
@@ -6,6 +6,7 @@ import {
   uiActionResultIntent,
   uiActionResultNotification,
 } from '../index';
+import { UI_METADATA_PREFIX } from '../types.js';
 
 describe('@mcp-ui/server', () => {
   describe('createUIResource', () => {
@@ -50,6 +51,41 @@ describe('@mcp-ui/server', () => {
       expect(resource.resource.blob).toBeUndefined();
     });
 
+    it('should create a text-based external URL resource with metadata', () => {
+      const options = {
+        uri: 'ui://test-url' as const,
+        content: { type: 'externalUrl' as const, iframeUrl: 'https://example.com' },
+        encoding: 'text' as const,
+        uiMetadata: { 'preferred-frame-size': ['100px', '100px'] as [string, string] },
+        resourceProps: { _meta: { 'arbitrary-prop': 'arbitrary' } },
+      };
+      const resource = createUIResource(options);
+      expect(resource.resource.uri).toBe('ui://test-url');
+      expect(resource.resource.mimeType).toBe('text/uri-list');
+      expect(resource.resource.text).toBe('https://example.com');
+      expect(resource.resource.blob).toBeUndefined();
+      expect(resource.resource._meta).toEqual({
+        [`${UI_METADATA_PREFIX}preferred-frame-size`]: ['100px', '100px'],
+        'arbitrary-prop': 'arbitrary',
+      });
+    });
+
+    it('should create a text-based external URL resource with metadata, respecting order of overriding metadata', () => {
+      const options = {
+        uri: 'ui://test-url' as const,
+        content: { type: 'externalUrl' as const, iframeUrl: 'https://example.com' },
+        encoding: 'text' as const,
+        metadata: { 'arbitrary-prop': 'arbitrary', foo: 'bar' },
+        resourceProps: { _meta: { 'arbitrary-prop': 'arbitrary2' } },
+      };
+      const resource = createUIResource(options);
+      expect(resource.resource.uri).toBe('ui://test-url');
+      expect(resource.resource.mimeType).toBe('text/uri-list');
+      expect(resource.resource.text).toBe('https://example.com');
+      expect(resource.resource.blob).toBeUndefined();
+      expect(resource.resource._meta).toEqual({ foo: 'bar', 'arbitrary-prop': 'arbitrary2' });
+    });
+
     it('should create a blob-based external URL resource', () => {
       const options = {
         uri: 'ui://test-url-blob' as const,
@@ -65,6 +101,7 @@ describe('@mcp-ui/server', () => {
         Buffer.from('https://example.com/blob').toString('base64'),
       );
       expect(resource.resource.text).toBeUndefined();
+      expect(resource.resource._meta).toBeUndefined();
     });
 
     it('should create a blob-based direct HTML resource with correct mimetype', () => {
diff --git a/sdks/typescript/server/src/__tests__/utils.test.ts b/sdks/typescript/server/src/__tests__/utils.test.ts
new file mode 100644
index 00000000..fb552dd6
--- /dev/null
+++ b/sdks/typescript/server/src/__tests__/utils.test.ts
@@ -0,0 +1,61 @@
+import { describe, it, expect } from 'vitest';
+import { getAdditionalResourceProps } from '../utils.js';
+import { UI_METADATA_PREFIX } from '../types.js';
+
+describe('getAdditionalResourceProps', () => {
+  it('should return the additional resource props', () => {
+    const uiMetadata = {
+      'preferred-frame-size': ['100px', '100px'] as [string, string],
+      'initial-render-data': { test: 'test' },
+    };
+    const additionalResourceProps = getAdditionalResourceProps({ uiMetadata });
+    expect(additionalResourceProps).toEqual({
+      _meta: {
+        [`${UI_METADATA_PREFIX}preferred-frame-size`]: ['100px', '100px'],
+        [`${UI_METADATA_PREFIX}initial-render-data`]: { test: 'test' },
+      },
+    });
+  });
+
+  it('should return the additional resource props with user defined _meta', () => {
+    const uiMetadata = {
+      'preferred-frame-size': ['100px', '100px'] as [string, string],
+      'initial-render-data': { test: 'test' },
+    };
+    const additionalResourceProps = getAdditionalResourceProps({
+      uiMetadata,
+      resourceProps: {
+        annotations: { audience: 'user' },
+        _meta: { foo: 'bar', [`${UI_METADATA_PREFIX}preferred-frame-size`]: ['200px', '200px'] },
+      },
+    });
+    expect(additionalResourceProps).toEqual({
+      _meta: {
+        [`${UI_METADATA_PREFIX}initial-render-data`]: { test: 'test' },
+        foo: 'bar',
+        [`${UI_METADATA_PREFIX}preferred-frame-size`]: ['200px', '200px'],
+      },
+      annotations: { audience: 'user' },
+    });
+  });
+
+  it('should return an empty object if no uiMetadata or metadata is provided', () => {
+    const additionalResourceProps = getAdditionalResourceProps({});
+    expect(additionalResourceProps).toEqual({});
+  });
+
+  it('should respect order of overriding metadata', () => {
+    const additionalResourceProps = getAdditionalResourceProps({
+      uiMetadata: { 'preferred-frame-size': ['100px', '100px'] as [string, string] },
+      metadata: { [`${UI_METADATA_PREFIX}preferred-frame-size`]: ['200px', '200px'], foo: 'bar' },
+      resourceProps: { annotations: { audience: 'user' }, _meta: { foo: 'baz' } },
+    });
+    expect(additionalResourceProps).toEqual({
+      _meta: {
+        [`${UI_METADATA_PREFIX}preferred-frame-size`]: ['200px', '200px'],
+        foo: 'baz',
+      },
+      annotations: { audience: 'user' },
+    });
+  });
+});
diff --git a/sdks/typescript/server/src/index.ts b/sdks/typescript/server/src/index.ts
index 0fced570..6d701560 100644
--- a/sdks/typescript/server/src/index.ts
+++ b/sdks/typescript/server/src/index.ts
@@ -10,6 +10,7 @@ import {
   UIActionResultIntent,
   UIActionResultToolCall,
 } from './types.js';
+import { getAdditionalResourceProps } from './utils.js';
 
 export type UIResource = {
   type: 'resource';
@@ -106,6 +107,7 @@ export function createUIResource(options: CreateUIResourceOptions): UIResource {
         uri: options.uri,
         mimeType: mimeType as MimeType,
         text: actualContentString,
+        ...getAdditionalResourceProps(options),
       };
       break;
     case 'blob':
@@ -113,6 +115,7 @@ export function createUIResource(options: CreateUIResourceOptions): UIResource {
         uri: options.uri,
         mimeType: mimeType as MimeType,
         blob: robustUtf8ToBase64(actualContentString),
+        ...getAdditionalResourceProps(options),
       };
       break;
     default: {
diff --git a/sdks/typescript/server/src/types.ts b/sdks/typescript/server/src/types.ts
index 4df06b92..41c4d7b8 100644
--- a/sdks/typescript/server/src/types.ts
+++ b/sdks/typescript/server/src/types.ts
@@ -1,3 +1,5 @@
+import type { Resource } from '@modelcontextprotocol/sdk/types.js';
+
 // Primary identifier for the resource. Starts with ui://`
 export type URI = `ui://${string}`;
 
@@ -13,6 +15,7 @@ export type HTMLTextContent = {
   mimeType: MimeType;
   text: string; // HTML content (for mimeType `text/html`), or iframe URL (for mimeType `text/uri-list`)
   blob?: never;
+  _meta?: Record<string, unknown>;
 };
 
 export type Base64BlobContent = {
@@ -20,6 +23,7 @@ export type Base64BlobContent = {
   mimeType: MimeType;
   blob: string; //  Base64 encoded HTML content (for mimeType `text/html`), or iframe URL (for mimeType `text/uri-list`)
   text?: never;
+  _meta?: Record<string, unknown>;
 };
 
 export type ResourceContentPayload =
@@ -35,8 +39,28 @@ export interface CreateUIResourceOptions {
   uri: URI;
   content: ResourceContentPayload;
   encoding: 'text' | 'blob';
+  // specific mcp-ui metadata
+  uiMetadata?: UIResourceMetadata;
+  // additional metadata to be passed on _meta
+  metadata?: Record<string, unknown>;
+  // additional resource props to be passed on resource (i.e. annotations)
+  resourceProps?: UIResourceProps;
 }
 
+export type UIResourceProps = Omit<Partial<Resource>, 'uri' | 'mimeType'>;
+
+export const UIMetadataKey = {
+  PREFERRED_FRAME_SIZE: 'preferred-frame-size',
+  INITIAL_RENDER_DATA: 'initial-render-data',
+} as const;
+
+export const UI_METADATA_PREFIX = 'mcpui.dev/ui-';
+
+export type UIResourceMetadata = {
+  [UIMetadataKey.PREFERRED_FRAME_SIZE]?: [string, string];
+  [UIMetadataKey.INITIAL_RENDER_DATA]?: Record<string, unknown>;
+};
+
 export type UIActionType = 'tool' | 'prompt' | 'link' | 'intent' | 'notify';
 
 type GenericActionMessage = {
diff --git a/sdks/typescript/server/src/utils.ts b/sdks/typescript/server/src/utils.ts
new file mode 100644
index 00000000..1aa96c09
--- /dev/null
+++ b/sdks/typescript/server/src/utils.ts
@@ -0,0 +1,26 @@
+import type { CreateUIResourceOptions, UIResourceProps } from './types.js';
+import { UI_METADATA_PREFIX } from './types.js';
+
+export function getAdditionalResourceProps(
+  resourceOptions: Partial<CreateUIResourceOptions>,
+): UIResourceProps {
+  const additionalResourceProps = { ...(resourceOptions.resourceProps ?? {}) } as UIResourceProps;
+
+  // prefix ui specific metadata with the prefix to be recognized by the client
+  if (resourceOptions.uiMetadata || resourceOptions.metadata) {
+    const uiPrefixedMetadata = Object.fromEntries(
+      Object.entries(resourceOptions.uiMetadata ?? {}).map(([key, value]) => [
+        `${UI_METADATA_PREFIX}${key}`,
+        value,
+      ]),
+    );
+    // allow user defined _meta to override ui metadata
+    additionalResourceProps._meta = {
+      ...uiPrefixedMetadata,
+      ...(resourceOptions.metadata ?? {}),
+      ...(additionalResourceProps._meta ?? {}),
+    };
+  }
+
+  return additionalResourceProps;
+}