Adopt MCP Apps 2026-01-26 view-side capabilities

mattdholloway · Copilot · SamMorrowDrums · commit c0dca1f1b8c2 · 2026-05-29T19:41:54.000+02:00
* Declare appCapabilities.availableDisplayModes (defaults to ["inline"])
  during initialization, as required by the new spec.
* Track McpUiHostContext (and its updates via onhostcontextchanged) and
  thread it into AppProvider, which now picks up host-supplied
  theme + CSS style variables and projects them onto the root element so
  Primer components inherit host theming.
* Add setModelContext and openLink helpers to useMcpApp. issue-write and
  pr-write call setModelContext on a successful submission so the agent
  has the new entity in its next-turn context; get-me uses openLink for
  the profile's external blog link.

The pinned @modelcontextprotocol/ext-apps ^1.7.2 was already resolved to
1.7.2 in the lockfile, so no dependency bump is required for the new
HostContext / openLink / updateModelContext APIs.

Co-authored-by: Copilot &lt;223556219+Copilot@users.noreply.github.com&gt;
diff --git a/ui/src/apps/get-me/App.tsx b/ui/src/apps/get-me/App.tsx
@@ -1,4 +1,5 @@
 import { StrictMode, useState } from "react";
+import type React from "react";
 import { createRoot } from "react-dom/client";
 import { Avatar, Box, Text, Link, Heading, Spinner } from "@primer/react";
 import {
@@ -62,8 +63,20 @@ function AvatarWithFallback({ src, login, size }: { src?: string; login: string;
   );
 }
 
-function UserCard({ user }: { user: UserData }) {
+function UserCard({
+  user,
+  onOpenLink,
+}: {
+  user: UserData;
+  onOpenLink?: (url: string) => void;
+}) {
   const d = user.details || {};
+  const handleClick =
+    onOpenLink &&
+    ((url: string) => (e: React.MouseEvent) => {
+      e.preventDefault();
+      onOpenLink(url);
+    });
 
   return (
     <Box
@@ -103,7 +116,13 @@ function UserCard({ user }: { user: UserData }) {
         {d.blog && (
           <>
             <Box sx={{ color: "fg.muted" }}><LinkIcon size={16} /></Box>
-            <Link href={d.blog} target="_blank">{d.blog}</Link>
+            <Link
+              href={d.blog}
+              target="_blank"
+              onClick={handleClick?.(d.blog)}
+            >
+              {d.blog}
+            </Link>
           </>
         )}
         {d.email && (
@@ -140,41 +159,39 @@ function UserCard({ user }: { user: UserData }) {
 }
 
 function GetMeApp() {
-  const { error, toolResult } = useMcpApp({
+  const { error, toolResult, hostContext, openLink } = useMcpApp({
     appName: "github-mcp-server-get-me",
   });
 
-  if (error) {
-    return <Text sx={{ color: "danger.fg" }}>Error: {error.message}</Text>;
-  }
-
-  if (!toolResult) {
-    return (
-      <Box display="flex" alignItems="center" gap={2}>
-        <Spinner size="small" />
-        <Text sx={{ color: "fg.muted" }}>Loading user data...</Text>
-      </Box>
-    );
-  }
-
-  // Parse user data from tool result
-  const textContent = toolResult.content?.find((c: { type: string }) => c.type === "text");
-  if (!textContent || !("text" in textContent)) {
-    return <Text sx={{ color: "danger.fg" }}>No user data in response</Text>;
-  }
+  const content = (() => {
+    if (error) {
+      return <Text sx={{ color: "danger.fg" }}>Error: {error.message}</Text>;
+    }
+    if (!toolResult) {
+      return (
+        <Box display="flex" alignItems="center" gap={2}>
+          <Spinner size="small" />
+          <Text sx={{ color: "fg.muted" }}>Loading user data...</Text>
+        </Box>
+      );
+    }
+    const textContent = toolResult.content?.find((c: { type: string }) => c.type === "text");
+    if (!textContent || !("text" in textContent)) {
+      return <Text sx={{ color: "danger.fg" }}>No user data in response</Text>;
+    }
+    try {
+      const userData = JSON.parse(textContent.text as string) as UserData;
+      return <UserCard user={userData} onOpenLink={(url) => void openLink(url)} />;
+    } catch {
+      return <Text sx={{ color: "danger.fg" }}>Failed to parse user data</Text>;
+    }
+  })();
 
-  try {
-    const userData = JSON.parse(textContent.text as string) as UserData;
-    return <UserCard user={userData} />;
-  } catch {
-    return <Text sx={{ color: "danger.fg" }}>Failed to parse user data</Text>;
-  }
+  return <AppProvider hostContext={hostContext}>{content}</AppProvider>;
 }
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <AppProvider>
-      <GetMeApp />
-    </AppProvider>
+    <GetMeApp />
   </StrictMode>
 );
diff --git a/ui/src/apps/issue-write/App.tsx b/ui/src/apps/issue-write/App.tsx
@@ -121,7 +121,7 @@ function CreateIssueApp() {
   const [error, setError] = useState<string | null>(null);
   const [successIssue, setSuccessIssue] = useState<IssueResult | null>(null);
 
-  const { app, error: appError, toolInput, callTool } = useMcpApp({
+  const { app, error: appError, toolInput, callTool, hostContext, setModelContext } = useMcpApp({
     appName: "github-mcp-server-issue-write",
   });
 
@@ -181,6 +181,19 @@ function CreateIssueApp() {
           try {
             const issueData = JSON.parse(textContent.text as string);
             setSuccessIssue(issueData);
+            // Per the MCP Apps 2026-01-26 spec, push the created/updated issue
+            // into the model's context so subsequent agent turns have it.
+            void setModelContext({
+              structuredContent: issueData,
+              content: [
+                {
+                  type: "text",
+                  text: isUpdateMode
+                    ? `Issue #${issueNumber} in ${owner}/${repo} was updated by the user via the issue-write view.`
+                    : `A new issue was created in ${owner}/${repo} by the user via the issue-write view.`,
+                },
+              ],
+            });
           } catch {
             setSuccessIssue({ title, body });
           }
@@ -191,8 +204,9 @@ function CreateIssueApp() {
     } finally {
       setIsSubmitting(false);
     }
-  }, [title, body, owner, repo, isUpdateMode, issueNumber, callTool]);
+  }, [title, body, owner, repo, isUpdateMode, issueNumber, callTool, setModelContext]);
 
+  const body_node = (() => {
   if (appError) {
     return (
       <Flash variant="danger" sx={{ m: 2 }}>
@@ -307,12 +321,13 @@ function CreateIssueApp() {
       </Box>
     </Box>
   );
+  })();
+
+  return <AppProvider hostContext={hostContext}>{body_node}</AppProvider>;
 }
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <AppProvider>
-      <CreateIssueApp />
-    </AppProvider>
+    <CreateIssueApp />
   </StrictMode>
 );
diff --git a/ui/src/apps/pr-write/App.tsx b/ui/src/apps/pr-write/App.tsx
@@ -126,7 +126,7 @@ function CreatePRApp() {
   const [isDraft, setIsDraft] = useState(false);
   const [maintainerCanModify, setMaintainerCanModify] = useState(true);
 
-  const { app, error: appError, toolInput, callTool } = useMcpApp({
+  const { app, error: appError, toolInput, callTool, hostContext, setModelContext } = useMcpApp({
     appName: "github-mcp-server-create-pull-request",
   });
 
@@ -175,26 +175,37 @@ function CreatePRApp() {
         if (textContent && textContent.type === "text" && textContent.text) {
           const prData = JSON.parse(textContent.text);
           setSuccessPR(prData);
+          // Push the new PR into the model context so subsequent agent
+          // turns can reference it (MCP Apps 2026-01-26 ui/update-model-context).
+          void setModelContext({
+            structuredContent: prData,
+            content: [
+              {
+                type: "text",
+                text: `A new pull request was created in ${owner}/${repo} by the user via the create-pull-request view.`,
+              },
+            ],
+          });
         }
       }
     } catch (e) {
       setError(e instanceof Error ? e.message : "An error occurred");
     } finally {
       setIsSubmitting(false);
     }
-  }, [title, body, owner, repo, head, base, isDraft, maintainerCanModify, callTool]);
+  }, [title, body, owner, repo, head, base, isDraft, maintainerCanModify, callTool, setModelContext]);
 
   if (successPR) {
     return (
-      <AppProvider>
+      <AppProvider hostContext={hostContext}>
         <SuccessView pr={successPR} owner={owner} repo={repo} submittedTitle={submittedTitle} />
       </AppProvider>
     );
   }
 
   if (!app && !appError) {
     return (
-      <AppProvider>
+      <AppProvider hostContext={hostContext}>
         <Box display="flex" alignItems="center" justifyContent="center" p={4}>
           <Spinner size="medium" />
         </Box>
@@ -204,14 +215,14 @@ function CreatePRApp() {
 
   if (appError) {
     return (
-      <AppProvider>
+      <AppProvider hostContext={hostContext}>
         <Flash variant="danger">{appError.message}</Flash>
       </AppProvider>
     );
   }
 
   return (
-    <AppProvider>
+    <AppProvider hostContext={hostContext}>
       <Box
         borderWidth={1}
         borderStyle="solid"
diff --git a/ui/src/components/AppProvider.tsx b/ui/src/components/AppProvider.tsx
@@ -1,26 +1,50 @@
 import { ThemeProvider, BaseStyles, Box } from "@primer/react";
-import type { ReactNode } from "react";
-import { useEffect } from "react";
+import type { ReactNode, CSSProperties } from "react";
+import { useEffect, useMemo } from "react";
+import type { McpUiHostContext } from "@modelcontextprotocol/ext-apps";
 import { FeedbackFooter } from "./FeedbackFooter";
 
 interface AppProviderProps {
   children: ReactNode;
+  hostContext?: McpUiHostContext;
 }
 
-export function AppProvider({ children }: AppProviderProps) {
+export function AppProvider({ children, hostContext }: AppProviderProps) {
+  const hostTheme = hostContext?.theme;
+  const hostVariables = hostContext?.styles?.variables;
+
   useEffect(() => {
-    // Set up theme data attributes for proper Primer theming
-    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
-    const colorMode = prefersDark ? "dark" : "light";
+    // Prefer the host-supplied theme; fall back to the OS preference.
+    const colorMode =
+      hostTheme === "light" || hostTheme === "dark"
+        ? hostTheme
+        : window.matchMedia("(prefers-color-scheme: dark)").matches
+          ? "dark"
+          : "light";
     document.body.setAttribute("data-color-mode", colorMode);
     document.body.setAttribute("data-light-theme", "light");
     document.body.setAttribute("data-dark-theme", "dark");
-  }, []);
+  }, [hostTheme]);
+
+  // Project the host's standardized CSS variables onto the root so child
+  // components can consume them via `var(--color-...)`. We rely on Primer's
+  // own defaults when the host does not supply variables.
+  const styleVars = useMemo<CSSProperties | undefined>(() => {
+    if (!hostVariables) return undefined;
+    const out: Record<string, string> = {};
+    for (const [key, value] of Object.entries(hostVariables)) {
+      if (typeof value === "string") out[key] = value;
+    }
+    return out as CSSProperties;
+  }, [hostVariables]);
+
+  const colorMode =
+    hostTheme === "light" || hostTheme === "dark" ? hostTheme : "auto";
 
   return (
-    <ThemeProvider colorMode="auto">
+    <ThemeProvider colorMode={colorMode}>
       <BaseStyles>
-        <Box p={3}>
+        <Box p={3} style={styleVars}>
           {children}
           <FeedbackFooter />
         </Box>
diff --git a/ui/src/hooks/useMcpApp.ts b/ui/src/hooks/useMcpApp.ts
