@inkeep/agents-manage-ui 0.11.3 → 0.12.1

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

@@ -0,0 +1,130 @@
+'use client';
+
+import { nanoid } from 'nanoid';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { toast } from 'sonner';
+import { PageHeader } from '@/components/layout/page-header';
+import { MCPServerForm } from '@/components/mcp-servers/form/mcp-server-form';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { useOAuthLogin } from '@/hooks/use-oauth-login';
+import type { Credential } from '@/lib/api/credentials';
+import { createMCPTool } from '@/lib/api/tools';
+import type { PrebuiltMCPServer } from '@/lib/data/prebuilt-mcp-servers';
+import { PrebuiltServersGrid } from './prebuilt-servers-grid';
+
+interface MCPServerSelectionProps {
+  credentials: Credential[];
+  tenantId: string;
+  projectId: string;
+}
+
+type SelectionMode = 'popular' | 'custom';
+
+export function MCPServerSelection({ credentials, tenantId, projectId }: MCPServerSelectionProps) {
+  const [loadingServerId, setLoadingServerId] = useState<string>();
+  const [selectedMode, setSelectedMode] = useState<SelectionMode>('popular');
+  const [searchQuery, setSearchQuery] = useState('');
+  const router = useRouter();
+
+  const { handleOAuthLogin } = useOAuthLogin({
+    tenantId,
+    projectId,
+    onError: () => {
+      setLoadingServerId(undefined);
+    },
+  });
+
+  const handleSelectPrebuiltServer = async (server: PrebuiltMCPServer) => {
+    setLoadingServerId(server.id);
+
+    try {
+      // Transform prebuilt server data to MCPToolFormData format
+      const mcpToolData = {
+        id: nanoid(),
+        name: server.name,
+        config: {
+          type: 'mcp' as const,
+          mcp: {
+            server: {
+              url: server.url,
+            },
+            transport: {
+              type: server.transport,
+            },
+          },
+        },
+        credentialReferenceId: null, // OAuth servers typically don't need pre-configured credentials
+        imageUrl: server.imageUrl,
+      };
+
+      const newTool = await createMCPTool(tenantId, projectId, mcpToolData);
+
+      if (server.isOpen) {
+        toast.success(`${server.name} MCP server created successfully`);
+        router.push(`/${tenantId}/projects/${projectId}/mcp-servers/${newTool.id}`);
+      } else {
+        handleOAuthLogin(newTool.id);
+      }
+    } catch (error) {
+      console.error('Failed to create prebuilt MCP server:', error);
+      toast.error(`Failed to create ${server.name} server. Please try again.`);
+      setLoadingServerId(undefined);
+    }
+  };
+
+  return (
+    <>
+      <PageHeader
+        className="gap-2 items-start"
+        title={selectedMode === 'popular' ? 'Popular MCP Servers' : 'Custom MCP Server'}
+        description={
+          selectedMode === 'popular'
+            ? 'Connect to popular services with pre-configured servers. Click any server to set up with OAuth authentication.'
+            : 'Configure a custom MCP server by providing the server URL and transport details.'
+        }
+        action={
+          <div className="flex bg-muted p-1 rounded-lg">
+            <Button
+              variant={selectedMode === 'popular' ? 'default' : 'ghost'}
+              size="sm"
+              onClick={() => setSelectedMode('popular')}
+            >
+              Popular Servers
+            </Button>
+            <Button
+              variant={selectedMode === 'custom' ? 'default' : 'ghost'}
+              size="sm"
+              onClick={() => setSelectedMode('custom')}
+            >
+              Custom Server
+            </Button>
+          </div>
+        }
+      />
+
+      {/* Content */}
+      {selectedMode === 'popular' ? (
+        <div className="space-y-6">
+          <div className="max-w-sm">
+            <Input
+              placeholder="Search servers..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+            />
+          </div>
+          <PrebuiltServersGrid
+            onSelectServer={handleSelectPrebuiltServer}
+            loadingServerId={loadingServerId}
+            searchQuery={searchQuery}
+          />
+        </div>
+      ) : (
+        <div className="max-w-2xl mx-auto">
+          <MCPServerForm credentials={credentials} tenantId={tenantId} projectId={projectId} />
+        </div>
+      )}
+    </>
+  );
+}

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

