remove app builder sidebar bubble (#1865)

Author: ignaciojimenezr

mcpjam-inspector/client/src/App.tsx

@@ -1625,7 +1625,6 @@ export default function App() {
         hidden={appBuilderOnboarding}
         onNavigate={handleNavigate}
         activeTab={activeTab}
-        servers={workspaceServers}
         workspaces={workspaces}
         activeWorkspaceId={activeWorkspaceId}
         onSwitchWorkspace={handleSidebarSwitchWorkspace}

mcpjam-inspector/client/src/components/__tests__/mcp-sidebar-feature-flags.test.ts

@@ -4,7 +4,6 @@ import {
   filterByFeatureFlags,
   getEvalsSubnavItems,
   getHostedNavigationSections,
-  shouldPrefetchSidebarTools,
 } from "../mcp-sidebar";
 import { HOSTED_LOCAL_ONLY_TOOLTIP } from "@/lib/hosted-ui";
 
@@ -381,32 +380,3 @@ describe("getHostedNavigationSections", () => {
     ]);
   });
 });
-
-describe("shouldPrefetchSidebarTools", () => {
-  it("skips sidebar tool prefetch for hosted guests", () => {
-    expect(
-      shouldPrefetchSidebarTools({
-        hostedMode: true,
-        isAuthenticated: false,
-      }),
-    ).toBe(false);
-  });
-
-  it("allows sidebar tool prefetch for hosted signed-in users", () => {
-    expect(
-      shouldPrefetchSidebarTools({
-        hostedMode: true,
-        isAuthenticated: true,
-      }),
-    ).toBe(true);
-  });
-
-  it("allows sidebar tool prefetch outside hosted mode", () => {
-    expect(
-      shouldPrefetchSidebarTools({
-        hostedMode: false,
-        isAuthenticated: false,
-      }),
-    ).toBe(true);
-  });
-});

mcpjam-inspector/client/src/components/mcp-sidebar.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { useState, useEffect, useMemo } from "react";
+import { useState, useMemo } from "react";
 import {
   Hammer,
   MessageCircle,
@@ -57,15 +57,6 @@ import {
   TooltipTrigger,
 } from "@mcpjam/design-system/tooltip";
 import { HOSTED_MODE } from "@/lib/config";
-import {
-  listTools,
-  type ListToolsResultWithMetadata,
-} from "@/lib/apis/mcp-tools-api";
-import {
-  isMCPApp,
-  isOpenAIApp,
-  isOpenAIAppAndMCPApp,
-} from "@/lib/mcp-ui/mcp-apps-utils";
 import {
   isHostedSidebarTabAllowed,
   normalizeHostedHashTab,
@@ -77,7 +68,6 @@ import { HOSTED_LOCAL_ONLY_TOOLTIP } from "@/lib/hosted-ui";
 import { useLearnMore } from "@/hooks/use-learn-more";
 import { LearnMoreExpandedPanel } from "@/components/learn-more/LearnMoreExpandedPanel";
 import type { BillingFeatureName } from "@/hooks/useOrganizationBilling";
-import type { ServerWithName } from "@/hooks/use-app-state";
 import type { Workspace } from "@/state/app-types";
 import type { OrganizationRouteSection } from "@/lib/hosted-navigation";
 
@@ -163,17 +153,6 @@ export function applyBillingGateNavState(
   }));
 }
 
