Render MCP apps inline in Goose2

Signed-off-by: Andrew Harvard <aharvard@squareup.com>

Author: aharvard

crates/goose-cli/src/cli.rs

@@ -1086,7 +1086,9 @@ async fn handle_serve_command(host: String, port: u16, builtins: Vec<String>) ->
         config_dir: Paths::config_dir(),
         goose_platform: GoosePlatform::GooseCli,
     }));
-    let router = create_router(server);
+    let secret_key =
+        std::env::var("GOOSE_SERVER__SECRET_KEY").unwrap_or_else(|_| "goose-acp-local".into());
+    let router = create_router(server, secret_key);
 
     let addr: SocketAddr = format!("{}:{}", host, port).parse()?;
     info!("Starting ACP server on {}", addr);

crates/goose-sdk/src/custom_requests.rs

@@ -74,6 +74,31 @@ pub struct ReadResourceResponse {
     pub result: serde_json::Value,
 }
 
+/// Call a tool from an extension.
+#[derive(Debug, Default, Clone, Serialize, Deserialize, JsonSchema, JsonRpcRequest)]
+#[request(method = "_goose/tool/call", response = GooseToolCallResponse)]
+#[serde(rename_all = "camelCase")]
+pub struct GooseToolCallRequest {
+    pub session_id: String,
+    pub name: String,
+    #[serde(default)]
+    pub arguments: serde_json::Value,
+}
+
+/// Tool call response.
+#[derive(Debug, Default, Clone, Serialize, Deserialize, JsonSchema, JsonRpcResponse)]
+#[serde(rename_all = "camelCase")]
+pub struct GooseToolCallResponse {
+    #[serde(default)]
+    pub content: Vec<serde_json::Value>,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub structured_content: Option<serde_json::Value>,
+    pub is_error: bool,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    #[serde(rename = "_meta")]
+    pub meta: Option<serde_json::Value>,
+}
+
 /// Update the working directory for a session.
 #[derive(Debug, Default, Clone, Serialize, Deserialize, JsonSchema, JsonRpcRequest)]
 #[request(method = "_goose/working_dir/update", response = EmptyResponse)]

crates/goose-server/src/routes/templates/mcp_app_proxy.html

@@ -39,12 +39,66 @@
          */
         function getProxyParams() {
           var params = new URLSearchParams(window.location.search);
+          var colorScheme = params.get('color_scheme');
           return {
             secret: params.get('secret') || '',
-            baseUrl: window.location.origin
+            baseUrl: window.location.origin,
+            colorScheme: colorScheme === 'light' || colorScheme === 'dark' ? colorScheme : null
           };
         }
 