@@ -0,0 +1,74 @@
+'use client';
+
+import { MCPToolImage } from '@/components/mcp-servers/mcp-tool-image';
+import { CardTitle } from '@/components/ui/card';
+import {
+  ItemCardContent,
+  ItemCardHeader,
+  ItemCardRoot,
+  ItemCardTitle,
+} from '@/components/ui/item-card';
+import type { PrebuiltMCPServer } from '@/lib/data/prebuilt-mcp-servers';
+
+// URL Display Component with ellipsis
+function URLDisplay({ url }: { url: string }) {
+  return (
+    <div className="rounded py-1 min-w-0">
+      <code className="text-sm text-muted-foreground block truncate">{url}</code>
+    </div>
+  );
+}
+
+interface PrebuiltServerCardProps {
+  server: PrebuiltMCPServer;
+  onSelect: (server: PrebuiltMCPServer) => void;
+  isLoading?: boolean;
+  disabled?: boolean;
+}
+
+export function PrebuiltServerCard({
+  server,
+  onSelect,
+  isLoading = false,
+  disabled = false,
+}: PrebuiltServerCardProps) {
+  const handleClick = () => {
+    if (!isLoading && !disabled) {
+      onSelect(server);
+    }
+  };
+
+  return (
+    <ItemCardRoot
+      className={`h-full min-w-0 transition-shadow ${
+        disabled
+          ? 'opacity-50 cursor-not-allowed'
+          : 'cursor-pointer hover:shadow-md hover:bg-accent/50'
+      }`}
+      onClick={handleClick}
+    >
+      <ItemCardHeader>
+        <ItemCardTitle className="text-md">
+          <div className="flex items-center gap-3">
+            <MCPToolImage
+              imageUrl={server.imageUrl}
+              name={server.name}
+              provider={server.name}
+              size={24}
+              className="mt-0.5 flex-shrink-0"
+            />
+            <div className="flex-1 min-w-0">
+              <CardTitle className="text-base truncate font-medium">{server.name}</CardTitle>
+            </div>
+          </div>
+        </ItemCardTitle>
+      </ItemCardHeader>
+
+      <ItemCardContent>
+        <div className="space-y-3 min-w-0">
+          <URLDisplay url={server.url} />
+        </div>
+      </ItemCardContent>
+    </ItemCardRoot>
+  );
+}