-export function shouldPrefetchSidebarTools(options: {
-  hostedMode: boolean;
-  isAuthenticated: boolean;
-}): boolean {
-  const { hostedMode, isAuthenticated } = options;
-  // Hosted guests can briefly hydrate stale "connected" local servers before
-  // runtime status sync clears them, which causes speculative tools/list calls
-  // against guest server configs. Only signed-in hosted users should prefetch.
-  return !hostedMode || isAuthenticated;
-}
-
 // Define sections with their respective items
 const navigationSections: NavSection[] = [
   {
@@ -347,8 +326,6 @@ const hostedNavigationSections =
 interface MCPSidebarProps extends React.ComponentProps<typeof Sidebar> {
   onNavigate?: (section: string) => void;
   activeTab?: string;
-  /** Servers to check for app capabilities */
-  servers?: Record<string, ServerWithName>;
   /** Workspace state for the sidebar workspace picker */
   workspaces: Record<string, Workspace>;
   activeWorkspaceId: string;
@@ -373,8 +350,6 @@ interface MCPSidebarProps extends React.ComponentProps<typeof Sidebar> {
   createWorkspaceDisabledReason?: string;
 }
 
-const APP_BUILDER_VISITED_KEY = "mcp-app-builder-visited";
-
 function navigateToEvalsExploreList() {
   window.location.hash = withTestingSurface(buildEvalsHash({ type: "list" }));
 }
@@ -520,7 +495,6 @@ export function SidebarEvalsNavGroup({
 export function MCPSidebar({
   onNavigate,
   activeTab,
-  servers = {},
   workspaces,
   activeWorkspaceId,
   onSwitchWorkspace,
@@ -553,12 +527,6 @@ export function MCPSidebar({
   const themeMode = usePreferencesStore((s) => s.themeMode);
   const { updateReady, restartAndInstall } = useUpdateNotification();
   const [showInviteDialog, setShowInviteDialog] = useState(false);
-  const [toolsDataMap, setToolsDataMap] = useState<
-    Record<string, ListToolsResultWithMetadata | null>
-  >({});
-  const [hasVisitedAppBuilder, setHasVisitedAppBuilder] = useState(() => {
-    return localStorage.getItem(APP_BUILDER_VISITED_KEY) === "true";
-  });
   const learnMore = useLearnMore();
   const { state, isMobile } = useSidebar();
   const activeWorkspace = workspaces[activeWorkspaceId];
@@ -576,70 +544,9 @@ export function MCPSidebar({
   }, [activeWorkspace?.organizationId, workspaces]);
   const shouldShowInviteCta = isAuthenticated && !!user && !!activeWorkspace;
 
-  // Get list of connected server names
-  const connectedServerNames = useMemo(() => {
-    return Object.entries(servers)
-      .filter(([, server]) => server.connectionStatus === "connected")
-      .map(([name]) => name);
-  }, [servers]);
-
-  // Fetch tools data for connected servers
-  useEffect(() => {
-    const fetchToolsData = async () => {
-      if (
-        !shouldPrefetchSidebarTools({
-          hostedMode: HOSTED_MODE,
-          isAuthenticated,
-        }) ||
-        connectedServerNames.length === 0
-      ) {
-        setToolsDataMap({});
-        return;
-      }
-
-      const newToolsDataMap: Record<
-        string,
-        ListToolsResultWithMetadata | null
-      > = {};
-
-      await Promise.all(
-        connectedServerNames.map(async (serverName) => {
-          try {
-            const result = await listTools({ serverId: serverName });
-            newToolsDataMap[serverName] = result;
-          } catch {
-            newToolsDataMap[serverName] = null;
-          }
-        }),
-      );
-
-      setToolsDataMap(newToolsDataMap);
-    };
-
-    fetchToolsData();
-  }, [connectedServerNames.join(","), isAuthenticated]);
-
-  // Check if any connected server is an app
-  const hasAppServer = useMemo(() => {
-    return Object.values(toolsDataMap).some(
-      (toolsData) =>
-        isMCPApp(toolsData) ||
-        isOpenAIApp(toolsData) ||
-        isOpenAIAppAndMCPApp(toolsData),
-    );
-  }, [toolsDataMap]);
-
-  const showAppBuilderBubble =
-    hasAppServer && activeTab !== "app-builder" && !hasVisitedAppBuilder;
-
   const handleNavClick = (url: string) => {
     if (onNavigate && url.startsWith("#")) {
       const section = url.slice(1);
-      // Mark App Builder as visited when clicked (always, not just when bubble is visible)
-      if (section === "app-builder" && showAppBuilderBubble) {
-        localStorage.setItem(APP_BUILDER_VISITED_KEY, "true");
-        setHasVisitedAppBuilder(true);
-      }
       posthog.capture("sidebar_nav_clicked", {
         ...standardEventProps("mcp_sidebar"),
         section,
@@ -649,19 +556,6 @@ export function MCPSidebar({
       window.open(url, "_blank");
     }
   };
-
-  const dismissAppBuilderBubble = () => {
-    localStorage.setItem(APP_BUILDER_VISITED_KEY, "true");
-    setHasVisitedAppBuilder(true);
-  };
-
-  const appBuilderBubble = showAppBuilderBubble
-    ? {
-        message: "Build your UI app with App Builder.",
-        subMessage: "Get started",
-        onDismiss: dismissAppBuilderBubble,
-      }
-    : null;
   const featureFlags = useMemo(
     () => ({
       "mcpjam-learning": !!learningEnabled,
@@ -794,9 +688,6 @@ export function MCPSidebar({
                     isActive: item.url === `#${activeTab}`,
                   }))}
                   onItemClick={handleNavClick}
-                  appBuilderBubble={
-                    section.id === "mcp-apps" ? appBuilderBubble : null
-                  }
                   learnMore={
                     learnMoreEnabled
                       ? {

mcpjam-inspector/client/src/components/sidebar/__tests__/nav-main.test.tsx

@@ -207,4 +207,31 @@ describe("NavMain", () => {
     );
     expect(screen.getByTestId("learn-more-servers")).toBeInTheDocument();
   });
+
+  it("renders App Builder without the removed guide bubble UI", () => {
+    render(
+      <NavMain
+        items={[{ title: "App Builder", url: "#app-builder", icon: FakeIcon }]}
+      />,
+    );
+
+    expect(
+      screen.getByRole("button", { name: "App Builder" }),
+    ).toBeInTheDocument();
+    expect(
+      screen.queryByText("Build your UI app with App Builder."),
+    ).not.toBeInTheDocument();
+    expect(screen.queryByLabelText("Dismiss")).not.toBeInTheDocument();
+  });
+
+  it("uses the standard Learn More hover card for App Builder", () => {
+    render(
+      <NavMain
+        items={[{ title: "App Builder", url: "#app-builder", icon: FakeIcon }]}
+        learnMore={{ onExpand: vi.fn() }}
+      />,
+    );
+
+    expect(screen.getByTestId("learn-more-app-builder")).toBeInTheDocument();
+  });
 });