feat(credential-groups): add managed MCP connector presets

Author: TheodoreSpeaks

apps/sim/app/api/workspaces/[id]/credential-groups/[groupId]/mcp-connectors/[connectorId]/route.ts

@@ -0,0 +1,50 @@
+import {
+  deleteCredentialGroupMcpConnectorContract,
+  updateCredentialGroupMcpConnectorContract,
+} from '@/lib/api/contracts/credential-groups'
+import {
+  defineInternalJsonRoute,
+  internalRateLimits,
+  internalSessionAuth,
+} from '@/lib/api/server/routes'
+import {
+  deleteCredentialGroupMcpConnector,
+  updateCredentialGroupMcpConnector,
+} from '@/lib/credential-groups/application/manage-mcp-connectors'
+import { credentialGroupOperations } from '@/lib/credential-groups/application/operations'
+import { createCredentialGroupInternalErrorPolicy } from '@/app/api/workspaces/[id]/credential-groups/error-policy'
+
+const rateLimit = internalRateLimits.none({
+  reason: 'Preserve existing internal Credential Group settings behavior',
+})
+
+export const PATCH = defineInternalJsonRoute({
+  contract: updateCredentialGroupMcpConnectorContract,
+  auth: internalSessionAuth,
+  operation: credentialGroupOperations.updateMcpConnector,
+  rateLimit,
+  errorPolicy: createCredentialGroupInternalErrorPolicy('Failed to update managed MCP connector'),
+  mapInput: ({ params, body }) => ({
+    assertedWorkspaceId: params.id,
+    credentialGroupId: params.groupId,
+    connectorId: params.connectorId,
+    update: body,
+  }),
+  useCase: updateCredentialGroupMcpConnector,
+  present: ({ mcpServer }) => ({ mcpServer }),
+})
+
+export const DELETE = defineInternalJsonRoute({
+  contract: deleteCredentialGroupMcpConnectorContract,
+  auth: internalSessionAuth,
+  operation: credentialGroupOperations.deleteMcpConnector,
+  rateLimit,
+  errorPolicy: createCredentialGroupInternalErrorPolicy('Failed to remove managed MCP connector'),
+  mapInput: ({ params }) => ({
+    assertedWorkspaceId: params.id,
+    credentialGroupId: params.groupId,
+    connectorId: params.connectorId,
+  }),
+  useCase: deleteCredentialGroupMcpConnector,
+  present: () => ({ success: true as const }),
+})

apps/sim/app/api/workspaces/[id]/credential-groups/[groupId]/mcp-connectors/route.ts

@@ -0,0 +1,26 @@
+import { createCredentialGroupMcpConnectorContract } from '@/lib/api/contracts/credential-groups'
+import {
+  defineInternalJsonRoute,
+  internalRateLimits,
+  internalSessionAuth,
+} from '@/lib/api/server/routes'
+import { createCredentialGroupMcpConnector } from '@/lib/credential-groups/application/manage-mcp-connectors'
+import { credentialGroupOperations } from '@/lib/credential-groups/application/operations'
+import { createCredentialGroupInternalErrorPolicy } from '@/app/api/workspaces/[id]/credential-groups/error-policy'
+
+export const POST = defineInternalJsonRoute({
+  contract: createCredentialGroupMcpConnectorContract,
+  auth: internalSessionAuth,
+  operation: credentialGroupOperations.createMcpConnector,
+  rateLimit: internalRateLimits.none({
+    reason: 'Preserve existing internal Credential Group settings behavior',
+  }),
+  errorPolicy: createCredentialGroupInternalErrorPolicy('Failed to add managed MCP connector'),
+  mapInput: ({ params, body }) => ({
+    assertedWorkspaceId: params.id,
+    credentialGroupId: params.groupId,
+    connector: body,
+  }),
+  useCase: createCredentialGroupMcpConnector,
+  present: ({ mcpServer }) => ({ mcpServer }),
+})

apps/sim/app/credential-groups/enroll/[token]/page.tsx

@@ -2,10 +2,10 @@ import { type ReactNode, Suspense } from 'react'
 import { Chip } from '@sim/emcn'
 import type { Metadata } from 'next'
 import { headers } from 'next/headers'