+        function applyProxyColorScheme(nextColorScheme) {
+          var proxyParams = getProxyParams();
+          var colorScheme = nextColorScheme || proxyParams.colorScheme || 'light dark';
+          document.documentElement.style.colorScheme = colorScheme;
+          document.body.style.colorScheme = colorScheme;
+          if (guestIframe) {
+            guestIframe.style.setProperty('color-scheme', colorScheme);
+          }
+        }
+
+        function createColorSchemePrelude(colorScheme) {
+          var hostColorScheme = colorScheme === 'dark' ? 'dark' : 'light';
+          var matchMediaScript = [
+            '<scr' + 'ipt>',
+            '(function(){',
+            'var nativeMatchMedia=window.matchMedia&&window.matchMedia.bind(window);',
+            'function normalizeColorScheme(value){return value==="dark"?"dark":"light";}',
+            'function setHostColorScheme(value){window.__mcpHostColorScheme=normalizeColorScheme(value);document.documentElement.style.colorScheme=window.__mcpHostColorScheme;if(document.body){document.body.style.colorScheme=window.__mcpHostColorScheme;}var meta=document.querySelector("meta[name=\\"color-scheme\\"]");if(meta){meta.setAttribute("content",window.__mcpHostColorScheme);}}',
+            'setHostColorScheme(' + JSON.stringify(hostColorScheme) + ');',
+            'document.addEventListener("DOMContentLoaded",function(){setHostColorScheme(window.__mcpHostColorScheme);});',
+            'if(nativeMatchMedia){window.matchMedia=function(query){var normalized=String(query).replace(/\\s+/g," ").trim().toLowerCase();var isDark=normalized==="(prefers-color-scheme: dark)";var isLight=normalized==="(prefers-color-scheme: light)";if(!isDark&&!isLight){return nativeMatchMedia(query);}return {matches:isDark?window.__mcpHostColorScheme==="dark":window.__mcpHostColorScheme==="light",media:String(query),onchange:null,addListener:function(){},removeListener:function(){},addEventListener:function(){},removeEventListener:function(){},dispatchEvent:function(){return false;}};};}',
+            'window.addEventListener("message",function(event){var data=event.data;if(!data||data.method!=="ui/notifications/host-context-changed"){return;}var theme=data.params&&data.params.theme;if(theme==="light"||theme==="dark"){setHostColorScheme(theme);}});',
+            '})();',
+            '</scr' + 'ipt>'
+          ].join('');
+
+          return '<meta name="color-scheme" content="' + hostColorScheme + '"><style id="mcp-app-host-color-scheme">:root{color-scheme:' + hostColorScheme + ';}html,body{background-color:transparent;}</style>' + matchMediaScript;
+        }
+
+        function injectGuestColorScheme(html, colorScheme) {
+          if (!colorScheme) {
+            return html;
+          }
+
+          var prelude = createColorSchemePrelude(colorScheme);
+          var cleanedHtml = html.replace(/<meta\s+[^>]*name\s*=\s*["']color-scheme["'][^>]*>/gi, '');
+
+          if (/<head\b[^>]*>/i.test(cleanedHtml)) {
+            return cleanedHtml.replace(/<head\b[^>]*>/i, function (match) {
+              return match + prelude;
+            });
+          }
+
+          if (/<html\b[^>]*>/i.test(cleanedHtml)) {
+            return cleanedHtml.replace(/<html\b[^>]*>/i, function (match) {
+              return match + '<head>' + prelude + '</head>';
+            });
+          }
+
+          return prelude + cleanedHtml;
+        }
+
         /**
          * Store guest HTML on the server and get a nonce for retrieval.
          * This allows the guest iframe to load from a real HTTPS URL
@@ -93,20 +147,22 @@
             guestIframe.setAttribute('allow', allowList.join('; '));
           }
 
-          guestIframe.style.cssText = 'width:100%; height:100%; border:none;';
+          var proxyParams = getProxyParams();
+          var colorScheme = proxyParams.colorScheme || 'light dark';
+          guestIframe.style.cssText = 'width:100%; height:100%; border:none; background-color:transparent; color-scheme:' + colorScheme + ';';
+          var guestHtml = injectGuestColorScheme(html, proxyParams.colorScheme);
 
           // Store the HTML server-side and load via real URL.
           // This gives the guest iframe a real https:// URL instead of about:srcdoc,
           // which is required by SDKs (like Square Web Payments) that check
           // window.location.protocol for secure context verification.
           try {
-            var nonce = await storeGuestHtml(html);
-            var proxyParams = getProxyParams();
+            var nonce = await storeGuestHtml(guestHtml);
             guestIframe.src = proxyParams.baseUrl + '/mcp-app-guest?secret=' + encodeURIComponent(proxyParams.secret) + '&nonce=' + encodeURIComponent(nonce);
           } catch (e) {
             // Fallback to srcdoc if the store endpoint is not available
             console.warn('Failed to use /mcp-app-guest endpoint, falling back to srcdoc:', e);
-            guestIframe.srcdoc = html;
+            guestIframe.srcdoc = guestHtml;
           }
 
           document
@@ -129,6 +185,13 @@
 
           var method = data.method;
 
+          if (method === 'ui/notifications/host-context-changed') {
+            var theme = data.params && data.params.theme;
+            if (theme === 'light' || theme === 'dark') {
+              applyProxyColorScheme(theme);
+            }
+          }
+
           // Handle sandbox-specific notifications from Host
           if (method === 'ui/notifications/sandbox-resource-ready') {
             var params = data.params || {};
@@ -181,6 +244,7 @@
 
         // Set up message listener
         window.addEventListener('message', handleMessage);
+        applyProxyColorScheme();
 
         // Notify Host that Sandbox is ready
         window

crates/goose/acp-meta.json

@@ -20,6 +20,11 @@
       "requestType": "ReadResourceRequest",
       "responseType": "ReadResourceResponse"
     },
+    {
+      "method": "_goose/tool/call",
+      "requestType": "GooseToolCallRequest",
+      "responseType": "GooseToolCallResponse"
+    },
     {
       "method": "_goose/working_dir/update",
       "requestType": "UpdateWorkingDirRequest",

crates/goose/acp-schema.json

@@ -107,6 +107,48 @@
       "x-side": "agent",
       "x-method": "_goose/resource/read"
     },
+    "GooseToolCallRequest": {
+      "type": "object",
+      "properties": {
+        "sessionId": {
+          "type": "string"
+        },
+        "name": {
+          "type": "string"
+        },
+        "arguments": {
+          "default": null
+        }
+      },
+      "required": [
+        "sessionId",
+        "name"
+      ],
+      "description": "Call a tool from an extension.",
+      "x-side": "agent",
+      "x-method": "_goose/tool/call"
+    },
+    "GooseToolCallResponse": {
+      "type": "object",
+      "properties": {
+        "content": {
+          "type": "array",
+          "items": {},
+          "default": []
+        },
+        "structuredContent": {},
+        "isError": {
+          "type": "boolean"
+        },
+        "_meta": {}
+      },
+      "required": [
+        "isError"
+      ],
+      "description": "Tool call response.",
+      "x-side": "agent",
+      "x-method": "_goose/tool/call"
+    },
     "UpdateWorkingDirRequest": {
       "type": "object",
       "properties": {
@@ -1610,6 +1652,15 @@
                   "description": "Params for _goose/resource/read",
                   "title": "ReadResourceRequest"
                 },
+                {
+                  "allOf": [
+                    {
+                      "$ref": "#/$defs/GooseToolCallRequest"
+                    }
+                  ],
+                  "description": "Params for _goose/tool/call",
+                  "title": "GooseToolCallRequest"
+                },
                 {
                   "allOf": [
                     {
@@ -2015,6 +2066,14 @@
                       ],
                       "title": "ReadResourceResponse"
                     },
+                    {
+                      "allOf": [
+                        {
+                          "$ref": "#/$defs/GooseToolCallResponse"
+                        }
+                      ],
+                      "title": "GooseToolCallResponse"
+                    },
                     {
                       "allOf": [
                         {