diff --git a/.gitignore b/.gitignore
index 1c0c47b..6232f39 100644
--- a/.gitignore
+++ b/.gitignore
@@ -49,6 +49,7 @@ web_modules/
 
 # PNPM
 .pnpm-store/
+.pnpm-home/
 
 # TypeScript cache
 *.tsbuildinfo
diff --git a/README.md b/README.md
index 07a9e52..65d43bf 100644
--- a/README.md
+++ b/README.md
@@ -98,6 +98,8 @@ It accepts the following props:
   - **`iframeProps`**: Optional props passed to the iframe element
   - **`iframeRenderData`**: Optional `Record<string, unknown>` to pass data to the iframe upon rendering. This enables advanced use cases where the parent application needs to provide initial state or configuration to the sandboxed iframe content.
   - **`autoResizeIframe`**: Optional `boolean | { width?: boolean; height?: boolean }` to automatically resize the iframe to the size of the content.
+- **`mcp`**: Optional MCP invocation context forwarded to HTML resources (e.g., `toolInput`, `toolOutput`, `toolName`, `toolResponseMetadata`). `toolOutput` values are injected into supported runtimes (like Skybridge) via the widget config and are not merged into `iframeRenderData`.
+- **`host`**: Optional host context (e.g., `theme`, `locale`, `userAgent`, `model`, `displayMode`, `maxHeight`, `safeArea`, `capabilities`) exposed to sandboxed HTML content. `capabilities` defaults to `{ hover: true, touch: false }` when unspecified.
 - **`remoteDomProps`**: Optional props for the internal `<RemoteDOMResourceRenderer>`
   - **`library`**: Optional component library for Remote DOM resources (defaults to `basicComponentLibrary`)
   - **`remoteElements`**: remote element definitions for Remote DOM resources.
diff --git a/docs/src/guide/client/html-resource.md b/docs/src/guide/client/html-resource.md
index edb20ca..ce88b1f 100644
--- a/docs/src/guide/client/html-resource.md
+++ b/docs/src/guide/client/html-resource.md
@@ -6,6 +6,7 @@ The `<HTMLResourceRenderer />` component is an internal component used by `<UIRe
 
 ```typescript
 import type { Resource } from '@modelcontextprotocol/sdk/types';