package/src/components/mcp-servers/selection/prebuilt-servers-grid.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+import { type PrebuiltMCPServer, usePrebuiltMCPServers } from '@/lib/data/prebuilt-mcp-servers';
+import { PrebuiltServerCard } from './prebuilt-server-card';
+
+interface PrebuiltServersGridProps {
+  onSelectServer: (server: PrebuiltMCPServer) => void;
+  loadingServerId?: string;
+  searchQuery?: string;
+}
+
+export function PrebuiltServersGrid({
+  onSelectServer,
+  loadingServerId,
+  searchQuery = '',
+}: PrebuiltServersGridProps) {
+  const prebuiltMCPServers = usePrebuiltMCPServers();
+  const filteredServers = prebuiltMCPServers.filter(
+    (server) =>
+      server.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      server.url.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  if (filteredServers.length === 0) {
+    return (
+      <div className="text-center py-12">
+        <p className="text-muted-foreground">No servers found matching "{searchQuery}".</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+      {filteredServers.map((server) => (
+        <PrebuiltServerCard
+          key={server.id}
+          server={server}
+          onSelect={onSelectServer}
+          isLoading={loadingServerId === server.id}
+          disabled={!!loadingServerId && loadingServerId !== server.id}
+        />
+      ))}
+    </div>
+  );
+}

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

@@ -5,11 +5,9 @@ import Link from 'next/link';
 import { Badge } from '@/components/ui/badge';
 import { ExternalLink } from '@/components/ui/external-link';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
-import { useRuntimeConfig } from '@/contexts/runtime-config-context';
+import { useOAuthLogin } from '@/hooks/use-oauth-login';
 import type { MCPTool } from '@/lib/types/tools';
-
 import { cn } from '@/lib/utils';
-import { getOAuthLoginUrl } from '@/lib/utils/mcp-urls';
 import { getToolTypeAndName } from '@/lib/utils/mcp-utils';
 import { Button } from '../ui/button';
 import { CopyableMultiLineCode } from '../ui/copyable-multi-line-code';
@@ -53,7 +51,14 @@ export function ViewMCPServerDetails({
   tenantId: string;
   projectId: string;
 }) {
-  const { INKEEP_AGENTS_MANAGE_API_URL } = useRuntimeConfig();
+  const { handleOAuthLogin } = useOAuthLogin({
+    tenantId,
+    projectId,
+    onFinish: () => {
+      window.location.reload();
+    },
+  });
+
   const formatDate = (dateString: string) => {
     return new Date(dateString).toLocaleDateString('en-US', {
       year: 'numeric',
@@ -99,50 +104,6 @@ export function ViewMCPServerDetails({
     return <div className={cn('flex w-full text-sm', className)}>{children}</div>;
   };
 
-  // Handle OAuth login for MCP tools that need authentication
-  const handleOAuthLogin = (toolId: string) => {
-    try {
-      // Get the OAuth URL and open in popup window
-      const oauthUrl = getOAuthLoginUrl({
-        INKEEP_AGENTS_MANAGE_API_URL,
-        tenantId,
-        projectId,
-        id: toolId,
-      });
-      const popup = window.open(
-        oauthUrl,
-        'oauth-popup',
-        'width=600,height=700,scrollbars=yes,resizable=yes,status=yes,location=yes'
-      );
-
-      // Listen for OAuth success message from popup
-      const handleMessage = (event: MessageEvent) => {
-        if (event.data.type === 'oauth-success' && event.data.toolId === toolId) {
-          // Clean up listener
-          window.removeEventListener('message', handleMessage);
-          // Refresh the page to show updated tool status
-          window.location.reload();
-        }
-      };
-
-      if (popup) {
-        window.addEventListener('message', handleMessage);
-
-        // Fallback: Monitor popup for closure
-        const checkClosed = setInterval(() => {
-          if (popup.closed) {
-            clearInterval(checkClosed);
-            window.removeEventListener('message', handleMessage);
-            // Only refresh if we didn't already get the success message
-            window.location.reload();
-          }
-        }, 1000);
-      }
-    } catch (error) {
-      console.error('OAuth login failed:', error);
-    }
-  };
-
   let provider: string | undefined;
   try {
     provider = getToolTypeAndName(tool).type;
@@ -195,14 +156,6 @@ export function ViewMCPServerDetails({
             </ItemValue>
           </div>
         </div>
-        {tool.imageUrl && (
-          <div className="space-y-2">
-            <ItemLabel>Image URL</ItemLabel>
-            <ItemValue>
-              {tool.imageUrl.startsWith('data:image/') ? 'Base64 encoded image' : tool.imageUrl}
-            </ItemValue>
-          </div>
-        )}
 
         <div className="space-y-2">
           <ItemLabel>Status</ItemLabel>

package/src/hooks/use-oauth-login.ts

@@ -0,0 +1,81 @@
+import { useRouter } from 'next/navigation';
+import { toast } from 'sonner';
+import { useRuntimeConfig } from '@/contexts/runtime-config-context';
+import { getOAuthLoginUrl } from '@/lib/utils/mcp-urls';
+
+interface UseOAuthLoginProps {
+  tenantId: string;
+  projectId: string;
+  onFinish?: (toolId: string) => void;
+  onError?: (error: Error) => void;
+}
+
+export function useOAuthLogin({ tenantId, projectId, onFinish, onError }: UseOAuthLoginProps) {
+  const router = useRouter();
+  const { INKEEP_AGENTS_MANAGE_API_URL } = useRuntimeConfig();
+
+  const handleOAuthLogin = (toolId: string) => {
+    try {
+      // Get the OAuth URL and open in popup window
+      const oauthUrl = getOAuthLoginUrl({
+        INKEEP_AGENTS_MANAGE_API_URL,
+        tenantId,
+        projectId,
+        id: toolId,
+      });
+      const popup = window.open(
+        oauthUrl,
+        'oauth-popup',
+        'width=600,height=700,scrollbars=yes,resizable=yes,status=yes,location=yes'
+      );
+
+      // Listen for OAuth success message from popup
+      const handleMessage = (event: MessageEvent) => {
+        if (event.data.type === 'oauth-success' && event.data.toolId === toolId) {
+          // Clean up listener
+          window.removeEventListener('message', handleMessage);
+
+          // Call custom success handler or default behavior
+          if (onFinish) {
+            onFinish(toolId);
+          } else {
+            // Default: navigate to server details page
+            router.push(`/${tenantId}/projects/${projectId}/mcp-servers/${toolId}`);
+          }
+        }
+      };
+
+      if (popup) {
+        window.addEventListener('message', handleMessage);
+
+        // Fallback: Monitor popup for closure
+        const checkClosed = setInterval(() => {
+          if (popup.closed) {
+            clearInterval(checkClosed);
+            window.removeEventListener('message', handleMessage);
+
+            // Call custom success handler or default behavior
+            if (onFinish) {
+              onFinish(toolId);
+            } else {
+              // Default: navigate to server details page
+              router.push(`/${tenantId}/projects/${projectId}/mcp-servers/${toolId}`);
+            }
+          }
+        }, 1000);
+      }
+    } catch (error) {
+      console.error('OAuth login failed:', error);
+      const errorObj = error instanceof Error ? error : new Error('OAuth login failed');
+
+      if (onError) {
+        onError(errorObj);
+      } else {
+        // Default error handling
+        toast.error('OAuth login failed. Please try again.');
+      }
+    }
+  };
+
+  return { handleOAuthLogin };
+}