@inkeep/agents-manage-ui 0.39.3 → 0.39.5

package/src/components/agent/copilot/components/connect-tool-card.tsx

@@ -1,9 +1,12 @@
 import { CheckCircle2, ExternalLink, Loader2, XCircle } from 'lucide-react';
 import { useEffect, useState } from 'react';
+import type { CredentialScope } from '@/components/mcp-servers/form/validation';
 import { MCPToolImage } from '@/components/mcp-servers/mcp-tool-image';
 import { Button } from '@/components/ui/button';
-import { fetchThirdPartyMCPServer } from '@/lib/api/mcp-catalog';
-import { fetchMCPTool } from '@/lib/api/tools';
+import { useScopeSelection } from '@/hooks/use-scope-selection';
+import { getThirdPartyOAuthRedirectUrl } from '@/lib/api/mcp-catalog';
+import { fetchMCPTool, updateMCPTool } from '@/lib/api/tools';
+import type { MCPTool } from '@/lib/types/tools';
 
 /**
  * Parameters for initiating OAuth login for an MCP tool
@@ -13,7 +16,7 @@ export interface OAuthLoginParams {
   mcpServerUrl: string;
   toolName: string;
   thirdPartyConnectAccountUrl?: string;
-  credentialScope?: 'project' | 'user';
+  credentialScope: 'project' | 'user';
 }
 
 /**
@@ -26,6 +29,7 @@ export interface ConnectToolCardProps {
   targetTenantId?: string;
   targetProjectId?: string;
   onConnect: OAuthLoginHandler;
+  refreshAgentGraph?: (options?: { fetchTools?: boolean }) => Promise<void>;
 }
 
 export function ConnectToolCard({
@@ -33,6 +37,7 @@ export function ConnectToolCard({
   targetTenantId,
   targetProjectId,
   onConnect,
+  refreshAgentGraph,
 }: ConnectToolCardProps) {
   const [status, setStatus] = useState<'idle' | 'loading' | 'connecting' | 'success' | 'error'>(
     'loading'
@@ -42,10 +47,18 @@ export function ConnectToolCard({
     name: string;
     imageUrl?: string;
     url: string;
-    thirdPartyConnectAccountUrl?: string;
+    toolStatus: MCPTool['status'];
     credentialScope?: 'project' | 'user';
   } | null>(null);
 
+  // Scope selection hook for optional scope dialog
+  const { requestScopeSelection, ScopeDialog } = useScopeSelection<undefined>({
+    onConfirm: async (scope: CredentialScope) => {
+      await executeConnect(scope);
+      refreshAgentGraph?.({ fetchTools: true });
+    },
+  });
+
   useEffect(() => {
     const fetchDetails = async () => {
       if (!targetTenantId || !targetProjectId || !toolId) {
@@ -57,41 +70,23 @@ export function ConnectToolCard({
       try {
         const tool = await fetchMCPTool(targetTenantId, targetProjectId, toolId);
         const serverUrl = tool.config?.mcp?.server?.url || '';
-        const isThirdPartyMCPServer = serverUrl.includes('composio.dev');
         const credentialScope = (tool.credentialScope as 'project' | 'user') || 'project';
 
-        let thirdPartyConnectAccountUrl: string | undefined;
-
-        // Fetch third-party connect URL if this is a third-party server with needs_auth status
-        if (isThirdPartyMCPServer && tool.status === 'needs_auth') {
-          try {
-            const response = await fetchThirdPartyMCPServer(
-              targetTenantId,
-              targetProjectId,
-              serverUrl,
-              credentialScope
-            );
-            if (response.data?.thirdPartyConnectAccountUrl) {
-              thirdPartyConnectAccountUrl = response.data.thirdPartyConnectAccountUrl;
-            }
-          } catch (thirdPartyErr) {
-            console.error('Failed to fetch third-party connect URL:', thirdPartyErr);
-            setErrorMessage(
-              'Failed to fetch third-party connect URL. Go to the MCP server page to see more details.'
-            );
-          }
-        } else if (isThirdPartyMCPServer && tool.status === 'healthy') {
-          setStatus('success');
-        }
-
         setToolDetails({
           name: tool.name,
           imageUrl: tool.imageUrl,
           url: serverUrl,
-          thirdPartyConnectAccountUrl,
+          toolStatus: tool.status,
           credentialScope,
         });
-        setStatus('idle');
+
+        // Set final status based on tool health
+        if (tool.status === 'healthy') {
+          setStatus('success');
+          refreshAgentGraph?.({ fetchTools: true });
+        } else {
+          setStatus('idle');
+        }
       } catch (err) {
         console.error('Failed to fetch tool details:', err);
         setStatus('error');
@@ -100,25 +95,56 @@ export function ConnectToolCard({
     };
 
     fetchDetails();
-  }, [toolId, targetTenantId, targetProjectId]);
+  }, [toolId, targetTenantId, targetProjectId, refreshAgentGraph]);
 
-  const handleConnectClick = async () => {
-    if (!toolId || !toolDetails) {
+  /**
+   * Executes the actual connection with the given scope.
+   */
+  const executeConnect = async (scope: CredentialScope) => {
+    if (!toolId || !toolDetails || !targetTenantId || !targetProjectId) {
       setStatus('error');
       setErrorMessage('Tool ID and details are required to complete OAuth');
       return;
     }
 
+    await updateMCPTool(targetTenantId, targetProjectId, toolId, {
+      credentialScope: scope,
+    });
+
     setStatus('connecting');
     setErrorMessage('');
 
+    // proceed with OAuth flow
+    const isThirdPartyServer = toolDetails.url.includes('composio.dev');
+    let credentialScopedRedirectUrl: string | null = null;
+    if (isThirdPartyServer) {
+      try {
+        credentialScopedRedirectUrl = await getThirdPartyOAuthRedirectUrl(
+          targetTenantId,
+          targetProjectId,
+          toolDetails.url,
+          scope
+        );
+
+        if (!credentialScopedRedirectUrl) {
+          setStatus('error');
+          setErrorMessage('Failed to get OAuth URL. Please try connecting from the detail page.');
+          return;
+        }
+      } catch {
+        setStatus('error');
+        setErrorMessage('Failed to get OAuth URL. Please try connecting from the detail page.');
+        return;
+      }
+    }
+
     try {
       await onConnect({
         toolId,
         toolName: toolDetails.name,
         mcpServerUrl: toolDetails.url,
-        thirdPartyConnectAccountUrl: toolDetails.thirdPartyConnectAccountUrl,
-        credentialScope: toolDetails.credentialScope,
+        thirdPartyConnectAccountUrl: credentialScopedRedirectUrl ?? undefined,
+        credentialScope: scope,
       });
       setStatus('success');
     } catch (error) {
@@ -128,6 +154,20 @@ export function ConnectToolCard({
     }
   };
 
+  /**
+   * Handles the Connect button click.
+   * Shows scope selection dialog if enabled, otherwise proceeds directly.
+   */
+  const handleConnectClick = () => {
+    if (!toolId || !toolDetails) {
+      setStatus('error');
+      setErrorMessage('Tool ID and details are required to complete OAuth');
+      return;
+    }
+
+    requestScopeSelection(toolDetails.name, undefined);
+  };
+
   if (status === 'loading') {
     return (
       <div className="p-4 rounded-lg border border-border bg-card shadow-sm">
@@ -140,58 +180,63 @@ export function ConnectToolCard({
   }
 
   return (
-    <div className="p-4 rounded-lg border border-border bg-card shadow-sm">
-      {/* Main row: Logo, Title, Button */}
-      <div className="flex items-center gap-3 flex-wrap">
-        {toolDetails && (
-          <MCPToolImage
-            imageUrl={toolDetails.imageUrl}
-            name={toolDetails.name}
-            size={24}
-            className="shrink-0"
-          />
+    <>
+      <div className="p-4 rounded-lg border border-border bg-card shadow-sm">
+        {/* Main row: Logo, Title, Button */}
+        <div className="flex items-center gap-3 flex-wrap">
+          {toolDetails && (
+            <MCPToolImage
+              imageUrl={toolDetails.imageUrl}
+              name={toolDetails.name}
+              size={24}
+              className="shrink-0"
+            />
+          )}
+
+          <h3 className="flex-1 min-w-0 text-base font-semibold text-foreground">
+            {toolDetails?.name || toolId}
+          </h3>
+
+          {status !== 'success' && (
+            <Button
+              onClick={handleConnectClick}
+              disabled={status === 'connecting' || !toolId}
+              className="gap-2"
+              size="sm"
+            >
+              {status === 'connecting' ? (
+                <>
+                  <Loader2 className="size-4 animate-spin" />
+                  Connecting...
+                </>
+              ) : (
+                <>
+                  <ExternalLink className="size-4" />
+                  Connect
+                </>
+              )}
+            </Button>
+          )}
+        </div>
+
+        {/* Status messages below */}
+        {status === 'success' && (
+          <div className="flex items-center gap-2 mt-3 text-sm text-green-600 dark:text-green-400">
+            <CheckCircle2 className="size-4" />
+            <span>Successfully added!</span>
+          </div>
         )}
 
-        <h3 className="flex-1 min-w-0 text-base font-semibold text-foreground">
-          {toolDetails?.name || toolId}
-        </h3>
-
-        {status !== 'success' && (
-          <Button
-            onClick={handleConnectClick}
-            disabled={status === 'connecting' || !toolId}
-            className="gap-2"
-            size="sm"
-          >
-            {status === 'connecting' ? (
-              <>
-                <Loader2 className="size-4 animate-spin" />
-                Connecting...
-              </>
-            ) : (
-              <>
-                <ExternalLink className="size-4" />
-                Connect
-              </>
-            )}
-          </Button>
+        {status === 'error' && (
+          <div className="flex items-start gap-2 mt-3 text-sm text-destructive">
+            <XCircle className="size-4 mt-0.5" />
+            <span>{errorMessage || 'Connection failed. Please try again.'}</span>
+          </div>
         )}
       </div>
 
-      {/* Status messages below */}
-      {status === 'success' && (
-        <div className="flex items-center gap-2 mt-3 text-sm text-green-600 dark:text-green-400">
-          <CheckCircle2 className="size-4" />
-          <span>Successfully authenticated!</span>
-        </div>
-      )}
-
-      {status === 'error' && (
-        <div className="flex items-start gap-2 mt-3 text-sm text-destructive">
-          <XCircle className="size-4 mt-0.5" />
-          <span>{errorMessage || 'Connection failed. Please try again.'}</span>
-        </div>
-      )}
-    </div>
+      {/* Scope selection dialog */}
+      {ScopeDialog}
+    </>
   );
 }

package/src/components/agent/copilot/components/sub-agent-tool-relation-result.tsx

@@ -10,6 +10,7 @@ interface SubAgentToolRelationResultProps {
   targetTenantId?: string;
   targetProjectId?: string;
   onConnect: OAuthLoginHandler;
+  refreshAgentGraph?: (options?: { fetchTools?: boolean }) => Promise<void>;
 }
 
 /**
@@ -21,6 +22,7 @@ export function SubAgentToolRelationResult({
   targetTenantId,
   targetProjectId,
   onConnect,
+  refreshAgentGraph,
 }: SubAgentToolRelationResultProps) {
   if (relations.length === 0) {
     return null;
@@ -35,6 +37,7 @@ export function SubAgentToolRelationResult({
           targetTenantId={targetTenantId}
           targetProjectId={targetProjectId}
           onConnect={onConnect}
+          refreshAgentGraph={refreshAgentGraph}
         />
       ))}
     </>

package/src/components/agent/copilot/copilot-chat.tsx

@@ -209,6 +209,7 @@ export function CopilotChat({ agentId, tenantId, projectId, refreshAgentGraph }:
                         targetProjectId: projectId,
                         targetAgentId: agentId,
                         onOAuthLogin: handleOAuthLogin,
+                        refreshAgentGraph: refreshAgentGraph,
                         cookieHeader: cookieHeader,
                         copilotToken: copilotToken,
                       }),

package/src/components/agent/copilot/message-parts/message.tsx

@@ -28,6 +28,7 @@ interface IkpMessageProps {
   targetProjectId?: string;
   targetAgentId?: string;
   onOAuthLogin?: OAuthLoginHandler;
+  refreshAgentGraph?: (options?: { fetchTools?: boolean }) => Promise<void>;
   cookieHeader?: string;
   copilotToken?: string;
 }
@@ -162,6 +163,7 @@ export const IkpMessageComponent: FC<IkpMessageProps> = ({
   targetProjectId,
   targetAgentId,
   onOAuthLogin,
+  refreshAgentGraph,
   cookieHeader,
   copilotToken,
 }) => {
@@ -327,6 +329,7 @@ export const IkpMessageComponent: FC<IkpMessageProps> = ({
                               targetProjectId={targetProjectId}
                               targetAgentId={targetAgentId}
                               onOAuthLogin={onOAuthLogin}
+                              refreshAgentGraph={refreshAgentGraph}
                             />
                           )}
                         </div>
@@ -385,6 +388,7 @@ export const IkpMessage = (props: any) => {
         targetProjectId={otherProps.targetProjectId}
         targetAgentId={otherProps.targetAgentId}
         onOAuthLogin={otherProps.onOAuthLogin}
+        refreshAgentGraph={otherProps.refreshAgentGraph}
         cookieHeader={otherProps.cookieHeader}
         copilotToken={otherProps.copilotToken}
       />

package/src/components/agent/copilot/message-parts/tool-result.tsx

@@ -32,6 +32,7 @@ interface ToolResultProps {
   targetProjectId?: string;
   targetAgentId?: string;
   onOAuthLogin?: OAuthLoginHandler;
+  refreshAgentGraph?: (options?: { fetchTools?: boolean }) => Promise<void>;
 }
 
 // ============================================================================
@@ -101,6 +102,7 @@ export const ToolResult = ({
   targetTenantId,
   targetProjectId,
   onOAuthLogin,
+  refreshAgentGraph,
 }: ToolResultProps) => {
   const content = data.details.data.output?.result?.content || [];
 
@@ -129,6 +131,7 @@ export const ToolResult = ({
         targetTenantId={targetTenantId}
         targetProjectId={targetProjectId}
         onConnect={handleConnect}
+        refreshAgentGraph={refreshAgentGraph}
       />
 
       {/* Add more result renderers here as new types are supported:

package/src/components/errors/full-page-error.tsx

@@ -5,19 +5,14 @@ import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { BodyTemplate } from '@/components/layout/body-template';
-import { MainContent } from '@/components/layout/main-content';
 import { Button } from '@/components/ui/button';
 import { buildLoginUrlWithCurrentPath } from '@/lib/utils/auth-redirect';
 
 export default function FullPageError({ statusCode, errorCode, ...props }: FullPageErrorProps) {
   const resolvedStatusCode = statusCode ?? getStatusCodeFromErrorCode(errorCode);
   return (
-    <BodyTemplate
-      breadcrumbs={[{ label: resolvedStatusCode ? `${resolvedStatusCode} Error` : 'Error' }]}
-    >
-      <MainContent className="flex-1">
-        <ErrorContent statusCode={resolvedStatusCode} errorCode={errorCode} {...props} />
-      </MainContent>
+    <BodyTemplate breadcrumbs={[resolvedStatusCode ? `${resolvedStatusCode} Error` : 'Error']}>
+      <ErrorContent statusCode={resolvedStatusCode} errorCode={errorCode} {...props} />
     </BodyTemplate>
   );
 }

package/src/components/external-agents/view-external-agent-details.tsx

@@ -49,7 +49,7 @@ export function ViewExternalAgentDetails({
   };
 
   return (
-    <div className="max-w-2xl mx-auto py-4 space-y-8">
+    <div className="space-y-8">
       {/* Header */}
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-3">

package/src/components/layout/body-template.tsx

@@ -1,16 +1,24 @@
 import { SiteHeader } from '@/components/layout/site-header';
+import type { BreadcrumbItem } from '@/components/ui/breadcrumbs';
+import { cn } from '@/lib/utils';
 
 type BodyTemplateProps = {
   children: React.ReactNode;
-  breadcrumbs?: { label: string; href?: string }[];
+  breadcrumbs: BreadcrumbItem[];
+  className?: string;
 };
 
-export function BodyTemplate({ children, breadcrumbs }: BodyTemplateProps) {
+export function BodyTemplate({ children, breadcrumbs, className }: BodyTemplateProps) {
   return (
     <div className="h-[calc(100vh-16px)] flex flex-col overflow-hidden">
       <SiteHeader breadcrumbs={breadcrumbs} />
-      <div className="flex flex-1 flex-col overflow-y-auto scrollbar-thin scrollbar-thumb-muted-foreground/30 dark:scrollbar-thumb-muted-foreground/50 scrollbar-track-transparent h-full w-full min-h-0 bg-muted/20 dark:bg-background">
-        <div id="main-content" className="@container/main min-h-0 flex flex-1 flex-col">
+      <div
+        className={cn(
+          'flex flex-col flex-1 overflow-y-auto scrollbar-thin',
+          'scrollbar-thumb-muted-foreground/30 dark:scrollbar-thumb-muted-foreground/50 scrollbar-track-transparent h-full w-full min-h-0 bg-muted/20 dark:bg-background'
+        )}
+      >
+        <div id="main-content" className={cn('p-6 grow', className)}>
           {children}
         </div>
       </div>

package/src/components/layout/header-menus.tsx

@@ -1,23 +1,31 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import { useTheme } from 'next-themes';
+import { useEffect } from 'react';
+import { MONACO_THEME_NAME } from '@/constants/theme';
+import { useMonacoStore } from '@/features/agent/state/use-monaco-store';
 import { useAuthSession } from '@/hooks/use-auth';
+import { useIsMounted } from '@/hooks/use-is-mounted';
 import { UserMenu } from '../auth/user-menu';
 import { ThemeToggle } from '../theme-toggle';
 import { Skeleton } from '../ui/skeleton';
 
 export function HeaderMenus() {
-  const [hasMounted, setHasMounted] = useState(false);
   const { user, isLoading } = useAuthSession();
+  const { resolvedTheme } = useTheme();
+  const isMounted = useIsMounted();
+  const monaco = useMonacoStore((state) => state.monaco);
 
   useEffect(() => {
-    setHasMounted(true);
-  }, []);
+    const isDark = resolvedTheme === 'dark';
+    const monacoTheme = isDark ? MONACO_THEME_NAME.dark : MONACO_THEME_NAME.light;
+    monaco?.editor.setTheme(monacoTheme);
+  }, [resolvedTheme, monaco]);
 
   // Always render skeleton on server and initial client render to prevent hydration mismatch
-  if (!hasMounted || isLoading) {
+  if (!isMounted || isLoading) {
     return <Skeleton className="h-7 w-7" />;
   }
 
-  return !user ? <ThemeToggle /> : <UserMenu />;
+  return user ? <UserMenu /> : <ThemeToggle />;
 }

package/src/components/layout/site-header.tsx

@@ -4,7 +4,7 @@ import { Separator } from '@/components/ui/separator';
 import { SidebarTrigger } from '@/components/ui/sidebar';
 import { HeaderMenus } from './header-menus';
 
-export function SiteHeader({ breadcrumbs }: { breadcrumbs?: BreadcrumbItem[] }) {
+export function SiteHeader({ breadcrumbs }: { breadcrumbs: BreadcrumbItem[] }) {
   return (
     <header className="h-(--header-height) shrink-0 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-(--header-height) bg-muted/20 dark:bg-background rounded-t-[14px] flex items-center gap-1 px-4 lg:gap-2 lg:px-6">
       <SidebarTrigger className="-ml-1 text-muted-foreground hover:text-foreground hover:bg-accent dark:text-muted-foreground dark:hover:text-foreground dark:hover:bg-accent/50" />

package/src/components/mcp-servers/form/mcp-server-form.tsx

@@ -160,6 +160,7 @@ export function MCPServerForm({
           toolId: newTool.id,
           mcpServerUrl: data.config.mcp.server.url,
           toolName: mcpServerName,
+          credentialScope: data.credentialScope,
         });
 
         return;

package/src/components/mcp-servers/selection/mcp-server-selection.tsx

@@ -12,13 +12,13 @@ import {
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { useOAuthLogin } from '@/hooks/use-oauth-login';
+import { useScopeSelection } from '@/hooks/use-scope-selection';
 import type { Credential } from '@/lib/api/credentials';
 import { getThirdPartyOAuthRedirectUrl } from '@/lib/api/mcp-catalog';
 import { createMCPTool } from '@/lib/api/tools';
 import type { PrebuiltMCPServer } from '@/lib/data/prebuilt-mcp-servers';
 import { generateId } from '@/lib/utils/id-utils';
 import { PrebuiltServersGrid } from './prebuilt-servers-grid';
-import { ScopeSelectionDialog } from './scope-selection-dialog';
 
 /**
  * Remove user_id from Composio URLs before storing in DB.
@@ -48,8 +48,6 @@ export function MCPServerSelection({ credentials, tenantId, projectId }: MCPServ
   const [loadingServerId, setLoadingServerId] = useState<string>();
   const [selectedMode, setSelectedMode] = useState<SelectionMode>('popular');
   const [searchQuery, setSearchQuery] = useState('');
-  const [scopeDialogOpen, setScopeDialogOpen] = useState(false);
-  const [pendingServer, setPendingServer] = useState<PrebuiltMCPServer | null>(null);
   const router = useRouter();
 
   const { handleOAuthLogin } = useOAuthLogin({
@@ -57,20 +55,14 @@ export function MCPServerSelection({ credentials, tenantId, projectId }: MCPServ
     projectId,
   });
 
-  const handleSelectPrebuiltServer = (server: PrebuiltMCPServer) => {
-    // For servers that require auth, show scope selection dialog first
-    if (server.isOpen) {
-      // Open servers don't need credentials, proceed directly
-      createServerWithScope(server, CredentialScopeEnum.project);
-    } else {
-      setPendingServer(server);
-      setScopeDialogOpen(true);
-    }
-  };
-
-  const createServerWithScope = async (server: PrebuiltMCPServer, scope: CredentialScope) => {
+  const createServerWithScope = async ({
+    server,
+    scope,
+  }: {
+    server: PrebuiltMCPServer;
+    scope: CredentialScope;
+  }) => {
     setLoadingServerId(server.id);
-    setPendingServer(null);
 
     const mcpServerName = server.name;
     const serverUrl = removeComposioUserId(server.url);
@@ -97,35 +89,26 @@ export function MCPServerSelection({ credentials, tenantId, projectId }: MCPServ
 
       const newTool = await createMCPTool(tenantId, projectId, mcpToolData);
 
-      // For user-scoped, don't start OAuth - just redirect to detail page
-      if (scope === CredentialScopeEnum.user) {
-        toast.success(
-          `${server.name} MCP server created. Users can connect their own accounts from the detail page.`
-        );
-        router.push(`/${tenantId}/projects/${projectId}/mcp-servers/${newTool.id}`);
-        return;
-      }
-
-      // For project-scoped, proceed with OAuth
+      // proceed with OAuth flow
       const isThirdPartyServer = serverUrl.includes('composio.dev');
 
       if (server.isOpen) {
         toast.success(`${server.name} MCP server created successfully`);
         router.push(`/${tenantId}/projects/${projectId}/mcp-servers/${newTool.id}`);
       } else if (isThirdPartyServer) {
-        // For third-party servers, get the correct OAuth URL for project scope
-        const projectScopedRedirectUrl = await getThirdPartyOAuthRedirectUrl(
+        const credentialScopedRedirectUrl = await getThirdPartyOAuthRedirectUrl(
           tenantId,
           projectId,
           serverUrl,
-          'project'
+          scope
         );
-        if (projectScopedRedirectUrl) {
+        if (credentialScopedRedirectUrl) {
           handleOAuthLogin({
             toolId: newTool.id,
             mcpServerUrl: serverUrl,
             toolName: mcpServerName,
-            thirdPartyConnectAccountUrl: projectScopedRedirectUrl,
+            thirdPartyConnectAccountUrl: credentialScopedRedirectUrl,
+            credentialScope: scope,
           });
         } else {
           // Fallback: redirect to detail page if we couldn't get the OAuth URL
@@ -133,7 +116,12 @@ export function MCPServerSelection({ credentials, tenantId, projectId }: MCPServ
           router.push(`/${tenantId}/projects/${projectId}/mcp-servers/${newTool.id}`);
         }
       } else {
-        handleOAuthLogin({ toolId: newTool.id, mcpServerUrl: serverUrl, toolName: mcpServerName });
+        handleOAuthLogin({
+          toolId: newTool.id,
+          mcpServerUrl: serverUrl,
+          toolName: mcpServerName,
+          credentialScope: scope,
+        });
       }
     } catch (error) {
       console.error('Failed to create prebuilt MCP server:', error);
@@ -142,9 +130,19 @@ export function MCPServerSelection({ credentials, tenantId, projectId }: MCPServ
     }
   };
 
-  const handleScopeConfirm = (scope: CredentialScope) => {
-    if (pendingServer) {
-      createServerWithScope(pendingServer, scope);
+  const { requestScopeSelection, ScopeDialog } = useScopeSelection<PrebuiltMCPServer>({
+    onConfirm: (scope, server) => {
+      createServerWithScope({ server, scope });
+    },
+  });
+
+  const handleSelectPrebuiltServer = (server: PrebuiltMCPServer) => {
+    // For servers that require auth, show scope selection dialog first
+    if (server.isOpen) {
+      // Open servers don't need credentials, proceed directly
+      createServerWithScope({ server, scope: CredentialScopeEnum.project });
+    } else {
+      requestScopeSelection(server.name, server);
     }
   };
 
@@ -203,12 +201,7 @@ export function MCPServerSelection({ credentials, tenantId, projectId }: MCPServ
       )}
 
       {/* Scope selection dialog for prebuilt servers */}
-      <ScopeSelectionDialog
-        open={scopeDialogOpen}
-        onOpenChange={setScopeDialogOpen}
-        serverName={pendingServer?.name ?? ''}
-        onConfirm={handleScopeConfirm}
-      />
+      {ScopeDialog}
     </>
   );
 }

package/src/components/mcp-servers/view-mcp-server-details-project-scope.tsx

@@ -122,6 +122,7 @@ export function ViewMCPServerDetailsProjectScope({
                       mcpServerUrl: tool.config.mcp.server.url,
                       toolName: tool.name,
                       thirdPartyConnectAccountUrl: thirdPartyConnectUrl,
+                      credentialScope: 'project',
                     });
                   }}
                 >