+import type { MCPProps, HostProps } from '@mcp-ui/client';
 
 export interface HTMLResourceRendererProps {
   resource: Partial<Resource>;
@@ -13,6 +14,8 @@ export interface HTMLResourceRendererProps {
   style?: React.CSSProperties;
   proxy?: string;
   iframeRenderData?: Record<string, unknown>;
+  mcp?: MCPProps;
+  host?: HostProps;
   autoResizeIframe?: boolean | { width?: boolean; height?: boolean };
   sandboxPermissions?: string;
   iframeProps?: Omit<React.HTMLAttributes<HTMLIFrameElement>, 'src' | 'srcDoc' | 'ref' | 'style'>;
@@ -40,6 +43,9 @@ The component accepts the following props:
 - **`style`**: (Optional) Custom styles for the iframe.
 - **`proxy`**: (Optional) A URL to a proxy script. This is useful for hosts with a strict Content Security Policy (CSP). When provided, external URLs will be rendered in a nested iframe hosted at this URL. For example, if `proxy` is `https://my-proxy.com/`, the final URL will be `https://my-proxy.com/?url=<encoded_original_url>`. For your convenience, mcp-ui hosts a proxy script at `https://proxy.mcpui.dev`, which you can use as a the prop value without any setup (see `examples/external-url-demo`).
 - **`iframeProps`**: (Optional) Custom props for the iframe.
+- **`iframeRenderData`**: (Optional) Additional data merged into the render payload forwarded to the iframe. This data combines with resource metadata but remains separate from `mcp.toolOutput`. When `mcp.toolOutput` is provided, supported runtimes (like Skybridge) treat that context as the iframe's initial render payload, overriding any metadata-derived data instead of merging with it.
+- **`mcp`**: (Optional) MCP invocation context forwarded to HTML resources (e.g., `toolInput`, `toolOutput`, `toolName`, `toolResponseMetadata`). These values are exposed to supported runtimes such as Skybridge.
+- **`host`**: (Optional) Host configuration forwarded to the sandboxed HTML (supports `theme`, `locale`, `userAgent`, `model`, `displayMode`, `maxHeight`, `safeArea`, and `capabilities`). When omitted, defaults are applied—`capabilities` defaults to `{ hover: true, touch: false }`.
 - **`autoResizeIframe`**: (Optional) When enabled, the iframe will automatically resize based on messages from the iframe's content. This prop can be a boolean (to enable both width and height resizing) or an object (`{width?: boolean, height?: boolean}`) to control dimensions independently.
 - **`sandboxPermissions`**: (Optional) Additional iframe sandbox permissions to add to the defaults. These are merged with:
   - External URLs (`text/uri-list`): `'allow-scripts allow-same-origin'`
diff --git a/docs/src/guide/client/resource-renderer.md b/docs/src/guide/client/resource-renderer.md
index 2c1c995..988ec7f 100644
--- a/docs/src/guide/client/resource-renderer.md
+++ b/docs/src/guide/client/resource-renderer.md
@@ -42,13 +42,16 @@ The `UIResourceRenderer` automatically detects and uses metadata from resources
 
 ```typescript
 import type { Resource } from '@modelcontextprotocol/sdk/types';
+import type { MCPProps, HostProps } from '@mcp-ui/client';
 
 interface UIResourceRendererProps {
   resource: Partial<Resource>;
   onUIAction?: (result: UIActionResult) => Promise<unknown>;
   supportedContentTypes?: ResourceContentType[];
-  htmlProps?: Omit<HTMLResourceRendererProps, 'resource' | 'onUIAction'>;
+  htmlProps?: Omit<HTMLResourceRendererProps, 'resource' | 'onUIAction' | 'mcp' | 'host'>;
   remoteDomProps?: Omit<RemoteDOMResourceProps, 'resource' | 'onUIAction'>;
+  mcp?: MCPProps;
+  host?: HostProps;
 }
 ```
 
@@ -76,6 +79,8 @@ interface UIResourceRendererProps {
     - **`ref`**: Optional React ref to access the underlying iframe element
   - **`iframeRenderData`**: Optional `Record<string, unknown>` to pass data to the iframe upon rendering. This enables advanced use cases where the parent application needs to provide initial state or configuration to the sandboxed iframe content.
   - **`autoResizeIframe`**: Optional `boolean | { width?: boolean; height?: boolean }` to automatically resize the iframe to the size of the content.
+- **`mcp`**: Optional MCP invocation context forwarded to HTML resources (e.g., `toolInput`, `toolOutput`, `toolName`, `toolResponseMetadata`). The data is exposed to supported runtimes (like Skybridge) but is **not** merged into the iframe render payload. These can also be provided via `htmlProps` for HTML-only overrides.
+- **`host`**: Optional host context for HTML resources (e.g., `theme`, `locale`, `userAgent`, `model`, `displayMode`, `maxHeight`, `safeArea`, `capabilities`). When unspecified, sensible defaults are used (`capabilities` defaults to `{ hover: true, touch: false }`). Like `mcp`, these can be supplied in `htmlProps` to scope them to HTML resources.
 - **`remoteDomProps`**: Optional props for the `<RemoteDOMResourceRenderer>`
   - **`library`**: Optional component library for Remote DOM resources (defaults to `basicComponentLibrary`)
   - **`remoteElements`**: Optional remote element definitions for Remote DOM resources. REQUIRED for Remote DOM snippets.
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 5a86096..a233797 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -1,5 +1,6 @@
 packages:
-  # all packages in subdirs of sdks/typescript/
-  - 'sdks/typescript/*'
-  - 'examples/*'
-  - 'docs'
+  - sdks/typescript/*
+  - examples/*
+  - docs
+onlyBuiltDependencies:
+  - esbuild
diff --git a/sdks/typescript/client/README.md b/sdks/typescript/client/README.md
index 07a9e52..2338639 100644
--- a/sdks/typescript/client/README.md
+++ b/sdks/typescript/client/README.md
@@ -98,6 +98,8 @@ It accepts the following props:
   - **`iframeProps`**: Optional props passed to the iframe element
   - **`iframeRenderData`**: Optional `Record<string, unknown>` to pass data to the iframe upon rendering. This enables advanced use cases where the parent application needs to provide initial state or configuration to the sandboxed iframe content.
   - **`autoResizeIframe`**: Optional `boolean | { width?: boolean; height?: boolean }` to automatically resize the iframe to the size of the content.
+- **`mcp`**: Optional MCP invocation context forwarded to HTML resources (e.g., `toolInput`, `toolOutput`, `toolName`, `toolResponseMetadata`).
+- **`host`**: Optional host context (e.g., `theme`, `locale`, `userAgent`, `model`, `displayMode`, `maxHeight`, `safeArea`, `capabilities`) exposed to sandboxed HTML content. Both context props can also be supplied via `htmlProps` when you need HTML-specific overrides. `capabilities` defaults to `{ hover: true, touch: false }` when unspecified.
 - **`remoteDomProps`**: Optional props for the internal `<RemoteDOMResourceRenderer>`
   - **`library`**: Optional component library for Remote DOM resources (defaults to `basicComponentLibrary`)
   - **`remoteElements`**: remote element definitions for Remote DOM resources.
diff --git a/sdks/typescript/client/scripts/bundle-open-ai-script.js b/sdks/typescript/client/scripts/bundle-open-ai-script.js
new file mode 100644
index 0000000..8fa6c3e
--- /dev/null
+++ b/sdks/typescript/client/scripts/bundle-open-ai-script.js
@@ -0,0 +1,35 @@
+import { build } from 'esbuild';
+import { writeFileSync } from 'fs';
+import { fileURLToPath } from 'url';
+import { dirname, join } from 'path';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+try {
+  const result = await build({
+    entryPoints: [join(__dirname, '../../client/src/adapters/appssdk/open-ai-runtime-script.ts')],
+    bundle: true,
+    write: false,
+    format: 'iife',
+    platform: 'browser',
+    target: 'es2020',
+    minify: false,
+  });
+
+  const bundledCode = result.outputFiles[0].text;
+  const serializedCode = JSON.stringify(bundledCode);
+
+  const outputContent = `// This file is auto-generated by scripts/bundle-open-ai-script.js
+// Do not edit directly - modify client/src/adapters/appssdk/open-ai-runtime-script.ts instead
+
+export const API_RUNTIME_SCRIPT = ${serializedCode};
+`;
+
+  const outputTsPath = join(__dirname, '../../client/src/adapters/appssdk/open-ai-runtime-script.bundled.ts');
+  writeFileSync(outputTsPath, outputContent);
+  console.log('✅ Successfully bundled API runtime script');
+} catch (error) {
+  console.error('❌ Failed to bundle API runtime script:', error);
+  process.exit(1);
+}
diff --git a/sdks/typescript/client/scripts/proxy/index.html b/sdks/typescript/client/scripts/proxy/index.html
index 1888c68..85b81e9 100644
--- a/sdks/typescript/client/scripts/proxy/index.html
+++ b/sdks/typescript/client/scripts/proxy/index.html
@@ -2,8 +2,6 @@
 <html>
   <head>
     <meta charset="utf-8" />
-    <!-- Permissive CSP so nested content is not constrained by host CSP -->
-    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'wasm-unsafe-eval' 'unsafe-inline' 'unsafe-eval' blob: https://cdn.tailwindcss.com https://cdn.jsdelivr.net https://unpkg.com; style-src * 'unsafe-inline'; connect-src *; frame-src 'none'; base-uri 'self'; upgrade-insecure-requests;" />
     <title>MCP-UI Proxy</title>
     <style>
       html,
@@ -47,27 +45,38 @@
       if (contentType === 'rawhtml') {
         // Double-iframe raw HTML mode (HTML sent via postMessage)
         const inner = document.createElement('iframe');
+
+        inner.id = "root";
+        let pendingHtml = null;
+        const renderHtmlInIframe = (markup) => {
+          const doc = inner.contentDocument || inner.contentWindow?.document;
+          if (!doc) return false;
+          try {
+            doc.open();
+            doc.write(markup);
+            doc.close();
+            return true;
+          } catch (error) {
+            return false;
+          }
+        };
+        inner.addEventListener('load', () => {
+          if (pendingHtml !== null && renderHtmlInIframe(pendingHtml)) {
+            pendingHtml = null;
+          }
+        });
         inner.style = 'width:100%; height:100%; border:none;';
-        // sandbox will be set from postMessage payload; default minimal before html arrives
-        inner.setAttribute('sandbox', 'allow-scripts');
+        inner.src = 'about:blank';
         document.body.appendChild(inner);
 
         // Wait for HTML content from parent
         window.addEventListener('message', (event) => {
-          if (event.source === window.parent) {
-            if (event.data && event.data.type === 'ui-html-content') {
-              const payload = event.data.payload || {};
-              const html = payload.html;
-              const sandbox = payload.sandbox;
-              if (typeof sandbox === 'string') {
-                inner.setAttribute('sandbox', sandbox);
-              }
-              if (typeof html === 'string') {
-                inner.srcdoc = html;
-              }
-            } else {
-              if (inner && inner.contentWindow) {
-                inner.contentWindow.postMessage(event.data, '*');
+          if (event.source === window.parent && event.data && event.data.type === 'ui-html-content') {
+            const payload = event.data.payload || {};
+            const html = payload.html;
+            if (typeof html === 'string') {
+              if (!renderHtmlInIframe(html)) {
+                pendingHtml = html;
               }
             }
           } else if (event.source === inner.contentWindow) {
diff --git a/sdks/typescript/client/src/adapters/appssdk/open-ai-runtime-script.bundled.ts b/sdks/typescript/client/src/adapters/appssdk/open-ai-runtime-script.bundled.ts
new file mode 100644
index 0000000..2c4f06e
--- /dev/null
+++ b/sdks/typescript/client/src/adapters/appssdk/open-ai-runtime-script.bundled.ts
@@ -0,0 +1,4 @@
+// This file is auto-generated by scripts/bundle-open-ai-script.js
+// Do not edit directly - modify client/src/adapters/appssdk/open-ai-runtime-script.ts instead
+
+export const API_RUNTIME_SCRIPT = "\"use strict\";\n(() => {\n  // src/adapters/appssdk/open-ai-runtime-script.ts\n  var DEFAULT_SAFE_AREA = {\n    insets: {\n      top: 0,\n      bottom: 0,\n      left: 0,\n      right: 0\n    }\n  };\n  var DEFAULT_CAPABILITIES = {\n    hover: true,\n    touch: false\n  };\n  var TOOL_CALL_TIMEOUT_MS = 3e4;\n  (function initializeOpenAIWidget() {\n    const globalWindow = window;\n    const config = globalWindow.__MCP_WIDGET_CONFIG__;\n    if (!config || typeof config !== \"object\" || config.widgetStateKey == null) {\n      console.warn(\"[OpenAI Widget] Missing widget configuration. Skipping initialization.\");\n      return;\n    }\n    const {\n      widgetStateKey,\n      toolInput = null,\n      toolOutput = null,\n      toolResponseMetadata = null,\n      toolName = null,\n      theme,\n      locale,\n      userAgent = null,\n      model = null,\n      displayMode,\n      maxHeight,\n      safeArea,\n      capabilities\n    } = config;\n    const resolvedDisplayMode = typeof displayMode === \"string\" ? displayMode : \"inline\";\n    const resolvedMaxHeight = typeof maxHeight === \"number\" ? maxHeight : 600;\n    const resolvedTheme = typeof theme === \"string\" ? theme : \"light\";\n    const resolvedLocale = typeof locale === \"string\" ? locale : \"en-US\";\n    const resolvedSafeArea = safeArea && typeof safeArea === \"object\" ? safeArea : DEFAULT_SAFE_AREA;\n    const mergedCapabilities = {\n      ...DEFAULT_CAPABILITIES,\n      ...typeof capabilities === \"object\" && capabilities !== null ? capabilities : {}\n    };\n    const openaiAPI = {\n      toolInput,\n      toolOutput,\n      toolResponseMetadata,\n      toolName,\n      displayMode: resolvedDisplayMode,\n      maxHeight: resolvedMaxHeight,\n      theme: resolvedTheme,\n      locale: resolvedLocale,\n      safeArea: resolvedSafeArea,\n      userAgent,\n      capabilities: mergedCapabilities,\n      model,\n      widgetState: null,\n      async setWidgetState(state) {\n        this.widgetState = state;\n        try {\n          localStorage.setItem(widgetStateKey, JSON.stringify(state));\n        } catch (err) {\n          console.error(\"[OpenAI Widget] Failed to save widget state:\", err);\n        }\n        window.parent.postMessage(\n          {\n            type: \"openai:setWidgetState\",\n            state\n          },\n          \"*\"\n        );\n      },\n      async callTool(tool, params = {}) {\n        return new Promise((resolve, reject) => {\n          const requestId = `tool_${Date.now()}_${Math.random()}`;\n          const handler = (event) => {\n            const data = event.data;\n            if (data?.type === \"openai:callTool:response\" && data?.requestId === requestId) {\n              window.removeEventListener(\"message\", handler);\n              if (data.error) {\n                reject(new Error(data.error));\n              } else {\n                resolve(data.result);\n              }\n            }\n          };\n          window.addEventListener(\"message\", handler);\n          window.parent.postMessage(\n            {\n              type: \"openai:callTool\",\n              requestId,\n              toolName: tool,\n              params\n            },\n            \"*\"\n          );\n          setTimeout(() => {\n            window.removeEventListener(\"message\", handler);\n            reject(new Error(\"Tool call timeout\"));\n          }, TOOL_CALL_TIMEOUT_MS);\n        });\n      },\n      async sendFollowupTurn(message) {\n        const payload = typeof message === \"string\" ? { prompt: message } : message;\n        const value = payload?.prompt ?? payload;\n        window.parent.postMessage(\n          {\n            type: \"openai:sendFollowup\",\n            message: value\n          },\n          \"*\"\n        );\n      },\n      async requestDisplayMode(options = {}) {\n        const mode = typeof options.mode === \"string\" ? options.mode : this.displayMode || \"inline\";\n        this.displayMode = mode;\n        window.parent.postMessage(\n          {\n            type: \"openai:requestDisplayMode\",\n            mode\n          },\n          \"*\"\n        );\n        return { mode };\n      },\n      async sendFollowUpMessage(args) {\n        const prompt = typeof args === \"string\" ? args : args?.prompt ?? \"\";\n        await this.sendFollowupTurn(prompt);\n      },\n      async openExternal(options) {\n        const href = typeof options === \"string\" ? options : options?.href;\n        if (!href) {\n          throw new Error(\"href is required for openExternal\");\n        }\n        window.parent.postMessage(\n          {\n            type: \"openai:openExternal\",\n            href\n          },\n          \"*\"\n        );\n        window.open(href, \"_blank\", \"noopener,noreferrer\");\n      }\n    };\n    if (openaiAPI.userAgent == null && typeof navigator !== \"undefined\") {\n      try {\n        openaiAPI.userAgent = navigator.userAgent || \"\";\n      } catch {\n        openaiAPI.userAgent = \"\";\n      }\n    }\n    Object.defineProperty(window, \"openai\", {\n      value: openaiAPI,\n      writable: false,\n      configurable: false,\n      enumerable: true\n    });\n    Object.defineProperty(window, \"webplus\", {\n      value: openaiAPI,\n      writable: false,\n      configurable: false,\n      enumerable: true\n    });\n    setTimeout(() => {\n      try {\n        const globalsEvent = new CustomEvent(\"webplus:set_globals\", {\n          detail: {\n            globals: {\n              displayMode: openaiAPI.displayMode,\n              maxHeight: openaiAPI.maxHeight,\n              theme: openaiAPI.theme,\n              locale: openaiAPI.locale,\n              safeArea: openaiAPI.safeArea,\n              userAgent: openaiAPI.userAgent,\n              capabilities: openaiAPI.capabilities\n            }\n          }\n        });\n        window.dispatchEvent(globalsEvent);\n      } catch {\n      }\n    }, 0);\n    setTimeout(() => {\n      try {\n        const stored = localStorage.getItem(widgetStateKey);\n        if (stored) {\n          openaiAPI.widgetState = JSON.parse(stored);\n        }\n      } catch {\n      }\n    }, 0);\n    try {\n      delete globalWindow.__MCP_WIDGET_CONFIG__;\n    } catch {\n      globalWindow.__MCP_WIDGET_CONFIG__ = void 0;\n    }\n  })();\n})();\n";
diff --git a/sdks/typescript/client/src/adapters/appssdk/open-ai-runtime-script.ts b/sdks/typescript/client/src/adapters/appssdk/open-ai-runtime-script.ts
new file mode 100644
index 0000000..0ff9d18
--- /dev/null
+++ b/sdks/typescript/client/src/adapters/appssdk/open-ai-runtime-script.ts
@@ -0,0 +1,289 @@
+type SafeAreaInsets = {
+  top: number;
+  bottom: number;
+  left: number;
+  right: number;
+};
+
+type SafeArea = {
+  insets: SafeAreaInsets;
+};
+
+type WidgetConfig = {
+  widgetStateKey: string;
+  toolInput?: unknown;
+  toolOutput?: unknown;
+  toolResponseMetadata?: unknown;
+  toolName?: string;
+  theme?: string;
+  locale?: string;
+  userAgent?: unknown;
+  model?: string;
+  displayMode?: string;
+  maxHeight?: number;
+  safeArea?: SafeArea;
+  capabilities?: Record<string, unknown>;
+};
+
+type WidgetGlobal = Window & {
+  __MCP_WIDGET_CONFIG__?: WidgetConfig | null | undefined;
+};
+
+type OpenAIWidgetAPI = {
+  toolInput: unknown;
+  toolOutput: unknown;
+  toolResponseMetadata: unknown;
+  toolName: string | null;
+  displayMode: string;
+  maxHeight: number;
+  theme: string;
+  locale: string;
+  safeArea: SafeArea;
+  userAgent: unknown;
+  capabilities: Record<string, unknown>;
+  model: unknown;
+  widgetState: unknown;
+  setWidgetState(state: unknown): Promise<void>;
+  callTool(toolName: string, params?: Record<string, unknown>): Promise<unknown>;
+  sendFollowupTurn(message: unknown): Promise<void>;
+  requestDisplayMode(options?: { mode?: string }): Promise<{ mode: string }>;
+  sendFollowUpMessage(args: unknown): Promise<void>;
+  openExternal(options: { href?: string } | string): Promise<void>;
+};
+
+const DEFAULT_SAFE_AREA: SafeArea = {
+  insets: {
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+  },
+};
+
+const DEFAULT_CAPABILITIES: Record<string, unknown> = {
+  hover: true,
+  touch: false,
+};
+
+const TOOL_CALL_TIMEOUT_MS = 30_000;
+
+(function initializeOpenAIWidget() {
+  const globalWindow = window as WidgetGlobal;
+  const config = globalWindow.__MCP_WIDGET_CONFIG__;
+
+  if (!config || typeof config !== 'object' || config.widgetStateKey == null) {
+    console.warn('[OpenAI Widget] Missing widget configuration. Skipping initialization.');
+    return;
+  }
+
+  const {
+    widgetStateKey,
+    toolInput = null,
+    toolOutput = null,
+    toolResponseMetadata = null,
+    toolName = null,
+    theme,
+    locale,
+    userAgent = null,
+    model = null,
+    displayMode,
+    maxHeight,
+    safeArea,
+    capabilities,
+  } = config;
+
+  const resolvedDisplayMode = typeof displayMode === 'string' ? displayMode : 'inline';
+  const resolvedMaxHeight = typeof maxHeight === 'number' ? maxHeight : 600;
+  const resolvedTheme = typeof theme === 'string' ? theme : 'light';
+  const resolvedLocale = typeof locale === 'string' ? locale : 'en-US';
+  const resolvedSafeArea =
+    safeArea && typeof safeArea === 'object'
+      ? safeArea
+      : DEFAULT_SAFE_AREA;
+  const mergedCapabilities = {
+    ...DEFAULT_CAPABILITIES,
+    ...(typeof capabilities === 'object' && capabilities !== null ? capabilities : {}),
+  };
+
+  const openaiAPI: OpenAIWidgetAPI = {
+    toolInput,
+    toolOutput,
+    toolResponseMetadata,
+    toolName,
+    displayMode: resolvedDisplayMode,
+    maxHeight: resolvedMaxHeight,
+    theme: resolvedTheme,
+    locale: resolvedLocale,
+    safeArea: resolvedSafeArea,
+    userAgent,
+    capabilities: mergedCapabilities,
+    model,
+    widgetState: null,
+
+    async setWidgetState(state: unknown) {
+      this.widgetState = state;
+      try {
+        localStorage.setItem(widgetStateKey, JSON.stringify(state));
+      } catch (err) {
+        console.error('[OpenAI Widget] Failed to save widget state:', err);
+      }
+      window.parent.postMessage(
+        {
+          type: 'openai:setWidgetState',
+          state,
+        },
+        '*',
+      );
+    },
+
+    async callTool(tool, params = {}) {
+      return new Promise((resolve, reject) => {
+        const requestId = `tool_${Date.now()}_${Math.random()}`;
+        const handler = (event: MessageEvent) => {
+          const data = event.data as {
+            type?: string;
+            requestId?: string;
+            error?: string;
+            result?: unknown;
+          };
+          if (data?.type === 'openai:callTool:response' && data?.requestId === requestId) {
+            window.removeEventListener('message', handler);
+            if (data.error) {
+              reject(new Error(data.error));
+            } else {
+              resolve(data.result);
+            }
+          }
+        };
+        window.addEventListener('message', handler);
+        window.parent.postMessage(
+          {
+            type: 'openai:callTool',
+            requestId,
+            toolName: tool,
+            params,
+          },
+          '*',
+        );
+        setTimeout(() => {
+          window.removeEventListener('message', handler);
+          reject(new Error('Tool call timeout'));
+        }, TOOL_CALL_TIMEOUT_MS);
+      });
+    },
+
+    async sendFollowupTurn(message) {
+      const payload =
+        typeof message === 'string'
+          ? { prompt: message }
+          : (message as { prompt?: unknown });
+      const value = payload?.prompt ?? payload;
+      window.parent.postMessage(
+        {
+          type: 'openai:sendFollowup',
+          message: value,
+        },
+        '*',
+      );
+    },
+
+    async requestDisplayMode(options = {}) {
+      const mode = typeof options.mode === 'string' ? options.mode : this.displayMode || 'inline';
+      this.displayMode = mode;
+      window.parent.postMessage(
+        {
+          type: 'openai:requestDisplayMode',
+          mode,
+        },
+        '*',
+      );
+      return { mode };
+    },
+
+    async sendFollowUpMessage(args) {
+      const prompt =
+        typeof args === 'string'
+          ? args
+          : (args as { prompt?: unknown })?.prompt ?? '';
+      await this.sendFollowupTurn(prompt);
+    },
+
+    async openExternal(options) {
+      const href =
+        typeof options === 'string'
+          ? options
+          : options?.href;
+      if (!href) {
+        throw new Error('href is required for openExternal');
+      }
+      window.parent.postMessage(
+        {
+          type: 'openai:openExternal',
+          href,
+        },
+        '*',
+      );
+      window.open(href, '_blank', 'noopener,noreferrer');
+    },
+  };
+
+  if (openaiAPI.userAgent == null && typeof navigator !== 'undefined') {
+    try {
+      openaiAPI.userAgent = navigator.userAgent || '';
+    } catch {
+      openaiAPI.userAgent = '';
+    }
+  }
+
+  Object.defineProperty(window, 'openai', {
+    value: openaiAPI,
+    writable: false,
+    configurable: false,
+    enumerable: true,
+  });
+
+  Object.defineProperty(window, 'webplus', {
+    value: openaiAPI,
+    writable: false,
+    configurable: false,
+    enumerable: true,
+  });
+
+  setTimeout(() => {
+    try {
+      const globalsEvent = new CustomEvent('webplus:set_globals', {
+        detail: {
+          globals: {
+            displayMode: openaiAPI.displayMode,
+            maxHeight: openaiAPI.maxHeight,
+            theme: openaiAPI.theme,
+            locale: openaiAPI.locale,
+            safeArea: openaiAPI.safeArea,
+            userAgent: openaiAPI.userAgent,
+            capabilities: openaiAPI.capabilities,
+          },
+        },
+      });
+      window.dispatchEvent(globalsEvent);
+    } catch {
+      // ignore
+    }
+  }, 0);
+
+  setTimeout(() => {
+    try {
+      const stored = localStorage.getItem(widgetStateKey);
+      if (stored) {
+        openaiAPI.widgetState = JSON.parse(stored);
+      }
+    } catch {
+      // ignore
+    }
+  }, 0);
+
+  try {
+    delete globalWindow.__MCP_WIDGET_CONFIG__;
+  } catch {
+    globalWindow.__MCP_WIDGET_CONFIG__ = undefined;
+  }
+})();
diff --git a/sdks/typescript/client/src/adapters/appssdk/open-ai-script.ts b/sdks/typescript/client/src/adapters/appssdk/open-ai-script.ts
new file mode 100644
index 0000000..969c765
--- /dev/null
+++ b/sdks/typescript/client/src/adapters/appssdk/open-ai-script.ts
@@ -0,0 +1,59 @@
+import { API_RUNTIME_SCRIPT } from './open-ai-runtime-script.bundled';
+import type { HostProps } from '../../types';
+
+export type OpenAiScriptOptions = {
+  widgetStateKey: string;
+  toolInput?: Record<string, unknown>;
+  toolOutput?: Record<string, unknown>;
+  toolResponseMetadata?: Record<string, unknown>;
+  toolName?: string;
+  theme?: string;
+  locale?: string;
+  userAgent?: unknown;
+  model?: string;
+  displayMode?: string;
+  maxHeight?: number;
+  safeArea?: HostProps['safeArea'];
+  capabilities?: HostProps['capabilities'];
+};
+
+const CONFIG_GLOBAL_KEY = '__MCP_WIDGET_CONFIG__';
+
+function escapeForInlineScript(json: string): string {
+  return json
+    .replace(/</g, '\\u003C')
+    .replace(/>/g, '\\u003E')
+    .replace(/&/g, '\\u0026')
+    .replace(/\u2028/g, '\\u2028')
+    .replace(/\u2029/g, '\\u2029');
+}
+
+export function createOpenAiScript(options: OpenAiScriptOptions): string {
+  const config: Record<string, unknown> = {
+    widgetStateKey: options.widgetStateKey,
+    toolInput: options.toolInput ?? null,
+    toolOutput: options.toolOutput ?? null,
+    toolResponseMetadata: options.toolResponseMetadata ?? null,
+    toolName: options.toolName ?? null,
+    theme: options.theme ?? undefined,
+    locale: options.locale ?? undefined,
+    userAgent: options.userAgent ?? null,
+    model: options.model ?? null,
+    displayMode: options.displayMode ?? undefined,
+    maxHeight: typeof options.maxHeight === 'number' ? options.maxHeight : undefined,
+    safeArea: options.safeArea ?? undefined,
+    capabilities: options.capabilities ?? undefined,
+  };
+
+  const serializedConfig = JSON.stringify(config);
+  const escapedConfig = escapeForInlineScript(serializedConfig);
+
+  return `
+<script>
+  window.${CONFIG_GLOBAL_KEY} = ${escapedConfig};
+</script>
+<script>
+${API_RUNTIME_SCRIPT}
+</script>
+`;
+}
diff --git a/sdks/typescript/client/src/components/HTMLResourceRenderer.tsx b/sdks/typescript/client/src/components/HTMLResourceRenderer.tsx
index eef08fc..03618b9 100644
--- a/sdks/typescript/client/src/components/HTMLResourceRenderer.tsx
+++ b/sdks/typescript/client/src/components/HTMLResourceRenderer.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
 import type { Resource } from '@modelcontextprotocol/sdk/types.js';
-import { UIActionResult, UIMetadataKey } from '../types';
+import { UIActionResult, UIMetadataKey, MCPProps, HostProps } from '../types';
 import { processHTMLResource } from '../utils/processResource';
 import { getUIResourceMetadata } from '../utils/metadataUtils';
 
@@ -10,6 +10,8 @@ export type HTMLResourceRendererProps = {
   style?: React.CSSProperties;
   proxy?: string;
   iframeRenderData?: Record<string, unknown>;
+  mcp?: MCPProps;
+  host?: HostProps;
   autoResizeIframe?: boolean | { width?: boolean; height?: boolean };
   sandboxPermissions?: string;
   iframeProps?: Omit<React.HTMLAttributes<HTMLIFrameElement>, 'src' | 'srcDoc' | 'style'> & {
@@ -43,6 +45,8 @@ export const HTMLResourceRenderer = ({
   style,
   proxy,
   iframeRenderData,
+  mcp,
+  host,
   autoResizeIframe,
   sandboxPermissions,
   iframeProps,
@@ -50,11 +54,6 @@ export const HTMLResourceRenderer = ({
   const iframeRef = useRef<HTMLIFrameElement | null>(null);
   useImperativeHandle(iframeProps?.ref, () => iframeRef.current as HTMLIFrameElement);
 
-  const { error, iframeSrc, iframeRenderMode, htmlString } = useMemo(
-    () => processHTMLResource(resource, proxy),
-    [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;
@@ -69,6 +68,17 @@ export const HTMLResourceRenderer = ({
     };
   }, [iframeRenderData, metadataInitialRenderData]);
 
+  const { error, iframeSrc, iframeRenderMode, htmlString } = useMemo(
+    () =>
+      processHTMLResource(resource, {
+        proxy,
+        mcp,
+        host,
+      }),
+    [resource, proxy, mcp, host]
+  );
+
+
   const iframeSrcToRender = useMemo(() => {
     if (iframeSrc && initialRenderData) {
       const iframeUrl = new URL(iframeSrc);
@@ -240,7 +250,6 @@ export const HTMLResourceRenderer = ({
       }
       return null;
     }
-
     return (
       <iframe
         src={iframeSrcToRender}
diff --git a/sdks/typescript/client/src/components/UIResourceRenderer.tsx b/sdks/typescript/client/src/components/UIResourceRenderer.tsx
index c92549c..d038e2d 100644
--- a/sdks/typescript/client/src/components/UIResourceRenderer.tsx
+++ b/sdks/typescript/client/src/components/UIResourceRenderer.tsx
@@ -1,5 +1,5 @@
 import type { EmbeddedResource } from '@modelcontextprotocol/sdk/types.js';
-import { ResourceContentType, UIActionResult } from '../types';
+import { ResourceContentType, UIActionResult, HostProps, MCPProps } from '../types';
 import { HTMLResourceRenderer, HTMLResourceRendererProps } from './HTMLResourceRenderer';
 import { RemoteDOMResourceProps, RemoteDOMResourceRenderer } from './RemoteDOMResourceRenderer';
 import { basicComponentLibrary } from '../remote-dom/component-libraries/basic';
@@ -8,8 +8,10 @@ export type UIResourceRendererProps = {
   resource: Partial<EmbeddedResource>;
   onUIAction?: (result: UIActionResult) => Promise<unknown>;
   supportedContentTypes?: ResourceContentType[];
-  htmlProps?: Omit<HTMLResourceRendererProps, 'resource' | 'onUIAction'>;
-  remoteDomProps?: Omit<RemoteDOMResourceProps, 'resource' | 'onUIAction'>;
+  htmlProps?: Omit<HTMLResourceRendererProps, 'resource' | 'onUIAction' | 'mcp' | 'host'>;
+  remoteDomProps?: RemoteDOMResourceProps;
+  mcp?: MCPProps;
+  host?: HostProps;
 };
 
 function getContentType(
@@ -22,6 +24,9 @@ function getContentType(
   if (resource.mimeType === 'text/html') {
     return 'rawHtml';
   }
+  if (resource.mimeType === 'text/html+skybridge') {
+    return 'skybridge';
+  }
   if (resource.mimeType === 'text/uri-list') {
     return 'externalUrl';
   }
@@ -31,7 +36,7 @@ function getContentType(
 }
 
 export const UIResourceRenderer = (props: UIResourceRendererProps) => {
-  const { resource, onUIAction, supportedContentTypes, htmlProps, remoteDomProps } = props;
+  const { resource, onUIAction, supportedContentTypes, htmlProps, remoteDomProps, mcp, host } = props;
   const contentType = getContentType(resource);
 
   if (supportedContentTypes && contentType && !supportedContentTypes.includes(contentType)) {
@@ -40,8 +45,17 @@ export const UIResourceRenderer = (props: UIResourceRendererProps) => {
 
   switch (contentType) {
     case 'rawHtml':
+    case 'skybridge':
     case 'externalUrl': {
-      return <HTMLResourceRenderer resource={resource} onUIAction={onUIAction} {...htmlProps} />;
+      return (
+        <HTMLResourceRenderer
+          resource={resource}
+          onUIAction={onUIAction}
+          mcp={mcp}
+          host={host}
+          {...htmlProps}
+        />
+      );
     }
     case 'remoteDom':
       return (
diff --git a/sdks/typescript/client/src/components/UIResourceRendererWC.tsx b/sdks/typescript/client/src/components/UIResourceRendererWC.tsx
index b69ae0d..19adc3a 100644
--- a/sdks/typescript/client/src/components/UIResourceRendererWC.tsx
+++ b/sdks/typescript/client/src/components/UIResourceRendererWC.tsx
@@ -59,6 +59,7 @@ export const UIResourceRendererWCWrapper: FC<UIResourceRendererWCProps> = (props
                 resource={resource as Resource}
                 supportedContentTypes={supportedContentTypes as unknown as UIResourceRendererProps['supportedContentTypes']}
                 htmlProps={htmlProps}
+                // @ts-expect-error - TODO: fix this
                 remoteDomProps={remoteDomProps}
                 onUIAction={onUIActionCallback}
             />
diff --git a/sdks/typescript/client/src/components/__tests__/HTMLResourceRenderer.test.tsx b/sdks/typescript/client/src/components/__tests__/HTMLResourceRenderer.test.tsx
index db32bd5..8034ced 100644
--- a/sdks/typescript/client/src/components/__tests__/HTMLResourceRenderer.test.tsx
+++ b/sdks/typescript/client/src/components/__tests__/HTMLResourceRenderer.test.tsx
@@ -71,7 +71,7 @@ describe('HTMLResource component', () => {
     render(<HTMLResourceRenderer {...props} />);
     expect(
       screen.getByText(
-        'Resource must be of type text/html (for HTML content) or text/uri-list (for URL content).',
+        'Resource must be of type text/html (for HTML content), text/html+skybridge, or text/uri-list (for URL content).',
       ),
     ).toBeInTheDocument();
   });
@@ -359,7 +359,7 @@ describe('HTMLResource iframe communication', () => {
     // Error message should be displayed
     expect(
       await screen.findByText(
-        'Resource must be of type text/html (for HTML content) or text/uri-list (for URL content).',
+        'Resource must be of type text/html (for HTML content), text/html+skybridge, or text/uri-list (for URL content).',
       ),
     ).toBeInTheDocument();
 
@@ -534,6 +534,46 @@ describe('HTMLResource metadata', () => {
     );
   });
 
+  it('should keep render data separate from tool output context', () => {
+    const iframeRenderData = { priority: 'iframe', foo: 'bar' };
+    const metadataInitialRenderData = { priority: 'metadata', baz: 'qux' };
+    const toolOutput = { priority: 'context', extra: 'value' };
+    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}
+        mcp={{ toolOutput }}
+      />,
+    );
+    expect(ref.current).toBeInTheDocument();
+    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: 'iframe',
+            foo: 'bar',
+            baz: 'qux',
+          },
+        },
+        messageId: undefined,
+      },
+      '*',
+    );
+  });
+
   it('should respond to ui-request-render-data with render data', () => {
     const iframeRenderData = { theme: 'dark', user: { id: '123' } };
     const resource = {
diff --git a/sdks/typescript/client/src/components/__tests__/UIResourceRenderer.test.tsx b/sdks/typescript/client/src/components/__tests__/UIResourceRenderer.test.tsx
index 248535a..198b745 100644
--- a/sdks/typescript/client/src/components/__tests__/UIResourceRenderer.test.tsx
+++ b/sdks/typescript/client/src/components/__tests__/UIResourceRenderer.test.tsx
@@ -29,7 +29,7 @@ describe('<UIResourceRenderer />', () => {
     render(<UIResourceRenderer resource={resource} />);
     expect(screen.getByTestId('html-resource')).toBeInTheDocument();
     expect(RemoteDOMResourceRenderer).not.toHaveBeenCalled();
-    expect(HTMLResourceRenderer).toHaveBeenCalledWith({ resource }, {});
+    expect(HTMLResourceRenderer).toHaveBeenCalledWith(expect.objectContaining({ resource }), {});
   });
 
   it('should render HTMLResourceRenderer for "text/uri-list" mimeType', () => {
@@ -37,7 +37,7 @@ describe('<UIResourceRenderer />', () => {
     render(<UIResourceRenderer resource={resource} />);
     expect(screen.getByTestId('html-resource')).toBeInTheDocument();
     expect(RemoteDOMResourceRenderer).not.toHaveBeenCalled();
-    expect(HTMLResourceRenderer).toHaveBeenCalledWith({ resource }, {});
+    expect(HTMLResourceRenderer).toHaveBeenCalledWith(expect.objectContaining({ resource }), {});
   });
 
   it('should render RemoteDOMResourceRenderer for "remote-dom" mimeType', () => {
@@ -75,7 +75,7 @@ describe('<UIResourceRenderer />', () => {
     render(<UIResourceRenderer resource={resource} supportedContentTypes={['rawHtml']} />);
     expect(screen.getByTestId('html-resource')).toBeInTheDocument();
     expect(RemoteDOMResourceRenderer).not.toHaveBeenCalled();
-    expect(HTMLResourceRenderer).toHaveBeenCalledWith({ resource }, {});
+    expect(HTMLResourceRenderer).toHaveBeenCalledWith(expect.objectContaining({ resource }), {});
   });
 
   it('should pass proxy prop to HTMLResourceRenderer for external URLs', () => {
@@ -85,7 +85,7 @@ describe('<UIResourceRenderer />', () => {
     );
     expect(screen.getByTestId('html-resource')).toBeInTheDocument();
     expect(HTMLResourceRenderer).toHaveBeenCalledWith(
-      { resource, proxy: 'https://proxy.mcpui.dev/' },
+      expect.objectContaining({ resource, proxy: 'https://proxy.mcpui.dev/' }),
       {},
     );
   });
@@ -97,7 +97,24 @@ describe('<UIResourceRenderer />', () => {
     );
     expect(screen.getByTestId('html-resource')).toBeInTheDocument();
     expect(HTMLResourceRenderer).toHaveBeenCalledWith(
-      { resource, proxy: 'https://proxy.mcpui.dev/' },
+      expect.objectContaining({ resource, proxy: 'https://proxy.mcpui.dev/' }),
+      {},
+    );
+  });
+
+  it('should forward context props to HTMLResourceRenderer', () => {
+    const resource = { ...baseResource, mimeType: 'text/html' };
+    const mcp = { toolName: 'demo-tool', toolInput: { foo: 'bar' } };
+    const host = { theme: 'light', model: 'gpt-5' };
+    render(
+      <UIResourceRenderer
+        resource={resource}
+        mcp={mcp}
+        host={host}
+      />,
+    );
+    expect(HTMLResourceRenderer).toHaveBeenCalledWith(
+      expect.objectContaining({ resource, mcp, host }),
       {},
     );
   });
diff --git a/sdks/typescript/client/src/types.ts b/sdks/typescript/client/src/types.ts
index 6f6aca6..9bb05ca 100644
--- a/sdks/typescript/client/src/types.ts
+++ b/sdks/typescript/client/src/types.ts
@@ -3,7 +3,12 @@ import React from 'react';
 
 export type UIActionType = 'tool' | 'prompt' | 'link' | 'intent' | 'notify';
 
-export const ALL_RESOURCE_CONTENT_TYPES = ['rawHtml', 'externalUrl', 'remoteDom'] as const;
+export const ALL_RESOURCE_CONTENT_TYPES = [
+  'rawHtml',
+  'externalUrl',
+  'remoteDom',
+  'skybridge',
+] as const;
 export type ResourceContentType = (typeof ALL_RESOURCE_CONTENT_TYPES)[number];
 
 type GenericActionMessage = {
@@ -97,3 +102,32 @@ export type UIResourceMetadata = {
   [UIMetadataKey.PREFERRED_FRAME_SIZE]?: [string, string];
   [UIMetadataKey.INITIAL_RENDER_DATA]?: Record<string, unknown>;
 };
+
+export type MCPProps = {
+  toolInput?: Record<string, unknown>;
+  toolOutput?: Record<string, unknown>;
+  toolName?: string;
+  toolResponseMetadata?: Record<string, unknown>;
+};
+
+export type HostProps = {
+  theme?: string;
+  locale?: string;
+  userAgent?: unknown;
+  model?: string;
+  displayMode?: string;
+  maxHeight?: number;
+  safeArea?: {
+    insets: {
+      top: number;
+      bottom: number;
+      left: number;
+      right: number;
+    };
+  };
+  capabilities?: {
+    hover?: boolean;
+    touch?: boolean;
+    [capability: string]: boolean | undefined;
+  };
+};
diff --git a/sdks/typescript/client/src/utils/__tests__/processResource.test.ts b/sdks/typescript/client/src/utils/__tests__/processResource.test.ts
index ee00b38..43a9504 100644
--- a/sdks/typescript/client/src/utils/__tests__/processResource.test.ts
+++ b/sdks/typescript/client/src/utils/__tests__/processResource.test.ts
@@ -190,7 +190,7 @@ describe('processHTMLResource', () => {
           mimeType: 'text/uri-list',
           text: 'https://example.com',
         };
-        const result = processHTMLResource(resource, 'https://proxy.mcpui.dev/');
+        const result = processHTMLResource(resource, { proxy: 'https://proxy.mcpui.dev/' });
         expect(result.error).toBeUndefined();
         expect(result.iframeSrc).toBe('https://proxy.mcpui.dev/?url=https%3A%2F%2Fexample.com');
         expect(result.iframeRenderMode).toBe('src');
@@ -201,7 +201,7 @@ describe('processHTMLResource', () => {
           mimeType: 'text/uri-list',
           text: 'https://example.com',
         };
-        const result = processHTMLResource(resource, 'https://proxy.mcpui.dev/?a=1&b=2');
+        const result = processHTMLResource(resource, { proxy: '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',
@@ -214,7 +214,7 @@ describe('processHTMLResource', () => {
           mimeType: 'text/uri-list',
           text: 'https://example.com',
         };
-        const result = processHTMLResource(resource, 'not-a-valid-url');
+        const result = processHTMLResource(resource, { proxy: 'not-a-valid-url' });
         expect(result.error).toBeUndefined();
         expect(result.iframeSrc).toBe('https://example.com');
         expect(result.iframeRenderMode).toBe('src');
@@ -225,7 +225,7 @@ describe('processHTMLResource', () => {
           mimeType: 'text/uri-list',
           text: 'https://example.com',
         };
-        const result = processHTMLResource(resource, '');
+        const result = processHTMLResource(resource, { proxy: '' });
         expect(result.error).toBeUndefined();
         expect(result.iframeSrc).toBe('https://example.com');
         expect(result.iframeRenderMode).toBe('src');
@@ -248,7 +248,7 @@ describe('processHTMLResource', () => {
           mimeType: 'text/html' as const,
           text: html,
         };
-        const result = processHTMLResource(resource, 'https://proxy.mcpui.dev/');
+        const result = processHTMLResource(resource, { proxy: 'https://proxy.mcpui.dev/' });
         expect(result.error).toBeUndefined();
         expect(result.iframeRenderMode).toBe('src');
         expect(result.iframeSrc).toBe('https://proxy.mcpui.dev/?contentType=rawhtml');
@@ -262,7 +262,7 @@ describe('processHTMLResource', () => {
           mimeType: 'text/html' as const,
           blob: btoa(html),
         };
-        const result = processHTMLResource(resource, 'https://proxy.mcpui.dev/');
+        const result = processHTMLResource(resource, { proxy: 'https://proxy.mcpui.dev/' });
         expect(result.error).toBeUndefined();
         expect(result.iframeRenderMode).toBe('src');
         expect(result.iframeSrc).toBe('https://proxy.mcpui.dev/?contentType=rawhtml');
@@ -276,7 +276,7 @@ describe('processHTMLResource', () => {
           mimeType: 'text/html' as const,
           text: html,
         };
-        const result = processHTMLResource(resource, 'not-a-valid-url');
+        const result = processHTMLResource(resource, { proxy: 'not-a-valid-url' });
         expect(result.error).toBeUndefined();
         expect(result.iframeRenderMode).toBe('srcDoc');
         expect(result.htmlString).toBe(html);
@@ -289,7 +289,7 @@ describe('processHTMLResource', () => {
           mimeType: 'text/html' as const,
           text: html,
         };
-        const result = processHTMLResource(resource, '');
+        const result = processHTMLResource(resource, { proxy: '' });
         expect(result.error).toBeUndefined();
         expect(result.iframeRenderMode).toBe('srcDoc');
         expect(result.htmlString).toBe(html);
@@ -309,6 +309,81 @@ describe('processHTMLResource', () => {
         expect(result.iframeSrc).toBeUndefined();
       });
     });
+
+    it('should inject MCP and client context into skybridge HTML', () => {
+      const resource = {
+        mimeType: 'text/html+skybridge' as const,
+        text: '<html><head><title>Test</title></head><body></body></html>',
+      };
+      const result = processHTMLResource(resource, {
+        mcp: {
+          toolInput: { foo: 'bar' },
+          toolOutput: { override: 'yes' },
+          toolName: 'demo-tool',
+          toolResponseMetadata: { traceId: 'abc' },
+        },
+        host: {
+          theme: 'light',
+          userAgent: 'jest-agent',
+          model: 'gpt-test',
+          locale: 'en-GB',
+          displayMode: 'overlay',
+          maxHeight: 720,
+          safeArea: {
+            insets: { top: 10, bottom: 20, left: 0, right: 5 },
+          },
+          capabilities: { hover: false },
+        },
+      });
+
+      expect(result.error).toBeUndefined();
+      expect(result.htmlString).toContain('openai-widget-state:demo-tool:');
+      expect(result.htmlString).toContain('"toolInput":{"foo":"bar"}');
+      expect(result.htmlString).toContain('"toolOutput":{"override":"yes"}');
+      expect(result.htmlString).toContain('"toolResponseMetadata":{"traceId":"abc"}');
+      expect(result.htmlString).toContain('"toolName":"demo-tool"');
+      expect(result.htmlString).toContain('"theme":"light"');
+      expect(result.htmlString).toContain('"userAgent":"jest-agent"');
+      expect(result.htmlString).toContain('"model":"gpt-test"');
+      expect(result.htmlString).toContain('"locale":"en-GB"');
+      expect(result.htmlString).toContain('"displayMode":"overlay"');
+      expect(result.htmlString).toContain('"maxHeight":720');
+      expect(result.htmlString).toContain('"insets":{"top":10,"bottom":20,"left":0,"right":5}');
+      expect(result.htmlString).toContain('"capabilities":{"hover":false}');
+    });
+
+    it('should inject runtime script even when html/head tags are missing', () => {
+      const html = '<body><div>Skybridge snippet without root tags</div></body>';
+      const resource = {
+        mimeType: 'text/html+skybridge' as const,
+        text: html,
+      };
+      const result = processHTMLResource(resource, {
+        mcp: {
+          toolName: 'adhoc-widget',
+        },
+      });
+
+      expect(result.error).toBeUndefined();
+      expect(result.htmlString?.trimStart().startsWith('<script>')).toBe(true);
+      expect(result.htmlString).toContain('window.__MCP_WIDGET_CONFIG__');
+      expect(result.htmlString).toContain(html);
+    });
+
+    it('should default toolOutput to null when not provided', () => {
+      const resource = {
+        mimeType: 'text/html+skybridge' as const,
+        text: '<html><head></head><body></body></html>',
+      };
+      const result = processHTMLResource(resource, {
+        mcp: {
+          toolInput: { foo: 'bar' },
+        },
+      });
+
+      expect(result.error).toBeUndefined();
+      expect(result.htmlString).toContain('"toolOutput":null');
+    });
   });
 
   describe('Unsupported mimeType', () => {
@@ -319,7 +394,7 @@ describe('processHTMLResource', () => {
       };
       const result = processHTMLResource(resource);
       expect(result.error).toBe(
-        'Resource must be of type text/html (for HTML content) or text/uri-list (for URL content).',
+        'Resource must be of type text/html (for HTML content), text/html+skybridge, or text/uri-list (for URL content).',
       );
     });
   });
diff --git a/sdks/typescript/client/src/utils/processResource.ts b/sdks/typescript/client/src/utils/processResource.ts
index fa2b9c3..5cb520b 100644
--- a/sdks/typescript/client/src/utils/processResource.ts
+++ b/sdks/typescript/client/src/utils/processResource.ts
@@ -1,4 +1,6 @@
-import { Resource } from '@modelcontextprotocol/sdk/types.js';
+import type { Resource } from '@modelcontextprotocol/sdk/types.js';
+import type { HostProps, MCPProps } from '../types';
+import { createOpenAiScript } from '../adapters/appssdk/open-ai-script';
 
 type ProcessResourceResult = {
   error?: string;
@@ -18,14 +20,38 @@ function isValidHttpUrl(string: string): boolean {
   return url.protocol === 'http:' || url.protocol === 'https:';
 }
 
+export type ProcessHTMLResourceOptions = {
+  proxy?: string;
+  mcp?: MCPProps;
+  host?: HostProps;
+};
+
 export function processHTMLResource(
   resource: Partial<Resource>,
-  proxy?: string,
+  options: ProcessHTMLResourceOptions = {},
 ): ProcessResourceResult {
-  if (resource.mimeType !== 'text/html' && resource.mimeType !== 'text/uri-list') {
+  const { proxy, mcp, host } = options;
+  const toolName = mcp?.toolName;
+  const toolInput = mcp?.toolInput;
+  const toolOutput = mcp?.toolOutput;
+  const toolResponseMetadata = mcp?.toolResponseMetadata;
+  const theme = host?.theme;
+  const locale = host?.locale;
+  const userAgent = host?.userAgent;
+  const model = host?.model;
+  const displayMode = host?.displayMode;
+  const maxHeight = host?.maxHeight;
+  const safeArea = host?.safeArea;
+  const capabilities = host?.capabilities;
+
+  if (
+    resource.mimeType !== 'text/html' &&
+    resource.mimeType !== 'text/html+skybridge' &&
+    resource.mimeType !== 'text/uri-list'
+  ) {
     return {
       error:
-        'Resource must be of type text/html (for HTML content) or text/uri-list (for URL content).',
+        'Resource must be of type text/html (for HTML content), text/html+skybridge, or text/uri-list (for URL content).',
     };
   }
 
@@ -76,7 +102,7 @@ export function processHTMLResource(
     if (lines.length > 1) {
       console.warn(
         `Multiple URLs found in uri-list content. Using the first URL: "${lines[0]}". Other URLs ignored:`,
-        lines.slice(1),
+        lines.slice(1)
       );
     }
 
@@ -86,9 +112,12 @@ export function processHTMLResource(
       try {
         const proxyUrl = new URL(proxy);
         // The proxy host MUST NOT be the host URL, or the proxy can escape the sandbox
-        if (typeof window !== 'undefined' && proxyUrl.host === window.location.host) {
+        if (
+          typeof window !== 'undefined' &&
+          proxyUrl.host === window.location.host
+        ) {
           console.error(
-            'For security, the proxy origin must not be the same as the host origin. Using original URL instead.',
+            'For security, the proxy origin must not be the same as the host origin. Using original URL instead.'
           );
         } else {
           proxyUrl.searchParams.set('url', originalUrl);
@@ -100,7 +129,7 @@ export function processHTMLResource(
       } catch (e: unknown) {
         console.error(
           `Invalid proxy URL provided: "${proxy}". Falling back to direct URL.`,
-          e instanceof Error ? e.message : String(e),
+          e instanceof Error ? e.message : String(e)
         );
       }
     }
@@ -109,16 +138,19 @@ export function processHTMLResource(
       iframeSrc: originalUrl,
       iframeRenderMode: 'src',
     };
-  } else if (resource.mimeType === 'text/html') {
+  } else if (
+    resource.mimeType === 'text/html' ||
+    resource.mimeType === 'text/html+skybridge'
+  ) {
     // Handle HTML content
     let htmlContent = '';
-    
+
     if (typeof resource.text === 'string') {
       htmlContent = resource.text;
     } else if (typeof resource.blob === 'string') {
       try {
         htmlContent = new TextDecoder().decode(
-          Uint8Array.from(atob(resource.blob), (c) => c.charCodeAt(0)),
+          Uint8Array.from(atob(resource.blob), (c) => c.charCodeAt(0))
         );
       } catch (e) {
         console.error('Error decoding base64 blob for HTML content:', e);
@@ -132,13 +164,43 @@ export function processHTMLResource(
       };
     }
 
+    if (resource.mimeType === 'text/html+skybridge') {
+      const widgetStateKey = `openai-widget-state:${toolName ?? ''}:`;
+      const openAiScript = createOpenAiScript({
+        widgetStateKey,
+        toolInput,
+        toolOutput,
+        toolResponseMetadata,
+        toolName,
+        theme,
+        locale,
+        userAgent,
+        model,
+        displayMode,
+        maxHeight,
+        safeArea,
+        capabilities,
+      });
+
+      if (/<head[^>]*>/i.test(htmlContent)) {
+        htmlContent = htmlContent.replace(/<head([^>]*)>/i, `<head$1>\n${openAiScript}\n`);
+      } else if (/<html[^>]*>/i.test(htmlContent)) {
+        htmlContent = htmlContent.replace(/<html([^>]*)>/i, `<html$1><head>${openAiScript}</head>`);
+      } else {
+        htmlContent = `${openAiScript}\n${htmlContent}`;
+      }
+    }
+
     if (proxy && proxy.trim() !== '') {
       try {
         const proxyUrl = new URL(proxy);
         // The proxy host MUST NOT be the host URL, or the proxy can escape the sandbox
-        if (typeof window !== 'undefined' && proxyUrl.host === window.location.host) {
+        if (
+          typeof window !== 'undefined' &&
+          proxyUrl.host === window.location.host
+        ) {
           console.error(
-            'For security, the proxy origin must not be the same as the host origin. Using srcDoc rendering instead.',
+            'For security, the proxy origin must not be the same as the host origin. Using srcDoc rendering instead.'
           );
         } else {
           proxyUrl.searchParams.set('contentType', 'rawhtml');
@@ -151,7 +213,7 @@ export function processHTMLResource(
       } catch (e: unknown) {
         console.error(
           `Invalid proxy URL provided: "${proxy}". Falling back to srcDoc rendering.`,
-          e instanceof Error ? e.message : String(e),
+          e instanceof Error ? e.message : String(e)
         );
       }
     }
@@ -162,7 +224,8 @@ export function processHTMLResource(
     };
   } else {
     return {
-      error: 'Unsupported mimeType. Expected text/html or text/uri-list.',
+      error:
+        'Unsupported mimeType. Expected text/html, text/html+skybridge, or text/uri-list.',
     };
   }
 }
@@ -173,7 +236,7 @@ type ProcessRemoteDOMResourceResult = {
 };
 
 export function processRemoteDOMResource(
-  resource: Partial<Resource>,
+  resource: Partial<Resource>
 ): ProcessRemoteDOMResourceResult {
   if (typeof resource.text === 'string' && resource.text.trim() !== '') {
     return {
@@ -184,7 +247,7 @@ export function processRemoteDOMResource(
   if (typeof resource.blob === 'string') {
     try {
       const decodedCode = new TextDecoder().decode(
-        Uint8Array.from(atob(resource.blob), (c) => c.charCodeAt(0)),
+        Uint8Array.from(atob(resource.blob), (c) => c.charCodeAt(0))
       );
       return {
         code: decodedCode,