feat(web): Slack-specific OAuth credentials copy in the connectors dialog (#1254)

Author: msukkari

packages/web/src/app/(app)/settings/workspaceAskAgent/page.tsx

@@ -1,6 +1,7 @@
 import { hasEntitlement } from "@/lib/entitlements";
 import { authenticatedPage } from "@/middleware/authenticatedPage";
 import { OrgRole } from "@sourcebot/db";
+import { getMcpOAuthCallbackUrl } from "@/ee/features/chat/mcp/utils.server";
 import { WorkspaceAskAgentPage } from "./workspaceAskAgentPage";
 import { WorkspaceAskAgentEntitlementMessage } from "./workspaceAskAgentEntitlementMessage";
 
@@ -36,6 +37,7 @@ export default authenticatedPage<PageProps>(async ({ org, prisma }, { searchPara
             callbackStatus={status}
             callbackServer={server}
             callbackMessage={message}
+            oauthRedirectUrl={getMcpOAuthCallbackUrl()}
         />
     );
 }, { minRole: OrgRole.OWNER, redirectTo: '/settings' });

packages/web/src/app/(app)/settings/workspaceAskAgent/workspaceAskAgentPage.tsx

@@ -30,7 +30,8 @@ import { cn, isServiceError } from "@/lib/utils";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { AlertTriangleIcon, CableIcon, CopyIcon, Loader2, MoreHorizontalIcon, PlusIcon, Trash2Icon } from "lucide-react";
 import { PrefabConnectorPopover } from "@/ee/features/chat/mcp/components/prefabConnectorPopover";
-import type { PrefabMcpServer } from "@/ee/features/chat/mcp/prefabMcpServers";
+import Markdown from "react-markdown";
+import { getStaticOAuthDescription, type PrefabMcpServer } from "@/ee/features/chat/mcp/prefabMcpServers";
 import type { McpConfigurationServer, ServerToolsEntry } from "@/ee/features/chat/mcp/types";
 
 function clearCallbackParams() {
@@ -45,6 +46,7 @@ interface WorkspaceAskAgentPageProps {
     callbackStatus?: string;
     callbackServer?: string;
     callbackMessage?: string;
+    oauthRedirectUrl: string;
 }
 
 type WorkspaceConnectorStatus = {
@@ -158,7 +160,7 @@ function WorkspaceConnectorCard({
     );
 }
 
-export function WorkspaceAskAgentPage({ callbackStatus, callbackServer, callbackMessage }: WorkspaceAskAgentPageProps) {
+export function WorkspaceAskAgentPage({ callbackStatus, callbackServer, callbackMessage, oauthRedirectUrl }: WorkspaceAskAgentPageProps) {
     const { toast } = useToast();
     const queryClient = useQueryClient();
     const router = useRouter();
@@ -581,8 +583,42 @@ export function WorkspaceAskAgentPage({ callbackStatus, callbackServer, callback
                 <DialogContent className="sm:max-w-md">
                     <DialogHeader>
                         <DialogTitle>OAuth Client Credentials Required</DialogTitle>
-                        <DialogDescription>
-                            This connector does not advertise dynamic client registration. Provide OAuth client credentials from a pre-registered app before members can connect to it.
+                        <DialogDescription asChild>
+                            <div className="text-sm text-muted-foreground">
+                                <Markdown
+                                    components={{
+                                        p: ({ children }) => <p className="[&:not(:first-child)]:mt-2">{children}</p>,
+                                        a: ({ children, href }) => (
+                                            <a
+                                                href={href}
+                                                target="_blank"
+                                                rel="noopener noreferrer"
+                                                className="text-link hover:underline"
+                                            >
+                                                {children}
+                                            </a>
+                                        ),
+                                        code: ({ children }) => (
+                                            <span className="inline-flex items-center gap-1 align-middle">
+                                                <code className="bg-muted rounded px-1 py-0.5 text-xs break-all">{children}</code>
+                                                <button
+                                                    type="button"
+                                                    aria-label="Copy redirect URL"
+                                                    className="text-muted-foreground hover:text-foreground"
+                                                    onClick={() => {
+                                                        navigator.clipboard.writeText(String(children));
+                                                        toast({ title: "Copied", description: "Redirect URL copied to clipboard." });
+                                                    }}
+                                                >
+                                                    <CopyIcon className="h-3 w-3" />
+                                                </button>
+                                            </span>
+                                        ),
+                                    }}
+                                >
+                                    {getStaticOAuthDescription(pendingClientCredentialsServer?.serverUrl ?? "", oauthRedirectUrl)}
+                                </Markdown>
+                            </div>
                         </DialogDescription>
                     </DialogHeader>
                     <div className="space-y-4 py-4">

packages/web/src/app/api/(server)/ee/askmcp/callback/route.ts

@@ -4,6 +4,7 @@ import { env, createLogger } from '@sourcebot/shared';
 import { hasEntitlement } from '@/lib/entitlements';
 import { OAUTH_NOT_SUPPORTED_ERROR_MESSAGE } from '@/ee/features/oauth/constants';
 import { PrismaOAuthClientProvider } from '@/ee/features/chat/mcp/prismaOAuthClientProvider';
+import { getMcpOAuthCallbackUrl } from '@/ee/features/chat/mcp/utils.server';
 // Note: We use the raw (unscoped) prisma client here because this route handles OAuth
 // redirect callbacks from external providers, so it can't go through withAuth. Session
 // identity is verified via NextAuth's auth() instead, and all queries filter by userId.
@@ -166,7 +167,7 @@ export const GET = apiHandler(async (request: NextRequest) => {
         serverId: userServer.serverId,
         orgId: userServer.server.orgId,
         userId: session.user.id,
-        callbackUrl: `${env.AUTH_URL}/api/ee/askmcp/callback`,
+        callbackUrl: getMcpOAuthCallbackUrl(),
     });
 
     let result: Awaited<ReturnType<typeof mcpAuth>>;

packages/web/src/app/api/(server)/ee/askmcp/connect/route.ts

@@ -13,6 +13,7 @@ import { ConnectMcpResponse } from "@/app/api/(server)/ee/askmcp/connect/types";
 import { createLogger, env } from "@sourcebot/shared";
 import { __unsafePrisma } from '@/prisma';
 import { getExternalMcpErrorLogFields } from '@/ee/features/chat/mcp/externalMcpError';
+import { getMcpOAuthCallbackUrl } from '@/ee/features/chat/mcp/utils.server';
 import { ErrorCode } from '@/lib/errorCodes';
 import { StatusCodes } from 'http-status-codes';
 import { normalizeMcpOAuthReturnTo } from '@/ee/features/chat/mcp/mcpOAuthReturnTo';
@@ -130,7 +131,7 @@ export const POST = apiHandler(async (request: NextRequest) => {
                 serverId: mcpServer.id,
                 orgId: org.id,
                 userId: user.id,
-                callbackUrl: `${env.AUTH_URL}/api/ee/askmcp/callback`,
+                callbackUrl: getMcpOAuthCallbackUrl(),
                 callbackReturnTo,
                 allowClientRegistration: true,
             });

packages/web/src/ee/features/chat/mcp/mcpClientFactory.ts

@@ -1,5 +1,6 @@
-import { createLogger, env } from '@sourcebot/shared';
+import { createLogger } from '@sourcebot/shared';
 import { PrismaOAuthClientProvider } from '@/ee/features/chat/mcp/prismaOAuthClientProvider';
+import { getMcpOAuthCallbackUrl } from '@/ee/features/chat/mcp/utils.server';
 import { StreamableHTTPClientTransport } from '@modelcontextprotocol/sdk/client/streamableHttp.js';
 import type { PrismaClient } from '@sourcebot/db';
 import { getExternalMcpErrorLogFields } from './externalMcpError';
@@ -72,7 +73,7 @@ export async function getConnectedMcpClients(prisma: PrismaClient, userId: strin
                 serverId: userServer.serverId,
                 orgId,
                 userId,
-                callbackUrl: `${env.AUTH_URL}/api/ee/askmcp/callback`,
+                callbackUrl: getMcpOAuthCallbackUrl(),
             });
 
             const transport = new StreamableHTTPClientTransport(

packages/web/src/ee/features/chat/mcp/prefabMcpServers.ts

@@ -2,8 +2,14 @@ export interface PrefabMcpServer {
     id: string;
     name: string;
     serverUrl: string;
+    descriptionOverride?: string;
 }
 
+export const DEFAULT_STATIC_OAUTH_DESCRIPTION =
+    "This connector does not advertise dynamic client registration. Provide OAuth client credentials from a pre-registered app before members can connect to it.";
+
+export const OAUTH_REDIRECT_URL_PLACEHOLDER = "{{REDIRECT_URL}}";
+
 const prefabMcpServers = [
     {
         id: "atlassian",
@@ -24,6 +30,8 @@ const prefabMcpServers = [
         id: "slack",
         name: "Slack",
         serverUrl: "https://mcp.slack.com/mcp",
+        descriptionOverride:
+            "Slack doesn't support dynamic client registration, so you'll need to create an app in your Slack workspace and provide Sourcebot a Client ID and Secret. These are stored encrypted within your Sourcebot deployment.\n\nVisit [this page](https://api.slack.com/apps) to create a Slack app. Set the redirect URL (under OAuth & Permissions) to `{{REDIRECT_URL}}`",
     },
 ] satisfies PrefabMcpServer[];
 
@@ -41,6 +49,21 @@ export function normalizeMcpServerUrlForComparison(serverUrl: string): string {
     }
 }
 
+export function getStaticOAuthDescription(serverUrl: string, redirectUrl?: string): string {
+    const normalizedServerUrl = normalizeMcpServerUrlForComparison(serverUrl);
+    const prefabServer = PREFAB_MCP_SERVERS.find((server) => (
+        normalizeMcpServerUrlForComparison(server.serverUrl) === normalizedServerUrl
+    ));
+
+    const description = prefabServer?.descriptionOverride ?? DEFAULT_STATIC_OAUTH_DESCRIPTION;
+
+    if (redirectUrl) {
+        return description.replaceAll(OAUTH_REDIRECT_URL_PLACEHOLDER, redirectUrl);
+    }
+
+    return description;
+}
+
 export function getAvailablePrefabMcpServers(configuredServerUrls: string[]): PrefabMcpServer[] {
     const configuredServerUrlSet = new Set(
         configuredServerUrls.map((serverUrl) => normalizeMcpServerUrlForComparison(serverUrl)),

packages/web/src/ee/features/chat/mcp/utils.server.ts

@@ -0,0 +1,9 @@
+import 'server-only';
+
+import { env } from '@sourcebot/shared';
+
+export const MCP_OAUTH_CALLBACK_PATH = '/api/ee/askmcp/callback';
+
+export function getMcpOAuthCallbackUrl(): string {
+    return `${env.AUTH_URL}${MCP_OAUTH_CALLBACK_PATH}`;
+}