Display extension install notes in "Add custom extension" form (#5036)

ui/desktop/src/components/settings/extensions/deeplink.ts

@@ -43,7 +43,6 @@ function getStdioConfig(
 
   const envList = parsedUrl.searchParams.getAll('env');
 
-  // Create the extension config
   const config: ExtensionConfig = {
     name: name,
     type: 'stdio',
@@ -147,6 +146,7 @@ export async function addExtensionFromDeepLink(
   const parsedTimeout = parsedUrl.searchParams.get('timeout');
   const timeout = parsedTimeout ? parseInt(parsedTimeout, 10) : DEFAULT_EXTENSION_TIMEOUT;
   const description = parsedUrl.searchParams.get('description');
+  const installation_notes = parsedUrl.searchParams.get('installation_notes');
 
   const cmd = parsedUrl.searchParams.get('cmd');
   const remoteUrl = parsedUrl.searchParams.get('url');
@@ -177,12 +177,17 @@ export async function addExtensionFromDeepLink(
         )
       : undefined;
 
-  const config = remoteUrl
+  const baseConfig = remoteUrl
     ? transportType === 'streamable_http'
       ? getStreamableHttpConfig(remoteUrl, name, description || '', timeout, headers, envs)
       : getSseConfig(remoteUrl, name, description || '', timeout)
     : getStdioConfig(cmd!, parsedUrl, name, description || '', timeout);
 
+  const config = {
+    ...baseConfig,
+    ...(installation_notes ? { installation_notes } : {}),
+  };
+
   // Check if extension requires env vars or headers and go to settings if so
   const hasEnvVars = config.envs && Object.keys(config.envs).length > 0;
   const hasHeaders =

ui/desktop/src/components/settings/extensions/modal/ExtensionModal.tsx

@@ -12,7 +12,7 @@ import { ExtensionFormData } from '../utils';
 import EnvVarsSection from './EnvVarsSection';
 import HeadersSection from './HeadersSection';
 import ExtensionConfigFields from './ExtensionConfigFields';
-import { PlusIcon, Edit, Trash2, AlertTriangle } from 'lucide-react';
+import { PlusIcon, Edit, Trash2, AlertTriangle, Info } from 'lucide-react';
 import ExtensionInfoFields from './ExtensionInfoFields';
 import ExtensionTimeoutField from './ExtensionTimeoutField';
 import { upsertConfig } from '../../../../api';
@@ -329,6 +329,20 @@ export default function ExtensionModal({
             </div>
           ) : (
             <div className="py-4 space-y-6">
+              {formData.installation_notes && (
+                <div className="bg-bgSubtle border border-borderSubtle rounded-lg p-4">
+                  <div className="flex items-start gap-2">
+                    <Info className="h-5 w-5 text-blue-400 shrink-0 mt-0.5" />
+                    <div>
+                      <h4 className="text-sm font-medium text-textStandard mb-1">
+                        Installation Notes
+                      </h4>
+                      <p className="text-sm text-textSubtle">{formData.installation_notes}</p>
+                    </div>
+                  </div>
+                </div>
+              )}
+
               {/* Form Fields */}
               {/* Name and Type */}
               <ExtensionInfoFields

ui/desktop/src/components/settings/extensions/utils.ts

@@ -36,6 +36,7 @@ export interface ExtensionFormData {
     value: string;
     isEdited?: boolean;
   }[];
+  installation_notes?: string;
 }
 
 export function getDefaultFormData(): ExtensionFormData {
@@ -110,6 +111,9 @@ export function extensionToFormData(extension: FixedExtensionEntry): ExtensionFo
     timeout: 'timeout' in extension ? (extension.timeout ?? undefined) : undefined,
     envVars,
     headers,
+    installation_notes: (extension as Record<string, unknown>)['installation_notes'] as
+      | string
+      | undefined,
   };
 }