-import { McpIcon } from '@/components/icons'
 import { asOrchestrationError } from '@/lib/core/orchestration/types'
 import { authenticateCredentialGroupEnrollment } from '@/lib/credential-groups/application/enrollment-auth'
 import { readPublicCredentialGroupEnrollment } from '@/lib/credential-groups/application/public-enrollment'
+import { getManagedMcpConnectorIcon } from '@/lib/credential-groups/managed-mcp-connector-icons'
 import { getCredentialGroupProviderService } from '@/lib/credential-groups/providers'
 import { enforcePublicCredentialGroupIpRateLimit } from '@/lib/credential-groups/rate-limit'
 import { SupportFooter } from '@/app/(auth)/components'
@@ -181,26 +181,29 @@ export default async function CredentialGroupEnrollmentPage({
                 />
               )
             })}
-            {enrollment.mcpServers.map((server) => (
-              <SettingsResourceRow
-                key={server.id}
-                icon={<McpIcon />}
-                title={server.name}
-                description={
-                  server.connection?.status === 'connected'
-                    ? 'Connected'
-                    : server.connection
-                      ? 'Reconnect required'
-                      : server.description || 'Not connected'
-                }
-                trailing={
-                  <OAuthConnectLink
-                    href={`/api/credential-groups/enroll/${token}/mcp/${server.id}`}
-                    reconnect={Boolean(server.connection)}
-                  />
-                }
-              />
-            ))}
+            {enrollment.mcpServers.map((server) => {
+              const ConnectorIcon = getManagedMcpConnectorIcon(server.managedConnectorId)
+              return (
+                <SettingsResourceRow
+                  key={server.id}
+                  icon={<ConnectorIcon />}
+                  title={server.name}
+                  description={
+                    server.connection?.status === 'connected'
+                      ? 'Connected'
+                      : server.connection
+                        ? 'Reconnect required'
+                        : server.description || 'Not connected'
+                  }
+                  trailing={
+                    <OAuthConnectLink
+                      href={`/api/credential-groups/enroll/${token}/mcp/${server.id}`}
+                      reconnect={Boolean(server.connection)}
+                    />
+                  }
+                />
+              )
+            })}
           </div>
         </SettingsSection>
         <form

apps/sim/app/workspace/[workspaceId]/home/components/chat-context-kind-registry/chat-context-kind-registry.tsx

@@ -11,6 +11,7 @@ import {
 } from '@sim/emcn/icons'
 import { AgentSkillsIcon, McpIcon } from '@/components/icons'
 import { getDocumentIcon } from '@/components/icons/document-icons'
+import { getManagedMcpConnectorIcon } from '@/lib/credential-groups/managed-mcp-connector-icons'
 import type { ChatContextKind, ChatMessageContext } from '@/app/workspace/[workspaceId]/home/types'
 import { BrandIcon } from '@/blocks/brand-icon'
 import { getBlockRegistry } from '@/blocks/registry'
@@ -118,6 +119,12 @@ export const CHAT_CONTEXT_KIND_REGISTRY: Record<ChatContextKind, ChatContextKind
   },
   mcp: {
     label: 'MCP server',
-    renderIcon: ({ className }) => <McpIcon className={className} />,
+    renderIcon: ({ context, className }) => {
+      const McpServerIcon =
+        context.kind === 'mcp' && context.managedConnectorId
+          ? getManagedMcpConnectorIcon(context.managedConnectorId)
+          : McpIcon
+      return <McpServerIcon className={className} />
+    },
   },
 }

apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/prompt-editor/use-prompt-editor.ts

@@ -33,7 +33,7 @@ import {
   restoreSkillTriggerText,
   SKILL_CHIP_TRIGGER,
 } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/utils'
-import { type McpServer, useMcpServers } from '@/hooks/queries/mcp'
+import { type McpServer, useMcpToolServers } from '@/hooks/queries/mcp'
 import { type SkillDefinition, useSkills } from '@/hooks/queries/skills'
 import type { ChatContext } from '@/stores/panel'
 
