From be9ba7f137b0f6e163be3c0de745eafa32b18ce8 Mon Sep 17 00:00:00 2001
From: Rizel Scarlett <rizel@squareup.com>
Date: Thu, 8 Jan 2026 15:26:47 -0500
Subject: [PATCH] Update MCP apps tutorial: fix _meta structure, version
 prereq, and collapse code blocks

---
 documentation/docs/tutorials/building-mcp-apps.md | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/documentation/docs/tutorials/building-mcp-apps.md b/documentation/docs/tutorials/building-mcp-apps.md
index 0afb17a8c183..8780b2d59ab8 100644
--- a/documentation/docs/tutorials/building-mcp-apps.md
+++ b/documentation/docs/tutorials/building-mcp-apps.md
@@ -17,7 +17,7 @@ In this tutorial, you will build an MCP App using JavaScript and Node.js. The ap
 
 :::info Prerequisites
 - Node.js 18+ installed
-- goose Desktop application
+- goose Desktop 1.19.1+ installed
 :::
 
 ---
@@ -62,6 +62,9 @@ Update your `package.json` to use ES modules by adding `"type": "module"`:
 
 Create `server.js` - this is the MCP server that loads and serves your HTML:
 
+<details>
+<summary>server.js</summary>
+
 ```javascript
 #!/usr/bin/env node
 
@@ -126,7 +129,9 @@ server.setRequestHandler(CallToolRequestSchema, async (request) => {
       ],
       // This metadata tells goose to render the MCP App
       _meta: {
-        "ui/resourceUri": "ui://mcp-app-demo/main",
+        ui: {
+          resourceUri: "ui://mcp-app-demo/main",
+        },
       },
     };
   }
@@ -186,6 +191,8 @@ async function main() {
 main().catch(console.error);
 ```
 
+</details>
+
 ---
 
 ## Step 3: Create the App HTML