Vibe mcp apps (#6569)

Co-authored-by: Douwe Osinga <douwe@squareup.com> Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Co-authored-by: Michael Neale <michael.neale@gmail.com>
2026-01-22 13:03:44 -05:00
parent 13bdff4bb5
commit 01e607a12d
28 changed files with 2198 additions and 294 deletions
@@ -23,12 +23,13 @@ import {
 import { Gear } from '../icons';
 import { View, ViewOptions } from '../../utils/navigationUtils';
 import { DEFAULT_CHAT_TITLE, useChatContext } from '../../contexts/ChatContext';
-import { listSessions, listApps, Session } from '../../api';
+import { listSessions, Session } from '../../api';
 import { resumeSession, startNewSession, shouldShowNewChatTitle } from '../../sessions';
 import { useNavigation } from '../../hooks/useNavigation';
 import { SessionIndicators } from '../SessionIndicators';
 import { useSidebarSessionStatus } from '../../hooks/useSidebarSessionStatus';
 import { getInitialWorkingDir } from '../../utils/workingDir';
+import { useConfig } from '../ConfigContext';

 interface SidebarProps {
  onSelectSession: (sessionId: string) => void;
@@ -60,6 +61,13 @@ const menuItems: NavigationEntry[] = [
    icon: FileText,
    tooltip: 'Browse your saved recipes',
  },
+  {
+    type: 'item',
+    path: '/apps',
+    label: 'Apps',
+    icon: AppWindow,
+    tooltip: 'MCP and custom apps',
+  },
  {
    type: 'item',
    path: '/schedules',
@@ -74,13 +82,6 @@ const menuItems: NavigationEntry[] = [
    icon: Puzzle,
    tooltip: 'Manage your extensions',
  },
-  {
-    type: 'item',
-    path: '/apps',
-    label: 'Apps',
-    icon: AppWindow,
-    tooltip: 'Browse and launch MCP apps',
-  },
  { type: 'separator' },
  {
    type: 'item',
@@ -195,10 +196,13 @@ SessionList.displayName = 'SessionList';
 const AppSidebar: React.FC<SidebarProps> = ({ currentPath }) => {
  const navigate = useNavigate();
  const chatContext = useChatContext();
+  const configContext = useConfig();
  const setView = useNavigation();
+
+  const appsExtensionEnabled = !!configContext.extensionsList?.find((ext) => ext.name === 'apps')
+    ?.enabled;
  const [searchParams] = useSearchParams();
  const [recentSessions, setRecentSessions] = useState<Session[]>([]);
-  const [hasApps, setHasApps] = useState(false);
  const activeSessionId = searchParams.get('resumeSessionId') ?? undefined;
  const { getSessionStatus, clearUnread } = useSidebarSessionStatus(activeSessionId);

@@ -251,21 +255,6 @@ const AppSidebar: React.FC<SidebarProps> = ({ currentPath }) => {
    loadRecentSessions();
  }, []);

-  useEffect(() => {
-    const checkApps = async () => {
-      try {
-        const response = await listApps({
-          throwOnError: true,
-        });
-        setHasApps((response.data?.apps || []).length > 0);
-      } catch (err) {
-        console.warn('Failed to check for apps:', err);
-      }
-    };
-
-    checkApps();
-  }, [currentPath]);
-
  useEffect(() => {
    let pollingTimeouts: ReturnType<typeof setTimeout>[] = [];
    let isPolling = false;
@@ -477,8 +466,9 @@ const AppSidebar: React.FC<SidebarProps> = ({ currentPath }) => {
  };

  const visibleMenuItems = menuItems.filter((entry) => {
+    // Filter out Apps if extension is not enabled
    if (entry.type === 'item' && entry.path === '/apps') {
-      return hasApps;
+      return appsExtensionEnabled;
    }
    return true;
  });
@@ -544,7 +534,6 @@ const AppSidebar: React.FC<SidebarProps> = ({ currentPath }) => {

          <SidebarSeparator />

-          {/* Other menu items - filter out Apps if no apps available */}
          {visibleMenuItems.map((entry, index) => renderMenuItem(entry, index))}
        </SidebarMenu>
      </SidebarContent>
@@ -1,9 +1,10 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { MainPanelLayout } from '../Layout/MainPanelLayout';
 import { Button } from '../ui/button';
-import { Play } from 'lucide-react';
-import { GooseApp, listApps } from '../../api';
+import { Download, Play, Upload } from 'lucide-react';
+import { exportApp, GooseApp, importApp, listApps } from '../../api';
 import { useChatContext } from '../../contexts/ChatContext';
+import { formatAppName } from '../../utils/conversionUtils';

 const GridLayout = ({ children }: { children: React.ReactNode }) => {
  return (
@@ -73,6 +74,32 @@ export default function AppsView() {
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [sessionId]);

+  useEffect(() => {
+    const handlePlatformEvent = (event: Event) => {
+      const customEvent = event as CustomEvent;
+      const eventData = customEvent.detail;
+
+      if (eventData?.extension === 'apps') {
+        const eventSessionId = eventData.sessionId || sessionId;
+
+        // Refresh apps list to get latest state
+        if (eventSessionId) {
+          listApps({
+            throwOnError: false,
+            query: { session_id: eventSessionId },
+          }).then((response) => {
+            if (response.data?.apps) {
+              setApps(response.data.apps);
+            }
+          });
+        }
+      }
+    };
+
+    window.addEventListener('platform-event', handlePlatformEvent);
+    return () => window.removeEventListener('platform-event', handlePlatformEvent);
+  }, [sessionId]);
+
  const loadApps = useCallback(async () => {
    if (!sessionId) return;

@@ -104,6 +131,59 @@ export default function AppsView() {
    }
  };

+  const handleDownloadApp = async (app: GooseApp) => {
+    try {
+      const response = await exportApp({
+        throwOnError: true,
+        path: { name: app.name },
+      });
+
+      if (response.data) {
+        const blob = new Blob([response.data as string], { type: 'text/html' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = `${app.name}.html`;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+      }
+    } catch (err) {
+      console.error('Failed to export app:', err);
+      setError(err instanceof Error ? err.message : 'Failed to export app');
+    }
+  };
+
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleImportClick = () => {
+    fileInputRef.current?.click();
+  };
+
+  const handleUploadApp = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+
+    try {
+      const text = await file.text();
+      await importApp({
+        throwOnError: true,
+        body: { html: text },
+      });
+
+      const response = await listApps({
+        throwOnError: true,
+      });
+      setApps(response.data?.apps || []);
+      setError(null);
+    } catch (err) {
+      console.error('Failed to import app:', err);
+      setError(err instanceof Error ? err.message : 'Failed to import app');
+    }
+    event.target.value = '';
+  };
+
  // Only show error-only UI if we have no apps to display
  if (error && apps.length === 0) {
    return (
@@ -119,14 +199,36 @@ export default function AppsView() {
  return (
    <MainPanelLayout>
      <div className="flex-1 flex flex-col min-h-0">
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept=".html"
+          onChange={handleUploadApp}
+          style={{ display: 'none' }}
+        />
        <div className="bg-background-default px-8 pb-8 pt-16">
          <div className="flex flex-col page-transition">
            <div className="flex justify-between items-center mb-1">
              <h1 className="text-4xl font-light">Apps</h1>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={handleImportClick}
+                className="flex items-center gap-2"
+              >
+                <Upload className="h-4 w-4" />
+                Import App
+              </Button>
+            </div>
+            <div className="mb-4">
+              <p className="text-sm text-text-muted mb-2">
+                Applications from your MCP servers and Apps build by goose itself. You can ask it to
+                create new apps through the chat interface and they will appear here.
+              </p>
+              <p className="text-xs text-amber-600 dark:text-amber-500">
+                ⚠️ Experimental feature - may change or be removed at any time
+              </p>
            </div>
-            <p className="text-sm text-text-muted mb-4">
-              Applications from your MCP servers that can run in standalone windows.
-            </p>
          </div>
        </div>

@@ -140,41 +242,58 @@ export default function AppsView() {
              <div className="text-center">
                <h3 className="text-lg font-medium mb-2">No apps available</h3>
                <p className="text-sm text-text-muted">
-                  Install MCP servers that provide UI resources to see apps here.
+                  Open a chat and ask goose for the app you want to have. It can build one for you
+                  and that will appear here. Or if somebody shared an app, you can import it using
+                  the button above.
                </p>
              </div>
            </div>
          ) : (
            <GridLayout>
-              {apps.map((app) => (
-                <div
-                  key={`${app.uri}-${app.mcpServer}`}
-                  className="flex flex-col p-4 border border-border-muted rounded-lg bg-background-panel hover:border-border-default transition-colors"
-                >
-                  <div className="flex-1 mb-4">
-                    <h3 className="font-medium text-text-default mb-2">{app.name}</h3>
-                    {app.description && (
-                      <p className="text-sm text-text-muted mb-2">{app.description}</p>
-                    )}
-                    {app.mcpServer && (
-                      <span className="inline-block px-2 py-1 text-xs bg-background-subtle text-text-muted rounded">
-                        {app.mcpServer}
-                      </span>
-                    )}
+              {apps.map((app) => {
+                const isCustomApp = app.mcpServers?.includes('apps') ?? false;
+                return (
+                  <div
+                    key={`${app.uri}-${app.mcpServers?.join(',')}`}
+                    className="flex flex-col p-4 border border-border-muted rounded-lg bg-background-panel hover:border-border-default transition-colors"
+                  >
+                    <div className="flex-1 mb-4">
+                      <h3 className="font-medium text-text-default mb-2">
+                        {formatAppName(app.name)}
+                      </h3>
+                      {app.description && (
+                        <p className="text-sm text-text-muted mb-2">{app.description}</p>
+                      )}
+                      {app.mcpServers && app.mcpServers.length > 0 && (
+                        <span className="inline-block px-2 py-1 text-xs bg-background-subtle text-text-muted rounded">
+                          {isCustomApp ? 'Custom app' : app.mcpServers.join(', ')}
+                        </span>
+                      )}
+                    </div>
+                    <div className="flex gap-2">
+                      <Button
+                        variant="default"
+                        size="sm"
+                        onClick={() => handleLaunchApp(app)}
+                        className="flex items-center gap-2 flex-1"
+                      >
+                        <Play className="h-4 w-4" />
+                        Launch
+                      </Button>
+                      {isCustomApp && (
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          onClick={() => handleDownloadApp(app)}
+                          className="flex items-center gap-2"
+                        >
+                          <Download className="h-4 w-4" />
+                        </Button>
+                      )}
+                    </div>
                  </div>
-                  <div className="flex gap-2">
-                    <Button
-                      variant="default"
-                      size="sm"
-                      onClick={() => handleLaunchApp(app)}
-                      className="flex items-center gap-2 flex-1"
-                    >
-                      <Play className="h-4 w-4" />
-                      Launch
-                    </Button>
-                  </div>
-                </div>
-              ))}
+                );
+              })}
            </GridLayout>
          )}
        </div>
@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import McpAppRenderer from '../McpApps/McpAppRenderer';
 import { startAgent, resumeAgent, listApps, stopAgent } from '../../api';
+import { formatAppName } from '../../utils/conversionUtils';

 export default function StandaloneAppView() {
  const [searchParams] = useSearchParams();
@@ -35,7 +36,7 @@ export default function StandaloneAppView() {

        const apps = response.data?.apps || [];
        const cachedApp = apps.find(
-          (app) => app.uri === resourceUri && app.mcpServer === extensionName
+          (app) => app.uri === resourceUri && app.mcpServers?.includes(extensionName)
        );

        if (cachedApp?.text) {
@@ -88,7 +89,7 @@ export default function StandaloneAppView() {

  useEffect(() => {
    if (appName) {
-      document.title = appName;
+      document.title = formatAppName(appName);
    }
  }, [appName]);