From f6865d33f184c8f921723c075b4e5e06be0e94c4 Mon Sep 17 00:00:00 2001
From: Dhravya <63950637+Dhravya@users.noreply.github.com>
Date: Thu, 13 Aug 2026 00:42:40 +0000
Subject: [PATCH] fix(web): clarify MCP API key setup

---
 .../settings/company-brain-connections.tsx    | 30 ++++++++++++-------
 1 file changed, 20 insertions(+), 10 deletions(-)

diff --git a/apps/web/components/settings/company-brain-connections.tsx b/apps/web/components/settings/company-brain-connections.tsx
index 24819c73..07a5e817 100644
--- a/apps/web/components/settings/company-brain-connections.tsx
+++ b/apps/web/components/settings/company-brain-connections.tsx
@@ -67,7 +67,7 @@ function slugifyMcpName(value: string) {
 }
 
 function customConnectionName(slug: string) {
-	return titleCase(slug.replace(/-dir-[a-z0-9]{6}$/, "").replace(/-/g, " "))
+	return titleCase(slug.replace(/-sm-dir-[a-z0-9]{6}$/, "").replace(/-/g, " "))
 }
 
 function stableDirectorySuffix(value: string) {
@@ -530,7 +530,7 @@ export default function CompanyBrainConnections() {
 	const connectCustom = async (event: React.FormEvent<HTMLFormElement>) => {
 		event.preventDefault()
 		const slug = directoryEntry
-			? `${slugifyMcpName(directoryEntry.name).slice(0, 52)}-dir-${stableDirectorySuffix(
+			? `${slugifyMcpName(directoryEntry.name).slice(0, 49)}-sm-dir-${stableDirectorySuffix(
 					directoryEntry.url ?? directoryEntry.note ?? directoryEntry.id,
 				)}`
 			: slugifyMcpName(customName)
@@ -539,6 +539,12 @@ export default function CompanyBrainConnections() {
 			toast.error("Enter a custom MCP name.")
 			return
 		}
+		if (!directoryEntry && /-sm-dir-[a-z0-9]{6}$/.test(slug)) {
+			toast.error(
+				"Choose a name that doesn't use the reserved directory suffix.",
+			)
+			return
+		}
 		if (!serverUrl) {
 			toast.error("Enter an MCP URL.")
 			return
@@ -881,6 +887,17 @@ export default function CompanyBrainConnections() {
 							))}
 						</div>
 
+						{customAuthMethod === "api-key" && (
+							<input
+								value={customToken}
+								onChange={(event) => setCustomToken(event.target.value)}
+								type="password"
+								placeholder="API key"
+								required
+								className={customInputClass}
+							/>
+						)}
+
 						{customAuthMethod === "api-key" && (
 							<button
 								type="button"
@@ -893,19 +910,12 @@ export default function CompanyBrainConnections() {
 										customAdvancedOpen && "rotate-180",
 									)}
 								/>
-								API key settings
+								Header settings
 							</button>
 						)}
 
 						{customAuthMethod === "api-key" && customAdvancedOpen && (
 							<div className="flex flex-col gap-2">
-								<input
-									value={customToken}
-									onChange={(event) => setCustomToken(event.target.value)}
-									type="password"
-									placeholder="API key (optional)"
-									className={customInputClass}
-								/>
 								<input
 									value={customHeaderName}
 									onChange={(event) => setCustomHeaderName(event.target.value)}