diff --git a/bun.lock b/bun.lock
index f19cacbe3d5..a4ce100e280 100644
--- a/bun.lock
+++ b/bun.lock
@@ -478,6 +478,7 @@
       "version": "1.2.21",
       "dependencies": {
         "@kobalte/core": "catalog:",
+        "@modelcontextprotocol/ext-apps": "^1.1.2",
         "@opencode-ai/sdk": "workspace:*",
         "@opencode-ai/util": "workspace:*",
         "@pierre/diffs": "catalog:",
@@ -1300,6 +1301,8 @@
 
     "@mixmark-io/domino": ["@mixmark-io/domino@2.2.0", "", {}, "sha512-Y28PR25bHXUg88kCV7nivXrP2Nj2RueZ3/l/jdx6J9f8J4nsEGcgX0Qe6lt7Pa+J79+kPiJU3LguR6O/6zrLOw=="],
 
+    "@modelcontextprotocol/ext-apps": ["@modelcontextprotocol/ext-apps@1.1.2", "", { "optionalDependencies": { "@oven/bun-darwin-aarch64": "^1.2.21", "@oven/bun-darwin-x64": "^1.2.21", "@oven/bun-darwin-x64-baseline": "^1.2.21", "@oven/bun-linux-aarch64": "^1.2.21", "@oven/bun-linux-aarch64-musl": "^1.2.21", "@oven/bun-linux-x64": "^1.2.21", "@oven/bun-linux-x64-baseline": "^1.2.21", "@oven/bun-linux-x64-musl": "^1.2.21", "@oven/bun-linux-x64-musl-baseline": "^1.2.21", "@oven/bun-windows-x64": "^1.2.21", "@oven/bun-windows-x64-baseline": "^1.2.21", "@rollup/rollup-darwin-arm64": "^4.53.3", "@rollup/rollup-darwin-x64": "^4.53.3", "@rollup/rollup-linux-arm64-gnu": "^4.53.3", "@rollup/rollup-linux-x64-gnu": "^4.53.3", "@rollup/rollup-win32-arm64-msvc": "^4.53.3", "@rollup/rollup-win32-x64-msvc": "^4.53.3" }, "peerDependencies": { "@modelcontextprotocol/sdk": "^1.24.0", "react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0", "zod": "^3.25.0 || ^4.0.0" }, "optionalPeers": ["react", "react-dom"] }, "sha512-Gx4TEo3/F8yq1Ix6LdgLwMrKqfZqD7++eakZdbMUewrYtHeeJn3nKpeNhgEfO7nYRwonqWYomOAszWZWJS0IbA=="],
+
     "@modelcontextprotocol/sdk": ["@modelcontextprotocol/sdk@1.25.2", "", { "dependencies": { "@hono/node-server": "^1.19.7", "ajv": "^8.17.1", "ajv-formats": "^3.0.1", "content-type": "^1.0.5", "cors": "^2.8.5", "cross-spawn": "^7.0.5", "eventsource": "^3.0.2", "eventsource-parser": "^3.0.0", "express": "^5.0.1", "express-rate-limit": "^7.5.0", "jose": "^6.1.1", "json-schema-typed": "^8.0.2", "pkce-challenge": "^5.0.0", "raw-body": "^3.0.0", "zod": "^3.25 || ^4.0", "zod-to-json-schema": "^3.25.0" }, "peerDependencies": { "@cfworker/json-schema": "^4.1.1" }, "optionalPeers": ["@cfworker/json-schema"] }, "sha512-LZFeo4F9M5qOhC/Uc1aQSrBHxMrvxett+9KLHt7OhcExtoiRN9DKgbZffMP/nxjutWDQpfMDfP3nkHI4X9ijww=="],
 
     "@motionone/animation": ["@motionone/animation@10.18.0", "", { "dependencies": { "@motionone/easing": "^10.18.0", "@motionone/types": "^10.17.1", "@motionone/utils": "^10.18.0", "tslib": "^2.3.1" } }, "sha512-9z2p5GFGCm0gBsZbi8rVMOAJCtw1WqBTIPw3ozk06gDvZInBPIsQcHgYogEJ4yuHJ+akuW8g1SEIOpTOvYs8hw=="],
@@ -1438,6 +1441,28 @@
 
     "@oslojs/jwt": ["@oslojs/jwt@0.2.0", "", { "dependencies": { "@oslojs/encoding": "0.4.1" } }, "sha512-bLE7BtHrURedCn4Mco3ma9L4Y1GR2SMBuIvjWr7rmQ4/W/4Jy70TIAgZ+0nIlk0xHz1vNP8x8DCns45Sb2XRbg=="],
 
+    "@oven/bun-darwin-aarch64": ["@oven/bun-darwin-aarch64@1.3.10", "", { "os": "darwin", "cpu": "arm64" }, "sha512-PXgg5gqcS/rHwa1hF0JdM1y5TiyejVrMHoBmWY/DjtfYZoFTXie1RCFOkoG0b5diOOmUcuYarMpH7CSNTqwj+w=="],
+
+    "@oven/bun-darwin-x64": ["@oven/bun-darwin-x64@1.3.10", "", { "os": "darwin", "cpu": "x64" }, "sha512-Nhssuh7GBpP5PiDSOl3+qnoIG7PJo+ec2oomDevnl9pRY6x6aD2gRt0JE+uf+A8Om2D6gjeHCxjEdrw5ZHE8mA=="],
+
+    "@oven/bun-darwin-x64-baseline": ["@oven/bun-darwin-x64-baseline@1.3.10", "", { "os": "darwin", "cpu": "x64" }, "sha512-w1gaTlqU0IJCmJ1X+PGHkdNU1n8Gemx5YKkjhkJIguvFINXEBB5U1KG82QsT65Tk4KyNMfbLTlmy4giAvUoKfA=="],
+
+    "@oven/bun-linux-aarch64": ["@oven/bun-linux-aarch64@1.3.10", "", { "os": "linux", "cpu": "arm64" }, "sha512-OUgPHfL6+PM2Q+tFZjcaycN3D7gdQdYlWnwMI31DXZKY1r4HINWk9aEz9t/rNaHg65edwNrt7dsv9TF7xK8xIA=="],
+
+    "@oven/bun-linux-aarch64-musl": ["@oven/bun-linux-aarch64-musl@1.3.10", "", { "os": "linux", "cpu": "arm64" }, "sha512-Ui5pAgM7JE9MzHokF0VglRMkbak3lTisY4Mf1AZutPACXWgKJC5aGrgnHBfkl7QS6fEeYb0juy1q4eRznRHOsw=="],
+
+    "@oven/bun-linux-x64": ["@oven/bun-linux-x64@1.3.10", "", { "os": "linux", "cpu": "x64" }, "sha512-bzUgYj/PIZziB/ZesIP9HUyfvh6Vlf3od+TrbTTyVEuCSMKzDPQVW/yEbRp0tcHO3alwiEXwJDrWrHAguXlgiQ=="],
+
+    "@oven/bun-linux-x64-baseline": ["@oven/bun-linux-x64-baseline@1.3.10", "", { "os": "linux", "cpu": "x64" }, "sha512-oqvMDYpX6dGJO03HgO5bXuccEsH3qbdO3MaAiAlO4CfkBPLUXz3N0DDElg5hz0L6ktdDVKbQVE5lfe+LAUISQg=="],
+
+    "@oven/bun-linux-x64-musl": ["@oven/bun-linux-x64-musl@1.3.10", "", { "os": "linux", "cpu": "x64" }, "sha512-poVXvOShekbexHq45b4MH/mRjQKwACAC8lHp3Tz/hEDuz0/20oncqScnmKwzhBPEpqJvydXficXfBYuSim8opw=="],
+
+    "@oven/bun-linux-x64-musl-baseline": ["@oven/bun-linux-x64-musl-baseline@1.3.10", "", { "os": "linux", "cpu": "x64" }, "sha512-/hOZ6S1VsTX6vtbhWVL9aAnOrdpuO54mAGUWpTdMz7dFG5UBZ/VUEiK0pBkq9A1rlBk0GeD/6Y4NBFl8Ha7cRA=="],
+
+    "@oven/bun-windows-x64": ["@oven/bun-windows-x64@1.3.10", "", { "os": "win32", "cpu": "x64" }, "sha512-qaS1In3yfC/Z/IGQriVmF8GWwKuNqiw7feTSJWaQhH5IbL6ENR+4wGNPniZSJFaM/SKUO0e/YCRdoVBvgU4C1g=="],
+
+    "@oven/bun-windows-x64-baseline": ["@oven/bun-windows-x64-baseline@1.3.10", "", { "os": "win32", "cpu": "x64" }, "sha512-gh3UAHbUdDUG6fhLc1Csa4IGdtghue6U8oAIXWnUqawp6lwb3gOCRvp25IUnLF5vUHtgfMxuEUYV7YA2WxVutw=="],
+
     "@oxc-minify/binding-android-arm64": ["@oxc-minify/binding-android-arm64@0.96.0", "", { "os": "android", "cpu": "arm64" }, "sha512-lzeIEMu/v6Y+La5JSesq4hvyKtKBq84cgQpKYTYM/yGuNk2tfd5Ha31hnC+mTh48lp/5vZH+WBfjVUjjINCfug=="],
 
     "@oxc-minify/binding-darwin-arm64": ["@oxc-minify/binding-darwin-arm64@0.96.0", "", { "os": "darwin", "cpu": "arm64" }, "sha512-i0LkJAUXb4BeBFrJQbMKQPoxf8+cFEffDyLSb7NEzzKuPcH8qrVsnEItoOzeAdYam8Sr6qCHVwmBNEQzl7PWpw=="],
diff --git a/packages/app/src/pages/directory-layout.tsx b/packages/app/src/pages/directory-layout.tsx
index fdf321f2dc3..1f68d153c31 100644
--- a/packages/app/src/pages/directory-layout.tsx
+++ b/packages/app/src/pages/directory-layout.tsx
@@ -1,7 +1,7 @@
 import { batch, createEffect, createMemo, Show, type ParentProps } from "solid-js"
 import { createStore } from "solid-js/store"
 import { useLocation, useNavigate, useParams } from "@solidjs/router"
-import { SDKProvider } from "@/context/sdk"
+import { SDKProvider, useSDK } from "@/context/sdk"
 import { SyncProvider, useSync } from "@/context/sync"
 import { LocalProvider } from "@/context/local"
 import { useGlobalSDK } from "@/context/global-sdk"
@@ -14,6 +14,7 @@ import { useLanguage } from "@/context/language"
 function DirectoryDataProvider(props: ParentProps<{ directory: string }>) {
   const navigate = useNavigate()
   const sync = useSync()
+  const sdk = useSDK()
   const slug = createMemo(() => base64Encode(props.directory))
 
   return (
@@ -22,6 +23,15 @@ function DirectoryDataProvider(props: ParentProps<{ directory: string }>) {
       directory={props.directory}
       onNavigateToSession={(sessionID: string) => navigate(`/${slug()}/session/${sessionID}`)}
       onSessionHref={(sessionID: string) => `/${slug()}/session/${sessionID}`}
+      onFetchAppResource={async (server, uri) => {
+        const res = await fetch(
+          `${sdk.url}/experimental/mcp-app/resource?uri=${encodeURIComponent(uri)}&server=${encodeURIComponent(server)}`,
+        ).catch(() => undefined)
+        if (!res?.ok) return undefined
+        const data = (await res.json()) as { html: string } | undefined
+        if (typeof data?.html === "string" && data.html.includes("export{")) return undefined
+        return data
+      }}
     >
       <LocalProvider>{props.children}</LocalProvider>
     </DataProvider>
diff --git a/packages/opencode/src/flag/flag.ts b/packages/opencode/src/flag/flag.ts
index c743cd18d1c..c86da2b90c5 100644
--- a/packages/opencode/src/flag/flag.ts
+++ b/packages/opencode/src/flag/flag.ts
@@ -58,6 +58,7 @@ export namespace Flag {
   export const OPENCODE_DISABLE_FILETIME_CHECK = truthy("OPENCODE_DISABLE_FILETIME_CHECK")
   export const OPENCODE_EXPERIMENTAL_PLAN_MODE = OPENCODE_EXPERIMENTAL || truthy("OPENCODE_EXPERIMENTAL_PLAN_MODE")
   export const OPENCODE_EXPERIMENTAL_MARKDOWN = !falsy("OPENCODE_EXPERIMENTAL_MARKDOWN")
+  export declare const OPENCODE_EXPERIMENTAL_MCP_APPS: boolean
   export const OPENCODE_MODELS_URL = process.env["OPENCODE_MODELS_URL"]
   export const OPENCODE_MODELS_PATH = process.env["OPENCODE_MODELS_PATH"]
   export const OPENCODE_DISABLE_CHANNEL_DB = truthy("OPENCODE_DISABLE_CHANNEL_DB")
@@ -113,3 +114,11 @@ Object.defineProperty(Flag, "OPENCODE_CLIENT", {
   enumerable: true,
   configurable: false,
 })
+
+Object.defineProperty(Flag, "OPENCODE_EXPERIMENTAL_MCP_APPS", {
+  get() {
+    return truthy("OPENCODE_EXPERIMENTAL") || truthy("OPENCODE_EXPERIMENTAL_MCP_APPS")
+  },
+  enumerable: true,
+  configurable: false,
+})
diff --git a/packages/opencode/src/mcp/index.ts b/packages/opencode/src/mcp/index.ts
index 0dca27d6512..1be10e39303 100644
--- a/packages/opencode/src/mcp/index.ts
+++ b/packages/opencode/src/mcp/index.ts
@@ -23,6 +23,7 @@ import { BusEvent } from "../bus/bus-event"
 import { Bus } from "@/bus"
 import { TuiEvent } from "@/cli/cmd/tui/event"
 import open from "open"
+import { Flag } from "../flag/flag"
 
 export namespace MCP {
   const log = Log.create({ service: "mcp" })
@@ -147,7 +148,38 @@ export namespace MCP {
     })
   }
 
-  // Store transports for OAuth servers to allow finishing auth
+  export const AppMeta = z
+    .object({
+      resourceUri: z.string(),
+      visibility: z.array(z.enum(["model", "app"])).optional(),
+      maxHeight: z.number().optional(),
+    })
+    .meta({ ref: "McpAppMeta" })
+  export type AppMeta = z.infer<typeof AppMeta>
+
+  export const AppResource = z
+    .object({
+      html: z.string(),
+      server: z.string(),
+    })
+    .meta({ ref: "McpAppResource" })
+  export type AppResource = z.infer<typeof AppResource>
+
+  const toolMetaRegistry = new Map<string, AppMeta & { server: string }>()
+  const appResourceCache = new Map<string, AppResource>()
+
+  function extractAppMeta(mcpTool: MCPToolDef): AppMeta | undefined {
+    const ui = (mcpTool._meta as Record<string, unknown> | undefined)?.ui as Record<string, unknown> | undefined
+    if (!ui) return undefined
+    const resourceUri =
+      (ui.resourceUri as string | undefined) ??
+      ((mcpTool._meta as Record<string, unknown>)?.["ui/resourceUri"] as string | undefined)
+    if (!resourceUri || !resourceUri.startsWith("ui://")) return undefined
+    const visibility = ui.visibility as Array<"model" | "app"> | undefined
+    const maxHeight = ui.maxHeight as number | undefined
+    return { resourceUri, ...(visibility ? { visibility } : {}), ...(maxHeight ? { maxHeight } : {}) }
+  }
+
   type TransportWithAuth = StreamableHTTPClientTransport | SSEClientTransport
   const pendingOAuthTransports = new Map<string, TransportWithAuth>()
 
@@ -598,6 +630,10 @@ export namespace MCP {
       delete s.clients[name]
     }
     s.status[name] = { status: "disabled" }
+    for (const key of appResourceCache.keys()) {
+      const entry = appResourceCache.get(key)
+      if (entry?.server === name) appResourceCache.delete(key)
+    }
   }
 
   export async function tools() {
@@ -636,7 +672,11 @@ export namespace MCP {
       for (const mcpTool of toolsResult.tools) {
         const sanitizedClientName = clientName.replace(/[^a-zA-Z0-9_-]/g, "_")
         const sanitizedToolName = mcpTool.name.replace(/[^a-zA-Z0-9_-]/g, "_")
-        result[sanitizedClientName + "_" + sanitizedToolName] = await convertMcpTool(mcpTool, client, timeout)
+        const key = sanitizedClientName + "_" + sanitizedToolName
+        const meta = extractAppMeta(mcpTool)
+        if (meta) toolMetaRegistry.set(key, { ...meta, server: sanitizedClientName })
+        if (meta?.visibility && !meta.visibility.includes("model")) continue
+        result[key] = await convertMcpTool(mcpTool, client, timeout)
       }
     }
     return result
@@ -739,6 +779,31 @@ export namespace MCP {
     return result
   }
 
+  export function toolMeta(key: string) {
+    return toolMetaRegistry.get(key)
+  }
+
+  export async function apps() {
+    if (!Flag.OPENCODE_EXPERIMENTAL_MCP_APPS) return {}
+    await tools()
+    return Object.fromEntries(toolMetaRegistry)
+  }
+
+  export async function appResource(server: string, resourceUri: string, force = false) {
+    if (!Flag.OPENCODE_EXPERIMENTAL_MCP_APPS) return undefined
+    if (!force) {
+      const cached = appResourceCache.get(resourceUri)
+      if (cached && !cached.html.includes("export{")) return cached
+    }
+    const result = await readResource(server, resourceUri)
+    if (!result) return undefined
+    const content = result.contents.find((c) => c.mimeType === "text/html;profile=mcp-app" && "text" in c)
+    if (!content || !("text" in content)) return undefined
+    const entry: AppResource = { html: content.text as string, server }
+    appResourceCache.set(resourceUri, entry)
+    return entry
+  }
+
   /**
    * Start OAuth authentication flow for an MCP server.
    * Returns the authorization URL that should be opened in a browser.
diff --git a/packages/opencode/src/server/routes/experimental.ts b/packages/opencode/src/server/routes/experimental.ts
index 98c7ece1052..6346fa8daef 100644
--- a/packages/opencode/src/server/routes/experimental.ts
+++ b/packages/opencode/src/server/routes/experimental.ts
@@ -266,5 +266,98 @@ export const ExperimentalRoutes = lazy(() =>
       async (c) => {
         return c.json(await MCP.resources())
       },
+    )
+    .get(
+      "/mcp-app",
+      describeRoute({
+        summary: "List MCP App tools",
+        description: "List all MCP tools that declare a UI resource via _meta.ui.resourceUri.",
+        operationId: "experimental.mcp-app.list",
+        responses: {
+          200: {
+            description: "MCP App tools",
+            content: {
+              "application/json": {
+                schema: resolver(
+                  z.record(z.string(), MCP.AppMeta.extend({ server: z.string() }).meta({ ref: "McpAppToolEntry" })),
+                ),
+              },
+            },
+          },
+        },
+      }),
+      async (c) => {
+        return c.json(await MCP.apps())
+      },
+    )
+    .get(
+      "/mcp-app/resource",
+      describeRoute({
+        summary: "Get MCP App HTML resource",
+        description: "Fetch and cache the HTML bundle for a ui:// resource URI.",
+        operationId: "experimental.mcp-app.resource",
+        responses: {
+          200: {
+            description: "HTML bundle",
+            content: {
+              "application/json": {
+                schema: resolver(MCP.AppResource),
+              },
+            },
+          },
+          ...errors(400),
+        },
+      }),
+      validator(
+        "query",
+        z.object({
+          uri: z.string(),
+          server: z.string(),
+          force: z.coerce.boolean().optional(),
+        }),
+      ),
+      async (c) => {
+        const query = c.req.valid("query")
+        const resource = await MCP.appResource(query.server, query.uri, query.force)
+        if (!resource) return c.json({ error: "resource not found" }, 400)
+        return c.json(resource)
+      },
+    )
+    .post(
+      "/mcp-app/tool-call",
+      describeRoute({
+        summary: "Proxy tool call from MCP App iframe",
+        description: "Forward a tools/call request from an MCP App iframe to the originating MCP server.",
+        operationId: "experimental.mcp-app.tool-call",
+        responses: {
+          200: {
+            description: "Tool call result",
+            content: {
+              "application/json": {
+                schema: resolver(z.record(z.string(), z.any())),
+              },
+            },
+          },
+          ...errors(400),
+        },
+      }),
+      validator(
+        "json",
+        z.object({
+          server: z.string(),
+          name: z.string(),
+          arguments: z.record(z.string(), z.unknown()).optional(),
+        }),
+      ),
+      async (c) => {
+        const body = c.req.valid("json")
+        const snap = await MCP.clients()
+        const client = snap[body.server]
+        if (!client) return c.json({ error: "server not found" }, 400)
+        const result = await client
+          .callTool({ name: body.name, arguments: body.arguments ?? {} })
+          .catch((e: Error) => ({ error: e.message }))
+        return c.json(result)
+      },
     ),
 )
diff --git a/packages/opencode/src/session/prompt.ts b/packages/opencode/src/session/prompt.ts
index 4f77920cc98..2ad654b9766 100644
--- a/packages/opencode/src/session/prompt.ts
+++ b/packages/opencode/src/session/prompt.ts
@@ -898,10 +898,19 @@ export namespace SessionPrompt {
         }
 
         const truncated = await Truncate.output(textParts.join("\n\n"), {}, input.agent)
+        const appMeta = MCP.toolMeta(key)
         const metadata = {
           ...(result.metadata ?? {}),
           truncated: truncated.truncated,
           ...(truncated.truncated && { outputPath: truncated.outputPath }),
+          ...(result.structuredContent ? { structuredContent: result.structuredContent } : {}),
+          ...(appMeta
+            ? {
+                resourceUri: appMeta.resourceUri,
+                server: appMeta.server,
+                ...(appMeta.maxHeight ? { maxHeight: appMeta.maxHeight } : {}),
+              }
+            : {}),
         }
 
         return {
diff --git a/packages/opencode/test/fixture/mcp-app-demo/README.md b/packages/opencode/test/fixture/mcp-app-demo/README.md
new file mode 100644
index 00000000000..95d10d1dba8
--- /dev/null
+++ b/packages/opencode/test/fixture/mcp-app-demo/README.md
@@ -0,0 +1,55 @@
+# MCP App Demo
+
+A minimal demo of the MCP Apps integration in opencode.
+
+## What it shows
+
+- A Python MCP server with a `demo_dashboard` tool that declares `_meta.ui.resourceUri`
+- An HTML app (using the standard `App` class from `@modelcontextprotocol/ext-apps`) that renders metrics, bar charts, and action buttons
+- The full round-trip: tool call → `structuredContent` → iframe → button click → `_demo_action` → agent
+
+## Setup
+
+**1. Enable the feature flag** — add to your shell or `.env`:
+
+```sh
+export OPENCODE_EXPERIMENTAL_MCP_APPS=true
+```
+
+**2. Register the MCP server** — add to `~/.config/opencode/config.json` (global) or `./opencode.json` (project):
+
+```json
+{
+  "mcp": {
+    "demo": {
+      "type": "local",
+      "command": ["python3", "/path/to/opencode/packages/opencode/test/fixture/mcp-app-demo/server.py"]
+    }
+  }
+}
+```
+
+**3. Start the dev backend + app:**
+
+```sh
+# terminal 1 — backend
+cd packages/opencode
+bun run --conditions=browser ./src/index.ts serve --port 4096
+
+# terminal 2 — frontend
+cd packages/app
+bun dev -- --port 4444
+```
+
+**4. Open `http://localhost:4444`** and ask the agent to call the tool:
+
+> "Use demo_dashboard to show me a dashboard"
+
+You should see the iframe render inside the tool result with live metrics, bar charts, and buttons.
+
+## Files
+
+| File        | Purpose                                                                           |
+| ----------- | --------------------------------------------------------------------------------- |
+| `server.py` | MCP server — registers tools with `_meta.ui`, returns `structuredContent`         |
+| `app.html`  | Self-contained HTML app — receives tool result via `App` class postMessage bridge |
diff --git a/packages/opencode/test/fixture/mcp-app-demo/app.html b/packages/opencode/test/fixture/mcp-app-demo/app.html
new file mode 100644
index 00000000000..7ac8d3f57a7
--- /dev/null
+++ b/packages/opencode/test/fixture/mcp-app-demo/app.html
@@ -0,0 +1,631 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>MCP App Demo</title>
+    <style>
+      * {
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+      }
+
+      :root {
+        --bg: #0d0d0f;
+        --bg2: #141416;
+        --bg3: #1c1c20;
+        --border: rgba(255, 255, 255, 0.07);
+        --text: #e4e4e7;
+        --muted: rgba(255, 255, 255, 0.35);
+        --accent: #7c3aed;
+        --accent2: #6366f1;
+        --green: #10b981;
+        --red: #ef4444;
+        --yellow: #f59e0b;
+        --blue: #3b82f6;
+      }
+
+      body {
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+        font-size: 13px;
+        background: var(--bg);
+        color: var(--text);
+        padding: 16px;
+        line-height: 1.5;
+      }
+
+      /* ── header ── */
+      .header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 16px;
+      }
+      .header-left {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+      }
+      .badge {
+        font-size: 9px;
+        padding: 2px 6px;
+        border-radius: 4px;
+        background: rgba(124, 58, 237, 0.2);
+        color: #a78bfa;
+        font-weight: 700;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+      }
+      .title {
+        font-size: 15px;
+        font-weight: 700;
+      }
+      .ts {
+        font-size: 11px;
+        color: var(--muted);
+        font-variant-numeric: tabular-nums;
+      }
+
+      /* ── tabs ── */
+      .tabs {
+        display: flex;
+        gap: 2px;
+        margin-bottom: 16px;
+        border-bottom: 1px solid var(--border);
+      }
+      .tab {
+        padding: 6px 14px;
+        font-size: 12px;
+        font-weight: 500;
+        cursor: pointer;
+        border: none;
+        background: none;
+        color: var(--muted);
+        border-bottom: 2px solid transparent;
+        margin-bottom: -1px;
+        transition: color 0.15s;
+      }
+      .tab:hover {
+        color: var(--text);
+      }
+      .tab.active {
+        color: var(--text);
+        border-bottom-color: var(--accent2);
+      }
+
+      /* ── metric cards ── */
+      .metrics {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+        gap: 10px;
+        margin-bottom: 16px;
+      }
+      .card {
+        background: var(--bg2);
+        border: 1px solid var(--border);
+        border-radius: 10px;
+        padding: 14px;
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+      }
+      .card-top {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+      }
+      .card-label {
+        font-size: 11px;
+        color: var(--muted);
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+      }
+      .card-value {
+        font-size: 26px;
+        font-weight: 800;
+        font-variant-numeric: tabular-nums;
+        letter-spacing: -0.02em;
+      }
+      .card-unit {
+        font-size: 13px;
+        font-weight: 500;
+        opacity: 0.5;
+        margin-left: 1px;
+      }
+      .card-pill {
+        font-size: 10px;
+        padding: 2px 6px;
+        border-radius: 99px;
+        font-weight: 600;
+        font-variant-numeric: tabular-nums;
+      }
+      .pill-up {
+        background: rgba(16, 185, 129, 0.15);
+        color: #34d399;
+      }
+      .pill-down {
+        background: rgba(239, 68, 68, 0.15);
+        color: #f87171;
+      }
+      .pill-flat {
+        background: rgba(255, 255, 255, 0.07);
+        color: var(--muted);
+      }
+      .sparkline {
+        height: 32px;
+        width: 100%;
+      }
+
+      /* ── section head ── */
+      .section-head {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 10px;
+      }
+      .section-title {
+        font-size: 11px;
+        text-transform: uppercase;
+        letter-spacing: 0.06em;
+        color: var(--muted);
+      }
+
+      /* ── bar chart ── */
+      .bars {
+        display: flex;
+        flex-direction: column;
+        gap: 7px;
+        margin-bottom: 16px;
+      }
+      .bar-row {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+      .bar-name {
+        width: 78px;
+        font-size: 12px;
+        color: var(--muted);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      .bar-track {
+        flex: 1;
+        height: 7px;
+        background: var(--bg3);
+        border-radius: 99px;
+        overflow: hidden;
+      }
+      .bar-fill {
+        height: 100%;
+        border-radius: 99px;
+        transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1);
+      }
+      .bar-val {
+        width: 44px;
+        text-align: right;
+        font-size: 11px;
+        color: var(--muted);
+        font-variant-numeric: tabular-nums;
+      }
+
+      /* ── line chart ── */
+      .chart-wrap {
+        background: var(--bg2);
+        border: 1px solid var(--border);
+        border-radius: 10px;
+        padding: 14px;
+        margin-bottom: 16px;
+      }
+      .chart-svg {
+        width: 100%;
+        display: block;
+        overflow: visible;
+      }
+
+      /* ── log ── */
+      .log-wrap {
+        background: var(--bg2);
+        border: 1px solid var(--border);
+        border-radius: 10px;
+        overflow: hidden;
+        margin-bottom: 16px;
+      }
+      .log-header {
+        padding: 10px 14px;
+        border-bottom: 1px solid var(--border);
+        display: flex;
+        align-items: center;
+        gap: 6px;
+      }
+      .dot {
+        width: 7px;
+        height: 7px;
+        border-radius: 50%;
+      }
+      .dot-green {
+        background: var(--green);
+      }
+      .dot-yellow {
+        background: var(--yellow);
+      }
+      .dot-red {
+        background: var(--red);
+      }
+      .log-body {
+        padding: 10px 14px;
+        font-family: "SF Mono", "Fira Code", monospace;
+        font-size: 11px;
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+      }
+      .log-line {
+        display: flex;
+        gap: 10px;
+      }
+      .log-time {
+        color: var(--muted);
+        white-space: nowrap;
+      }
+      .log-lvl {
+        width: 40px;
+        font-weight: 600;
+      }
+      .lvl-info {
+        color: var(--blue);
+      }
+      .lvl-warn {
+        color: var(--yellow);
+      }
+      .lvl-error {
+        color: var(--red);
+      }
+      .log-msg {
+        color: var(--text);
+      }
+
+      /* ── actions ── */
+      .actions {
+        display: flex;
+        gap: 8px;
+        flex-wrap: wrap;
+        margin-bottom: 12px;
+      }
+      button {
+        padding: 7px 14px;
+        border-radius: 7px;
+        border: 1px solid var(--border);
+        background: var(--bg3);
+        color: var(--text);
+        font-size: 12px;
+        font-weight: 500;
+        cursor: pointer;
+        transition:
+          background 0.12s,
+          border-color 0.12s;
+      }
+      button:hover {
+        background: rgba(255, 255, 255, 0.08);
+        border-color: rgba(255, 255, 255, 0.12);
+      }
+      button.primary {
+        background: var(--accent);
+        border-color: var(--accent);
+        color: #fff;
+      }
+      button.primary:hover {
+        background: #6d28d9;
+      }
+      button:disabled {
+        opacity: 0.4;
+        cursor: not-allowed;
+      }
+
+      .panel {
+        display: none;
+      }
+      .panel.active {
+        display: block;
+      }
+
+      /* ── status ── */
+      .status {
+        font-size: 11px;
+        color: var(--muted);
+        font-style: italic;
+        display: flex;
+        align-items: center;
+        gap: 5px;
+      }
+      .spinner {
+        width: 10px;
+        height: 10px;
+        border: 2px solid rgba(255, 255, 255, 0.1);
+        border-top-color: var(--accent2);
+        border-radius: 50%;
+        animation: spin 0.6s linear infinite;
+        flex-shrink: 0;
+      }
+      @keyframes spin {
+        to {
+          transform: rotate(360deg);
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="header">
+      <div class="header-left">
+        <span class="badge">MCP App</span>
+        <span class="title" id="title">Dashboard</span>
+      </div>
+      <span class="ts" id="timestamp"></span>
+    </div>
+
+    <div class="tabs" id="tab-bar"></div>
+
+    <div id="panel-overview" class="panel active">
+      <div class="metrics" id="metrics"></div>
+      <div class="chart-wrap" id="chart-wrap" style="display: none">
+        <div class="section-head">
+          <span class="section-title" id="chart-label">Throughput</span>
+          <span class="ts" id="chart-period"></span>
+        </div>
+        <svg class="chart-svg" id="chart-svg" height="80"></svg>
+      </div>
+      <div id="bar-section" style="display: none">
+        <div class="section-head">
+          <span class="section-title" id="bar-label">Breakdown</span>
+        </div>
+        <div class="bars" id="bars"></div>
+      </div>
+    </div>
+
+    <div id="panel-logs" class="panel">
+      <div class="log-wrap">
+        <div class="log-header">
+          <span class="dot dot-green"></span>
+          <span class="section-title">Recent Events</span>
+        </div>
+        <div class="log-body" id="log-body"></div>
+      </div>
+    </div>
+
+    <div id="panel-raw" class="panel">
+      <div class="log-wrap">
+        <div class="log-header"><span class="section-title">Raw Payload</span></div>
+        <div
+          class="log-body"
+          id="raw-body"
+          style="white-space: pre-wrap; word-break: break-all; font-size: 10.5px; color: var(--muted)"
+        ></div>
+      </div>
+    </div>
+
+    <div class="actions" id="actions"></div>
+    <div class="status" id="status"><span class="spinner"></span> Connecting…</div>
+
+    <script>
+      ;(async () => {
+        const { App } = window
+        const $ = (id) => document.getElementById(id)
+        const COLORS = ["#7c3aed", "#10b981", "#f59e0b", "#3b82f6", "#ec4899", "#06b6d4"]
+
+        // ── tab system ──
+        const TABS = [
+          { id: "overview", label: "Overview" },
+          { id: "logs", label: "Events" },
+          { id: "raw", label: "Raw" },
+        ]
+        let activeTab = "overview"
+        const tabBar = $("tab-bar")
+        TABS.forEach((t) => {
+          const btn = document.createElement("button")
+          btn.className = "tab" + (t.id === activeTab ? " active" : "")
+          btn.textContent = t.label
+          btn.onclick = () => {
+            activeTab = t.id
+            document.querySelectorAll(".tab").forEach((b) => b.classList.remove("active"))
+            btn.classList.add("active")
+            document.querySelectorAll(".panel").forEach((p) => p.classList.remove("active"))
+            $("panel-" + t.id).classList.add("active")
+          }
+          tabBar.appendChild(btn)
+        })
+
+        // ── sparkline helper ──
+        function sparkline(el, vals, color) {
+          if (!vals?.length) return
+          const w = el.clientWidth || 120,
+            h = 32
+          el.setAttribute("viewBox", `0 0 ${w} ${h}`)
+          const mx = Math.max(...vals),
+            mn = Math.min(...vals)
+          const range = mx - mn || 1
+          const pts = vals.map((v, i) => {
+            const x = (i / (vals.length - 1)) * w
+            const y = h - ((v - mn) / range) * (h - 4) - 2
+            return `${x},${y}`
+          })
+          el.innerHTML = `
+            <defs>
+              <linearGradient id="sg${color.replace("#", "")}" x1="0" y1="0" x2="0" y2="1">
+                <stop offset="0%" stop-color="${color}" stop-opacity=".25"/>
+                <stop offset="100%" stop-color="${color}" stop-opacity="0"/>
+              </linearGradient>
+            </defs>
+            <polygon points="${pts.join(" ")} ${w},${h} 0,${h}" fill="url(#sg${color.replace("#", "")})"/>
+            <polyline points="${pts.join(" ")}" fill="none" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+          `
+        }
+
+        // ── multi-series line chart ──
+        function lineChart(svgEl, series, label) {
+          const w = svgEl.clientWidth || 400,
+            h = 80
+          svgEl.setAttribute("viewBox", `0 0 ${w} ${h}`)
+          const allVals = series.flatMap((s) => s.values)
+          const mx = Math.max(...allVals),
+            mn = Math.min(...allVals)
+          const range = mx - mn || 1
+          const len = Math.max(...series.map((s) => s.values.length))
+          let html = `<defs>`
+          series.forEach((s, si) => {
+            const c = s.color || COLORS[si % COLORS.length]
+            html += `<linearGradient id="lg${si}" x1="0" y1="0" x2="0" y2="1">
+              <stop offset="0%" stop-color="${c}" stop-opacity=".15"/>
+              <stop offset="100%" stop-color="${c}" stop-opacity="0"/>
+            </linearGradient>`
+          })
+          html += `</defs>`
+          // grid lines
+          ;[0, 0.33, 0.67, 1].forEach((f) => {
+            const y = h - f * (h - 4) - 2
+            html += `<line x1="0" y1="${y}" x2="${w}" y2="${y}" stroke="rgba(255,255,255,.05)" stroke-width="1"/>`
+          })
+          series.forEach((s, si) => {
+            const c = s.color || COLORS[si % COLORS.length]
+            const pts = s.values.map((v, i) => {
+              const x = (i / (len - 1)) * w
+              const y = h - ((v - mn) / range) * (h - 4) - 2
+              return `${x},${y}`
+            })
+            html += `<polygon points="${pts.join(" ")} ${w},${h} 0,${h}" fill="url(#lg${si})"/>`
+            html += `<polyline points="${pts.join(" ")}" fill="none" stroke="${c}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>`
+            // dot at end
+            const last = pts.at(-1).split(",")
+            html += `<circle cx="${last[0]}" cy="${last[1]}" r="3" fill="${c}"/>`
+          })
+          // legend
+          series.forEach((s, si) => {
+            const c = s.color || COLORS[si % COLORS.length]
+            const x = 6 + si * 90
+            html += `<rect x="${x}" y="3" width="8" height="3" rx="1.5" fill="${c}"/>`
+            html += `<text x="${x + 11}" y="9" font-size="9" fill="rgba(255,255,255,.45)" font-family="-apple-system,sans-serif">${s.name}</text>`
+          })
+          svgEl.innerHTML = html
+        }
+
+        // ── render ──
+        function render(data) {
+          $("status").textContent = ""
+          if (data.title) $("title").textContent = data.title
+          if (data.timestamp) $("timestamp").textContent = data.timestamp
+
+          // metrics cards
+          if (data.metrics?.length) {
+            $("metrics").innerHTML = ""
+            data.metrics.forEach((m, i) => {
+              const dir = m.change > 0 ? "up" : m.change < 0 ? "down" : "flat"
+              const arrow = m.change > 0 ? "↑" : m.change < 0 ? "↓" : "—"
+              const card = document.createElement("div")
+              card.className = "card"
+              card.innerHTML = `
+                <div class="card-top">
+                  <span class="card-label">${m.label}</span>
+                  ${m.change != null ? `<span class="card-pill pill-${dir}">${arrow} ${Math.abs(m.change)}%</span>` : ""}
+                </div>
+                <div class="card-value">${m.value}<span class="card-unit">${m.unit ?? ""}</span></div>
+                ${m.sparkline ? `<svg class="sparkline" id="spark-${i}"></svg>` : ""}
+              `
+              $("metrics").appendChild(card)
+              if (m.sparkline) {
+                setTimeout(() => sparkline($(`spark-${i}`), m.sparkline, m.change >= 0 ? "#10b981" : "#ef4444"), 50)
+              }
+            })
+          }
+
+          // multi-series line chart
+          if (data.chart?.series?.length) {
+            $("chart-wrap").style.display = ""
+            if (data.chart.label) $("chart-label").textContent = data.chart.label
+            if (data.chart.period) $("chart-period").textContent = data.chart.period
+            setTimeout(() => lineChart($("chart-svg"), data.chart.series, data.chart.label), 50)
+          }
+
+          // bar chart
+          if (data.bars?.length) {
+            $("bar-section").style.display = ""
+            if (data.barsLabel) $("bar-label").textContent = data.barsLabel
+            const max = Math.max(...data.bars.map((b) => b.value))
+            $("bars").innerHTML = data.bars
+              .map(
+                (b, i) => `
+              <div class="bar-row">
+                <div class="bar-name" title="${b.name}">${b.name}</div>
+                <div class="bar-track">
+                  <div class="bar-fill" style="width:0%;background:${COLORS[i % COLORS.length]}" data-pct="${((b.value / max) * 100).toFixed(1)}"></div>
+                </div>
+                <div class="bar-val">${b.value}${b.unit ?? ""}</div>
+              </div>
+            `,
+              )
+              .join("")
+            setTimeout(() => {
+              document.querySelectorAll(".bar-fill").forEach((el) => {
+                el.style.width = el.dataset.pct + "%"
+              })
+            }, 60)
+          }
+
+          // event log
+          if (data.events?.length) {
+            $("log-body").innerHTML = data.events
+              .map(
+                (e) => `
+              <div class="log-line">
+                <span class="log-time">${e.time}</span>
+                <span class="log-lvl lvl-${(e.level || "info").toLowerCase()}">${(e.level || "INFO").toUpperCase()}</span>
+                <span class="log-msg">${e.msg}</span>
+              </div>
+            `,
+              )
+              .join("")
+          }
+
+          // raw
+          $("raw-body").textContent = JSON.stringify(data, null, 2)
+
+          // actions
+          if (data.actions?.length) {
+            $("actions").innerHTML = ""
+            data.actions.forEach((a) => {
+              const btn = document.createElement("button")
+              btn.className = a.primary ? "primary" : ""
+              btn.textContent = a.label
+              btn.onclick = async () => {
+                btn.disabled = true
+                $("status").innerHTML =
+                  `<span class="spinner" style="display:inline-block;width:10px;height:10px;border:2px solid rgba(255,255,255,.1);border-top-color:#6366f1;border-radius:50%;animation:spin .6s linear infinite"></span> Sending…`
+                await app.callServerTool({ name: "_demo_action", arguments: { action_id: a.id } })
+                $("status").textContent = `✓ ${a.label} sent`
+                btn.disabled = false
+              }
+              $("actions").appendChild(btn)
+            })
+          }
+        }
+
+        // ── bridge ──
+        const app = new App({ name: "demo-dashboard", version: "1.0.0" }, {})
+        app.ontoolinput = (params) => {
+          $("status").textContent = "Running…"
+        }
+        app.ontoolresult = (params) => {
+          const sc = params.structuredContent
+          if (sc) render(sc)
+          else $("status").textContent = "No structured content."
+        }
+        app
+          .connect()
+          .then(() => {})
+          .catch((e) => {
+            $("status").textContent = "Connect error: " + e.message
+          })
+      })()
+    </script>
+  </body>
+</html>
diff --git a/packages/opencode/test/fixture/mcp-app-demo/server.py b/packages/opencode/test/fixture/mcp-app-demo/server.py
new file mode 100644
index 00000000000..655bc03019c
--- /dev/null
+++ b/packages/opencode/test/fixture/mcp-app-demo/server.py
@@ -0,0 +1,283 @@
+#!/usr/bin/env python3
+"""
+MCP App Demo Server
+
+A minimal MCP server that demonstrates the MCP Apps integration in opencode.
+It registers a `demo_dashboard` tool with `_meta.ui.resourceUri` pointing to
+the bundled app.html, and returns `structuredContent` with dashboard data.
+
+Run via opencode config:
+  mcp:
+    demo:
+      type: local
+      command: [python3, packages/opencode/test/fixture/mcp-app-demo/server.py]
+
+Or add OPENCODE_EXPERIMENTAL_MCP_APPS=true to your environment.
+"""
+
+import asyncio
+import json
+import re
+import sys
+from pathlib import Path
+
+from mcp import types  # type: ignore[import]
+from mcp.server import Server
+from mcp.server.stdio import stdio_server
+
+RESOURCE_URI = "ui://mcp-app-demo/dashboard-v3"
+# Aliases accepted for backward compat with cached tool parts from older sessions
+RESOURCE_URI_ALIASES = {
+    "ui://mcp-app-demo/dashboard",
+    "ui://mcp-app-demo/dashboard-v2",
+    "ui://mcp-app-demo/dashboard-v3",
+}
+HTML_PATH = Path(__file__).parent / "app.html"
+# server.py -> mcp-app-demo -> fixture -> test -> opencode -> packages -> repo root
+BUNDLE_PATH = (
+    Path(__file__).parent.parent.parent.parent.parent.parent
+    / "packages/ui/node_modules/@modelcontextprotocol/ext-apps/dist/src/app-with-deps.js"
+)
+
+server = Server("mcp-app-demo")
+
+
+@server.list_resources()
+async def list_resources() -> list[types.Resource]:
+    return [
+        types.Resource(
+            uri=RESOURCE_URI,
+            name="Demo Dashboard",
+            mimeType="text/html;profile=mcp-app",
+        )
+    ]
+
+
+@server.read_resource()
+async def read_resource(uri) -> types.TextResourceContents:  # type: ignore[override]
+    if str(uri) not in RESOURCE_URI_ALIASES:
+        raise ValueError(f"Unknown resource: {uri}")
+    html = HTML_PATH.read_text()
+    bundle = BUNDLE_PATH.read_text() if BUNDLE_PATH.exists() else ""
+    if bundle:
+        # Strip the trailing ESM export{...} block so the bundle can run as a
+        # classic (non-module) script inside a sandboxed iframe.
+        clean = re.sub(r"export\{[^}]+\};?\s*$", "", bundle)
+        # Wrap in an IIFE and expose the two classes as globals.
+        # _c = App class, O$ = PostMessageTransport class (minified names in bundle).
+        wrapped = f"(function(){{\n{clean}\nwindow.App=_c;\nwindow.PostMessageTransport=O$;\n}})();"
+        inline = f"<script>\n{wrapped}\n</script>"
+        # Inject bundle before the first <script> tag (app.html uses window.App global).
+        html = html.replace("<script>", f"{inline}\n<script>", 1)
+
+    class _RC:
+        def __init__(self, text: str, mime: str):
+            self.content = text
+            self.mime_type = mime
+
+    return [_RC(html, "text/html;profile=mcp-app")]  # type: ignore[return-value]
+
+
+@server.list_tools()
+async def list_tools() -> list[types.Tool]:
+    return [
+        types.Tool.model_validate(
+            {
+                "name": "demo_dashboard",
+                "description": (
+                    "Show an interactive dashboard. "
+                    "Returns metrics and charts as structured content rendered in the opencode UI."
+                ),
+                "inputSchema": {
+                    "type": "object",
+                    "properties": {
+                        "title": {
+                            "type": "string",
+                            "description": "Dashboard title",
+                            "default": "Demo Dashboard",
+                        },
+                        "theme": {
+                            "type": "string",
+                            "enum": ["dark", "light"],
+                            "default": "dark",
+                        },
+                    },
+                },
+                "_meta": {
+                    "ui": {
+                        "resourceUri": RESOURCE_URI,
+                        "maxHeight": 640,
+                    }
+                },
+            }
+        ),
+        types.Tool.model_validate(
+            {
+                "name": "_demo_action",
+                "description": "Handle button clicks from the demo dashboard app.",
+                "inputSchema": {
+                    "type": "object",
+                    "properties": {
+                        "action_id": {"type": "string"},
+                    },
+                    "required": ["action_id"],
+                },
+                "_meta": {
+                    "ui": {
+                        "resourceUri": RESOURCE_URI,
+                        "visibility": ["app"],
+                    }
+                },
+            }
+        ),
+    ]
+
+
+@server.call_tool()
+async def call_tool(name: str, arguments: dict):  # type: ignore[override]
+    if name == "demo_dashboard":
+        import datetime, math, random
+
+        random.seed(42)
+        title = arguments.get("title", "Production Overview")
+        now = datetime.datetime.utcnow()
+        ts = now.strftime("%H:%M:%S UTC")
+
+        # Sparklines: 20 data points
+        def _wave(base, amp, n=20):
+            return [
+                round(
+                    base
+                    + amp * math.sin(i * 0.6)
+                    + random.uniform(-amp * 0.2, amp * 0.2),
+                    1,
+                )
+                for i in range(n)
+            ]
+
+        req_spark = _wave(14200, 800)
+        lat_spark = _wave(42, 6)
+        err_spark = _wave(0.4, 0.08)
+        uptime_spark = [100.0] * 18 + [99.97, 100.0]
+
+        # Chart: 24 time buckets over the last 24 h
+        hours = [f"{(now.hour - 23 + i) % 24:02d}:00" for i in range(24)]
+        rps = [
+            round(8000 + 6000 * abs(math.sin(i * 0.4)) + random.uniform(-400, 400))
+            for i in range(24)
+        ]
+        errors = [
+            round(max(0, 30 * abs(math.sin(i * 0.7)) + random.uniform(-5, 10)))
+            for i in range(24)
+        ]
+
+        structured = {
+            "title": title,
+            "timestamp": ts,
+            "metrics": [
+                {
+                    "label": "Requests",
+                    "value": "14.2k",
+                    "unit": "/s",
+                    "change": 8.3,
+                    "sparkline": req_spark,
+                },
+                {
+                    "label": "P99 Latency",
+                    "value": "42",
+                    "unit": "ms",
+                    "change": -2.1,
+                    "sparkline": lat_spark,
+                },
+                {
+                    "label": "Error Rate",
+                    "value": "0.4",
+                    "unit": "%",
+                    "change": -0.2,
+                    "sparkline": err_spark,
+                },
+                {
+                    "label": "Uptime",
+                    "value": "99.97",
+                    "unit": "%",
+                    "change": 0,
+                    "sparkline": uptime_spark,
+                },
+            ],
+            "chart": {
+                "label": "Throughput (last 24 h)",
+                "period": "1-hour buckets",
+                "series": [
+                    {"name": "RPS", "values": rps, "color": "#7c3aed"},
+                    {"name": "Errors", "values": errors, "color": "#ef4444"},
+                ],
+            },
+            "barsLabel": "Traffic by region",
+            "bars": [
+                {"name": "us-east-1", "value": 5840, "unit": "k"},
+                {"name": "eu-west-1", "value": 3210, "unit": "k"},
+                {"name": "ap-south-1", "value": 2190, "unit": "k"},
+                {"name": "us-west-2", "value": 1750, "unit": "k"},
+                {"name": "sa-east-1", "value": 620, "unit": "k"},
+            ],
+            "events": [
+                {
+                    "time": "14:23:01",
+                    "level": "info",
+                    "msg": "Deploy v2.4.1 completed successfully",
+                },
+                {
+                    "time": "14:19:44",
+                    "level": "warn",
+                    "msg": "Memory usage at 82% on pod app-7d9f4",
+                },
+                {
+                    "time": "14:15:30",
+                    "level": "info",
+                    "msg": "Autoscale: 3 → 5 replicas (us-east-1)",
+                },
+                {
+                    "time": "14:08:12",
+                    "level": "error",
+                    "msg": "DB connection timeout — retried ok",
+                },
+                {
+                    "time": "14:01:55",
+                    "level": "info",
+                    "msg": "Certificate renewed for api.example.com",
+                },
+                {
+                    "time": "13:58:03",
+                    "level": "info",
+                    "msg": "Cache warm-up complete (hit rate 94%)",
+                },
+            ],
+            "actions": [
+                {"id": "refresh", "label": "↻ Refresh"},
+                {"id": "export", "label": "Export CSV"},
+                {"id": "rollback", "label": "Rollback"},
+                {"id": "alert", "label": "Set Alert", "primary": True},
+            ],
+        }
+
+        return (
+            [types.TextContent(type="text", text=f"Dashboard '{title}' rendered.")],
+            structured,
+        )
+
+    if name == "_demo_action":
+        action_id = arguments.get("action_id", "unknown")
+        return [types.TextContent(type="text", text=f"Action '{action_id}' received.")]
+
+    raise ValueError(f"Unknown tool: {name}")
+
+
+async def main():
+    async with stdio_server() as (read_stream, write_stream):
+        await server.run(
+            read_stream, write_stream, server.create_initialization_options()
+        )
+
+
+if __name__ == "__main__":
+    asyncio.run(main())
diff --git a/packages/opencode/test/mcp/app-tool-result.test.ts b/packages/opencode/test/mcp/app-tool-result.test.ts
new file mode 100644
index 00000000000..3a8da44ebc0
--- /dev/null
+++ b/packages/opencode/test/mcp/app-tool-result.test.ts
@@ -0,0 +1,105 @@
+import { describe, test, expect, mock } from "bun:test"
+import { Log } from "../../src/util/log"
+import { Instance } from "../../src/project/instance"
+import { tmpdir } from "../fixture/fixture"
+
+Log.init({ print: false })
+
+const structuredPayload = { dashboard: { value: 42 } }
+
+const toolsResult = {
+  tools: [
+    {
+      name: "show_chart",
+      description: "Show a chart",
+      inputSchema: { type: "object" as const, properties: {} },
+      _meta: { ui: { resourceUri: "ui://charts/chart.html" } },
+    },
+  ],
+}
+
+mock.module("@modelcontextprotocol/sdk/client/index.js", () => ({
+  Client: class MockClient {
+    async connect() {}
+    async close() {}
+    listTools() {
+      return Promise.resolve(toolsResult)
+    }
+    callTool() {
+      return Promise.resolve({
+        content: [{ type: "text", text: "chart rendered" }],
+        structuredContent: structuredPayload,
+      })
+    }
+    readResource() {
+      return Promise.resolve({
+        contents: [{ uri: "ui://charts/chart.html", mimeType: "text/html;profile=mcp-app", text: "<html/>" }],
+      })
+    }
+    setNotificationHandler() {}
+  },
+}))
+
+mock.module("@modelcontextprotocol/sdk/client/stdio.js", () => ({
+  StdioClientTransport: class MockStdio {
+    stderr = { on: () => {} }
+    async start() {}
+  },
+}))
+
+mock.module("@modelcontextprotocol/sdk/client/streamableHttp.js", () => ({
+  StreamableHTTPClientTransport: class {
+    async start() {
+      throw new Error("mock")
+    }
+  },
+}))
+
+mock.module("@modelcontextprotocol/sdk/client/sse.js", () => ({
+  SSEClientTransport: class {
+    async start() {
+      throw new Error("mock")
+    }
+  },
+}))
+
+process.env.OPENCODE_EXPERIMENTAL_MCP_APPS = "true"
+
+const { MCP } = await import("../../src/mcp/index")
+
+describe("structuredContent passthrough", () => {
+  test("tool execute wraps structuredContent into metadata", async () => {
+    await using tmp = await tmpdir()
+    await Instance.provide({
+      directory: tmp.path,
+      fn: async () => {
+        await MCP.add("charts", { type: "local", command: ["echo"] }).catch(() => {})
+        const tools = await MCP.tools()
+        const tool = tools["charts_show_chart"]
+        expect(tool).toBeDefined()
+        expect(tool.execute).toBeDefined()
+
+        const result = (await tool.execute!(
+          {},
+          { toolCallId: "call1", messages: [], abortSignal: new AbortController().signal },
+        )) as Record<string, unknown>
+
+        expect(result).toBeDefined()
+        expect(result.structuredContent).toEqual(structuredPayload)
+      },
+    })
+  })
+
+  test("toolMeta carries resourceUri for app tools", async () => {
+    await using tmp = await tmpdir()
+    await Instance.provide({
+      directory: tmp.path,
+      fn: async () => {
+        await MCP.add("charts", { type: "local", command: ["echo"] }).catch(() => {})
+        await MCP.tools()
+        const meta = MCP.toolMeta("charts_show_chart")
+        expect(meta?.resourceUri).toBe("ui://charts/chart.html")
+      },
+    })
+  })
+})
diff --git a/packages/opencode/test/mcp/apps.test.ts b/packages/opencode/test/mcp/apps.test.ts
new file mode 100644
index 00000000000..670a3579454
--- /dev/null
+++ b/packages/opencode/test/mcp/apps.test.ts
@@ -0,0 +1,200 @@
+import { test, expect, mock, beforeEach, afterEach } from "bun:test"
+
+const toolsResult = {
+  tools: [
+    {
+      name: "show_dashboard",
+      description: "Show an interactive dashboard",
+      inputSchema: { type: "object" as const, properties: {} },
+      _meta: { ui: { resourceUri: "ui://my-server/dashboard.html", maxHeight: 800 } },
+    },
+    {
+      name: "app_only_tool",
+      description: "Only callable by the app, not the model",
+      inputSchema: { type: "object" as const, properties: {} },
+      _meta: { ui: { resourceUri: "ui://my-server/app.html", visibility: ["app"] } },
+    },
+    {
+      name: "plain_tool",
+      description: "No UI resource",
+      inputSchema: { type: "object" as const, properties: {} },
+    },
+  ],
+}
+
+const resourceHtml = "<html><body>app</body></html>"
+
+let mockListTools: ReturnType<typeof mock>
+let mockReadResource: ReturnType<typeof mock>
+let mockConnect: ReturnType<typeof mock>
+
+mock.module("@modelcontextprotocol/sdk/client/index.js", () => ({
+  Client: class MockClient {
+    async connect() {}
+    async close() {}
+    listTools() {
+      return mockListTools()
+    }
+    readResource(_: { uri: string }) {
+      return mockReadResource(_)
+    }
+    setNotificationHandler() {}
+  },
+}))
+
+mock.module("@modelcontextprotocol/sdk/client/stdio.js", () => ({
+  StdioClientTransport: class MockStdio {
+    stderr = { on: () => {} }
+    async start() {}
+  },
+}))
+
+mock.module("@modelcontextprotocol/sdk/client/streamableHttp.js", () => ({
+  StreamableHTTPClientTransport: class MockStreamableHTTP {
+    async start() {
+      throw new Error("mock")
+    }
+  },
+}))
+
+mock.module("@modelcontextprotocol/sdk/client/sse.js", () => ({
+  SSEClientTransport: class MockSSE {
+    async start() {
+      throw new Error("mock")
+    }
+  },
+}))
+
+beforeEach(() => {
+  process.env.OPENCODE_EXPERIMENTAL_MCP_APPS = "true"
+  mockListTools = mock(() => Promise.resolve(toolsResult))
+  mockReadResource = mock(({ uri }: { uri: string }) =>
+    Promise.resolve({
+      contents: [{ uri, mimeType: "text/html;profile=mcp-app", text: resourceHtml }],
+    }),
+  )
+  mockConnect = mock(async () => {})
+})
+
+afterEach(() => {
+  delete process.env.OPENCODE_EXPERIMENTAL_MCP_APPS
+})
+
+const { MCP } = await import("../../src/mcp/index")
+const { Instance } = await import("../../src/project/instance")
+const { tmpdir } = await import("../fixture/fixture")
+
+test("toolMeta returns app metadata for tools with _meta.ui.resourceUri", async () => {
+  await using tmp = await tmpdir()
+  await Instance.provide({
+    directory: tmp.path,
+    fn: async () => {
+      await MCP.add("my_server", { type: "local", command: ["echo"] }).catch(() => {})
+      await MCP.tools()
+      const meta = MCP.toolMeta("my_server_show_dashboard")
+      expect(meta).toBeDefined()
+      expect(meta!.resourceUri).toBe("ui://my-server/dashboard.html")
+    },
+  })
+})
+
+test("tools() excludes app-only tools from the model's tool list", async () => {
+  await using tmp = await tmpdir()
+  await Instance.provide({
+    directory: tmp.path,
+    fn: async () => {
+      await MCP.add("my_server", { type: "local", command: ["echo"] }).catch(() => {})
+      const tools = await MCP.tools()
+      expect(tools["my_server_show_dashboard"]).toBeDefined()
+      expect(tools["my_server_plain_tool"]).toBeDefined()
+      expect(tools["my_server_app_only_tool"]).toBeUndefined()
+    },
+  })
+})
+
+test("toolMeta returns visibility for app-only tools", async () => {
+  await using tmp = await tmpdir()
+  await Instance.provide({
+    directory: tmp.path,
+    fn: async () => {
+      await MCP.add("my_server", { type: "local", command: ["echo"] }).catch(() => {})
+      await MCP.tools()
+      const meta = MCP.toolMeta("my_server_app_only_tool")
+      expect(meta).toBeDefined()
+      expect(meta!.visibility).toEqual(["app"])
+    },
+  })
+})
+
+test("apps() returns tools with ui resource metadata when flag is on", async () => {
+  await using tmp = await tmpdir()
+  await Instance.provide({
+    directory: tmp.path,
+    fn: async () => {
+      await MCP.add("my_server", { type: "local", command: ["echo"] }).catch(() => {})
+      const result = await MCP.apps()
+      expect(result["my_server_show_dashboard"]).toBeDefined()
+      expect(result["my_server_show_dashboard"].resourceUri).toBe("ui://my-server/dashboard.html")
+      expect(result["my_server_show_dashboard"].server).toBe("my_server")
+    },
+  })
+})
+
+test("apps() returns empty when flag is off", async () => {
+  process.env.OPENCODE_EXPERIMENTAL_MCP_APPS = "false"
+  await using tmp = await tmpdir()
+  await Instance.provide({
+    directory: tmp.path,
+    fn: async () => {
+      await MCP.add("my_server", { type: "local", command: ["echo"] }).catch(() => {})
+      const result = await MCP.apps()
+      expect(Object.keys(result)).toHaveLength(0)
+    },
+  })
+})
+
+test("appResource fetches and caches HTML for a ui:// URI", async () => {
+  process.env.OPENCODE_EXPERIMENTAL_MCP_APPS = "true"
+  await using tmp = await tmpdir()
+  await Instance.provide({
+    directory: tmp.path,
+    fn: async () => {
+      await MCP.add("my_server", { type: "local", command: ["echo"] }).catch(() => {})
+      const resource = await MCP.appResource("my_server", "ui://my-server/dashboard.html")
+      expect(resource).toBeDefined()
+      expect(resource!.html).toBe(resourceHtml)
+      expect(resource!.server).toBe("my_server")
+      expect(mockReadResource).toHaveBeenCalledTimes(1)
+
+      const again = await MCP.appResource("my_server", "ui://my-server/dashboard.html")
+      expect(again!.html).toBe(resourceHtml)
+      expect(mockReadResource).toHaveBeenCalledTimes(1)
+    },
+  })
+})
+
+test("appResource returns undefined when flag is off", async () => {
+  process.env.OPENCODE_EXPERIMENTAL_MCP_APPS = "false"
+  await using tmp = await tmpdir()
+  await Instance.provide({
+    directory: tmp.path,
+    fn: async () => {
+      const resource = await MCP.appResource("my_server", "ui://my-server/dashboard.html")
+      expect(resource).toBeUndefined()
+    },
+  })
+})
+
+test("toolMeta returns maxHeight when declared in _meta.ui", async () => {
+  await using tmp = await tmpdir()
+  await Instance.provide({
+    directory: tmp.path,
+    fn: async () => {
+      await MCP.add("my_server", { type: "local", command: ["echo"] }).catch(() => {})
+      await MCP.tools()
+      const meta = MCP.toolMeta("my_server_show_dashboard")
+      expect(meta).toBeDefined()
+      expect(meta!.maxHeight).toBe(800)
+    },
+  })
+})
diff --git a/packages/opencode/test/server/mcp-apps.test.ts b/packages/opencode/test/server/mcp-apps.test.ts
new file mode 100644
index 00000000000..f31b215661f
--- /dev/null
+++ b/packages/opencode/test/server/mcp-apps.test.ts
@@ -0,0 +1,93 @@
+import { describe, expect, test } from "bun:test"
+import path from "path"
+import { Log } from "../../src/util/log"
+import { Instance } from "../../src/project/instance"
+import { Server } from "../../src/server/server"
+import { Flag } from "../../src/flag/flag"
+
+const projectRoot = path.join(__dirname, "../..")
+Log.init({ print: false })
+
+function authHeaders(): Record<string, string> {
+  if (!Flag.OPENCODE_SERVER_PASSWORD) return {}
+  const creds = btoa(`opencode:${Flag.OPENCODE_SERVER_PASSWORD}`)
+  return { Authorization: `Basic ${creds}` }
+}
+
+async function req(app: ReturnType<typeof Server.App>, path: string, init?: RequestInit) {
+  return app.request(path, {
+    ...init,
+    headers: { ...authHeaders(), ...(init?.headers as Record<string, string> | undefined) },
+  })
+}
+
+describe("GET /experimental/mcp-app", () => {
+  test("returns 200 with empty object when no MCP apps connected", async () => {
+    await Instance.provide({
+      directory: projectRoot,
+      fn: async () => {
+        const app = Server.App()
+        const res = await req(app, "/experimental/mcp-app")
+        expect(res.status).toBe(200)
+        const body = await res.json()
+        expect(typeof body).toBe("object")
+      },
+    })
+  })
+})
+
+describe("GET /experimental/mcp-app/resource", () => {
+  test("returns 400 when no matching resource found", async () => {
+    await Instance.provide({
+      directory: projectRoot,
+      fn: async () => {
+        const app = Server.App()
+        const res = await req(app, "/experimental/mcp-app/resource?uri=ui%3A%2F%2Ftest%2Fapp.html&server=nonexistent")
+        expect(res.status).toBe(400)
+      },
+    })
+  })
+
+  test("returns 400 when query params are missing", async () => {
+    await Instance.provide({
+      directory: projectRoot,
+      fn: async () => {
+        const app = Server.App()
+        const res = await req(app, "/experimental/mcp-app/resource")
+        expect(res.status).toBe(400)
+      },
+    })
+  })
+})
+
+describe("POST /experimental/mcp-app/tool-call", () => {
+  test("returns 400 when server is not found", async () => {
+    await Instance.provide({
+      directory: projectRoot,
+      fn: async () => {
+        const app = Server.App()
+        const res = await req(app, "/experimental/mcp-app/tool-call", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ server: "nonexistent", name: "tool" }),
+        })
+        expect(res.status).toBe(400)
+      },
+    })
+  })
+
+  test("returns 400 when body is invalid", async () => {
+    await Instance.provide({
+      directory: projectRoot,
+      fn: async () => {
+        const app = Server.App()
+        const res = await req(app, "/experimental/mcp-app/tool-call", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ invalid: "body" }),
+        })
+        expect(res.status).toBe(400)
+      },
+    })
+  })
+})
diff --git a/packages/sdk/js/src/v2/gen/sdk.gen.ts b/packages/sdk/js/src/v2/gen/sdk.gen.ts
index 22dcfec3553..c1bc011dda5 100644
--- a/packages/sdk/js/src/v2/gen/sdk.gen.ts
+++ b/packages/sdk/js/src/v2/gen/sdk.gen.ts
@@ -24,6 +24,11 @@ import type {
   EventTuiPromptAppend,
   EventTuiSessionSelect,
   EventTuiToastShow,
+  ExperimentalMcpAppListResponses,
+  ExperimentalMcpAppResourceErrors,
+  ExperimentalMcpAppResourceResponses,
+  ExperimentalMcpAppToolCallErrors,
+  ExperimentalMcpAppToolCallResponses,
   ExperimentalResourceListResponses,
   ExperimentalSessionListResponses,
   ExperimentalWorkspaceCreateErrors,
@@ -1084,6 +1089,125 @@ export class Resource extends HeyApiClient {
   }
 }
 
