1570 client - Add Ollama Base URL field to AI Providers settings

- AiProviderForm: for Ollama, render an optional Base URL field (blank defaults
  to http://localhost:11434) and make the API key optional; other providers are
  unchanged. Pass the provider object so the form can distinguish Ollama.
- AiProviderList: treat Ollama as configured without an API key, and show its
  Base URL (or the localhost default) instead of an API key.
- Regenerate the AI provider REST middleware for the new url field.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: ivicac

client/src/ee/pages/settings/platform/ai-providers/components/AiProviderForm.tsx

@@ -1,6 +1,7 @@
 import Button from '@/components/Button/Button';
 import {Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage} from '@/components/ui/form';
 import {Input} from '@/components/ui/input';
+import {AiProvider} from '@/ee/shared/middleware/platform/configuration';
 import {useUpdateAiProviderMutation} from '@/ee/shared/mutations/platform/aiProvider.mutations';
 import {AiProviderKeys} from '@/ee/shared/queries/platform/aiProviders.queries';
 import {WorkflowNodeOptionKeys} from '@/shared/queries/platform/workflowNodeOptions.queries';
@@ -9,26 +10,28 @@ import {useQueryClient} from '@tanstack/react-query';
 import {useForm} from 'react-hook-form';
 import {z} from 'zod';
 
-const formSchema = z.object({
-    apiKey: z.string().min(1, {
-        message: 'API Key is required.',
-    }),
-});
-
 const AiProviderForm = ({
+    aiProvider,
     environment,
-    id,
     onClose,
     showCancel = false,
 }: {
+    aiProvider: AiProvider;
     environment: number;
-    id: number;
     onClose: () => void;
     showCancel: boolean;
 }) => {
+    const isOllama = aiProvider.name?.toLowerCase() === 'ollama';
+
+    const formSchema = z.object({
+        apiKey: isOllama ? z.string().optional() : z.string().min(1, {message: 'API Key is required.'}),
+        url: z.string().optional(),
+    });
+
     const form = useForm<z.infer<typeof formSchema>>({
         defaultValues: {
             apiKey: '',
+            url: aiProvider.url ?? '',
         },
         resolver: zodResolver(formSchema),
     });
@@ -51,33 +54,53 @@ const AiProviderForm = ({
     function handleSubmit(values: z.infer<typeof formSchema>) {
         updateAiProviderMutation.mutate({
             environment,
-            id,
-            updateAiProviderRequest: {
-                apiKey: values.apiKey,
-            },
+            id: aiProvider.id!,
+            updateAiProviderRequest: isOllama ? {url: values.url} : {apiKey: values.apiKey},
         });
     }
 
     return (
         <Form {...form}>
             <form className="space-y-4" onSubmit={form.handleSubmit(handleSubmit)}>
-                <FormField
-                    control={form.control}
-                    name="apiKey"
-                    render={({field}) => (
-                        <FormItem>
-                            <FormLabel>API Key</FormLabel>
+                {isOllama ? (
+                    <FormField
+                        control={form.control}
+                        name="url"
+                        render={({field}) => (
+                            <FormItem>
+                                <FormLabel>Base URL</FormLabel>
 
-                            <FormControl>
-                                <Input placeholder="API Key" {...field} />
-                            </FormControl>
+                                <FormControl>
+                                    <Input placeholder="http://localhost:11434" {...field} />
+                                </FormControl>
 
-                            <FormDescription>This is your AI provider&apos;`s API key.</FormDescription>
+                                <FormDescription>
+                                    The base URL of your Ollama server. Leave blank to use http://localhost:11434.
+                                </FormDescription>
 
-                            <FormMessage />
-                        </FormItem>
-                    )}
-                />
+                                <FormMessage />
+                            </FormItem>
+                        )}
+                    />
+                ) : (
+                    <FormField
+                        control={form.control}
+                        name="apiKey"
+                        render={({field}) => (
+                            <FormItem>
+                                <FormLabel>API Key</FormLabel>
+
+                                <FormControl>
+                                    <Input placeholder="API Key" {...field} />
+                                </FormControl>
+
+                                <FormDescription>This is your AI provider&apos;`s API key.</FormDescription>
+
+                                <FormMessage />
+                            </FormItem>
+                        )}
+                    />
+                )}
 
                 <div className="flex gap-1">
                     {showCancel && (

client/src/ee/pages/settings/platform/ai-providers/components/AiProviderList.test.tsx

@@ -1,6 +1,6 @@
 import {AiProvider} from '@/ee/shared/middleware/platform/configuration';
 import {createTestQueryClientWrapper} from '@/shared/util/test-utils';
-import {render, screen} from '@testing-library/react';
+import {fireEvent, render, screen} from '@testing-library/react';
 import {ReactNode} from 'react';
 import {describe, expect, it, vi} from 'vitest';
 
@@ -75,6 +75,45 @@ describe('AiProviderList', () => {
         expect(screen.getByText('Anthropic')).toBeInTheDocument();
     });
 
+    it('shows the Base URL row with the localhost default for Ollama when no URL is set', async () => {
+        const ollamaProviders: AiProvider[] = [
+            {
+                enabled: false,
+                icon: '/icons/ollama.svg',
+                id: 3,
+                name: 'Ollama',
+                supportsEmbeddings: true,
+            },
+        ];
+
+        renderWithProviders(<AiProviderList aiProviders={ollamaProviders} environment={1} />);
+
+        fireEvent.click(screen.getByText('Ollama'));
+
+        expect(await screen.findByText('Base URL:')).toBeInTheDocument();
+        expect(screen.getByText('http://localhost:11434')).toBeInTheDocument();
+    });
+
+    it('shows the configured Base URL for Ollama', async () => {
+        const ollamaProviders: AiProvider[] = [
+            {
+                enabled: true,
+                icon: '/icons/ollama.svg',
+                id: 3,
+                name: 'Ollama',
+                supportsEmbeddings: true,
+                url: 'http://remote-host:11434',
+            },
+        ];
+
+        renderWithProviders(<AiProviderList aiProviders={ollamaProviders} environment={1} />);
+
+        fireEvent.click(screen.getByText('Ollama'));
+
+        expect(await screen.findByText('Base URL:')).toBeInTheDocument();
+        expect(screen.getByText('http://remote-host:11434')).toBeInTheDocument();
+    });
+
     it('does not render the Embeddings badge when no provider supports embeddings', () => {
         const noEmbeddingProviders: AiProvider[] = [
             {

client/src/ee/pages/settings/platform/ai-providers/components/AiProviderList.tsx

@@ -13,6 +13,11 @@ import InlineSVG from 'react-inlinesvg';
 
 import './AiProviderList.css';
 
+const isOllamaProvider = (aiProvider: AiProvider) => aiProvider.name?.toLowerCase() === 'ollama';
+
+// Ollama runs locally and needs no API key, so it counts as configured; other providers require an API key.
+const isConfigured = (aiProvider: AiProvider) => isOllamaProvider(aiProvider) || !!aiProvider.apiKey;
+
 const AiProviderList = ({aiProviders, environment}: {aiProviders: AiProvider[]; environment: number}) => {
     const [enabledItems, setEnabledItems] = useState<{[key: number]: boolean}>({});
     const [openItem, setOpenItem] = useState<string>();
@@ -39,11 +44,13 @@ const AiProviderList = ({aiProviders, environment}: {aiProviders: AiProvider[];
 
         setOpenItem(undefined);
 
-        if (!aiProvider.apiKey && value) {
+        const configured = isConfigured(aiProvider);
+
+        if (!configured && value) {
             setOpenItem(`item-${aiProvider.id}`);
         }
 
-        if (aiProvider.apiKey) {
+        if (configured) {
             enableAiProviderMutation.mutate({
                 enable: value,
                 environment,
@@ -58,7 +65,7 @@ const AiProviderList = ({aiProviders, environment}: {aiProviders: AiProvider[];
 
             aiProviders.forEach((aiProvider) => {
                 enabledItems[aiProvider.id!] = !!aiProvider.enabled;
-                showForm[aiProvider.id!] = !aiProvider.apiKey;
+                showForm[aiProvider.id!] = !isConfigured(aiProvider);
             });
 
             setEnabledItems(enabledItems);
@@ -112,21 +119,27 @@ const AiProviderList = ({aiProviders, environment}: {aiProviders: AiProvider[];
                             <AccordionContent className="pb-3 pl-9">
                                 {showForm[aiProvider.id!] ? (
                                     <AiProviderForm
+                                        aiProvider={aiProvider}
                                         environment={environment}
-                                        id={aiProvider.id!}
                                         onClose={() =>
                                             setShowForm((prev) => ({
                                                 ...prev,
                                                 [aiProvider.id!]: false,
                                             }))
                                         }
-                                        showCancel={!!aiProvider.apiKey}
+                                        showCancel={isConfigured(aiProvider)}
                                     />
                                 ) : (
                                     <div className="flex items-center gap-2">
-                                        <span className="text-base text-muted-foreground">API Key: </span>
+                                        <span className="text-base text-muted-foreground">
+                                            {isOllamaProvider(aiProvider) ? 'Base URL: ' : 'API Key: '}
+                                        </span>
 
-                                        <span className="text-base">{aiProvider.apiKey}</span>
+                                        <span className="text-base">
+                                            {isOllamaProvider(aiProvider)
+                                                ? aiProvider.url || 'http://localhost:11434'
+                                                : aiProvider.apiKey}
+                                        </span>
 
                                         <Button
                                             onClick={() =>

client/src/ee/shared/middleware/platform/configuration/docs/AiProvider.md

@@ -11,6 +11,7 @@ Name | Type
 `name` | string
 `icon` | string
 `apiKey` | string
+`url` | string
 `enabled` | boolean
 `supportsEmbeddings` | boolean
 
@@ -25,6 +26,7 @@ const example = {
   "name": null,
   "icon": null,
   "apiKey": null,
+  "url": null,
   "enabled": null,
   "supportsEmbeddings": null,
 } satisfies AiProvider

client/src/ee/shared/middleware/platform/configuration/docs/UpdateAiProviderRequest.md

@@ -7,6 +7,7 @@
 Name | Type
 ------------ | -------------
 `apiKey` | string
+`url` | string
 
 ## Example
 
@@ -16,6 +17,7 @@ import type { UpdateAiProviderRequest } from ''
 // TODO: Update the object below with actual values
 const example = {
   "apiKey": null,
+  "url": null,
 } satisfies UpdateAiProviderRequest
 
 console.log(example)

client/src/ee/shared/middleware/platform/configuration/models/AiProvider.ts

@@ -43,6 +43,12 @@ export interface AiProvider {
      * @memberof AiProvider
      */
     apiKey?: string;
+    /**
+     * The base URL of an AI provider (used by Ollama; blank defaults to localhost).
+     * @type {string}
+     * @memberof AiProvider
+     */
+    url?: string;
     /**
      * The enabled status of an AI provider.
      * @type {boolean}
@@ -79,6 +85,7 @@ export function AiProviderFromJSONTyped(json: any, ignoreDiscriminator: boolean)
         'name': json['name'],
         'icon': json['icon'] == null ? undefined : json['icon'],
         'apiKey': json['apiKey'] == null ? undefined : json['apiKey'],
+        'url': json['url'] == null ? undefined : json['url'],
         'enabled': json['enabled'] == null ? undefined : json['enabled'],
         'supportsEmbeddings': json['supportsEmbeddings'] == null ? undefined : json['supportsEmbeddings'],
     };
@@ -96,6 +103,7 @@ export function AiProviderToJSONTyped(value?: Omit<AiProvider, 'id'|'name'|'icon
     return {
 
         'apiKey': value['apiKey'],
+        'url': value['url'],
         'enabled': value['enabled'],
     };
 }

client/src/ee/shared/middleware/platform/configuration/models/UpdateAiProviderRequest.ts

@@ -25,6 +25,12 @@ export interface UpdateAiProviderRequest {
      * @memberof UpdateAiProviderRequest
      */
     apiKey?: string;
+    /**
+     * The base URL of an AI provider (used by Ollama; blank defaults to localhost).
+     * @type {string}
+     * @memberof UpdateAiProviderRequest
+     */
+    url?: string;
 }
 
 /**
@@ -45,6 +51,7 @@ export function UpdateAiProviderRequestFromJSONTyped(json: any, ignoreDiscrimina
     return {
 
         'apiKey': json['apiKey'] == null ? undefined : json['apiKey'],
+        'url': json['url'] == null ? undefined : json['url'],
     };
 }
 
@@ -60,6 +67,7 @@ export function UpdateAiProviderRequestToJSONTyped(value?: UpdateAiProviderReque
     return {
 
         'apiKey': value['apiKey'],
+        'url': value['url'],
     };
 }