Merge branch 'dev/mcp-stuff' into develop

Author: quotentiroler

.github/workflows/create-pr.yml

@@ -10,6 +10,10 @@ on:
       - "ai/test/*"
       - "ai/checklist/*"
 
+permissions:
+  contents: write
+  pull-requests: write
+
 jobs:
   pr-to-develop:
     name: Create/Update PR from dev/* → develop

backend/src/schemas/admin/smart-apps.ts

@@ -48,7 +48,15 @@ export const SmartApp = t.Object({
 
   // PKCE and offline access
   requirePkce: t.Optional(t.Boolean({ description: 'Require PKCE for public clients' })),
-  allowOfflineAccess: t.Optional(t.Boolean({ description: 'Allow offline access (refresh tokens)' }))
+  allowOfflineAccess: t.Optional(t.Boolean({ description: 'Allow offline access (refresh tokens)' })),
+  
+  // MCP server access control
+  mcpAccessType: t.Optional(t.Union([
+    t.Literal('none'),
+    t.Literal('all-mcp-servers'),
+    t.Literal('selected-mcp-servers')
+  ], { description: 'MCP server access control type' })),
+  allowedMcpServerNames: t.Optional(t.Array(t.String(), { description: 'List of allowed MCP server names (when mcpAccessType is selected-mcp-servers)' }))
 }, { title: 'SmartApp' })
 
 export const CreateSmartAppRequest = t.Object({
@@ -89,7 +97,15 @@ export const CreateSmartAppRequest = t.Object({
 
   // PKCE and offline access
   requirePkce: t.Optional(t.Boolean({ description: 'Require Proof Key for Code Exchange (PKCE) for public clients' })),
-  allowOfflineAccess: t.Optional(t.Boolean({ description: 'Allow offline access (refresh tokens)' }))
+  allowOfflineAccess: t.Optional(t.Boolean({ description: 'Allow offline access (refresh tokens)' })),
+  
+  // MCP server access control
+  mcpAccessType: t.Optional(t.Union([
+    t.Literal('none'),
+    t.Literal('all-mcp-servers'),
+    t.Literal('selected-mcp-servers')
+  ], { description: 'MCP server access control type (none = no MCP access, all-mcp-servers = access all, selected-mcp-servers = specific servers only)' })),
+  allowedMcpServerNames: t.Optional(t.Array(t.String(), { description: 'List of allowed MCP server names (when mcpAccessType is selected-mcp-servers)' }))
 }, { title: 'CreateSmartAppRequest' })
 
 export const UpdateSmartAppRequest = t.Object({
@@ -130,7 +146,15 @@ export const UpdateSmartAppRequest = t.Object({
 
   // PKCE and offline access
   requirePkce: t.Optional(t.Boolean({ description: 'Require PKCE for public clients' })),
-  allowOfflineAccess: t.Optional(t.Boolean({ description: 'Allow offline access (refresh tokens)' }))
+  allowOfflineAccess: t.Optional(t.Boolean({ description: 'Allow offline access (refresh tokens)' })),
+  
+  // MCP server access control
+  mcpAccessType: t.Optional(t.Union([
+    t.Literal('none'),
+    t.Literal('all-mcp-servers'),
+    t.Literal('selected-mcp-servers')
+  ], { description: 'MCP server access control type' })),
+  allowedMcpServerNames: t.Optional(t.Array(t.String(), { description: 'List of allowed MCP server names' }))
 }, { title: 'UpdateSmartAppRequest' })
 
 export const ClientIdParam = t.Object({

ui/src/components/SmartAppsManager/SmartAppAddForm.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { Input } from '@/components/ui/input';
@@ -10,14 +10,18 @@ import {
   Server,
   Users,
   Globe,
-  CheckCircle
+  CheckCircle,
+  Cpu
 } from 'lucide-react';
 import { useFhirServers } from '@/stores/smartStore';
+import { useAuth } from '@/stores/authStore';
 import type { ScopeSet, SmartAppFormData } from '@/lib/types/api';
+import type { GetAdminMcpServers200ResponseServersInner } from '@/lib/api-client';
 
 type SmartAppType = 'backend-service' | 'standalone-app' | 'ehr-launch' | 'agent';
 type AuthenticationType = 'asymmetric' | 'symmetric' | 'none';
 type ServerAccessType = 'all-servers' | 'selected-servers' | 'user-person-servers';
+type McpAccessType = 'none' | 'all-mcp-servers' | 'selected-mcp-servers';
 
 interface SmartAppAddFormProps {
   open: boolean;
@@ -28,6 +32,31 @@ interface SmartAppAddFormProps {
 
 export function SmartAppAddForm({ open, onClose, onAddApp, scopeSets }: SmartAppAddFormProps) {
   const { servers, loading: serversLoading } = useFhirServers();
+  const { clientApis } = useAuth();
+  
+  // MCP servers state
+  const [mcpServers, setMcpServers] = useState<GetAdminMcpServers200ResponseServersInner[]>([]);
+  const [mcpServersLoading, setMcpServersLoading] = useState(false);
+
+  // Fetch MCP servers when form opens
+  const fetchMcpServers = useCallback(async () => {
+    if (!clientApis?.mcpManagement) return;
+    setMcpServersLoading(true);
+    try {
+      const response = await clientApis.mcpManagement.getAdminMcpServers();
+      setMcpServers(response.servers || []);
+    } catch (err) {
+      console.error('Failed to fetch MCP servers:', err);
+    } finally {
+      setMcpServersLoading(false);
+    }
+  }, [clientApis]);
+
+  useEffect(() => {
+    if (open) {
+      fetchMcpServers();
+    }
+  }, [open, fetchMcpServers]);
 
   const [newApp, setNewApp] = useState<SmartAppFormData>({
     name: '',
@@ -42,6 +71,8 @@ export function SmartAppAddForm({ open, onClose, onAddApp, scopeSets }: SmartApp
     authenticationType: 'symmetric', // UI-only field - not sent to backend
     serverAccessType: 'all-servers',
     allowedServerIds: [],
+    mcpAccessType: 'none', // MCP server access control
+    allowedMcpServerNames: [],
     publicClient: false,
     webOrigins: [],
     smartVersion: '2.0.0',
@@ -108,6 +139,19 @@ export function SmartAppAddForm({ open, onClose, onAddApp, scopeSets }: SmartApp
     }
   };
 
+  const getMcpAccessTypeDescription = (mcpAccessType: McpAccessType): string => {
+    switch (mcpAccessType) {
+      case 'none':
+        return 'App has no access to MCP servers (AI capabilities disabled)';
+      case 'all-mcp-servers':
+        return 'App can access all configured MCP servers';
+      case 'selected-mcp-servers':
+        return 'App is restricted to specific MCP servers only';
+      default:
+        return '';
+    }
+  };
+
   const getScopeSetName = (scopeSetId?: string) => {
     if (!scopeSetId) return 'Custom';
     const scopeSet = scopeSets.find(set => set.id === scopeSetId);
@@ -140,6 +184,9 @@ export function SmartAppAddForm({ open, onClose, onAddApp, scopeSets }: SmartApp
       appType: newApp.appType!,
       serverAccessType: newApp.serverAccessType!,
       allowedServerIds: newApp.allowedServerIds || [],
+      // MCP server access control
+      mcpAccessType: newApp.mcpAccessType,
+      allowedMcpServerNames: newApp.mcpAccessType === 'selected-mcp-servers' ? newApp.allowedMcpServerNames : [],
       // authenticationType is UI-only - backend infers from jwksUri/publicKey presence
       jwksUri: newApp.jwksUri,
       publicKey: newApp.publicKey,
@@ -159,6 +206,8 @@ export function SmartAppAddForm({ open, onClose, onAddApp, scopeSets }: SmartApp
       authenticationType: 'symmetric', // UI-only
       serverAccessType: 'all-servers',
       allowedServerIds: [],
+      mcpAccessType: 'none',
+      allowedMcpServerNames: [],
     });
     onClose();
   };
@@ -177,6 +226,8 @@ export function SmartAppAddForm({ open, onClose, onAddApp, scopeSets }: SmartApp
       authenticationType: 'symmetric', // UI-only
       serverAccessType: 'all-servers',
       allowedServerIds: [],
+      mcpAccessType: 'none',
+      allowedMcpServerNames: [],
     });
     onClose();
   };
@@ -559,6 +610,132 @@ export function SmartAppAddForm({ open, onClose, onAddApp, scopeSets }: SmartApp
           </div>
         </div>
 
+        {/* MCP Server Access Section */}
+        <div className="space-y-6 p-6 bg-violet-500/10 rounded-xl border border-violet-500/20">
+          <div className="flex items-center space-x-3">
+            <div className="w-8 h-8 bg-violet-500/10 rounded-lg flex items-center justify-center shadow-sm">
+              <Cpu className="w-4 h-4 text-violet-600 dark:text-violet-400" />
+            </div>
+            <div>
+              <h4 className="text-lg font-bold text-foreground tracking-tight">MCP Server Access (AI Capabilities)</h4>
+              <p className="text-muted-foreground text-sm font-medium">Control which AI/MCP servers this application can use</p>
+            </div>
+          </div>
+
+          <div className="space-y-4">
+            <div className="space-y-3">
+              <Label htmlFor="mcpAccessType" className="text-sm font-semibold text-foreground">MCP Access Type</Label>
+              <select
+                id="mcpAccessType"
+                value={newApp.mcpAccessType || 'none'}
+                onChange={(e) => {
+                  const mcpAccessType = e.target.value as McpAccessType;
+                  setNewApp({
+                    ...newApp,
+                    mcpAccessType,
+                    allowedMcpServerNames: mcpAccessType === 'selected-mcp-servers' ? newApp.allowedMcpServerNames : []
+                  });
+                }}
+                className="flex h-10 w-full rounded-xl border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 shadow-sm"
+              >
+                <option value="none">No MCP Access</option>
+                <option value="all-mcp-servers">All MCP Servers</option>
+                <option value="selected-mcp-servers">Specific MCP Servers Only</option>
+              </select>
+              <p className="text-xs text-muted-foreground">
+                {getMcpAccessTypeDescription(newApp.mcpAccessType || 'none')}
+              </p>
+            </div>
+
+            {newApp.mcpAccessType === 'selected-mcp-servers' && (
+              <div className="space-y-3">
+                <Label className="text-sm font-semibold text-foreground">Select Allowed MCP Servers</Label>
+                {mcpServersLoading ? (
+                  <div className="p-4 text-center text-muted-foreground">
+                    <div className="animate-spin inline-block w-4 h-4 border-2 border-border border-t-primary rounded-full mr-2"></div>
+                    Loading available MCP servers...
+                  </div>
+                ) : mcpServers.length === 0 ? (
+                  <div className="p-4 text-center text-muted-foreground bg-muted/50 rounded-lg border border-border">
+                    <Cpu className="w-6 h-6 mx-auto mb-2 text-muted-foreground" />
+                    <p className="text-sm">No MCP servers available</p>
+                    <p className="text-xs text-muted-foreground">Configure MCP servers first</p>
+                  </div>
+                ) : (
+                  <div className="space-y-2 max-h-48 overflow-y-auto p-3 bg-card rounded-lg border border-border">
+                    {mcpServers.map((server) => (
+                      <label key={server.name} className="flex items-center space-x-3 p-2 hover:bg-muted/50 rounded-lg cursor-pointer">
+                        <input
+                          type="checkbox"
+                          checked={(newApp.allowedMcpServerNames || []).includes(server.name)}
+                          onChange={(e) => {
+                            const serverNames = e.target.checked
+                              ? [...(newApp.allowedMcpServerNames || []), server.name]
+                              : (newApp.allowedMcpServerNames || []).filter(name => name !== server.name);
+                            setNewApp({ ...newApp, allowedMcpServerNames: serverNames });
+                          }}
+                          className="w-4 h-4 text-primary border-border rounded focus:ring-ring"
+                        />
+                        <div className="flex-1 min-w-0">
+                          <div className="flex items-center space-x-2">
+                            <span className="text-sm font-medium text-foreground truncate">{server.name}</span>
+                            {server.status === 'connected' ? (
+                              <CheckCircle className="w-4 h-4 text-green-500 dark:text-green-400 flex-shrink-0" />
+                            ) : (
+                              <AlertCircle className="w-4 h-4 text-yellow-500 dark:text-yellow-400 flex-shrink-0" />
+                            )}
+                          </div>
+                          <div className="flex items-center space-x-2 text-xs text-muted-foreground">
+                            <span className="truncate">{server.url || server.type}</span>
+                            {server.toolCount !== undefined && (
+                              <Badge variant="outline" className="text-xs">
+                                {server.toolCount} tools
+                              </Badge>
+                            )}
+                          </div>
+                        </div>
+                      </label>
+                    ))}
+                  </div>
+                )}
+                {(newApp.allowedMcpServerNames || []).length > 0 && (
+                  <div className="text-xs text-violet-600 dark:text-violet-400 bg-violet-500/10 p-2 rounded-lg border border-violet-500/20">
+                    ✓ {(newApp.allowedMcpServerNames || []).length} MCP server(s) selected
+                  </div>
+                )}
+              </div>
+            )}
+
+            {newApp.mcpAccessType === 'none' && (
+              <div className="p-4 bg-slate-500/10 border border-slate-500/20 rounded-lg">
+                <div className="flex items-start space-x-2">
+                  <Cpu className="w-4 h-4 text-slate-600 dark:text-slate-400 mt-0.5 flex-shrink-0" />
+                  <div className="text-sm">
+                    <p className="font-semibold text-slate-800 dark:text-slate-300 mb-1">No MCP Access</p>
+                    <p className="text-slate-700 dark:text-slate-400 text-xs">
+                      This app will not have access to any MCP servers. AI-powered features will be unavailable.
+                    </p>
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {newApp.mcpAccessType === 'all-mcp-servers' && (
+              <div className="p-4 bg-violet-500/10 border border-violet-500/20 rounded-lg">
+                <div className="flex items-start space-x-2">
+                  <Cpu className="w-4 h-4 text-violet-600 dark:text-violet-400 mt-0.5 flex-shrink-0" />
+                  <div className="text-sm">
+                    <p className="font-semibold text-violet-800 dark:text-violet-300 mb-1">Full MCP Access</p>
+                    <p className="text-violet-700 dark:text-violet-400 text-xs">
+                      This app will have access to all MCP servers configured in the system, enabling full AI capabilities.
+                    </p>
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+
         {/* Scope Management Section */}
         <div className="space-y-6 p-6 bg-blue-500/10 rounded-xl border border-blue-500/20">
           <div className="flex items-center space-x-3">

ui/src/components/SmartAppsManager/SmartAppsManager.tsx

@@ -803,6 +803,33 @@ export function SmartAppsManager() {
                 </CardContent>
               </Card>
 
+              {/* MCP Access Section */}
+              <Card>
+                <CardHeader>
+                  <CardTitle className="text-sm">MCP Server Access (AI Capabilities)</CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <div className="space-y-2">
+                    <div>
+                      <div className="text-xs font-medium mb-1">Access Type:</div>
+                      <Badge variant="outline" className="text-xs">
+                        {(editingApp as SmartApp & { mcpAccessType?: string }).mcpAccessType || 'none'}
+                      </Badge>
+                    </div>
+                    {(editingApp as SmartApp & { mcpAccessType?: string; allowedMcpServerNames?: string[] }).mcpAccessType === 'selected-mcp-servers' && (
+                      <div>
+                        <div className="text-xs font-medium mb-1">Allowed MCP Servers:</div>
+                        <div className="flex flex-wrap gap-1">
+                          {(editingApp as SmartApp & { allowedMcpServerNames?: string[] }).allowedMcpServerNames?.map((name, i) => (
+                            <Badge key={i} variant="outline" className="text-xs bg-violet-500/10 text-violet-700 dark:text-violet-400 border-violet-500/20">{name}</Badge>
+                          )) || <span className="text-sm text-muted-foreground">None</span>}
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                </CardContent>
+              </Card>
+
               <div className="flex justify-end pt-4">
                 <Button onClick={() => setShowConfigDialog(false)}>Close</Button>
               </div>

ui/src/lib/types/api.ts

@@ -64,6 +64,9 @@ export interface HealthcareUserFormData extends CreateHealthcareUserRequest {
 export interface SmartAppFormData extends CreateSmartAppRequest {
   authenticationType?: 'asymmetric' | 'symmetric' | 'none'; // UI-only field for form UX
   secret?: string; // Temporary fix until TypeScript client is regenerated
+  // MCP server access control (added for Issue #189)
+  mcpAccessType?: 'none' | 'all-mcp-servers' | 'selected-mcp-servers';
+  allowedMcpServerNames?: string[];
 }
 
 export interface ScopeSet {