+export class McpApp extends HeyApiClient {
+  /**
+   * List MCP App tools
+   *
+   * List all MCP tools that declare a UI resource via _meta.ui.resourceUri.
+   */
+  public list<ThrowOnError extends boolean = false>(
+    parameters?: {
+      directory?: string
+      workspace?: string
+    },
+    options?: Options<never, ThrowOnError>,
+  ) {
+    const params = buildClientParams(
+      [parameters],
+      [
+        {
+          args: [
+            { in: "query", key: "directory" },
+            { in: "query", key: "workspace" },
+          ],
+        },
+      ],
+    )
+    return (options?.client ?? this.client).get<ExperimentalMcpAppListResponses, unknown, ThrowOnError>({
+      url: "/experimental/mcp-app",
+      ...options,
+      ...params,
+    })
+  }
+
+  /**
+   * Get MCP App HTML resource
+   *
+   * Fetch and cache the HTML bundle for a ui:// resource URI.
+   */
+  public resource<ThrowOnError extends boolean = false>(
+    parameters: {
+      directory?: string
+      workspace?: string
+      uri: string
+      server: string
+      force?: boolean
+    },
+    options?: Options<never, ThrowOnError>,
+  ) {
+    const params = buildClientParams(
+      [parameters],
+      [
+        {
+          args: [
+            { in: "query", key: "directory" },
+            { in: "query", key: "workspace" },
+            { in: "query", key: "uri" },
+            { in: "query", key: "server" },
+            { in: "query", key: "force" },
+          ],
+        },
+      ],
+    )
+    return (options?.client ?? this.client).get<
+      ExperimentalMcpAppResourceResponses,
+      ExperimentalMcpAppResourceErrors,
+      ThrowOnError
+    >({
+      url: "/experimental/mcp-app/resource",
+      ...options,
+      ...params,
+    })
+  }
+
+  /**
+   * Proxy tool call from MCP App iframe
+   *
+   * Forward a tools/call request from an MCP App iframe to the originating MCP server.
+   */
+  public toolCall<ThrowOnError extends boolean = false>(
+    parameters?: {
+      directory?: string
+      workspace?: string
+      server?: string
+      name?: string
+      arguments?: {
+        [key: string]: unknown
+      }
+    },
+    options?: Options<never, ThrowOnError>,
+  ) {
+    const params = buildClientParams(
+      [parameters],
+      [
+        {
+          args: [
+            { in: "query", key: "directory" },
+            { in: "query", key: "workspace" },
+            { in: "body", key: "server" },
+            { in: "body", key: "name" },
+            { in: "body", key: "arguments" },
+          ],
+        },
+      ],
+    )
+    return (options?.client ?? this.client).post<
+      ExperimentalMcpAppToolCallResponses,
+      ExperimentalMcpAppToolCallErrors,
+      ThrowOnError
+    >({
+      url: "/experimental/mcp-app/tool-call",
+      ...options,
+      ...params,
+      headers: {
+        "Content-Type": "application/json",
+        ...options?.headers,
+        ...params.headers,
+      },
+    })
+  }
+}
+
 export class Experimental extends HeyApiClient {
   private _workspace?: Workspace
   get workspace(): Workspace {
@@ -1099,6 +1223,11 @@ export class Experimental extends HeyApiClient {
   get resource(): Resource {
     return (this._resource ??= new Resource({ client: this.client }))
   }
+
+  private _mcpApp?: McpApp
+  get mcpApp(): McpApp {
+    return (this._mcpApp ??= new McpApp({ client: this.client }))
+  }
 }
 
 export class Worktree extends HeyApiClient {
diff --git a/packages/sdk/js/src/v2/gen/types.gen.ts b/packages/sdk/js/src/v2/gen/types.gen.ts
index 71e075b3916..ca504dd3bf7 100644
--- a/packages/sdk/js/src/v2/gen/types.gen.ts
+++ b/packages/sdk/js/src/v2/gen/types.gen.ts
@@ -1711,6 +1711,18 @@ export type McpResource = {
   client: string
 }
 
+export type McpAppToolEntry = {
+  resourceUri: string
+  visibility?: Array<"model" | "app">
+  maxHeight?: number
+  server: string
+}
+
+export type McpAppResource = {
+  html: string
+  server: string
+}
+
 export type TextPartInput = {
   id?: string
   type: "text"
@@ -2721,6 +2733,96 @@ export type ExperimentalResourceListResponses = {
 export type ExperimentalResourceListResponse =
   ExperimentalResourceListResponses[keyof ExperimentalResourceListResponses]
 
+export type ExperimentalMcpAppListData = {
+  body?: never
+  path?: never
+  query?: {
+    directory?: string
+    workspace?: string
+  }
+  url: "/experimental/mcp-app"
+}
+
+export type ExperimentalMcpAppListResponses = {
+  /**
+   * MCP App tools
+   */
+  200: {
+    [key: string]: McpAppToolEntry
+  }
+}
+
+export type ExperimentalMcpAppListResponse = ExperimentalMcpAppListResponses[keyof ExperimentalMcpAppListResponses]
+
+export type ExperimentalMcpAppResourceData = {
+  body?: never
+  path?: never
+  query: {
+    directory?: string
+    workspace?: string
+    uri: string
+    server: string
+    force?: boolean
+  }
+  url: "/experimental/mcp-app/resource"
+}
+
+export type ExperimentalMcpAppResourceErrors = {
+  /**
+   * Bad request
+   */
+  400: BadRequestError
+}
+
+export type ExperimentalMcpAppResourceError = ExperimentalMcpAppResourceErrors[keyof ExperimentalMcpAppResourceErrors]
+
+export type ExperimentalMcpAppResourceResponses = {
+  /**
+   * HTML bundle
+   */
+  200: McpAppResource
+}
+
+export type ExperimentalMcpAppResourceResponse =
+  ExperimentalMcpAppResourceResponses[keyof ExperimentalMcpAppResourceResponses]
+
+export type ExperimentalMcpAppToolCallData = {
+  body?: {
+    server: string
+    name: string
+    arguments?: {
+      [key: string]: unknown
+    }
+  }
+  path?: never
+  query?: {
+    directory?: string
+    workspace?: string
+  }
+  url: "/experimental/mcp-app/tool-call"
+}
+
+export type ExperimentalMcpAppToolCallErrors = {
+  /**
+   * Bad request
+   */
+  400: BadRequestError
+}
+
+export type ExperimentalMcpAppToolCallError = ExperimentalMcpAppToolCallErrors[keyof ExperimentalMcpAppToolCallErrors]
+
+export type ExperimentalMcpAppToolCallResponses = {
+  /**
+   * Tool call result
+   */
+  200: {
+    [key: string]: unknown
+  }
+}
+
+export type ExperimentalMcpAppToolCallResponse =
+  ExperimentalMcpAppToolCallResponses[keyof ExperimentalMcpAppToolCallResponses]
+
 export type SessionListData = {
   body?: never
   path?: never
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 664fd9752e4..2b148c78416 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -43,6 +43,7 @@
   },
   "dependencies": {
     "@kobalte/core": "catalog:",
+    "@modelcontextprotocol/ext-apps": "^1.1.2",
     "@opencode-ai/sdk": "workspace:*",
     "@opencode-ai/util": "workspace:*",
     "@pierre/diffs": "catalog:",
diff --git a/packages/ui/src/components/message-part.tsx b/packages/ui/src/components/message-part.tsx
index be99f36fd2c..d204abe7a5e 100644
--- a/packages/ui/src/components/message-part.tsx
+++ b/packages/ui/src/components/message-part.tsx
@@ -1,4 +1,17 @@
-import { Component, createEffect, createMemo, createSignal, For, Match, on, Show, Switch, type JSX } from "solid-js"
+import {
+  Component,
+  createEffect,
+  createMemo,
+  createResource,
+  createSignal,
+  For,
+  Match,
+  on,
+  onCleanup,
+  Show,
+  Switch,
+  type JSX,
+} from "solid-js"
 import stripAnsi from "strip-ansi"
 import { createStore } from "solid-js/store"
 import { Dynamic } from "solid-js/web"
@@ -35,6 +48,7 @@ import { checksum } from "@opencode-ai/util/encode"
 import { Tooltip } from "./tooltip"
 import { IconButton } from "./icon-button"
 import { TextShimmer } from "./text-shimmer"
+import { AppBridge, PostMessageTransport } from "@modelcontextprotocol/ext-apps/app-bridge"
 import { list } from "./text-utils"
 import { GrowBox } from "./grow-box"
 import { COLLAPSIBLE_SPRING } from "./motion"
@@ -967,7 +981,10 @@ PART_MAPPING["tool"] = function ToolPartDisplay(props) {
   // @ts-expect-error
   const partMetadata = () => part.state?.metadata ?? emptyMetadata
 
-  const render = createMemo(() => ToolRegistry.render(part.tool) ?? GenericTool)
+  const render = createMemo(() => {
+    if (partMetadata()?.resourceUri) return ToolRegistry.render("__mcp_app__") ?? GenericTool
+    return ToolRegistry.render(part.tool) ?? GenericTool
+  })
 
   return (
     <Show when={!hideQuestion()}>
@@ -2112,3 +2129,101 @@ ToolRegistry.register({
     )
   },
 })
+
+ToolRegistry.register({
+  name: "__mcp_app__",
+  render(props) {
+    const data = useData()
+    const resourceUri = () => props.metadata?.resourceUri as string | undefined
+    const server = () => props.metadata?.server as string | undefined
+
+    const [html] = createResource(
+      () => {
+        const uri = resourceUri()
+        const srv = server()
+        if (!uri || !srv || !data.fetchAppResource) return undefined
+        return { uri, srv }
+      },
+      (key) => data.fetchAppResource!(key.srv, key.uri).then((r) => r?.html),
+    )
+
+    let iframeRef: HTMLIFrameElement | undefined
+    let cleanup: (() => void) | undefined
+    const [height, setHeight] = createSignal(0)
+
+    const connectBridge = (frame: HTMLIFrameElement) => {
+      if (cleanup) cleanup()
+      const cap = (props.metadata?.maxHeight as number | undefined) ?? 640
+      const bridge = new AppBridge(null, { name: "opencode", version: "0.0.0" }, { serverTools: {}, logging: {} })
+
+      bridge.oninitialized = () => {
+        if (props.input && Object.keys(props.input).length > 0) {
+          bridge.sendToolInput({ arguments: props.input })
+        }
+        const sc = props.metadata?.structuredContent
+        if (sc) {
+          bridge.sendToolResult({
+            content: [{ type: "text", text: props.output ?? "" }],
+            structuredContent: JSON.parse(JSON.stringify(sc)),
+          })
+        }
+      }
+
+      bridge.oncalltool = async (params: { name: string; arguments?: Record<string, unknown> }) => {
+        const srv = server()
+        if (!srv) return { content: [] }
+        const res = await fetch(new URL("/experimental/mcp-app/tool-call", window.location.origin).href, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ server: srv, name: params.name, arguments: params.arguments ?? {} }),
+        }).catch(() => undefined)
+        if (!res?.ok) return { content: [] }
+        return res.json()
+      }
+
+      bridge.onsizechange = ({ height: h }) => {
+        if (h != null) setHeight(Math.min(h, cap))
+      }
+
+      const transport = new PostMessageTransport(frame.contentWindow!, frame.contentWindow!)
+      bridge.connect(transport).catch(() => {})
+
+      cleanup = () => {
+        bridge
+          .teardownResource({})
+          .catch(() => {})
+          .finally(() => bridge.close())
+      }
+    }
+
+    onCleanup(() => cleanup?.())
+
+    const trigger = () => (
+      <div data-slot="basic-tool-tool-info-structured">
+        <div data-slot="basic-tool-tool-info-main">
+          <span data-slot="basic-tool-tool-title">{props.tool}</span>
+        </div>
+      </div>
+    )
+
+    return (
+      <ToolCall variant="panel" icon="code" status={props.status} trigger={trigger()} defaultOpen>
+        <Show when={html()}>
+          <div style={{ height: `${height()}px`, overflow: "hidden" }}>
+            <iframe
+              ref={iframeRef}
+              srcdoc={html()}
+              sandbox="allow-scripts allow-same-origin allow-forms"
+              style={{ width: "100%", height: "100%", border: "none", overflow: "auto" }}
+              onLoad={() => {
+                if (iframeRef) {
+                  connectBridge(iframeRef)
+                }
+              }}
+            />
+          </div>
+        </Show>
+      </ToolCall>
+    )
+  },
+})
diff --git a/packages/ui/src/context/data.tsx b/packages/ui/src/context/data.tsx
index e116199eb23..07a249cf1ca 100644
--- a/packages/ui/src/context/data.tsx
+++ b/packages/ui/src/context/data.tsx
@@ -26,6 +26,8 @@ export type NavigateToSessionFn = (sessionID: string) => void
 
 export type SessionHrefFn = (sessionID: string) => string
 
+export type FetchAppResourceFn = (server: string, uri: string) => Promise<{ html: string } | undefined>
+
 export const { use: useData, provider: DataProvider } = createSimpleContext({
   name: "Data",
   init: (props: {
@@ -33,6 +35,7 @@ export const { use: useData, provider: DataProvider } = createSimpleContext({
     directory: string
     onNavigateToSession?: NavigateToSessionFn
     onSessionHref?: SessionHrefFn
+    onFetchAppResource?: FetchAppResourceFn
   }) => {
     return {
       get store() {
@@ -43,6 +46,7 @@ export const { use: useData, provider: DataProvider } = createSimpleContext({
       },
       navigateToSession: props.onNavigateToSession,
       sessionHref: props.onSessionHref,
+      fetchAppResource: props.onFetchAppResource,
     }
   },
 })