mcp-server-value-picker 1.0.3 → 1.0.5

package/README.md

@@ -0,0 +1,450 @@
+# Value Picker Server
+
+A **debug/test MCP server** for validating that values selected in an MCP App UI are correctly passed to the AI model via `ui/update-model-context`. This package tests the complete View ↔ Host ↔ Model communication flow defined in [SEP-1865](../../specification/2026-01-26/apps.mdx).
+
+The tool explicitly tells the AI model that this is a test — the model should simply confirm which value it received, not analyze or elaborate on the selection.
+
+## Purpose
+
+This example validates MCP Apps protocol features across all three layers:
+
+- **Server**: Tool registration, UI resource serving, `structuredContent` data passing
+- **Host**: Context injection, message proxying, lifecycle notifications
+- **View**: Theme handling, safe areas, tool result rendering, model context updates
+
+---
+
+## Server-Side Features Tested
+
+### Tool Registration with UI Metadata
+
+Uses `registerAppTool()` to associate a tool with a UI resource via `_meta.ui.resourceUri`:
+
+```typescript
+// From server.ts
+registerAppTool(server, "pick_value", {
+  title: "Pick a Value",
+  description: "DEBUG/TEST TOOL: Tests MCP Apps communication between UI and model. The user picks a value in the UI, and you must confirm whether you received it. This validates that ui/update-model-context is working correctly. Do not treat this as a real decision — just report what value you received.",
+  inputSchema: {},
+  outputSchema: z.object({
+    values: z.array(z.object({
+      id: z.string(),
+      label: z.string(),
+      description: z.string(),
+    })),
+  }),
+  _meta: { ui: { resourceUri: "ui://pick-value/mcp-app.html" } },
+}, async () => { /* handler */ });
+```
+
+**Spec Reference** ([Resource Discovery](../../specification/2026-01-26/apps.mdx#resource-discovery)):
+```typescript
+interface Tool {
+  _meta?: {
+    ui?: {
+      resourceUri?: string;  // URI of UI resource for rendering
+      visibility?: Array<"model" | "app">;
+    };
+  };
+}
+```
+
+### UI Resource Registration
+
+Uses `registerAppResource()` to serve HTML content with the required MIME type:
+
+```typescript
+// From server.ts
+registerAppResource(server, resourceUri, resourceUri,
+  { mimeType: RESOURCE_MIME_TYPE },  // "text/html;profile=mcp-app"
+  async () => ({
+    contents: [{ uri: resourceUri, mimeType: RESOURCE_MIME_TYPE, text: html }],
+  })
+);
+```
+
+**Spec Reference** ([UI Resource Format](../../specification/2026-01-26/apps.mdx#ui-resource-format)):
+> `mimeType` MUST be `text/html;profile=mcp-app`
+
+### Dual Content Model (`content` + `structuredContent`)
+
+Tool returns both model-facing text and UI-facing structured data:
+
+```typescript
+// From server.ts
+return {
+  content: [{
+    type: "text",
+    text: `[MCP Apps Test] This is a debug tool for testing value communication...
+Your job: Simply report back the value you received. This tests whether the MCP Apps context injection is working. Do not provide detailed analysis of the values — just confirm what was selected.`,
+  }],
+  structuredContent: {
+    values: VALUES,  // Array of {id, label, description}
+    instruction: "Wait for the user to select a value via the UI.",
+  },
+};
+```
+
+**Spec Reference** ([Data Passing](../../specification/2026-01-26/apps.mdx#data-passing)):
+> - `content`: Text representation for model context and text-only hosts
+> - `structuredContent`: Structured data optimized for UI rendering (not added to model context)
+
+### Transport Modes
+
+Supports both STDIO and Streamable HTTP transports with auto-detection:
+
+```typescript
+// From main.ts
+function resolveTransport(): "stdio" | "http" {
+  if (process.argv.includes("--stdio")) return "stdio";
+  if (process.argv.includes("--http")) return "http";
+  return process.stdin.isTTY ? "http" : "stdio";
+}
+```
+
+---
+
+## View-Side Features Tested
+
+### App Initialization & Connection
+
+Uses the `App` class with `PostMessageTransport` to connect to the Host:
+
+```typescript
+// From src/mcp-app.ts
+const app = new App({ name: "Value Picker", version: "1.0.0" });
+await app.connect();
+```
+
+**Spec Reference** ([Transport Layer](../../specification/2026-01-26/apps.mdx#transport-layer)):
+```typescript
+const transport = new MessageTransport(window.parent);
+const client = new Client({ name: "ui-view", version: "1.0.0" });
+await client.connect(transport);
+```
+
+### Host Context Handling
+
+Retrieves and responds to host context after connection:
+
+```typescript
+// From src/mcp-app.ts
+app.connect().then(() => {
+  const ctx = app.getHostContext();
+  if (ctx) handleHostContextChanged(ctx);
+});
+
+app.onhostcontextchanged = handleHostContextChanged;
+```
+
+**Spec Reference** ([Host Context in McpUiInitializeResult](../../specification/2026-01-26/apps.mdx#host-context-in-mcpuiinitializeresult)):
+```typescript
+interface HostContext {
+  theme?: "light" | "dark";
+  styles?: { variables?: Record<string, string>; css?: { fonts?: string } };
+  safeAreaInsets?: { top: number; right: number; bottom: number; left: number };
+  // ... other fields
+}
+```
+
+### Theme Application
+
+Applies the host's color scheme preference:
+
+```typescript
+// From src/mcp-app.ts
+if (ctx.theme) {
+  applyDocumentTheme(ctx.theme);
+}
+```
+
+**Spec Reference** ([Theming](../../specification/2026-01-26/apps.mdx#theming)):
+> Views can use the `applyDocumentTheme` utility to easily respond to Host Context `theme` changes
+
+### CSS Variable Injection
+
+Applies host-provided CSS custom properties for visual cohesion:
+
+```typescript
+// From src/mcp-app.ts
+if (ctx.styles?.variables) {
+  applyHostStyleVariables(ctx.styles.variables);
+}
+```
+
+**Spec Reference** ([Theming - Current Standardized Variables](../../specification/2026-01-26/apps.mdx#current-standardized-variables)):
+```typescript
+type McpUiStyleVariableKey =
+  | "--color-background-primary"
+  | "--color-text-primary"
+  | "--font-sans"
+  // ... 80+ standardized variables
+```
+
+### Custom Font Loading
+
+Injects host-provided font CSS (e.g., `@font-face` or `@import`):
+
+```typescript
+// From src/mcp-app.ts
+if (ctx.styles?.css?.fonts) {
+  applyHostFonts(ctx.styles.css.fonts);
+}
+```
+
+**Spec Reference** ([Custom Fonts](../../specification/2026-01-26/apps.mdx#custom-fonts)):
+> Hosts can provide custom fonts via `styles.css.fonts`
+
+### Safe Area Insets
+
+Respects host-provided padding for notches, toolbars, etc.:
+
+```typescript
+// From src/mcp-app.ts
+if (ctx.safeAreaInsets) {
+  mainEl.style.paddingTop = `${ctx.safeAreaInsets.top}px`;
+  mainEl.style.paddingRight = `${ctx.safeAreaInsets.right}px`;
+  mainEl.style.paddingBottom = `${ctx.safeAreaInsets.bottom}px`;
+  mainEl.style.paddingLeft = `${ctx.safeAreaInsets.left}px`;
+}
+```
+
+### Tool Result Handler
+
+Receives structured data via `ui/notifications/tool-result`:
+
+```typescript
+// From src/mcp-app.ts
+app.ontoolresult = (result) => {
+  const structured = result.structuredContent as { values?: Value[] } | undefined;
+  if (structured?.values) {
+    renderValues(structured.values);
+  }
+};
+```
+
+**Spec Reference** ([ui/notifications/tool-result](../../specification/2026-01-26/apps.mdx#notifications-host--view)):
+```typescript
+{
+  jsonrpc: "2.0",
+  method: "ui/notifications/tool-result",
+  params: CallToolResult  // { content, structuredContent, _meta }
+}
+```
+
+### Tool Input Handler
+
+Receives tool call arguments (empty in this case):
+
+```typescript
+// From src/mcp-app.ts
+app.ontoolinput = (params) => {
+  console.info("Received tool input:", params);
+};
+```
+
+**Spec Reference** ([ui/notifications/tool-input](../../specification/2026-01-26/apps.mdx#notifications-host--view)):
+```typescript
+{
+  jsonrpc: "2.0",
+  method: "ui/notifications/tool-input",
+  params: { arguments: Record<string, unknown> }
+}
+```
+
+### Tool Cancellation Handler
+
+Handles cancelled tool execution:
+
+```typescript
+// From src/mcp-app.ts
+app.ontoolcancelled = (params) => {
+  statusEl.textContent = "Tool call was cancelled";
+};
+```
+
+**Spec Reference** ([ui/notifications/tool-cancelled](../../specification/2026-01-26/apps.mdx#notifications-host--view)):
+> Host MUST send this notification if the tool execution was cancelled, for any reason
+
+### Teardown Handler
+
+Gracefully handles resource teardown:
+
+```typescript
+// From src/mcp-app.ts
+app.onteardown = async () => {
+  console.info("Value Picker app is being torn down");
+  return {};
+};
+```
+
+**Spec Reference** ([ui/resource-teardown](../../specification/2026-01-26/apps.mdx#notifications-host--view)):
+> Host MUST send this notification before tearing down the UI resource
+
+### Update Model Context
+
+Injects the user's selection into the model's context:
+
+```typescript
+// From src/mcp-app.ts
+await app.updateModelContext({
+  content: [{
+    type: "text",
+    text: `The user selected "${value.label}" (id: ${value.id}). Description: ${value.description}.`,
+  }],
+});
+```
+
+**Spec Reference** ([ui/update-model-context](../../specification/2026-01-26/apps.mdx#requests-view--host)):
+```typescript
+{
+  jsonrpc: "2.0",
+  method: "ui/update-model-context",
+  params: {
+    content?: ContentBlock[],
+    structuredContent?: Record<string, unknown>
+  }
+}
+```
+
+> The View MAY send this request to update the Host's model context. This context will be used in future turns.
+
+### Send User Message
+
+Triggers an AI response after selection:
+
+```typescript
+// From src/mcp-app.ts
+await app.sendMessage({
+  role: "user",
+  content: [{
+    type: "text",
+    text: `I have picked a value, can you tell me what it is?`,
+  }],
+});
+```
+
+**Spec Reference** ([ui/message](../../specification/2026-01-26/apps.mdx#requests-view--host)):
+```typescript
+{
+  jsonrpc: "2.0",
+  method: "ui/message",
+  params: {
+    role: "user",
+    content: { type: "text", text: string }
+  }
+}
+```
+
+> Host SHOULD add the message to the conversation context, preserving the specified role.
+
+---
+
+## Test Pattern: "Blind Selection"
+
+This example implements a "blind selection" test pattern to validate context injection:
+
+1. User clicks a value card in the UI
+2. View sends `ui/update-model-context` with the selection details
+3. View sends `ui/message` with "I have picked a value, can you tell me what it is?"
+4. The AI must read the context to respond with the correct value
+
+This proves that `updateModelContext` successfully injects data that the model can access, without the user message containing the answer.
+
+### Expected Model Behavior
+
+The tool description explicitly tells the model this is a debug/test tool. The model should:
+
+- **Do**: Simply confirm which value it received (e.g., "You selected Alpha Protocol")
+- **Don't**: Provide detailed analysis, recommendations, or elaborate on the value meanings
+
+If the model goes into detail about the values, the test still passes (context injection worked), but the model didn't follow the debug instructions.
+
+---
+
+## Installation
+
+### Via npm (Recommended)
+
+Install the published package from [npmjs.com/package/mcp-server-value-picker](https://www.npmjs.com/package/mcp-server-value-picker):
+
+```bash
+npm install -g mcp-server-value-picker
+```
+
+Run the server:
+
+```bash
+# Run (auto-detects transport mode)
+mcp-server-value-picker
+
+# Force STDIO mode (for Claude Desktop)
+mcp-server-value-picker --stdio
+
+# Force HTTP mode
+mcp-server-value-picker --http
+```
+
+Or run directly with npx (no install required):
+
+```bash
+npx mcp-server-value-picker
+```
+
+### Local Development
+
+For modifying the example or contributing:
+
+```bash
+# Install dependencies
+npm install
+
+# Build UI and server
+npm run build
+
+# Run (auto-detects transport mode)
+npm start
+
+# Force STDIO mode
+npm start -- --stdio
+
+# Force HTTP mode
+npm start -- --http
+```
+
+Default HTTP endpoint: `http://localhost:3456/mcp`
+
+---
+
+## Files
+
+| File | Purpose |
+|------|---------|
+| `server.ts` | MCP server with `pick_value` tool and UI resource |
+| `src/mcp-app.ts` | View implementation (`App` class, handlers, context) |
+| `src/mcp-app.css` | View styling with CSS variable fallbacks |
+| `mcp-app.html` | HTML template with color-scheme meta tag |
+| `main.ts` | Entry point with STDIO/HTTP transport selection |
+
+---
+
+## Specification Coverage
+
+| Feature | Spec Section | Tested |
+|---------|--------------|--------|
+| `text/html;profile=mcp-app` MIME type | UI Resource Format | ✓ |
+| `ui://` URI scheme | UI Resource Format | ✓ |
+| `_meta.ui.resourceUri` linkage | Resource Discovery | ✓ |
+| `ui/initialize` / `ui/notifications/initialized` | Lifecycle | ✓ |
+| `ui/notifications/tool-input` | Data Passing | ✓ |
+| `ui/notifications/tool-result` | Data Passing | ✓ |
+| `ui/notifications/tool-cancelled` | Notifications | ✓ |
+| `ui/resource-teardown` | Cleanup | ✓ |
+| `ui/update-model-context` | Requests | ✓ |
+| `ui/message` | Requests | ✓ |
+| `ui/notifications/host-context-changed` | Notifications | ✓ |
+| `HostContext.theme` | Theming | ✓ |
+| `HostContext.styles.variables` | Theming | ✓ |
+| `HostContext.styles.css.fonts` | Custom Fonts | ✓ |
+| `HostContext.safeAreaInsets` | Container Dimensions | ✓ |
+| `content` + `structuredContent` dual model | Data Passing | ✓ |

package/dist/mcp-app.html

@@ -106,7 +106,7 @@ for compatibility with Zod schema generation. Both are functionally equivalent f
 container holding the app. Specify either width or maxWidth, and either height or maxHeight.`),locale:m.string().optional().describe("User's language and region preference in BCP 47 format."),timeZone:m.string().optional().describe("User's timezone in IANA format."),userAgent:m.string().optional().describe("Host application identifier."),platform:m.union([m.literal("web"),m.literal("desktop"),m.literal("mobile")]).optional().describe("Platform type for responsive design decisions."),deviceCapabilities:m.object({touch:m.boolean().optional().describe("Whether the device supports touch input."),hover:m.boolean().optional().describe("Whether the device supports hover interactions.")}).optional().describe("Device input capabilities."),safeAreaInsets:m.object({top:m.number().describe("Top safe area inset in pixels."),right:m.number().describe("Right safe area inset in pixels."),bottom:m.number().describe("Bottom safe area inset in pixels."),left:m.number().describe("Left safe area inset in pixels.")}).optional().describe("Mobile safe area boundaries in pixels.")}).passthrough(),yI=m.object({method:m.literal("ui/notifications/host-context-changed"),params:Ff.describe("Partial context update containing only changed fields.")});m.object({method:m.literal("ui/update-model-context"),params:m.object({content:m.array(At).optional().describe("Context content blocks (text, image, etc.)."),structuredContent:m.record(m.string(),m.unknown().describe("Structured content for machine-readable context data.")).optional().describe("Structured content for machine-readable context data.")})});m.object({method:m.literal("ui/initialize"),params:m.object({appInfo:Rn.describe("App identification (name and version)."),appCapabilities:gI.describe("Features and capabilities this app provides."),protocolVersion:m.string().describe("Protocol version this app supports.")})});var kI=m.object({protocolVersion:m.string().describe('Negotiated protocol version string (e.g., "2025-11-21").'),hostInfo:Rn.describe("Host application identification and version."),hostCapabilities:hI.describe("Features and capabilities provided by the host."),hostContext:Ff.describe("Rich context about the host environment.")}).passthrough();function wI(e){let t=document.documentElement;t.setAttribute("data-theme",e),t.style.colorScheme=e}function II(e,t=document.documentElement){for(let[i,r]of Object.entries(e))r!==void 0&&t.style.setProperty(i,r)}function SI(e){if(document.getElementById("__mcp-host-fonts"))return;let t=document.createElement("style");t.id="__mcp-host-fonts",t.textContent=e,document.head.appendChild(t)}class zI extends Ib{constructor(i,r={},n={autoResize:!0}){super(n);se(this,"_appInfo");se(this,"_capabilities");se(this,"options");se(this,"_hostCapabilities");se(this,"_hostInfo");se(this,"_hostContext");se(this,"sendOpenLink",this.openLink);this._appInfo=i,this._capabilities=r,this.options=n,this.setRequestHandler(An,o=>(console.log("Received ping:",o.params),{})),this.onhostcontextchanged=()=>{}}getHostCapabilities(){return this._hostCapabilities}getHostVersion(){return this._hostInfo}getHostContext(){return this._hostContext}set ontoolinput(i){this.setNotificationHandler(cI,r=>i(r.params))}set ontoolinputpartial(i){this.setNotificationHandler(dI,r=>i(r.params))}set ontoolresult(i){this.setNotificationHandler(bI,r=>i(r.params))}set ontoolcancelled(i){this.setNotificationHandler(mI,r=>i(r.params))}set onhostcontextchanged(i){this.setNotificationHandler(yI,r=>{this._hostContext={...this._hostContext,...r.params},i(r.params)})}set onteardown(i){this.setRequestHandler(vI,(r,n)=>i(r.params,n))}set oncalltool(i){this.setRequestHandler(Qs,(r,n)=>i(r.params,n))}set onlisttools(i){this.setRequestHandler(Ys,(r,n)=>i(r.params,n))}assertCapabilityForMethod(i){}assertRequestHandlerCapability(i){switch(i){case"tools/call":case"tools/list":if(!this._capabilities.tools)throw Error(`Client does not support tool capability (required for ${i})`);return;case"ping":case"ui/resource-teardown":return;default:throw Error(`No handler for method ${i} registered`)}}assertNotificationCapability(i){}assertTaskCapability(i){throw Error("Tasks are not supported in MCP Apps")}assertTaskHandlerCapability(i){throw Error("Task handlers are not supported in MCP Apps")}async callServerTool(i,r){return await this.request({method:"tools/call",params:i},Cn,r)}sendMessage(i,r){return this.request({method:"ui/message",params:i},lI,r)}sendLog(i){return this.notification({method:"notifications/message",params:i})}updateModelContext(i,r){return this.request({method:"ui/update-model-context",params:i},er,r)}openLink(i,r){return this.request({method:"ui/open-link",params:i},uI,r)}requestDisplayMode(i,r){return this.request({method:"ui/request-display-mode",params:i},_I,r)}sendSizeChanged(i){return this.notification({method:"ui/notifications/size-changed",params:i})}setupSizeChangedNotifications(){let i=!1,r=0,n=0,o=()=>{i||(i=!0,requestAnimationFrame(()=>{i=!1;let s=document.documentElement,u=s.style.width,l=s.style.height;s.style.width="fit-content",s.style.height="fit-content";let c=s.getBoundingClientRect();s.style.width=u,s.style.height=l;let d=window.innerWidth-s.clientWidth,f=Math.ceil(c.width+d),h=Math.ceil(c.height);(f!==r||h!==n)&&(r=f,n=h,this.sendSizeChanged({width:f,height:h}))}))};o();let a=new ResizeObserver(o);return a.observe(document.documentElement),a.observe(document.body),()=>a.disconnect()}async connect(i=new zb(window.parent,window.parent),r){var n;await super.connect(i);try{let o=await this.request({method:"ui/initialize",params:{appCapabilities:this._capabilities,appInfo:this._appInfo,protocolVersion:xb}},kI,r);if(o===void 0)throw Error(`Server sent invalid initialize result: ${o}`);this._hostCapabilities=o.hostCapabilities,this._hostInfo=o.hostInfo,this._hostContext=o.hostContext,await this.notification({method:"ui/notifications/initialized"}),(n=this.options)!=null&&n.autoResize&&this.setupSizeChangedNotifications()}catch(o){throw this.close(),o}}}const gn=document.querySelector(".main"),ts=document.getElementById("values-grid"),Ue=document.getElementById("status");let ns=null;function qf(e){var t,i,r;e.theme&&wI(e.theme),(t=e.styles)!=null&&t.variables&&II(e.styles.variables),(r=(i=e.styles)==null?void 0:i.css)!=null&&r.fonts&&SI(e.styles.css.fonts),e.safeAreaInsets&&(gn.style.paddingTop=`${e.safeAreaInsets.top}px`,gn.style.paddingRight=`${e.safeAreaInsets.right}px`,gn.style.paddingBottom=`${e.safeAreaInsets.bottom}px`,gn.style.paddingLeft=`${e.safeAreaInsets.left}px`)}function xI(e){ts.innerHTML="";for(const t of e){const i=document.createElement("button");i.className="value-card",i.dataset.id=t.id,i.innerHTML=`
       <span class="value-label">${t.label}</span>
       <span class="value-desc">${t.description}</span>
-    `,i.addEventListener("click",()=>OI(t)),ts.appendChild(i)}}async function OI(e){ns=e.id,document.querySelectorAll(".value-card").forEach(t=>{t.classList.toggle("selected",t.dataset.id===e.id)}),console.info(`Selection changed to: ${ns}`),Ue.textContent=`Selected: ${e.label} — sending to AI...`,Ue.className="status sending";try{await Pe.updateModelContext({content:[{type:"text",text:`The user selected "${e.label}" (id: ${e.id}). Description: ${e.description}. Please acknowledge their selection and provide relevant information about this choice.`}]}),(await Pe.sendMessage({role:"user",content:[{type:"text",text:`I've selected "${e.label}".`}]})).isError?(Ue.textContent=`Selected: ${e.label} (context updated, message send was rejected)`,Ue.className="status warning"):(Ue.textContent=`Selected: ${e.label} — AI has been notified!`,Ue.className="status success")}catch(t){console.error("Failed to send selection:",t),Ue.textContent=`Selected: ${e.label} — failed to notify AI`,Ue.className="status error"}}const Pe=new zI({name:"Value Picker",version:"1.0.0"});Pe.onteardown=async()=>(console.info("Value Picker app is being torn down"),{});Pe.ontoolinput=e=>{console.info("Received tool input:",e)};Pe.ontoolresult=e=>{console.info("Received tool result:",e);const t=e.structuredContent;t!=null&&t.values&&xI(t.values)};Pe.ontoolcancelled=e=>{console.info("Tool call cancelled:",e.reason),Ue.textContent="Tool call was cancelled",Ue.className="status warning"};Pe.onerror=e=>{console.error("App error:",e)};Pe.onhostcontextchanged=qf;Pe.connect().then(()=>{const e=Pe.getHostContext();e&&qf(e)});</script>
+    `,i.addEventListener("click",()=>OI(t)),ts.appendChild(i)}}async function OI(e){ns=e.id,document.querySelectorAll(".value-card").forEach(t=>{t.classList.toggle("selected",t.dataset.id===e.id)}),console.info(`Selection changed to: ${ns}`),Ue.textContent=`Selected: ${e.label} — sending to AI...`,Ue.className="status sending";try{await Pe.updateModelContext({content:[{type:"text",text:`The user selected "${e.label}" (id: ${e.id}). Description: ${e.description}. Please acknowledge their selection and provide relevant information about this choice.`}]}),(await Pe.sendMessage({role:"user",content:[{type:"text",text:"I have picked a value, can you tell me what it is?"}]})).isError?(Ue.textContent=`Selected: ${e.label} (context updated, message send was rejected)`,Ue.className="status warning"):(Ue.textContent=`Selected: ${e.label} — AI has been notified!`,Ue.className="status success")}catch(t){console.error("Failed to send selection:",t),Ue.textContent=`Selected: ${e.label} — failed to notify AI`,Ue.className="status error"}}const Pe=new zI({name:"Value Picker",version:"1.0.0"});Pe.onteardown=async()=>(console.info("Value Picker app is being torn down"),{});Pe.ontoolinput=e=>{console.info("Received tool input:",e)};Pe.ontoolresult=e=>{console.info("Received tool result:",e);const t=e.structuredContent;t!=null&&t.values&&xI(t.values)};Pe.ontoolcancelled=e=>{console.info("Tool call cancelled:",e.reason),Ue.textContent="Tool call was cancelled",Ue.className="status warning"};Pe.onerror=e=>{console.error("App error:",e)};Pe.onhostcontextchanged=qf;Pe.connect().then(()=>{const e=Pe.getHostContext();e&&qf(e)});</script>
   <style rel="stylesheet" crossorigin>*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--host-background, #ffffff);color:var(--host-foreground, #1a1a1a);min-height:100vh}@media(prefers-color-scheme:dark){body{background:var(--host-background, #1a1a1a);color:var(--host-foreground, #e5e5e5)}}.main{padding:1rem;max-width:600px;margin:0 auto}.title{font-size:1.1rem;font-weight:600;margin-bottom:.25rem}.subtitle{font-size:.85rem;opacity:.7;margin-bottom:1rem}.values-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}.value-card{display:flex;flex-direction:column;align-items:flex-start;gap:.2rem;padding:.75rem;border:1.5px solid rgba(128,128,128,.25);border-radius:8px;background:transparent;color:inherit;cursor:pointer;text-align:left;transition:all .15s ease;font-family:inherit}.value-card:hover{border-color:#3b82f680;background:#3b82f60d}.value-card.selected{border-color:#3b82f6;background:#3b82f61a;box-shadow:0 0 0 1px #3b82f6}.value-label{font-weight:600;font-size:.85rem}.value-desc{font-size:.75rem;opacity:.65}.status{margin-top:1rem;padding:.5rem .75rem;border-radius:6px;font-size:.8rem;min-height:2rem}.status:empty{display:none}.status.sending{background:#3b82f61a;color:#3b82f6}.status.success{background:#22c55e1a;color:#16a34a}.status.warning{background:#eab3081a;color:#ca8a04}.status.error{background:#ef44441a;color:#dc2626}</style>
 </head>
 <body>

package/dist/server.js

@@ -35779,7 +35779,7 @@ function createServer() {
   const resourceUri = "ui://pick-value/mcp-app.html";
   hk(server, "pick_value", {
     title: "Pick a Value",
-    description: "Presents 10 values for the user to choose from. The user selects one via the interactive UI, and their choice is communicated to the model via update-model-context.",
+    description: "DEBUG/TEST TOOL: Tests MCP Apps communication between UI and model. The user picks a value in the UI, and you must confirm whether you received it. This validates that ui/update-model-context is working correctly. Do not treat this as a real decision — just report what value you received.",
     inputSchema: {},
     outputSchema: exports_external.object({
       values: exports_external.array(exports_external.object({
@@ -35794,12 +35794,13 @@ function createServer() {
     return {
       content: [{
         type: "text",
-        text: `Here are 10 values available for selection:
+        text: `[MCP Apps Test] This is a debug tool for testing value communication between the UI and the model.
 
-${VALUES.map((v, i) => `${i + 1}. **${v.label}** — ${v.description}`).join(`
-`)}
+The user will select one of 10 test values via the interactive UI. Their selection will be injected into your context via ui/update-model-context. The user will then ask you to confirm which value you received.
 
-The user will select one via the interactive UI. Their selection will be injected into the model context automatically. Wait for the user to make a selection and send a follow-up message.`
+Your job: Simply report back the value you received. This tests whether the MCP Apps context injection is working. Do not provide detailed analysis of the values — just confirm what was selected.
+
+Test values: ${VALUES.map((v) => v.label).join(", ")}`
       }],
       structuredContent: {
         values: VALUES,

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "mcp-server-value-picker",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "type": "module",
-  "description": "Test MCP App: 10 selectable values + ui/update-model-context for Phase 5 testing",
+  "description": "Debug/test MCP App: Validates that values selected in UI are correctly passed to the AI model via ui/update-model-context",
   "main": "dist/server.js",
   "files": [
     "dist"