@@ -165,7 +165,7 @@ export function usePromptEditor({
   onPasteFiles,
 }: UsePromptEditorProps) {
   const { data: skills = [] } = useSkills(workspaceId)
-  const { data: allMcpServers = [] } = useMcpServers(workspaceId)
+  const { data: allMcpServers = [] } = useMcpToolServers(workspaceId)
   const mcpServers = useMemo(
     () => allMcpServers.filter((server) => server.enabled && server.workspaceId === workspaceId),
     [allMcpServers, workspaceId]
@@ -527,7 +527,12 @@ export function usePromptEditor({
         setValueState(newValue)
       }
 
-      addContextNotified({ kind: 'mcp', serverId: server.id, label: server.name })
+      addContextNotified({
+        kind: 'mcp',
+        serverId: server.id,
+        label: server.name,
+        ...(server.managedConnectorId ? { managedConnectorId: server.managedConnectorId } : {}),
+      })
     },
     [textareaRef, addContextNotified]
   )

apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/skills-menu-dropdown/skills-menu-dropdown.tsx

@@ -9,6 +9,7 @@ import {
   dropdownMenuRowClass,
 } from '@sim/emcn'
 import { AgentSkillsIcon, McpIcon } from '@/components/icons'
+import { getManagedMcpConnectorIcon } from '@/lib/credential-groups/managed-mcp-connector-icons'
 import type { McpServer } from '@/hooks/queries/mcp'
 import type { SkillDefinition } from '@/hooks/queries/skills'
 
@@ -201,6 +202,10 @@ export const SkillsMenuDropdown = React.memo(
             {filteredItems.length > 0 ? (
               filteredItems.map((target, index) => {
                 const isActive = index === activeIndex
+                const McpServerIcon =
+                  target.kind === 'mcp' && target.item.managedConnectorId
+                    ? getManagedMcpConnectorIcon(target.item.managedConnectorId)
+                    : McpIcon
                 return (
                   <button
                     key={`${target.kind}:${target.item.id}`}
@@ -216,7 +221,7 @@ export const SkillsMenuDropdown = React.memo(
                       isActive && 'bg-[var(--surface-hover)]'
                     )}
                   >
-                    {target.kind === 'skill' ? <AgentSkillsIcon /> : <McpIcon />}
+                    {target.kind === 'skill' ? <AgentSkillsIcon /> : <McpServerIcon />}
                     <span>{target.item.name}</span>
                   </button>
                 )

apps/sim/app/workspace/[workspaceId]/home/components/user-input/hooks/use-skill-auto-mention.ts

@@ -89,7 +89,12 @@ export function useSkillAutoMention({
     for (const server of mcpServers) {
       const key = server.name.toLowerCase()
       if (!byName.has(key)) {
-        byName.set(key, { kind: 'mcp', serverId: server.id, label: server.name })
+        byName.set(key, {
+          kind: 'mcp',
+          serverId: server.id,
+          label: server.name,
+          ...(server.managedConnectorId ? { managedConnectorId: server.managedConnectorId } : {}),
+        })
       }
     }
     const names = [...byName.values()]

apps/sim/app/workspace/[workspaceId]/home/hooks/use-chat.ts

@@ -3876,7 +3876,12 @@ export function useChat(
         ...('folderId' in c && c.folderId ? { folderId: c.folderId } : {}),
         ...(c.kind === 'skill' && 'skillId' in c ? { skillId: c.skillId } : {}),
         ...(c.kind === 'integration' && 'blockType' in c ? { blockType: c.blockType } : {}),
-        ...(c.kind === 'mcp' && 'serverId' in c ? { serverId: c.serverId } : {}),
+        ...(c.kind === 'mcp' && 'serverId' in c
+          ? {
+              serverId: c.serverId,
+              ...(c.managedConnectorId ? { managedConnectorId: c.managedConnectorId } : {}),
+            }
+          : {}),
         ...(c.kind === 'file_selection'
           ? {
               fileName: c.fileName,

apps/sim/app/workspace/[workspaceId]/home/types.ts

@@ -1,3 +1,4 @@
+import type { ManagedMcpConnectorId } from '@/lib/credential-groups/managed-mcp-connectors'
 import type { ChatContext } from '@/stores/panel'
 import type { BrowserTextSelection, TerminalTextSelection } from '@/stores/panel/types'
 
@@ -152,6 +153,7 @@ export interface ChatMessageContext {
   blockType?: string
   skillId?: string
   serverId?: string
+  managedConnectorId?: ManagedMcpConnectorId
   /** Selected passage for a `file_selection` context. */
   text?: string
   /** Source file name for a `file_selection` context. */