{actions ?
{actions}
: null}
diff --git a/desktop/src/features/mcp-apps/lib/channelMcpAppStorage.test.mjs b/desktop/src/features/mcp-apps/lib/channelMcpAppStorage.test.mjs
new file mode 100644
index 0000000000..0501cd7427
--- /dev/null
+++ b/desktop/src/features/mcp-apps/lib/channelMcpAppStorage.test.mjs
@@ -0,0 +1,51 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+
+import { parseChannelMcpAppStore } from "./channelMcpAppStorage.ts";
+
+test("parses only complete MCP App installations", () => {
+ assert.deepEqual(
+ parseChannelMcpAppStore({
+ version: 1,
+ channels: {
+ channel: [
+ {
+ id: "board",
+ endpoint: "https://runtime.example/mcp",
+ serverName: "Runtime",
+ toolName: "board.open",
+ title: "Board",
+ resourceUri: "ui://runtime/board",
+ arguments: { space: "alpha" },
+ },
+ {
+ id: "bad",
+ endpoint: "https://runtime.example/mcp",
+ toolName: "bad.open",
+ resourceUri: "https://runtime.example/app",
+ },
+ ],
+ },
+ }),
+ {
+ version: 1,
+ channels: {
+ channel: [
+ {
+ id: "board",
+ endpoint: "https://runtime.example/mcp",
+ serverName: "Runtime",
+ toolName: "board.open",
+ title: "Board",
+ resourceUri: "ui://runtime/board",
+ arguments: { space: "alpha" },
+ },
+ ],
+ },
+ },
+ );
+});
+
+test("rejects unknown store versions", () => {
+ assert.equal(parseChannelMcpAppStore({ version: 2, channels: {} }), null);
+});
diff --git a/desktop/src/features/mcp-apps/lib/channelMcpAppStorage.ts b/desktop/src/features/mcp-apps/lib/channelMcpAppStorage.ts
new file mode 100644
index 0000000000..8d30e87387
--- /dev/null
+++ b/desktop/src/features/mcp-apps/lib/channelMcpAppStorage.ts
@@ -0,0 +1,186 @@
+const STORAGE_KEY_PREFIX = "buzz-channel-mcp-apps.v1";
+
+export const CHANNEL_MCP_APPS_CHANGE_EVENT = "buzz:channel-mcp-apps-change";
+
+export type ChannelMcpAppInstallation = {
+ id: string;
+ endpoint: string;
+ serverName: string;
+ toolName: string;
+ title: string;
+ resourceUri: string;
+ arguments: Record
;
+};
+
+type ChannelMcpAppStore = {
+ version: 1;
+ channels: Record;
+};
+
+const EMPTY_STORE: ChannelMcpAppStore = {
+ version: 1,
+ channels: {},
+};
+
+function storageKey(pubkey: string): string {
+ return `${STORAGE_KEY_PREFIX}:${pubkey}`;
+}
+
+function normalizeInstallation(
+ value: unknown,
+): ChannelMcpAppInstallation | null {
+ if (!value || typeof value !== "object" || Array.isArray(value)) return null;
+ const source = value as Record;
+ const id = typeof source.id === "string" ? source.id.trim() : "";
+ const endpoint =
+ typeof source.endpoint === "string" ? source.endpoint.trim() : "";
+ const toolName =
+ typeof source.toolName === "string" ? source.toolName.trim() : "";
+ const resourceUri =
+ typeof source.resourceUri === "string" ? source.resourceUri.trim() : "";
+ if (!id || !endpoint || !toolName || !resourceUri.startsWith("ui://")) {
+ return null;
+ }
+ const argumentsValue =
+ source.arguments &&
+ typeof source.arguments === "object" &&
+ !Array.isArray(source.arguments)
+ ? (source.arguments as Record)
+ : {};
+ return {
+ id,
+ endpoint,
+ serverName:
+ typeof source.serverName === "string" && source.serverName.trim()
+ ? source.serverName.trim()
+ : endpoint,
+ toolName,
+ title:
+ typeof source.title === "string" && source.title.trim()
+ ? source.title.trim()
+ : toolName,
+ resourceUri,
+ arguments: argumentsValue,
+ };
+}
+
+export function parseChannelMcpAppStore(
+ value: unknown,
+): ChannelMcpAppStore | null {
+ if (!value || typeof value !== "object" || Array.isArray(value)) return null;
+ const source = value as Record;
+ if (
+ source.version !== 1 ||
+ !source.channels ||
+ typeof source.channels !== "object" ||
+ Array.isArray(source.channels)
+ ) {
+ return null;
+ }
+ const channels = Object.fromEntries(
+ Object.entries(source.channels as Record).flatMap(
+ ([channelId, installations]) => {
+ if (!Array.isArray(installations)) return [];
+ const normalized = installations
+ .map(normalizeInstallation)
+ .filter(
+ (installation): installation is ChannelMcpAppInstallation =>
+ installation !== null,
+ );
+ return normalized.length > 0 ? [[channelId, normalized]] : [];
+ },
+ ),
+ );
+ return { version: 1, channels };
+}
+
+function readStore(pubkey: string): ChannelMcpAppStore {
+ if (typeof window === "undefined") return EMPTY_STORE;
+ try {
+ const raw = window.localStorage.getItem(storageKey(pubkey));
+ if (!raw) return EMPTY_STORE;
+ return parseChannelMcpAppStore(JSON.parse(raw)) ?? EMPTY_STORE;
+ } catch {
+ return EMPTY_STORE;
+ }
+}
+
+function notify(): void {
+ if (
+ typeof window !== "undefined" &&
+ typeof window.dispatchEvent === "function"
+ ) {
+ window.dispatchEvent(new CustomEvent(CHANNEL_MCP_APPS_CHANGE_EVENT));
+ }
+}
+
+function writeStore(pubkey: string, store: ChannelMcpAppStore): boolean {
+ if (typeof window === "undefined") return false;
+ try {
+ window.localStorage.setItem(storageKey(pubkey), JSON.stringify(store));
+ notify();
+ return true;
+ } catch {
+ return false;
+ }
+}
+
+export function subscribeChannelMcpApps(listener: () => void): () => void {
+ if (typeof window === "undefined") return () => {};
+ const onChange = () => listener();
+ const onStorage = (event: StorageEvent) => {
+ if (event.key === null || event.key.startsWith(STORAGE_KEY_PREFIX)) {
+ listener();
+ }
+ };
+ window.addEventListener(CHANNEL_MCP_APPS_CHANGE_EVENT, onChange);
+ window.addEventListener("storage", onStorage);
+ return () => {
+ window.removeEventListener(CHANNEL_MCP_APPS_CHANGE_EVENT, onChange);
+ window.removeEventListener("storage", onStorage);
+ };
+}
+
+export function getChannelMcpApps(
+ pubkey: string,
+ channelId: string,
+): ChannelMcpAppInstallation[] {
+ return [...(readStore(pubkey).channels[channelId] ?? [])];
+}
+
+export function installChannelMcpApp(
+ pubkey: string,
+ channelId: string,
+ installation: ChannelMcpAppInstallation,
+): boolean {
+ const store = readStore(pubkey);
+ const current = store.channels[channelId] ?? [];
+ const next = [
+ ...current.filter((candidate) => candidate.id !== installation.id),
+ installation,
+ ];
+ return writeStore(pubkey, {
+ version: 1,
+ channels: { ...store.channels, [channelId]: next },
+ });
+}
+
+export function removeChannelMcpApp(
+ pubkey: string,
+ channelId: string,
+ installationId: string,
+): boolean {
+ const store = readStore(pubkey);
+ const current = store.channels[channelId] ?? [];
+ const next = current.filter(
+ (installation) => installation.id !== installationId,
+ );
+ if (next.length === current.length) return true;
+ const channels = { ...store.channels };
+ if (next.length > 0) {
+ channels[channelId] = next;
+ } else {
+ delete channels[channelId];
+ }
+ return writeStore(pubkey, { version: 1, channels });
+}
diff --git a/desktop/src/features/mcp-apps/lib/mcpAppBridge.test.mjs b/desktop/src/features/mcp-apps/lib/mcpAppBridge.test.mjs
new file mode 100644
index 0000000000..9416cdc623
--- /dev/null
+++ b/desktop/src/features/mcp-apps/lib/mcpAppBridge.test.mjs
@@ -0,0 +1,43 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+
+import {
+ defaultMcpAppHostContext,
+ mcpAppSandboxOrigin,
+} from "./mcpAppBridge.ts";
+
+test("derives an exact origin for the custom sandbox protocol", () => {
+ assert.equal(
+ mcpAppSandboxOrigin("buzz-mcp-app://localhost/7f6d"),
+ "buzz-mcp-app://localhost",
+ );
+});
+
+test("default host context identifies Buzz as a desktop host", () => {
+ const originalDocument = globalThis.document;
+ const originalNavigator = globalThis.navigator;
+ const originalWindow = globalThis.window;
+ globalThis.document = {
+ documentElement: { classList: { contains: () => true } },
+ };
+ Object.defineProperty(globalThis, "navigator", {
+ configurable: true,
+ value: { language: "en-US", maxTouchPoints: 0 },
+ });
+ globalThis.window = {
+ matchMedia: () => ({ matches: true }),
+ };
+
+ const context = defaultMcpAppHostContext();
+ assert.equal(context.platform, "desktop");
+ assert.equal(context.theme, "dark");
+ assert.equal(context.locale, "en-US");
+ assert.deepEqual(context.availableDisplayModes, ["inline", "fullscreen"]);
+
+ globalThis.document = originalDocument;
+ Object.defineProperty(globalThis, "navigator", {
+ configurable: true,
+ value: originalNavigator,
+ });
+ globalThis.window = originalWindow;
+});
diff --git a/desktop/src/features/mcp-apps/lib/mcpAppBridge.ts b/desktop/src/features/mcp-apps/lib/mcpAppBridge.ts
new file mode 100644
index 0000000000..4d50866fe5
--- /dev/null
+++ b/desktop/src/features/mcp-apps/lib/mcpAppBridge.ts
@@ -0,0 +1,257 @@
+import {
+ AppBridge,
+ type McpUiHostContext,
+ type McpUiResourceCsp,
+} from "@modelcontextprotocol/ext-apps/app-bridge";
+import type {
+ Transport,
+ TransportSendOptions,
+} from "@modelcontextprotocol/sdk/shared/transport.js";
+import type {
+ CallToolResult,
+ JSONRPCMessage,
+ ListResourcesResult,
+ MessageExtraInfo,
+ ReadResourceResult,
+} from "@modelcontextprotocol/sdk/types.js";
+import { JSONRPCMessageSchema } from "@modelcontextprotocol/sdk/types.js";
+
+import {
+ callMcpAppTool,
+ listMcpAppResources,
+ readMcpAppResource,
+ type McpAppResource,
+} from "@/shared/api/tauriMcpApps";
+
+const HOST_INFO = { name: "Buzz Desktop", version: "1.0.0" };
+
+export function mcpAppSandboxOrigin(sandboxUrl: string): string {
+ const url = new URL(sandboxUrl);
+ if (url.origin !== "null") return url.origin;
+ if (!url.host) throw new Error("MCP App sandbox URL has no origin");
+ return `${url.protocol}//${url.host}`;
+}
+
+class OriginValidatedPostMessageTransport implements Transport {
+ private readonly eventSource: MessageEventSource;
+ private readonly eventTarget: Window;
+ private readonly expectedOrigin: string;
+ private readonly messageListener: (event: MessageEvent) => void;
+
+ constructor(
+ eventTarget: Window,
+ eventSource: MessageEventSource,
+ expectedOrigin: string,
+ ) {
+ this.eventTarget = eventTarget;
+ this.eventSource = eventSource;
+ this.expectedOrigin = expectedOrigin;
+ this.messageListener = (event) => {
+ if (
+ event.source !== this.eventSource ||
+ event.origin !== this.expectedOrigin
+ ) {
+ return;
+ }
+ const parsed = JSONRPCMessageSchema.safeParse(event.data);
+ if (parsed.success) {
+ this.onmessage?.(parsed.data);
+ } else if (event.data?.jsonrpc === "2.0") {
+ this.onerror?.(
+ new Error(`Invalid MCP App message: ${parsed.error.message}`),
+ );
+ }
+ };
+ }
+
+ async start(): Promise {
+ window.addEventListener("message", this.messageListener);
+ }
+
+ async send(
+ message: JSONRPCMessage,
+ _options?: TransportSendOptions,
+ ): Promise {
+ this.eventTarget.postMessage(message, this.expectedOrigin);
+ }
+
+ async close(): Promise {
+ window.removeEventListener("message", this.messageListener);
+ this.onclose?.();
+ }
+
+ onclose?: () => void;
+ onerror?: (error: Error) => void;
+ onmessage?: (message: JSONRPCMessage, extra?: MessageExtraInfo) => void;
+}
+
+export type McpAppMessage = {
+ role: "user";
+ content: unknown;
+};
+
+export type McpAppModelContext = {
+ content?: unknown[];
+ structuredContent?: Record;
+};
+
+export type McpAppBridgeCallbacks = {
+ onMessage?: (message: McpAppMessage) => Promise | void;
+ onModelContext?: (context: McpAppModelContext | null) => Promise | void;
+ onOpenLink?: (url: string) => Promise | boolean;
+ onDisplayMode?: (mode: "inline" | "fullscreen") => void;
+ onSizeChange?: (size: { width?: number; height?: number }) => void;
+};
+
+function bridgeResource(resource: McpAppResource) {
+ return {
+ uri: resource.uri,
+ name: resource.name ?? resource.uri,
+ title: resource.title ?? undefined,
+ description: resource.description ?? undefined,
+ mimeType: resource.mimeType ?? undefined,
+ _meta: resource.meta,
+ };
+}
+
+export function defaultMcpAppHostContext(): McpUiHostContext {
+ return {
+ theme: document.documentElement.classList.contains("dark")
+ ? "dark"
+ : "light",
+ platform: "desktop",
+ locale: navigator.language,
+ timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+ displayMode: "inline",
+ availableDisplayModes: ["inline", "fullscreen"],
+ containerDimensions: { maxHeight: 6000 },
+ deviceCapabilities: {
+ touch: navigator.maxTouchPoints > 0,
+ hover: window.matchMedia("(hover: hover)").matches,
+ },
+ };
+}
+
+export function createMcpAppBridge(
+ serverId: string,
+ callbacks: McpAppBridgeCallbacks,
+): AppBridge {
+ const bridge = new AppBridge(
+ null,
+ HOST_INFO,
+ {
+ serverTools: {},
+ serverResources: {},
+ ...(callbacks.onMessage ? { message: { text: {} } } : {}),
+ ...(callbacks.onModelContext
+ ? { updateModelContext: { text: {}, structuredContent: {} } }
+ : {}),
+ ...(callbacks.onOpenLink ? { openLinks: {} } : {}),
+ },
+ { hostContext: defaultMcpAppHostContext() },
+ );
+
+ bridge.oncalltool = async ({ name, arguments: args }) =>
+ (await callMcpAppTool(
+ serverId,
+ name,
+ (args ?? {}) as Record,
+ "app",
+ )) as CallToolResult;
+ bridge.onlistresources = async () =>
+ ({
+ resources: (await listMcpAppResources(serverId)).map(bridgeResource),
+ }) as ListResourcesResult;
+ bridge.onreadresource = async ({ uri }) =>
+ (await readMcpAppResource(serverId, uri)) as ReadResourceResult;
+ bridge.onmessage = async (message) => {
+ try {
+ await callbacks.onMessage?.(message as McpAppMessage);
+ return {};
+ } catch {
+ return { isError: true };
+ }
+ };
+ bridge.onupdatemodelcontext = async (context) => {
+ const hasContent = Boolean(context.content?.length);
+ const hasStructured = Boolean(
+ context.structuredContent &&
+ Object.keys(context.structuredContent).length > 0,
+ );
+ await callbacks.onModelContext?.(
+ hasContent || hasStructured ? (context as McpAppModelContext) : null,
+ );
+ return {};
+ };
+ if (callbacks.onOpenLink) {
+ bridge.onopenlink = async ({ url }) => ({
+ isError: !(await callbacks.onOpenLink?.(url)),
+ });
+ }
+ bridge.onrequestdisplaymode = async ({ mode }) => {
+ const next = mode === "fullscreen" ? "fullscreen" : "inline";
+ callbacks.onDisplayMode?.(next);
+ await bridge.sendHostContextChange({ displayMode: next });
+ return { mode: next };
+ };
+ bridge.onsizechange = callbacks.onSizeChange;
+
+ return bridge;
+}
+
+export async function connectMcpAppBridge(
+ bridge: AppBridge,
+ iframe: HTMLIFrameElement,
+ expectedOrigin: string,
+): Promise {
+ const targetWindow = iframe.contentWindow;
+ if (!targetWindow) {
+ throw new Error("MCP App sandbox browsing context is unavailable");
+ }
+ await bridge.connect(
+ new OriginValidatedPostMessageTransport(
+ targetWindow,
+ targetWindow,
+ expectedOrigin,
+ ),
+ );
+}
+
+export function observeMcpAppHostContext(
+ bridge: AppBridge,
+ iframe: HTMLIFrameElement,
+): () => void {
+ const sendDimensions = () => {
+ const width = Math.round(iframe.getBoundingClientRect().width);
+ if (width > 0) {
+ void bridge.sendHostContextChange({
+ containerDimensions: { width, maxHeight: 6000 },
+ });
+ }
+ };
+ const resizeObserver = new ResizeObserver(sendDimensions);
+ resizeObserver.observe(iframe);
+
+ const themeObserver = new MutationObserver(() => {
+ void bridge.sendHostContextChange({
+ theme: document.documentElement.classList.contains("dark")
+ ? "dark"
+ : "light",
+ });
+ });
+ themeObserver.observe(document.documentElement, {
+ attributes: true,
+ attributeFilter: ["class"],
+ });
+ sendDimensions();
+
+ return () => {
+ resizeObserver.disconnect();
+ themeObserver.disconnect();
+ };
+}
+
+export type PreparedBridgeResource = {
+ html: string;
+ csp: McpUiResourceCsp;
+};
diff --git a/desktop/src/features/mcp-apps/lib/mcpAppMessage.test.mjs b/desktop/src/features/mcp-apps/lib/mcpAppMessage.test.mjs
new file mode 100644
index 0000000000..60bccf5a76
--- /dev/null
+++ b/desktop/src/features/mcp-apps/lib/mcpAppMessage.test.mjs
@@ -0,0 +1,49 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+
+import { MCP_APP_POST_MAX_CHARS, mcpAppMessageText } from "./mcpAppMessage.ts";
+
+test("extracts text from standard MCP content blocks", () => {
+ assert.equal(
+ mcpAppMessageText({
+ role: "user",
+ content: [
+ { type: "text", text: "Create the task." },
+ { type: "image", data: "ignored" },
+ { type: "text", text: "Keep it in this thread." },
+ ],
+ }),
+ "Create the task.\n\nKeep it in this thread.",
+ );
+});
+
+test("accepts the legacy single text block used by existing apps", () => {
+ assert.equal(
+ mcpAppMessageText({
+ role: "user",
+ content: { type: "text", text: "Move this to review." },
+ }),
+ "Move this to review.",
+ );
+});
+
+test("rejects messages without text", () => {
+ assert.equal(
+ mcpAppMessageText({
+ role: "user",
+ content: [{ type: "image", data: "ignored" }],
+ }),
+ null,
+ );
+});
+
+test("collapses excessive blank lines without flattening paragraphs", () => {
+ assert.equal(
+ mcpAppMessageText({
+ role: "user",
+ content: "First paragraph.\n\n\n\n\nSecond paragraph.",
+ }),
+ "First paragraph.\n\nSecond paragraph.",
+ );
+ assert.equal(MCP_APP_POST_MAX_CHARS, 8_000);
+});
diff --git a/desktop/src/features/mcp-apps/lib/mcpAppMessage.ts b/desktop/src/features/mcp-apps/lib/mcpAppMessage.ts
new file mode 100644
index 0000000000..32d4e0c488
--- /dev/null
+++ b/desktop/src/features/mcp-apps/lib/mcpAppMessage.ts
@@ -0,0 +1,31 @@
+import type { McpAppMessage } from "@/features/mcp-apps/lib/mcpAppBridge";
+
+export const MCP_APP_POST_MAX_CHARS = 8_000;
+
+function normalizeText(value: string): string {
+ return value.trim().replace(/\n(?:[ \t]*\n){2,}/g, "\n\n");
+}
+
+export function mcpAppMessageText(message: McpAppMessage): string | null {
+ const blocks = Array.isArray(message.content)
+ ? message.content
+ : [message.content];
+ const text = blocks
+ .flatMap((block) => {
+ if (typeof block === "string") return [block];
+ if (
+ block &&
+ typeof block === "object" &&
+ !Array.isArray(block) &&
+ (block as Record).type === "text" &&
+ typeof (block as Record).text === "string"
+ ) {
+ return [(block as Record).text as string];
+ }
+ return [];
+ })
+ .map(normalizeText)
+ .filter(Boolean)
+ .join("\n\n");
+ return text || null;
+}
diff --git a/desktop/src/features/mcp-apps/lib/useChannelMcpAppExperience.tsx b/desktop/src/features/mcp-apps/lib/useChannelMcpAppExperience.tsx
new file mode 100644
index 0000000000..c396fde06a
--- /dev/null
+++ b/desktop/src/features/mcp-apps/lib/useChannelMcpAppExperience.tsx
@@ -0,0 +1,257 @@
+import * as React from "react";
+
+import type { ChannelMcpAppInstallation } from "@/features/mcp-apps/lib/channelMcpAppStorage";
+import {
+ MCP_APP_POST_MAX_CHARS,
+ mcpAppMessageText,
+} from "@/features/mcp-apps/lib/mcpAppMessage";
+import { useChannelMcpApps } from "@/features/mcp-apps/lib/useChannelMcpApps";
+import { ChannelMcpAppDialog } from "@/features/mcp-apps/ui/ChannelMcpAppDialog";
+import { ChannelMcpAppPane } from "@/features/mcp-apps/ui/ChannelMcpAppPane";
+import { ChannelMcpAppTabs } from "@/features/mcp-apps/ui/ChannelMcpAppTabs";
+import type { Channel } from "@/shared/api/types";
+import { Button } from "@/shared/ui/button";
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogFooter,
+ DialogHeader,
+ DialogTitle,
+} from "@/shared/ui/dialog";
+
+type SendChannelMessage = (
+ content: string,
+ mentionPubkeys: string[],
+ mediaTags?: string[][],
+ channelId?: string | null,
+) => Promise;
+
+type PendingChannelPost = {
+ appKey: string;
+ appTitle: string;
+ channelId: string;
+ content: string;
+ reject: (error: Error) => void;
+ resolve: () => void;
+};
+
+const MCP_APP_POST_PROMPT_COOLDOWN_MS = 30_000;
+
+export function useMcpAppUi(
+ channel: Channel | null,
+ pubkey: string | null | undefined,
+ sendMessage: SendChannelMessage,
+) {
+ const [dialogOpen, setDialogOpen] = React.useState(false);
+ const [pendingPost, setPendingPost] =
+ React.useState(null);
+ const pendingPostRef = React.useRef(null);
+ const promptedAtRef = React.useRef(new Map());
+ const [mutedAppKeys, setMutedAppKeys] = React.useState>(
+ () => new Set(),
+ );
+ const [isPosting, setIsPosting] = React.useState(false);
+ const [postError, setPostError] = React.useState(null);
+ const apps = useChannelMcpApps({
+ channelId: channel?.id ?? null,
+ pubkey,
+ });
+ const rejectPendingPost = React.useCallback((reason: string) => {
+ const current = pendingPostRef.current;
+ pendingPostRef.current = null;
+ setPendingPost(null);
+ setPostError(null);
+ current?.reject(new Error(reason));
+ }, []);
+ React.useEffect(() => {
+ if (
+ pendingPostRef.current &&
+ pendingPostRef.current.channelId !== channel?.id
+ ) {
+ rejectPendingPost(
+ "The channel changed before the app post was approved.",
+ );
+ }
+ }, [channel?.id, rejectPendingPost]);
+ React.useEffect(
+ () => () =>
+ rejectPendingPost("The channel app closed before the post was approved."),
+ [rejectPendingPost],
+ );
+ const handleMessage = React.useCallback(
+ async (
+ app: ChannelMcpAppInstallation,
+ message: Parameters[0],
+ ) => {
+ if (!channel?.isMember || channel.archivedAt || !channel.id) {
+ throw new Error("This channel is read-only.");
+ }
+ const appKey = `${channel.id}:${app.id}`;
+ if (mutedAppKeys.has(appKey)) {
+ throw new Error("Channel post requests from this app are muted.");
+ }
+ const now = Date.now();
+ const promptedAt = promptedAtRef.current.get(appKey) ?? 0;
+ if (now - promptedAt < MCP_APP_POST_PROMPT_COOLDOWN_MS) {
+ throw new Error("This app requested another channel post too quickly.");
+ }
+ const content = mcpAppMessageText(message);
+ if (!content) {
+ throw new Error("The app message did not contain text.");
+ }
+ if (content.length > MCP_APP_POST_MAX_CHARS) {
+ throw new Error(
+ `The app message exceeds the ${MCP_APP_POST_MAX_CHARS.toLocaleString()} character limit.`,
+ );
+ }
+ if (pendingPostRef.current) {
+ throw new Error("Another app post is waiting for approval.");
+ }
+ promptedAtRef.current.set(appKey, now);
+ await new Promise((resolve, reject) => {
+ const next = {
+ appKey,
+ appTitle: app.title,
+ channelId: channel.id,
+ content,
+ reject,
+ resolve,
+ };
+ pendingPostRef.current = next;
+ setPostError(null);
+ setPendingPost(next);
+ });
+ },
+ [channel?.archivedAt, channel?.id, channel?.isMember, mutedAppKeys],
+ );
+ const handleMuteAppPosts = React.useCallback(() => {
+ const current = pendingPostRef.current;
+ if (!current) return;
+ setMutedAppKeys((muted) => new Set(muted).add(current.appKey));
+ rejectPendingPost("Channel post requests from this app are muted.");
+ }, [rejectPendingPost]);
+ const handleApprovePost = React.useCallback(async () => {
+ const current = pendingPostRef.current;
+ if (!current || !channel) return;
+ setIsPosting(true);
+ setPostError(null);
+ try {
+ await sendMessage(current.content, [], undefined, channel.id);
+ if (pendingPostRef.current === current) {
+ pendingPostRef.current = null;
+ setPendingPost(null);
+ current.resolve();
+ }
+ } catch (cause) {
+ setPostError(
+ cause instanceof Error
+ ? cause.message
+ : "Buzz could not post the app message.",
+ );
+ } finally {
+ setIsPosting(false);
+ }
+ }, [channel, sendMessage]);
+ const dialog =
+ channel && pubkey ? (
+
+ ) : null;
+ const postApprovalDialog = channel ? (
+
+ ) : null;
+ const navigation =
+ channel?.channelType !== "forum" &&
+ channel?.isMember &&
+ !channel.archivedAt ? (
+ <>
+ setDialogOpen(true)}
+ onShowChat={apps.showChat}
+ />
+ {dialog}
+ {postApprovalDialog}
+
+ ) : undefined;
+ const renderPane = React.useCallback(
+ (header: React.ReactNode) =>
+ apps.activeApp ? (
+
+ ) : null,
+ [apps.activeApp, handleMessage],
+ );
+
+ return {
+ active: apps.activeApp !== null,
+ navigation,
+ renderPane,
+ };
+}
diff --git a/desktop/src/features/mcp-apps/lib/useChannelMcpApps.ts b/desktop/src/features/mcp-apps/lib/useChannelMcpApps.ts
new file mode 100644
index 0000000000..2e3926d48c
--- /dev/null
+++ b/desktop/src/features/mcp-apps/lib/useChannelMcpApps.ts
@@ -0,0 +1,52 @@
+import * as React from "react";
+
+import {
+ getChannelMcpApps,
+ subscribeChannelMcpApps,
+ type ChannelMcpAppInstallation,
+} from "@/features/mcp-apps/lib/channelMcpAppStorage";
+
+export function useChannelMcpApps({
+ channelId,
+ pubkey,
+}: {
+ channelId: string | null;
+ pubkey: string | null | undefined;
+}) {
+ const getSnapshot = React.useCallback(() => {
+ if (!channelId || !pubkey) return "[]";
+ return JSON.stringify(getChannelMcpApps(pubkey, channelId));
+ }, [channelId, pubkey]);
+ const serialized = React.useSyncExternalStore(
+ subscribeChannelMcpApps,
+ getSnapshot,
+ getSnapshot,
+ );
+ const apps = React.useMemo(
+ () => JSON.parse(serialized) as ChannelMcpAppInstallation[],
+ [serialized],
+ );
+ const [selection, setSelection] = React.useState<{
+ channelId: string | null;
+ appId: string | null;
+ }>({ channelId, appId: null });
+ const selectedAppId =
+ selection.channelId === channelId ? selection.appId : null;
+ const activeApp =
+ apps.find((installation) => installation.id === selectedAppId) ?? null;
+ const activeAppId = activeApp?.id ?? null;
+
+ return {
+ apps,
+ activeApp,
+ activeAppId,
+ activateApp: React.useCallback(
+ (appId: string) => setSelection({ channelId, appId }),
+ [channelId],
+ ),
+ showChat: React.useCallback(
+ () => setSelection({ channelId, appId: null }),
+ [channelId],
+ ),
+ };
+}
diff --git a/desktop/src/features/mcp-apps/ui/ChannelMcpAppDialog.tsx b/desktop/src/features/mcp-apps/ui/ChannelMcpAppDialog.tsx
new file mode 100644
index 0000000000..7dd2aa14d5
--- /dev/null
+++ b/desktop/src/features/mcp-apps/ui/ChannelMcpAppDialog.tsx
@@ -0,0 +1,393 @@
+import { AppWindow, LoaderCircle, Plus, Trash2 } from "lucide-react";
+import * as React from "react";
+
+import {
+ installChannelMcpApp,
+ removeChannelMcpApp,
+ type ChannelMcpAppInstallation,
+} from "@/features/mcp-apps/lib/channelMcpAppStorage";
+import {
+ connectMcpAppServer,
+ disconnectMcpAppServer,
+ type McpAppServerDescriptor,
+ type McpAppTool,
+} from "@/shared/api/tauriMcpApps";
+import { Button } from "@/shared/ui/button";
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogFooter,
+ DialogHeader,
+ DialogTitle,
+} from "@/shared/ui/dialog";
+import { Input } from "@/shared/ui/input";
+import { Textarea } from "@/shared/ui/textarea";
+
+type ChannelMcpAppDialogProps = {
+ apps: ChannelMcpAppInstallation[];
+ channelId: string;
+ open: boolean;
+ pubkey: string;
+ onOpenChange: (open: boolean) => void;
+};
+
+function installationId(endpoint: string, toolName: string): string {
+ return `${encodeURIComponent(endpoint)}:${toolName}`;
+}
+
+function initialArguments(tool: McpAppTool): Record {
+ const required = Array.isArray(tool.inputSchema.required)
+ ? tool.inputSchema.required.filter(
+ (name): name is string => typeof name === "string",
+ )
+ : [];
+ const properties =
+ tool.inputSchema.properties &&
+ typeof tool.inputSchema.properties === "object" &&
+ !Array.isArray(tool.inputSchema.properties)
+ ? (tool.inputSchema.properties as Record)
+ : {};
+ return Object.fromEntries(
+ required.map((name) => {
+ const property = properties[name];
+ const type =
+ property && typeof property === "object" && !Array.isArray(property)
+ ? (property as Record).type
+ : undefined;
+ return [name, type === "array" ? [] : type === "boolean" ? false : ""];
+ }),
+ );
+}
+
+function parseArguments(value: string): Record | null {
+ try {
+ const parsed: unknown = JSON.parse(value);
+ return parsed && typeof parsed === "object" && !Array.isArray(parsed)
+ ? (parsed as Record)
+ : null;
+ } catch {
+ return null;
+ }
+}
+
+function advertisedDomains(
+ server: McpAppServerDescriptor | null,
+ tool: McpAppTool | null,
+): string[] {
+ if (!server || !tool?.uiResourceUri) return [];
+ const resource = server.resources.find(
+ (candidate) => candidate.uri === tool.uiResourceUri,
+ );
+ const ui =
+ resource?.meta.ui &&
+ typeof resource.meta.ui === "object" &&
+ !Array.isArray(resource.meta.ui)
+ ? (resource.meta.ui as Record)
+ : null;
+ const csp =
+ ui?.csp && typeof ui.csp === "object" && !Array.isArray(ui.csp)
+ ? (ui.csp as Record)
+ : null;
+ return [
+ csp?.connectDomains,
+ csp?.resourceDomains,
+ csp?.frameDomains,
+ csp?.baseUriDomains,
+ ]
+ .flatMap((value) => (Array.isArray(value) ? value : []))
+ .filter((value): value is string => typeof value === "string")
+ .filter((value, index, values) => values.indexOf(value) === index);
+}
+
+export function ChannelMcpAppDialog({
+ apps,
+ channelId,
+ open,
+ pubkey,
+ onOpenChange,
+}: ChannelMcpAppDialogProps) {
+ const [endpoint, setEndpoint] = React.useState("");
+ const [server, setServer] = React.useState(
+ null,
+ );
+ const [selectedTool, setSelectedTool] = React.useState(
+ null,
+ );
+ const [argumentsJson, setArgumentsJson] = React.useState("{}");
+ const [isConnecting, setIsConnecting] = React.useState(false);
+ const [error, setError] = React.useState(null);
+ const serverRef = React.useRef(null);
+ const connectionAttemptRef = React.useRef(0);
+
+ const uiTools = React.useMemo(
+ () => server?.tools.filter((tool) => tool.uiResourceUri) ?? [],
+ [server],
+ );
+ const parsedArguments = React.useMemo(
+ () => parseArguments(argumentsJson),
+ [argumentsJson],
+ );
+ const selectedDomains = React.useMemo(
+ () => advertisedDomains(server, selectedTool),
+ [selectedTool, server],
+ );
+
+ const clearConnectedServer = React.useCallback(() => {
+ const current = serverRef.current;
+ serverRef.current = null;
+ setServer(null);
+ setSelectedTool(null);
+ if (current) void disconnectMcpAppServer(current.serverId);
+ }, []);
+
+ React.useEffect(
+ () => () => {
+ connectionAttemptRef.current += 1;
+ const current = serverRef.current;
+ serverRef.current = null;
+ if (current) void disconnectMcpAppServer(current.serverId);
+ },
+ [],
+ );
+
+ function handleOpenChange(nextOpen: boolean) {
+ if (!nextOpen) {
+ connectionAttemptRef.current += 1;
+ clearConnectedServer();
+ setError(null);
+ setIsConnecting(false);
+ }
+ onOpenChange(nextOpen);
+ }
+
+ async function handleConnect() {
+ const nextEndpoint = endpoint.trim();
+ if (!nextEndpoint) return;
+ const attempt = connectionAttemptRef.current + 1;
+ connectionAttemptRef.current = attempt;
+ clearConnectedServer();
+ setIsConnecting(true);
+ setError(null);
+ try {
+ const next = await connectMcpAppServer(nextEndpoint);
+ if (connectionAttemptRef.current !== attempt) {
+ await disconnectMcpAppServer(next.serverId);
+ return;
+ }
+ const tools = next.tools.filter((tool) => tool.uiResourceUri);
+ serverRef.current = next;
+ setServer(next);
+ setSelectedTool(tools[0] ?? null);
+ setArgumentsJson(
+ JSON.stringify(tools[0] ? initialArguments(tools[0]) : {}, null, 2),
+ );
+ if (tools.length === 0) {
+ setError("This server did not advertise any MCP Apps.");
+ }
+ } catch (cause) {
+ if (connectionAttemptRef.current !== attempt) return;
+ clearConnectedServer();
+ setError(
+ cause instanceof Error
+ ? cause.message
+ : "Buzz could not connect to this MCP server.",
+ );
+ } finally {
+ if (connectionAttemptRef.current === attempt) setIsConnecting(false);
+ }
+ }
+
+ function handleSelectTool(tool: McpAppTool) {
+ setSelectedTool(tool);
+ setArgumentsJson(JSON.stringify(initialArguments(tool), null, 2));
+ setError(null);
+ }
+
+ function handleInstall() {
+ if (!server || !selectedTool?.uiResourceUri || !parsedArguments) return;
+ const installed = installChannelMcpApp(pubkey, channelId, {
+ id: installationId(server.endpoint, selectedTool.name),
+ endpoint: server.endpoint,
+ serverName: server.name,
+ toolName: selectedTool.name,
+ title: selectedTool.title || selectedTool.name,
+ resourceUri: selectedTool.uiResourceUri,
+ arguments: parsedArguments,
+ });
+ if (!installed) {
+ setError("Buzz could not save this channel app.");
+ return;
+ }
+ handleOpenChange(false);
+ }
+
+ return (
+