-
- {children}
-
+
+
;
+ appOnly: boolean;
+ agentVisible: boolean;
+}
+
+export type ChatMcpAppTool = ChatMcpTool & { uiResourceUri: string };
+
+type ChatMcpAppsContextValue = {
+ getMcpAppForTool: (toolName: string) => ChatMcpAppTool | undefined;
+ getMcpToolForAppCall: (namespace: string, serverName: string, toolName: string) => ChatMcpTool | undefined;
+};
+
+const ChatMcpAppsContext = createContext({
+ getMcpAppForTool: () => undefined,
+ getMcpToolForAppCall: () => undefined,
+});
+
+interface ChatMcpAppsProviderProps {
+ currentAgent: AgentResponse;
+ children: ReactNode;
+}
+
+function isRemoteMCPServer(tool: Tool): boolean {
+ const kind = tool.mcpServer?.kind || "RemoteMCPServer";
+ const apiGroup = tool.mcpServer?.apiGroup || "kagent.dev";
+ return kind === "RemoteMCPServer" && (apiGroup === "" || apiGroup === "kagent.dev");
+}
+
+function resolveServerRef(tool: Tool, agentNamespace: string): { namespace: string; name: string } | undefined {
+ const mcpServer = tool.mcpServer;
+ if (!mcpServer?.name) {
+ return undefined;
+ }
+
+ if (k8sRefUtils.isValidRef(mcpServer.name)) {
+ return k8sRefUtils.fromRef(mcpServer.name);
+ }
+
+ return {
+ namespace: mcpServer.namespace || agentNamespace,
+ name: mcpServer.name,
+ };
+}
+
+function isAppOnlyTool(tool: McpAppTool): boolean {
+ const ui = tool._meta?.ui;
+ if (!ui || typeof ui !== "object") {
+ return false;
+ }
+ const visibility = (ui as Record).visibility;
+ if (typeof visibility === "string") {
+ return visibility === "app";
+ }
+ if (!Array.isArray(visibility)) {
+ return false;
+ }
+ // app-only means "app" is declared AND "model" is not — if both are
+ // listed (e.g. ["model", "app"]) the tool is visible to the agent too.
+ let hasApp = false;
+ for (const v of visibility) {
+ if (v === "model") {
+ return false;
+ }
+ if (v === "app") {
+ hasApp = true;
+ }
+ }
+ return hasApp;
+}
+
+export function ChatMcpAppsProvider({ currentAgent, children }: ChatMcpAppsProviderProps) {
+ const [appRegistry, setAppRegistry] = useState>(new Map());
+ const [toolRegistry, setToolRegistry] = useState>(new Map());
+
+ const configuredMcpServers = useMemo(() => {
+ const agentNamespace = currentAgent.agent.metadata.namespace || "";
+ const servers = new Map;
+ selectsAllTools: boolean;
+ }>();
+
+ for (const tool of currentAgent.tools || []) {
+ if (!isMcpTool(tool) || !isRemoteMCPServer(tool)) {
+ continue;
+ }
+ const serverRef = resolveServerRef(tool, agentNamespace);
+ if (!serverRef) {
+ continue;
+ }
+
+ const key = `${serverRef.namespace}/${serverRef.name}`;
+ const existing = servers.get(key) ?? {
+ namespace: serverRef.namespace,
+ name: serverRef.name,
+ selectedToolNames: new Set(),
+ selectsAllTools: false,
+ };
+
+ const toolNames = tool.mcpServer.toolNames || [];
+ if (toolNames.length === 0) {
+ existing.selectsAllTools = true;
+ } else {
+ toolNames.forEach((name) => existing.selectedToolNames.add(name));
+ }
+ servers.set(key, existing);
+ }
+
+ return Array.from(servers.values());
+ }, [currentAgent]);
+
+ useEffect(() => {
+ let cancelled = false;
+
+ async function loadMcpApps() {
+ if (configuredMcpServers.length === 0) {
+ setAppRegistry(new Map());
+ setToolRegistry(new Map());
+ return;
+ }
+
+ const nextAppRegistry = new Map();
+ const nextToolRegistry = new Map();
+ const ambiguousToolNames = new Set();
+
+ await Promise.all(configuredMcpServers.map(async (server) => {
+ const response = await listMcpAppTools(server.namespace, server.name);
+ if (cancelled || response.error || !response.data) {
+ return;
+ }
+
+ for (const appTool of response.data) {
+ const appOnly = isAppOnlyTool(appTool);
+ const selectedForAgent = server.selectsAllTools || server.selectedToolNames.has(appTool.name);
+ const agentVisible = selectedForAgent && !appOnly;
+
+ const entry: ChatMcpTool = {
+ namespace: server.namespace,
+ serverName: server.name,
+ toolName: appTool.name,
+ uiResourceUri: appTool.uiResourceUri,
+ inputSchema: appTool.inputSchema,
+ meta: appTool._meta,
+ appOnly,
+ agentVisible,
+ };
+
+ nextToolRegistry.set(toolRegistryKey(server.namespace, server.name, appTool.name), entry);
+
+ if (entry.uiResourceUri && entry.agentVisible) {
+ const appEntry = entry as ChatMcpAppTool;
+ const existing = nextAppRegistry.get(appTool.name);
+ if (existing && (existing.namespace !== appEntry.namespace || existing.serverName !== appEntry.serverName || existing.uiResourceUri !== appEntry.uiResourceUri)) {
+ ambiguousToolNames.add(appTool.name);
+ nextAppRegistry.delete(appTool.name);
+ continue;
+ }
+ if (!ambiguousToolNames.has(appTool.name)) {
+ nextAppRegistry.set(appTool.name, appEntry);
+ }
+ }
+ }
+ }));
+
+ if (!cancelled) {
+ setAppRegistry(nextAppRegistry);
+ setToolRegistry(nextToolRegistry);
+ }
+ }
+
+ void loadMcpApps();
+ return () => {
+ cancelled = true;
+ };
+ }, [configuredMcpServers]);
+
+ const value = useMemo(() => ({
+ getMcpAppForTool: (toolName: string) => appRegistry.get(toolName),
+ getMcpToolForAppCall: (namespace: string, serverName: string, toolName: string) =>
+ toolRegistry.get(toolRegistryKey(namespace, serverName, toolName)),
+ }), [appRegistry, toolRegistry]);
+
+ return (
+
+ {children}
+
+ );
+}
+
+export function useChatMcpApps() {
+ return useContext(ChatMcpAppsContext);
+}
+
+function toolRegistryKey(namespace: string, serverName: string, toolName: string): string {
+ return `${namespace}/${serverName}/${toolName}`;
+}
diff --git a/ui/src/components/chat/ChatMessage.tsx b/ui/src/components/chat/ChatMessage.tsx
index cf71a65b6c..83a6d39e7f 100644
--- a/ui/src/components/chat/ChatMessage.tsx
+++ b/ui/src/components/chat/ChatMessage.tsx
@@ -12,6 +12,7 @@ import { toast } from "sonner";
import { convertToUserFriendlyName } from "@/lib/utils";
import { ADKMetadata, getMetadataValue } from "@/lib/messageHandlers";
import { ToolDecision } from "@/types";
+import type { ChatMcpAppTool } from "@/components/chat/ChatMcpAppsContext";
interface ChatMessageProps {
message: Message;
@@ -24,9 +25,11 @@ interface ChatMessageProps {
onReject?: (toolCallId: string, reason?: string) => void;
onAskUserSubmit?: (answers: Array<{ answer: string[] }>) => void;
pendingDecisions?: Record;
+ getMcpAppForTool?: (toolName: string) => ChatMcpAppTool | undefined;
+ onMcpAppSendMessage?: (text: string) => Promise;
}
-export default function ChatMessage({ message, allMessages, agentContext, onApprove, onReject, onAskUserSubmit, pendingDecisions }: ChatMessageProps) {
+export default function ChatMessage({ message, allMessages, agentContext, onApprove, onReject, onAskUserSubmit, pendingDecisions, getMcpAppForTool, onMcpAppSendMessage }: ChatMessageProps) {
const [feedbackDialogOpen, setFeedbackDialogOpen] = useState(false);
const [isPositiveFeedback, setIsPositiveFeedback] = useState(true);
@@ -114,6 +117,8 @@ export default function ChatMessage({ message, allMessages, agentContext, onAppr
onApprove={onApprove}
onReject={onReject}
pendingDecisions={pendingDecisions}
+ getMcpAppForTool={getMcpAppForTool}
+ onMcpAppSendMessage={onMcpAppSendMessage}
/>;
}
@@ -124,6 +129,8 @@ export default function ChatMessage({ message, allMessages, agentContext, onAppr
onApprove={onApprove}
onReject={onReject}
pendingDecisions={pendingDecisions}
+ getMcpAppForTool={getMcpAppForTool}
+ onMcpAppSendMessage={onMcpAppSendMessage}
/>;
}
@@ -139,7 +146,7 @@ export default function ChatMessage({ message, allMessages, agentContext, onAppr
});
if (hasToolCalls) {
- return ;
+ /**
+ * Bumped by the parent whenever the message list changes, so the minimap
+ * re-binds its observers/listeners to the (possibly new) viewport. Height
+ * changes from streaming are picked up by the ResizeObserver regardless.
+ */
+ revision: number;
+}
+
+interface Segment {
+ topPct: number;
+ heightPct: number;
+ role: "user" | "assistant";
+}
+
+/**
+ * A scrollbar-style minimap rendered on the right edge of the chat. Each message
+ * becomes a segment sized proportionally to its height and colored by role; a
+ * viewport indicator shows the current position. Click or drag the track to jump
+ * through the history quickly.
+ */
+export default function ChatMinimap({ containerRef, revision }: ChatMinimapProps) {
+ const viewportId = useId();
+ const [segments, setSegments] = useState([]);
+ const [view, setView] = useState({ topPct: 0, heightPct: 100 });
+ const [scrollable, setScrollable] = useState(false);
+ const trackRef = useRef(null);
+ const draggingRef = useRef(false);
+
+ const getViewport = useCallback(
+ () => (containerRef.current?.querySelector("[data-radix-scroll-area-viewport]") as HTMLElement | null) ?? null,
+ [containerRef],
+ );
+
+ const updateView = useCallback(() => {
+ const vp = getViewport();
+ if (!vp) return;
+ const total = vp.scrollHeight || 1;
+ setView({
+ topPct: (vp.scrollTop / total) * 100,
+ heightPct: Math.min(100, (vp.clientHeight / total) * 100),
+ });
+ }, [getViewport]);
+
+ const measure = useCallback(() => {
+ const vp = getViewport();
+ if (!vp) return;
+ const total = vp.scrollHeight;
+ if (total <= 0) return;
+
+ const vpRect = vp.getBoundingClientRect();
+ const items = Array.from(vp.querySelectorAll("[data-mm-item]")) as HTMLElement[];
+ const segs: Segment[] = items.map((el) => {
+ const r = el.getBoundingClientRect();
+ const top = r.top - vpRect.top + vp.scrollTop;
+ return {
+ topPct: (top / total) * 100,
+ heightPct: (r.height / total) * 100,
+ role: el.getAttribute("data-mm-role") === "user" ? "user" : "assistant",
+ };
+ });
+
+ setSegments(segs);
+ setScrollable(total > vp.clientHeight + 4);
+ updateView();
+ }, [getViewport, updateView]);
+
+ useEffect(() => {
+ const vp = getViewport();
+ if (!vp) return;
+ if (!vp.id) {
+ vp.id = viewportId;
+ }
+
+ // Defer the initial measurement so its setState calls don't run
+ // synchronously inside the effect (which triggers cascading renders).
+ // The ResizeObserver below also fires on observe(), so layout is captured
+ // promptly regardless.
+ const initialMeasure = requestAnimationFrame(() => measure());
+
+ const onScroll = () => updateView();
+ vp.addEventListener("scroll", onScroll, { passive: true });
+
+ const ro = new ResizeObserver(() => measure());
+ ro.observe(vp);
+ const content = vp.firstElementChild;
+ if (content) ro.observe(content);
+
+ return () => {
+ cancelAnimationFrame(initialMeasure);
+ vp.removeEventListener("scroll", onScroll);
+ ro.disconnect();
+ };
+ }, [getViewport, measure, updateView, revision, viewportId]);
+
+ const scrollToClientY = useCallback(
+ (clientY: number) => {
+ const vp = getViewport();
+ const track = trackRef.current;
+ if (!vp || !track) return;
+ const rect = track.getBoundingClientRect();
+ const frac = Math.min(1, Math.max(0, (clientY - rect.top) / rect.height));
+ const total = vp.scrollHeight;
+ // Center the viewport window on the clicked point for intuitive jumps.
+ const target = frac * total - vp.clientHeight / 2;
+ vp.scrollTo({ top: Math.max(0, target), behavior: draggingRef.current ? "auto" : "smooth" });
+ },
+ [getViewport],
+ );
+
+ const onPointerDown = (e: React.PointerEvent) => {
+ draggingRef.current = true;
+ e.currentTarget.setPointerCapture?.(e.pointerId);
+ scrollToClientY(e.clientY);
+ };
+ const onPointerMove = (e: React.PointerEvent) => {
+ if (!draggingRef.current) return;
+ scrollToClientY(e.clientY);
+ };
+ const endDrag = (e: React.PointerEvent) => {
+ draggingRef.current = false;
+ e.currentTarget.releasePointerCapture?.(e.pointerId);
+ };
+
+ if (!scrollable || segments.length === 0) return null;
+
+ return (
+ ;
+ getMcpAppForTool?: (toolName: string) => ChatMcpAppTool | undefined;
+ onMcpAppSendMessage?: (text: string) => Promise;
}
interface ToolCallState {
@@ -20,6 +23,7 @@ interface ToolCallState {
result?: {
content: string;
is_error?: boolean;
+ rawResult?: unknown;
};
status: ToolCallStatus;
subagentSessionId?: string;
@@ -88,7 +92,7 @@ const extractToolCallRequests = (message: Message): FunctionCall[] => {
functionCalls.push({
id: data.id,
name: data.name,
- args: data.args
+ args: data.args ?? {},
});
}
}
@@ -146,6 +150,7 @@ const extractToolCallResults = (message: Message): ProcessedToolResultData[] =>
name: data.name,
content: textContent,
is_error: data.response?.isError || false,
+ raw_result: data.response?.result ?? data.response,
...(subagentSessionId ? { subagent_session_id: subagentSessionId } : {}),
});
}
@@ -172,7 +177,7 @@ const extractToolCallResults = (message: Message): ProcessedToolResultData[] =>
};
-const ToolCallDisplay = ({ currentMessage, allMessages, onApprove, onReject, pendingDecisions }: ToolCallDisplayProps) => {
+const ToolCallDisplay = ({ currentMessage, allMessages, onApprove, onReject, pendingDecisions, getMcpAppForTool, onMcpAppSendMessage }: ToolCallDisplayProps) => {
// Determine which tool call IDs this component instance "owns" by finding,
// for each ID introduced by currentMessage, whether currentMessage is the
// FIRST message in allMessages that introduces that ID.
@@ -289,7 +294,8 @@ const ToolCallDisplay = ({ currentMessage, allMessages, onApprove, onReject, pen
const existingCall = newToolCalls.get(result.call_id)!;
existingCall.result = {
content: result.content,
- is_error: result.is_error
+ is_error: result.is_error,
+ rawResult: result.raw_result,
};
if (result.subagent_session_id && !existingCall.subagentSessionId) {
// Only set from function_response if the 1st pass (function_call
@@ -338,7 +344,7 @@ const ToolCallDisplay = ({ currentMessage, allMessages, onApprove, onReject, pen
const tokenStats = (currentMessage.metadata as Record | undefined)?.tokenStats as TokenStats | undefined;
return (
-
+
+
+ {children}
+
+
+
+ );
+}
diff --git a/ui/src/components/chat/ToolCallDisplay.tsx b/ui/src/components/chat/ToolCallDisplay.tsx
index 9ebaec3e7e..cfe3491bd7 100644
--- a/ui/src/components/chat/ToolCallDisplay.tsx
+++ b/ui/src/components/chat/ToolCallDisplay.tsx
@@ -5,6 +5,7 @@ import AgentCallDisplay, { AgentCallStatus } from "@/components/chat/AgentCallDi
import { isAgentToolName } from "@/lib/utils";
import { ADKMetadata, ProcessedToolCallData, ProcessedToolResultData, ToolResponseData, normalizeToolResultToText, getMetadataValue } from "@/lib/messageHandlers";
import { FunctionCall, ToolDecision, TokenStats } from "@/types";
+import type { ChatMcpAppTool } from "@/components/chat/ChatMcpAppsContext";
interface ToolCallDisplayProps {
currentMessage: Message;
@@ -12,6 +13,8 @@ interface ToolCallDisplayProps {
onApprove?: (toolCallId: string) => void;
onReject?: (toolCallId: string, reason?: string) => void;
pendingDecisions?: Record
+ {segments.map((s, i) => (
+
+ ))}
+
+
+
+
{currentDisplayableCalls.map(toolCall => {
// Determine effective status: use local pending decision for optimistic UI
const localDecision = pendingDecisions?.[toolCall.id];
@@ -378,6 +384,8 @@ const ToolCallDisplay = ({ currentMessage, allMessages, onApprove, onReject, pen
onApprove={showButtons && onApprove ? () => onApprove(toolCall.id) : undefined}
onReject={showButtons && onReject ? (reason?: string) => onReject(toolCall.id, reason) : undefined}
tokenStats={tokenStats}
+ mcpApp={getMcpAppForTool?.(toolCall.call.name)}
+ onMcpAppSendMessage={onMcpAppSendMessage}
/>
);
})}
diff --git a/ui/src/components/chat/__tests__/ChatLayoutUI.test.tsx b/ui/src/components/chat/__tests__/ChatLayoutUI.test.tsx
new file mode 100644
index 0000000000..e52582eefc
--- /dev/null
+++ b/ui/src/components/chat/__tests__/ChatLayoutUI.test.tsx
@@ -0,0 +1,77 @@
+import React from "react";
+import { render, screen, waitFor } from "@testing-library/react";
+import ChatLayoutUI from "@/components/chat/ChatLayoutUI";
+import type { AgentResponse } from "@/types";
+
+// Heavy descendants and server actions are stubbed; this test only verifies the
+// layout wiring, not their behavior.
+jest.mock("@/app/actions/sessions", () => ({
+ getSessionsForAgent: jest.fn().mockResolvedValue({ data: [], error: null }),
+}));
+jest.mock("@/components/sidebars/SessionsSidebar", () => ({
+ __esModule: true,
+ default: () => ,
+}));
+jest.mock("@/components/sidebars/AgentDetailsSidebar", () => ({
+ AgentDetailsSidebar: () => ,
+}));
+jest.mock("@/components/chat/ChatAgentContext", () => ({
+ ChatAgentProvider: ({ children }: { children: React.ReactNode }) => <>{children},
+}));
+
+// Replace the real provider with a marker so we can assert ChatLayoutUI mounts
+// it (and wraps the chat children with it). Without this provider the chat
+// silently falls back to the empty default context and MCP App widgets never
+// render — the regression this test guards against.
+jest.mock("@/components/chat/ChatMcpAppsContext", () => ({
+ ChatMcpAppsProvider: ({
+ currentAgent,
+ children,
+ }: {
+ currentAgent: AgentResponse;
+ children: React.ReactNode;
+ }) => (
+
+ ,
+ );
+}
+
+describe("ChatLayoutUI", () => {
+ it("mounts ChatMcpAppsProvider around the chat so MCP App widgets can render", async () => {
+ renderLayout();
+
+ const provider = await screen.findByTestId("mcp-apps-provider");
+ expect(provider).toHaveAttribute("data-agent", "kanban-mcp-agent");
+ // The chat content must live inside the provider, otherwise tool calls
+ // never resolve to MCP App widgets.
+ expect(provider).toContainElement(screen.getByTestId("chat-child"));
+ });
+
+ it("renders the chat children", async () => {
+ renderLayout();
+ await waitFor(() => expect(screen.getByTestId("chat-child")).toBeInTheDocument());
+ });
+});
diff --git a/ui/src/components/chat/__tests__/ChatMcpAppsContext.test.tsx b/ui/src/components/chat/__tests__/ChatMcpAppsContext.test.tsx
new file mode 100644
index 0000000000..8a70ebf757
--- /dev/null
+++ b/ui/src/components/chat/__tests__/ChatMcpAppsContext.test.tsx
@@ -0,0 +1,111 @@
+import React from "react";
+import { render, screen, waitFor } from "@testing-library/react";
+import {
+ ChatMcpAppsProvider,
+ useChatMcpApps,
+} from "@/components/chat/ChatMcpAppsContext";
+import { listMcpAppTools } from "@/app/actions/mcp-apps";
+import type { AgentResponse } from "@/types";
+
+jest.mock("@/app/actions/mcp-apps", () => ({
+ listMcpAppTools: jest.fn(),
+}));
+
+const mockedListMcpAppTools = listMcpAppTools as jest.Mock;
+
+// An agent that selects all tools from a single RemoteMCPServer (kanban-mcp).
+const currentAgent = {
+ agent: {
+ metadata: { namespace: "kagent", name: "assistant" },
+ },
+ tools: [
+ {
+ type: "McpServer",
+ mcpServer: {
+ kind: "RemoteMCPServer",
+ apiGroup: "kagent.dev",
+ name: "kanban-mcp",
+ namespace: "kagent",
+ toolNames: [], // empty => selects all tools
+ },
+ },
+ ],
+} as unknown as AgentResponse;
+
+function Probe() {
+ const { getMcpAppForTool, getMcpToolForAppCall } = useChatMcpApps();
+ const board = getMcpAppForTool("show_board");
+ const appOnly = getMcpAppForTool("internal_widget");
+ const plain = getMcpAppForTool("plain_tool");
+ const appOnlyTool = getMcpToolForAppCall("kagent", "kanban-mcp", "internal_widget");
+ return (
+
+
+ );
+
+ await waitFor(() => {
+ expect(screen.getByTestId("board").textContent).toBe("kanban-mcp:ui://board");
+ });
+ expect(screen.getByTestId("appOnly").textContent).toBe("none");
+ expect(screen.getByTestId("plain").textContent).toBe("none");
+ expect(screen.getByTestId("appOnlyTool").textContent).toBe("internal_widget:true");
+ expect(mockedListMcpAppTools).toHaveBeenCalledWith("kagent", "kanban-mcp");
+ });
+
+ it("registers no apps when the agent has no MCP servers", async () => {
+ const agentWithoutMcp = {
+ agent: { metadata: { namespace: "kagent", name: "assistant" } },
+ tools: [],
+ } as unknown as AgentResponse;
+
+ render(
+
+
+ );
+
+ await waitFor(() => {
+ expect(screen.getByTestId("board").textContent).toBe("none");
+ });
+ expect(mockedListMcpAppTools).not.toHaveBeenCalled();
+ });
+});
diff --git a/ui/src/components/mcp-apps/McpAppRenderer.tsx b/ui/src/components/mcp-apps/McpAppRenderer.tsx
new file mode 100644
index 0000000000..0b8c82067c
--- /dev/null
+++ b/ui/src/components/mcp-apps/McpAppRenderer.tsx
@@ -0,0 +1,210 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { AppRenderer, type AppRendererProps } from "@mcp-ui/client";
+import type { CallToolResult, ContentBlock } from "@modelcontextprotocol/sdk/types.js";
+import { useTheme } from "next-themes";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { useChatMcpApps } from "@/components/chat/ChatMcpAppsContext";
+import { callMcpAppTool, readMcpAppResource } from "@/app/actions/mcp-apps";
+import { installMcpAppInitCompat } from "@/lib/mcpAppInitCompat";
+
+// Install at module load (before AppRenderer mounts and its transport connects)
+// so non-conformant guests that send `clientInfo` instead of `appInfo` in their
+// `ui/initialize` request still complete the handshake. See mcpAppInitCompat.
+installMcpAppInitCompat();
+
+interface McpAppRendererProps {
+ namespace: string;
+ serverName: string;
+ toolName: string;
+ toolResourceUri: string;
+ toolInput?: Record;
+ toolResult?: CallToolResult;
+ /**
+ * Delivers a message the app pushed into the conversation via the MCP Apps
+ * `ui/message` channel. The host injects it as a new chat turn so the agent
+ * can act on it (e.g. start monitoring a build after the app triggered it).
+ */
+ onSendMessage?: (text: string) => Promise;
+}
+
+/** Join the text content blocks of an app `ui/message` into a single prompt. */
+function extractMessageText(content: ContentBlock[] | undefined): string {
+ if (!Array.isArray(content)) {
+ return "";
+ }
+ return content
+ .filter((block): block is ContentBlock & { type: "text"; text: string } => block?.type === "text" && typeof (block as { text?: unknown }).text === "string")
+ .map((block) => block.text)
+ .join("\n")
+ .trim();
+}
+
+function requireData(response: { data?: T; error?: string; message: string }): T {
+ if (response.error || !response.data) {
+ throw new Error(response.error || response.message);
+ }
+ return response.data;
+}
+
+export function McpAppRenderer({
+ namespace,
+ serverName,
+ toolName,
+ toolResourceUri,
+ toolInput,
+ toolResult,
+ onSendMessage,
+}: McpAppRendererProps) {
+ const { resolvedTheme } = useTheme();
+ const { getMcpToolForAppCall } = useChatMcpApps();
+ const [sandboxUrl, setSandboxUrl] = useState(null);
+ const [connected, setConnected] = useState(false);
+ const [error, setError] = useState(null);
+
+ useEffect(() => {
+ const id = requestAnimationFrame(() => {
+ // Tell the sandbox proxy which origin to trust for postMessage, so it can
+ // reject messages from any other origin instead of accepting "*".
+ const url = new URL("/sandbox_proxy.html", window.location.origin);
+ url.searchParams.set("parentOrigin", window.location.origin);
+ setSandboxUrl(url);
+ });
+ return () => cancelAnimationFrame(id);
+ }, []);
+
+ // Only hand the app its theme/locale once it has connected. @mcp-ui/client@7.1.1
+ // fires setHostContext the moment the AppBridge is created — before the iframe
+ // transport connects — so providing hostContext earlier throws an unhandled
+ // "Not connected" rejection and never reaches the guest. The first
+ // size-changed notification only arrives post-connect, so we use it as the
+ // connected signal (see handleSizeChanged). ponytail: an app that never
+ // reports its size won't get theme sync and falls back to its own theme —
+ // acceptable degradation; the upgrade path is a library fix that delivers
+ // hostContext at ui/initialize instead of via a pre-connect notification.
+ const hostContext = useMemo(
+ () => connected
+ ? {
+ theme: resolvedTheme === "dark" ? "dark" : "light",
+ locale: typeof navigator !== "undefined" ? navigator.language : "en-US",
+ }
+ : undefined,
+ [connected, resolvedTheme],
+ );
+
+ const sandbox = useMemo(() => sandboxUrl ? { url: sandboxUrl } : undefined, [sandboxUrl]);
+
+ // Advertise the host channels we actually implement so capability-gated apps
+ // know they can proxy tool/resource calls and push messages to the chat.
+ const hostCapabilities = useMemo>(() => ({
+ serverTools: {},
+ serverResources: {},
+ openLinks: {},
+ message: { text: {} },
+ }), []);
+
+ const handleReadResource = useCallback>(async ({ uri }) => {
+ return requireData(await readMcpAppResource(namespace, serverName, uri));
+ }, [namespace, serverName]);
+
+ // An iframe-initiated tools/call is the app updating itself: proxy it to the
+ // MCP server and return the result to the same widget so it re-renders in
+ // place (MCP Apps standard). We do NOT promote it to a new chat turn, even
+ // when the tool is also model-visible — that would spawn a duplicate widget
+ // instead of updating the existing one. Apps that want the agent to act use
+ // the separate ui/message channel (onMessage) instead.
+ const handleCallTool = useCallback>(async (params) => {
+ const requestedToolName = typeof params.name === "string" && params.name ? params.name : toolName;
+ const args = typeof params.arguments === "object" && params.arguments !== null
+ ? (params.arguments as Record)
+ : {};
+ const requestedTool = getMcpToolForAppCall(namespace, serverName, requestedToolName);
+
+ if (requestedTool && !requestedTool.appOnly && !requestedTool.agentVisible) {
+ throw new Error(`MCP App requested tool ${requestedToolName}, but it is not configured as app-only or agent-visible.`);
+ }
+
+ return requireData(await callMcpAppTool(namespace, serverName, requestedToolName, args));
+ }, [getMcpToolForAppCall, namespace, serverName, toolName]);
+
+ // ui/message: the app asks the host to inject content into the conversation.
+ // We forward it as a new chat turn so the agent can react (e.g. start
+ // monitoring a build the app just triggered).
+ const handleMessage = useCallback>(async (params) => {
+ const text = extractMessageText(params.content as ContentBlock[] | undefined);
+ if (!text) {
+ return { isError: true };
+ }
+ if (!onSendMessage) {
+ return { isError: true };
+ }
+ try {
+ await onSendMessage(text);
+ return {};
+ } catch {
+ return { isError: true };
+ }
+ }, [onSendMessage]);
+
+ // Gracefully accept protocol requests we don't act on (e.g.
+ // ui/update-model-context) so apps that send them don't surface errors.
+ const handleFallbackRequest = useCallback>(async () => {
+ return {};
+ }, []);
+
+ const handleOpenLink = useCallback>(async ({ url }) => {
+ const target = new URL(String(url), window.location.href);
+ if (target.protocol !== "http:" && target.protocol !== "https:") {
+ const message = `Blocked unsupported link scheme: ${target.protocol}`;
+ setError(message);
+ throw new Error(message);
+ }
+ window.open(target.toString(), "_blank", "noopener,noreferrer");
+ return {};
+ }, []);
+
+ const handleError = useCallback>((err) => {
+ setError(err.message);
+ }, []);
+
+ // The guest can only emit size-changed once its transport is connected, so we
+ // treat the first one as the signal that it's safe to push hostContext.
+ const handleSizeChanged = useCallback>(() => {
+ setConnected(true);
+ }, []);
+
+ if (error) {
+ return (
+
+ MCP App error
+ {error}
+
+ );
+ }
+
+ if (!sandboxUrl) {
+ return , b: Set): boolean {
if (a.size !== b.size) {
@@ -58,9 +62,32 @@ export function McpServersView({ servers, isLoading, loadError, onRefresh }: Mcp
const [expandedServers, setExpandedServers] = useState>(new Set());
const [showConfirmDelete, setShowConfirmDelete] = useState(null);
const [openDropdownMenu, setOpenDropdownMenu] = useState(null);
+ // UI-capable (MCP App) tool names per server ref. DiscoveredTool carries no
+ // UI metadata, so we cross-reference listMcpAppTools to mark app tools inline.
+ const [appToolsByServer, setAppToolsByServer] = useState>>({});
+ const fetchedAppServers = useRef>(new Set());
const q = searchQuery.trim().toLowerCase();
+ const loadAppTools = useCallback(async (serverName: string) => {
+ if (fetchedAppServers.current.has(serverName) || !k8sRefUtils.isValidRef(serverName)) {
+ return;
+ }
+ fetchedAppServers.current.add(serverName);
+ const { namespace, name } = k8sRefUtils.fromRef(serverName);
+ const res = await listMcpAppTools(namespace, name);
+ // Fail-soft: servers the backend can't introspect for UI tools (e.g. an
+ // MCPServer CRD) just show no app markers. ponytail: no retry on error.
+ if (res.error || !res.data) {
+ return;
+ }
+ const names = new Set(res.data.filter((t) => t.uiResourceUri).map((t) => t.name));
+ if (names.size === 0) {
+ return;
+ }
+ setAppToolsByServer((prev) => ({ ...prev, [serverName]: names }));
+ }, []);
+
const displayList = useMemo((): DisplayServer[] => {
if (!q) {
return servers
@@ -116,6 +143,20 @@ export function McpServersView({ servers, isLoading, loadError, onRefresh }: Mcp
return () => cancelAnimationFrame(id);
}, [q, displayRefs]);
+ // Lazily fetch UI-tool classification for whichever servers are expanded
+ // (handles both manual toggling and search-driven auto-expand). loadAppTools
+ // dedupes via fetchedAppServers, so this only does real work for new servers.
+ // Deferred via rAF to avoid react-hooks/set-state-in-effect (same pattern as
+ // the search auto-expand effect above).
+ useEffect(() => {
+ const id = requestAnimationFrame(() => {
+ for (const serverName of expandedServers) {
+ void loadAppTools(serverName);
+ }
+ });
+ return () => cancelAnimationFrame(id);
+ }, [expandedServers, loadAppTools]);
+
const handleDeleteServer = async (serverName: string) => {
const response = await deleteServer(serverName);
if (!response.error) {
@@ -229,6 +270,7 @@ export function McpServersView({ servers, isLoading, loadError, onRefresh }: Mcp
}
const serverName: string = server.ref;
const isExpanded = expandedServers.has(serverName);
+ const appToolNames = appToolsByServer[serverName];
return (
+ {children}
+
+ ),
+}));
+
+const currentAgent = {
+ agent: {
+ metadata: { namespace: "kagent", name: "kanban-mcp-agent" },
+ spec: { type: "Declarative" },
+ },
+ workloadMode: "deployment",
+} as unknown as AgentResponse;
+
+function renderLayout() {
+ return render(
+ chat
+
+ {board ? `${board.serverName}:${board.uiResourceUri}` : "none"}
+ {appOnly ? "yes" : "none"}
+ {plain ? "yes" : "none"}
+
+ {appOnlyTool ? `${appOnlyTool.toolName}:${appOnlyTool.appOnly}` : "none"}
+
+
+ );
+}
+
+describe("ChatMcpAppsProvider", () => {
+ beforeEach(() => {
+ jest.clearAllMocks();
+ });
+
+ it("registers agent-visible UI tools as apps and excludes app-only and non-UI tools", async () => {
+ mockedListMcpAppTools.mockResolvedValue({
+ error: false,
+ data: [
+ // Visible to both model and app -> agent-visible app.
+ {
+ name: "show_board",
+ uiResourceUri: "ui://board",
+ _meta: { ui: { visibility: ["model", "app"] } },
+ },
+ // App-only -> not surfaced via getMcpAppForTool, but resolvable for app calls.
+ {
+ name: "internal_widget",
+ uiResourceUri: "ui://widget",
+ _meta: { ui: { visibility: "app" } },
+ },
+ // No UI resource -> never an app.
+ { name: "plain_tool" },
+ ],
+ });
+
+ render(
+ Preparing MCP App renderer...
;
+ }
+
+ return (
+
+ }
+ hostContext={hostContext}
+ hostCapabilities={hostCapabilities}
+ onReadResource={handleReadResource}
+ onCallTool={handleCallTool}
+ onMessage={handleMessage}
+ onFallbackRequest={handleFallbackRequest}
+ onOpenLink={handleOpenLink}
+ onSizeChanged={handleSizeChanged}
+ onError={handleError}
+ />
+
+ );
+}
diff --git a/ui/src/components/mcp/McpServersView.tsx b/ui/src/components/mcp/McpServersView.tsx
index b640ae74db..8a2369e171 100644
--- a/ui/src/components/mcp/McpServersView.tsx
+++ b/ui/src/components/mcp/McpServersView.tsx
@@ -1,6 +1,6 @@
"use client";
-import { useState, useMemo, useCallback, useEffect } from "react";
+import { useState, useMemo, useCallback, useEffect, useRef } from "react";
import Link from "next/link";
import {
Server,
@@ -12,17 +12,21 @@ import {
Plus,
FunctionSquare,
AlertCircle,
+ AppWindow,
} from "lucide-react";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
import { ToolServerResponse, DiscoveredTool } from "@/types";
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
import { deleteServer } from "@/app/actions/servers";
+import { listMcpAppTools } from "@/app/actions/mcp-apps";
import { ConfirmDialog } from "@/components/ConfirmDialog";
import { toast } from "sonner";
import { useAgents } from "@/components/AgentsProvider";
import { getDiscoveredToolDescription, getDiscoveredToolDisplayName } from "@/lib/toolUtils";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { k8sRefUtils } from "@/lib/k8sUtils";
function setsEqualString(a: Set
@@ -302,20 +344,32 @@ export function McpServersView({ servers, isLoading, loadError, onRefresh }: Mcp
.map((tool) => {
const desc = getDiscoveredToolDescription(tool);
const showDesc = desc && desc !== "No description available";
+ const isApp = appToolNames?.has(tool.name) ?? false;
+ const ToolIcon = isApp ? AppWindow : FunctionSquare;
return (
-
-
- {highlight(getDiscoveredToolDisplayName(tool))}
+
+
+ {highlight(getDiscoveredToolDisplayName(tool))}
+
+ {isApp ? (
+
+ App
+
+ ) : null}
{showDesc ? (
diff --git a/ui/src/lib/__tests__/mcpAppInitCompat.test.ts b/ui/src/lib/__tests__/mcpAppInitCompat.test.ts
new file mode 100644
index 0000000000..e37a77bb4b
--- /dev/null
+++ b/ui/src/lib/__tests__/mcpAppInitCompat.test.ts
@@ -0,0 +1,104 @@
+import { describe, expect, test } from "@jest/globals";
+import {
+ installMcpAppInitCompat,
+ normalizeMcpAppInitializeMessage,
+} from "@/lib/mcpAppInitCompat";
+
+describe("normalizeMcpAppInitializeMessage", () => {
+ test("maps clientInfo to appInfo when appInfo is missing", () => {
+ const data = {
+ jsonrpc: "2.0",
+ id: 1,
+ method: "ui/initialize",
+ params: {
+ protocolVersion: "2026-01-26",
+ capabilities: {},
+ appCapabilities: { availableDisplayModes: ["inline"] },
+ clientInfo: { name: "weather-dashboard", version: "1.0.0" },
+ },
+ };
+ expect(normalizeMcpAppInitializeMessage(data)).toBe(true);
+ expect(data.params).toMatchObject({
+ appInfo: { name: "weather-dashboard", version: "1.0.0" },
+ });
+ });
+
+ test("preserves an optional title from clientInfo", () => {
+ const data = {
+ method: "ui/initialize",
+ params: { clientInfo: { name: "w", version: "1.0.0", title: "Weather" } },
+ };
+ normalizeMcpAppInitializeMessage(data);
+ expect((data.params as { appInfo?: unknown }).appInfo).toEqual({
+ name: "w",
+ version: "1.0.0",
+ title: "Weather",
+ });
+ });
+
+ test("leaves conformant appInfo untouched", () => {
+ const data = {
+ method: "ui/initialize",
+ params: {
+ appInfo: { name: "conformant", version: "2.0.0" },
+ clientInfo: { name: "ignored", version: "9.9.9" },
+ },
+ };
+ expect(normalizeMcpAppInitializeMessage(data)).toBe(false);
+ expect(data.params.appInfo).toEqual({ name: "conformant", version: "2.0.0" });
+ });
+
+ test("ignores non-initialize messages", () => {
+ expect(
+ normalizeMcpAppInitializeMessage({
+ method: "ui/notifications/size-changed",
+ params: { width: 760, height: 600 },
+ }),
+ ).toBe(false);
+ });
+
+ test("ignores initialize without a usable clientInfo", () => {
+ expect(
+ normalizeMcpAppInitializeMessage({
+ method: "ui/initialize",
+ params: { clientInfo: { name: "missing-version" } },
+ }),
+ ).toBe(false);
+ });
+
+ test("is null-safe for non-object input", () => {
+ expect(normalizeMcpAppInitializeMessage(null)).toBe(false);
+ expect(normalizeMcpAppInitializeMessage("ui/initialize")).toBe(false);
+ expect(normalizeMcpAppInitializeMessage(undefined)).toBe(false);
+ });
+});
+
+describe("installMcpAppInitCompat (runtime mechanism)", () => {
+ // Mirrors production: the compat listener is installed first, then the
+ // ext-apps transport attaches its listener on connect. The transport must
+ // observe the appInfo we patched onto the same stable event.data reference.
+ test("fix is visible to a later-registered transport-style listener", () => {
+ installMcpAppInitCompat();
+
+ let appInfoSeenByTransport: unknown;
+ window.addEventListener("message", (event: MessageEvent) => {
+ appInfoSeenByTransport = (event.data as { params?: { appInfo?: unknown } })?.params?.appInfo;
+ });
+
+ window.dispatchEvent(
+ new MessageEvent("message", {
+ data: {
+ jsonrpc: "2.0",
+ id: 1,
+ method: "ui/initialize",
+ params: { clientInfo: { name: "weather-dashboard", version: "1.0.0" } },
+ },
+ }),
+ );
+
+ expect(appInfoSeenByTransport).toEqual({
+ name: "weather-dashboard",
+ version: "1.0.0",
+ });
+ });
+});
diff --git a/ui/src/lib/__tests__/mcpAppToolResult.test.ts b/ui/src/lib/__tests__/mcpAppToolResult.test.ts
new file mode 100644
index 0000000000..980d1f34f4
--- /dev/null
+++ b/ui/src/lib/__tests__/mcpAppToolResult.test.ts
@@ -0,0 +1,77 @@
+import { describe, expect, test } from "@jest/globals";
+import {
+ buildMcpAppRenderPayload,
+ normalizeMcpToolArgs,
+ toMcpAppToolResult,
+ withMcpAppToolInput,
+} from "@/lib/mcpAppToolResult";
+
+describe("mcpAppToolResult", () => {
+ test("normalizeMcpToolArgs unwraps nested arguments", () => {
+ expect(normalizeMcpToolArgs({ arguments: { location: "New York" } })).toEqual({
+ location: "New York",
+ });
+ });
+
+ test("normalizeMcpToolArgs parses JSON strings", () => {
+ expect(normalizeMcpToolArgs('{"location":"Chicago"}')).toEqual({ location: "Chicago" });
+ });
+
+ test("toMcpAppToolResult maps ADK output wrapper to structuredContent", () => {
+ const result = toMcpAppToolResult(
+ { output: { temperature: 33, conditions: "Cloudy", humidity: 82 } },
+ "",
+ );
+ expect(result?.structuredContent).toEqual({
+ temperature: 33,
+ conditions: "Cloudy",
+ humidity: 82,
+ });
+ });
+
+ test("toMcpAppToolResult preserves MCP structuredContent when content is compacted", () => {
+ const result = toMcpAppToolResult(
+ {
+ content: [{ type: "text", text: "rendered" }],
+ structuredContent: { temperature: 36, conditions: "Rain", humidity: 82 },
+ },
+ "",
+ );
+ expect(result?.structuredContent).toEqual({
+ temperature: 36,
+ conditions: "Rain",
+ humidity: 82,
+ });
+ });
+
+ test("withMcpAppToolInput merges location into structuredContent", () => {
+ const merged = withMcpAppToolInput(
+ {
+ content: [{ type: "text", text: "ok" }],
+ structuredContent: { temperature: 36, conditions: "Rain", humidity: 82 },
+ },
+ { location: "Chicago" },
+ );
+ expect(merged?.structuredContent).toEqual({
+ location: "Chicago",
+ temperature: 36,
+ conditions: "Rain",
+ humidity: 82,
+ });
+ });
+
+ test("buildMcpAppRenderPayload passes location to toolInput and structuredContent", () => {
+ const { toolInput, toolResult } = buildMcpAppRenderPayload(
+ { output: { temperature: 33, conditions: "Cloudy", humidity: 82 } },
+ "",
+ { location: "New York" },
+ );
+ expect(toolInput).toEqual({ location: "New York" });
+ expect(toolResult?.structuredContent).toEqual({
+ location: "New York",
+ temperature: 33,
+ conditions: "Cloudy",
+ humidity: 82,
+ });
+ });
+});
diff --git a/ui/src/lib/mcpAppInitCompat.ts b/ui/src/lib/mcpAppInitCompat.ts
new file mode 100644
index 0000000000..b8b32f634f
--- /dev/null
+++ b/ui/src/lib/mcpAppInitCompat.ts
@@ -0,0 +1,99 @@
+/**
+ * Compatibility shim for MCP Apps guest widgets that still send the base-MCP
+ * `clientInfo` field in their `ui/initialize` request instead of the MCP Apps
+ * `appInfo` field required by `@modelcontextprotocol/ext-apps`.
+ *
+ * Without this, the host's AppBridge rejects the handshake with
+ * `-32603 invalid_type at params.appInfo`, never emits the `initialized`
+ * acknowledgement, and therefore never sends `tool-input`/`tool-result` — so
+ * such widgets hang forever on their loading state (e.g. "Waiting for data…").
+ *
+ * The guest posts `ui/initialize` straight to the host window (the sandbox
+ * proxy `document.write`s the guest HTML into its own document, replacing its
+ * relay listener), so the only host-side seam is the window `message` intake.
+ * We register early — before `@mcp-ui/client` creates its transport — and
+ * mutate the message in place so the ext-apps transport validates the fixed
+ * payload. `MessageEvent.data` returns a stable object reference, so the
+ * in-place edit is visible to listeners that run after us.
+ *
+ * ponytail: this only patches the one known-divergent field (`clientInfo` →
+ * `appInfo`). The correct fix is conformant guest widgets; the upgrade path is
+ * deleting this shim once widgets send `appInfo` themselves.
+ */
+
+interface AppIdentity {
+ name: string;
+ version: string;
+ title?: string;
+}
+
+interface UiInitializeRequest {
+ method: "ui/initialize";
+ params: Record & {
+ appInfo?: unknown;
+ clientInfo?: unknown;
+ };
+}
+
+function isPlainObject(value: unknown): value is Record {
+ return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
+function isUiInitializeRequest(value: unknown): value is UiInitializeRequest {
+ return (
+ isPlainObject(value) &&
+ value.method === "ui/initialize" &&
+ isPlainObject(value.params)
+ );
+}
+
+function isAppIdentity(value: unknown): value is AppIdentity {
+ return (
+ isPlainObject(value) &&
+ typeof value.name === "string" &&
+ typeof value.version === "string"
+ );
+}
+
+/**
+ * If `data` is a `ui/initialize` request that carries `clientInfo` but no
+ * `appInfo`, derive `appInfo` from it in place. Returns true when a fix was
+ * applied. Exported for unit testing.
+ */
+export function normalizeMcpAppInitializeMessage(data: unknown): boolean {
+ if (!isUiInitializeRequest(data)) {
+ return false;
+ }
+ const { params } = data;
+ if (params.appInfo !== undefined) {
+ return false;
+ }
+ if (!isAppIdentity(params.clientInfo)) {
+ return false;
+ }
+ const { name, version, title } = params.clientInfo;
+ params.appInfo = title ? { name, version, title } : { name, version };
+ return true;
+}
+
+let installed = false;
+
+/**
+ * Idempotently install the host-side `ui/initialize` normalizer. Must run
+ * before `@mcp-ui/client` attaches its transport listener so we win the
+ * registration-order race at the message target; importing this from the
+ * MCP App renderer module guarantees that.
+ */
+export function installMcpAppInitCompat(): void {
+ if (installed || typeof window === "undefined") {
+ return;
+ }
+ installed = true;
+ window.addEventListener(
+ "message",
+ (event: MessageEvent) => {
+ normalizeMcpAppInitializeMessage(event.data);
+ },
+ true,
+ );
+}
diff --git a/ui/src/lib/mcpAppToolResult.ts b/ui/src/lib/mcpAppToolResult.ts
new file mode 100644
index 0000000000..e0649f23df
--- /dev/null
+++ b/ui/src/lib/mcpAppToolResult.ts
@@ -0,0 +1,121 @@
+import type { CallToolResult } from "@modelcontextprotocol/sdk/types.js";
+
+function isCallToolResult(value: unknown): value is CallToolResult {
+ return typeof value === "object" && value !== null && Array.isArray((value as { content?: unknown }).content);
+}
+
+function stringifyToolPayload(value: unknown, fallback: string): string {
+ if (typeof value === "string") {
+ return value;
+ }
+ if (value === undefined || value === null) {
+ return fallback;
+ }
+ try {
+ return JSON.stringify(value);
+ } catch {
+ return fallback;
+ }
+}
+
+/** Normalize tool-call args from chat history into a plain object for MCP Apps toolInput. */
+export function normalizeMcpToolArgs(args: unknown): Record {
+ let value = args;
+ if (typeof value === "string") {
+ try {
+ value = JSON.parse(value) as unknown;
+ } catch {
+ return {};
+ }
+ }
+ if (typeof value !== "object" || value === null || Array.isArray(value)) {
+ return {};
+ }
+ const record = value as Record;
+ const nested = record.arguments;
+ if (typeof nested === "object" && nested !== null && !Array.isArray(nested)) {
+ return nested as Record;
+ }
+ return record;
+}
+
+function unwrapAgentToolPayload(value: unknown): Record | undefined {
+ if (typeof value !== "object" || value === null) {
+ return undefined;
+ }
+ const record = value as Record;
+ if ("result" in record && typeof record.result === "object" && record.result !== null) {
+ return unwrapAgentToolPayload(record.result) ?? (record.result as Record);
+ }
+ return record;
+}
+
+function extractStructuredPayload(record: Record): Record | undefined {
+ if (record.structuredContent != null && typeof record.structuredContent === "object" && !Array.isArray(record.structuredContent)) {
+ return record.structuredContent as Record;
+ }
+ if (record.output != null && typeof record.output === "object" && !Array.isArray(record.output)) {
+ return record.output as Record;
+ }
+ return undefined;
+}
+
+/**
+ * Convert agent/MCP tool responses into a CallToolResult for @mcp-ui/client.
+ * Handles ADK mcptoolset `{ output: structuredContent }` and full MCP results.
+ */
+export function toMcpAppToolResult(value: unknown, fallbackContent: string): CallToolResult | undefined {
+ const record = unwrapAgentToolPayload(value);
+ if (!record) {
+ return undefined;
+ }
+
+ const structuredContent = extractStructuredPayload(record);
+ const isError = record.isError === true || record.error === true;
+
+ if (structuredContent) {
+ return {
+ content: isCallToolResult(record)
+ ? record.content
+ : [{ type: "text", text: stringifyToolPayload(structuredContent, fallbackContent) }],
+ structuredContent,
+ isError,
+ };
+ }
+
+ if (isCallToolResult(record)) {
+ return record;
+ }
+
+ return undefined;
+}
+
+/** Merge tool-call args (e.g. location) into structuredContent for MCP App widgets. */
+export function withMcpAppToolInput(
+ toolResult: CallToolResult | undefined,
+ toolArgs: Record,
+): CallToolResult | undefined {
+ if (!toolResult || Object.keys(toolArgs).length === 0) {
+ return toolResult;
+ }
+ return {
+ ...toolResult,
+ structuredContent: {
+ ...toolArgs,
+ ...(toolResult.structuredContent ?? {}),
+ },
+ };
+}
+
+export function buildMcpAppRenderPayload(
+ rawResult: unknown,
+ fallbackContent: string,
+ toolArgs: unknown,
+): { toolInput: Record; toolResult: CallToolResult | undefined } {
+ const toolInput = normalizeMcpToolArgs(toolArgs);
+ const toolResult = withMcpAppToolInput(
+ toMcpAppToolResult(rawResult, fallbackContent),
+ toolInput,
+ );
+ return { toolInput, toolResult };
+}
diff --git a/ui/src/lib/messageHandlers.ts b/ui/src/lib/messageHandlers.ts
index df0be16595..d3a277f3d3 100644
--- a/ui/src/lib/messageHandlers.ts
+++ b/ui/src/lib/messageHandlers.ts
@@ -122,6 +122,7 @@ export function extractMessagesFromTasks(tasks: Task[]): Message[] {
name: toolData.name,
content: normalizeToolResultToText(toolData),
is_error: toolData.response?.isError || false,
+ raw_result: getRawToolResult(toolData),
...(frSubagentSessionId ? { subagent_session_id: frSubagentSessionId } : {}),
}],
},
@@ -555,6 +556,7 @@ export interface ToolResponseData {
response?: {
isError?: boolean;
result?: unknown;
+ [key: string]: unknown;
};
}
@@ -571,9 +573,14 @@ export interface ProcessedToolResultData {
name: string;
content: string;
is_error: boolean;
+ raw_result?: unknown;
subagent_session_id?: string;
}
+export function getRawToolResult(toolData: ToolResponseData): unknown {
+ return toolData.response?.result ?? toolData.response;
+}
+
// Normalize various tool response result shapes into plain text
export function normalizeToolResultToText(toolData: ToolResponseData): string {
const result = toolData.response?.result || toolData.response;
@@ -805,6 +812,7 @@ export const createMessageHandlers = (handlers: MessageHandlers) => {
name: toolData.name,
content,
is_error: toolData.response?.isError || false,
+ raw_result: getRawToolResult(toolData),
...(subagentSessionId ? { subagent_session_id: subagentSessionId } : {}),
}];
const execEvent = createMessage(
@@ -1070,6 +1078,7 @@ export const createMessageHandlers = (handlers: MessageHandlers) => {
name: toolData.name,
content: textContent,
is_error: toolData.response?.isError || false,
+ raw_result: getRawToolResult(toolData),
...(artifactSubagentSessionId ? { subagent_session_id: artifactSubagentSessionId } : {}),
}];
const convertedMessage = createMessage("", source, { originalType: "ToolCallExecutionEvent", contextId: artifactUpdate.contextId, taskId: artifactUpdate.taskId, additionalMetadata: { toolResultData: toolResultContent } });