@marimo-team/frontend 0.19.5-dev9 → 0.19.6-dev0

package/src/components/ai/__tests__/ai-utils.test.ts

@@ -0,0 +1,276 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import type { AiModel } from "@marimo-team/llm-info";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import type { UserConfig } from "@/core/config/config-schema";
+
+// Mock the models.json import
+vi.mock("@marimo-team/llm-info/models.json", () => {
+  const models: AiModel[] = [
+    {
+      name: "GPT-4",
+      model: "gpt-4",
+      description: "OpenAI GPT-4 model",
+      providers: ["openai"],
+      roles: ["chat", "edit"],
+      thinking: false,
+    },
+    {
+      name: "Claude 3",
+      model: "claude-3-sonnet",
+      description: "Anthropic Claude 3 Sonnet",
+      providers: ["anthropic"],
+      roles: ["chat", "edit"],
+      thinking: false,
+    },
+    {
+      name: "Gemini Pro",
+      model: "gemini-pro",
+      description: "Google Gemini Pro model",
+      providers: ["google"],
+      roles: ["chat", "edit"],
+      thinking: false,
+    },
+    {
+      name: "Ollama Model",
+      model: "llama2",
+      description: "Ollama Llama 2 model",
+      providers: ["ollama"],
+      roles: ["chat", "edit"],
+      thinking: false,
+    },
+  ];
+
+  return {
+    models: models,
+  };
+});
+
+// Must import after mock
+import {
+  autoPopulateModels,
+  getConfiguredProvider,
+  getRecommendedModel,
+} from "../ai-utils";
+
+describe("ai-utils", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe("getConfiguredProvider", () => {
+    it("should return undefined when no AI config", () => {
+      const config: UserConfig = {} as UserConfig;
+      expect(getConfiguredProvider(config)).toBeUndefined();
+    });
+
+    it("should return undefined when AI config has no credentials", () => {
+      const config: UserConfig = {
+        ai: {},
+      } as UserConfig;
+      expect(getConfiguredProvider(config)).toBeUndefined();
+    });
+
+    it("should return openai when OpenAI API key is set", () => {
+      const config: UserConfig = {
+        ai: {
+          open_ai: { api_key: "sk-test" },
+        },
+      } as UserConfig;
+      expect(getConfiguredProvider(config)).toBe("openai");
+    });
+
+    it("should return anthropic when Anthropic API key is set", () => {
+      const config: UserConfig = {
+        ai: {
+          anthropic: { api_key: "sk-ant-test" },
+        },
+      } as UserConfig;
+      expect(getConfiguredProvider(config)).toBe("anthropic");
+    });
+
+    it("should return google when Google API key is set", () => {
+      const config: UserConfig = {
+        ai: {
+          google: { api_key: "google-key" },
+        },
+      } as UserConfig;
+      expect(getConfiguredProvider(config)).toBe("google");
+    });
+
+    it("should return ollama when Ollama base URL is set", () => {
+      const config: UserConfig = {
+        ai: {
+          ollama: { base_url: "http://localhost:11434" },
+        },
+      } as UserConfig;
+      expect(getConfiguredProvider(config)).toBe("ollama");
+    });
+
+    it("should return azure only when both API key and base URL are set", () => {
+      const config: UserConfig = {
+        ai: {
+          azure: { api_key: "azure-key", base_url: "https://azure.com" },
+        },
+      } as UserConfig;
+      expect(getConfiguredProvider(config)).toBe("azure");
+    });
+
+    it("should return undefined for azure with only API key", () => {
+      const config: UserConfig = {
+        ai: {
+          azure: { api_key: "azure-key" },
+        },
+      } as UserConfig;
+      expect(getConfiguredProvider(config)).toBeUndefined();
+    });
+
+    it("should return custom provider when configured", () => {
+      const config = {
+        ai: {
+          custom_providers: {
+            my_provider: { base_url: "https://my-api.com" },
+          },
+        },
+      } as unknown as UserConfig;
+      expect(getConfiguredProvider(config)).toBe("my_provider");
+    });
+  });
+
+  describe("getRecommendedModel", () => {
+    it("should return undefined when no provider is configured", () => {
+      const config: UserConfig = {} as UserConfig;
+      expect(getRecommendedModel(config)).toBeUndefined();
+    });
+
+    it("should return openai model when OpenAI is configured", () => {
+      const config: UserConfig = {
+        ai: {
+          open_ai: { api_key: "sk-test" },
+        },
+      } as UserConfig;
+      expect(getRecommendedModel(config)).toBe("openai/gpt-4");
+    });
+
+    it("should return anthropic model when Anthropic is configured", () => {
+      const config: UserConfig = {
+        ai: {
+          anthropic: { api_key: "sk-ant-test" },
+        },
+      } as UserConfig;
+      expect(getRecommendedModel(config)).toBe("anthropic/claude-3-sonnet");
+    });
+
+    it("should return google model when Google is configured", () => {
+      const config: UserConfig = {
+        ai: {
+          google: { api_key: "google-key" },
+        },
+      } as UserConfig;
+      expect(getRecommendedModel(config)).toBe("google/gemini-pro");
+    });
+
+    it("should return ollama model when Ollama is configured", () => {
+      const config: UserConfig = {
+        ai: {
+          ollama: { base_url: "http://localhost:11434" },
+        },
+      } as UserConfig;
+      expect(getRecommendedModel(config)).toBe("ollama/llama2");
+    });
+  });
+
+  describe("autoPopulateModels", () => {
+    it("should return empty result when both models are already set", () => {
+      const values = {
+        ai: {
+          open_ai: { api_key: "sk-test" },
+          models: {
+            chat_model: "openai/gpt-4",
+            edit_model: "openai/gpt-4",
+            custom_models: [],
+            displayed_models: [],
+          },
+        },
+      } as unknown as UserConfig;
+
+      const result = autoPopulateModels(values);
+
+      expect(result.chatModel).toBeUndefined();
+      expect(result.editModel).toBeUndefined();
+    });
+
+    it("should return empty result when no credentials are configured", () => {
+      const values: UserConfig = {
+        ai: {},
+      } as UserConfig;
+
+      const result = autoPopulateModels(values);
+
+      expect(result.chatModel).toBeUndefined();
+      expect(result.editModel).toBeUndefined();
+    });
+
+    it("should auto-populate both models when neither is set", () => {
+      const values: UserConfig = {
+        ai: {
+          open_ai: { api_key: "sk-test" },
+        },
+      } as UserConfig;
+
+      const result = autoPopulateModels(values);
+
+      expect(result.chatModel).toBe("openai/gpt-4");
+      expect(result.editModel).toBe("openai/gpt-4");
+    });
+
+    it("should only auto-populate chat_model when edit_model is set", () => {
+      const values = {
+        ai: {
+          open_ai: { api_key: "sk-test" },
+          models: {
+            edit_model: "openai/gpt-3.5-turbo",
+            custom_models: [],
+            displayed_models: [],
+          },
+        },
+      } as unknown as UserConfig;
+
+      const result = autoPopulateModels(values);
+
+      expect(result.chatModel).toBe("openai/gpt-4");
+      expect(result.editModel).toBeUndefined();
+    });
+
+    it("should only auto-populate edit_model when chat_model is set", () => {
+      const values = {
+        ai: {
+          open_ai: { api_key: "sk-test" },
+          models: {
+            chat_model: "openai/gpt-3.5-turbo",
+            custom_models: [],
+            displayed_models: [],
+          },
+        },
+      } as unknown as UserConfig;
+
+      const result = autoPopulateModels(values);
+
+      expect(result.chatModel).toBeUndefined();
+      expect(result.editModel).toBe("openai/gpt-4");
+    });
+
+    it("should return recommended model for anthropic provider", () => {
+      const values: UserConfig = {
+        ai: {
+          anthropic: { api_key: "sk-ant-test" },
+        },
+      } as UserConfig;
+
+      const result = autoPopulateModels(values);
+
+      expect(result.chatModel).toBe("anthropic/claude-3-sonnet");
+      expect(result.editModel).toBe("anthropic/claude-3-sonnet");
+    });
+  });
+});

package/src/components/ai/ai-utils.ts

@@ -0,0 +1,101 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import {
+  KNOWN_PROVIDERS,
+  type KnownProviderId,
+  type ProviderId,
+} from "@/core/ai/ids/ids";
+import { getKnownModelMaps } from "@/core/ai/model-registry";
+import type { AiConfig, UserConfig } from "@/core/config/config-schema";
+
+type CredentialChecker = (ai: AiConfig | undefined) => boolean;
+
+/**
+ * Credential checkers for each known provider.
+ */
+const CREDENTIAL_CHECKERS: Record<KnownProviderId, CredentialChecker> = {
+  openai: (ai) => Boolean(ai?.open_ai?.api_key),
+  anthropic: (ai) => Boolean(ai?.anthropic?.api_key),
+  google: (ai) => Boolean(ai?.google?.api_key),
+  github: (ai) => Boolean(ai?.github?.api_key),
+  openrouter: (ai) => Boolean(ai?.openrouter?.api_key),
+  azure: (ai) => Boolean(ai?.azure?.api_key && ai?.azure?.base_url),
+  wandb: (ai) => Boolean(ai?.wandb?.api_key),
+  bedrock: (ai) => Boolean(ai?.bedrock?.region_name),
+  ollama: (ai) => Boolean(ai?.ollama?.base_url),
+  // These providers don't have user-configurable credentials in the UI
+  deepseek: () => false,
+  marimo: () => false,
+};
+
+/**
+ * Returns the first configured provider based on credentials.
+ */
+export function getConfiguredProvider(
+  config: UserConfig,
+): ProviderId | undefined {
+  const ai = config.ai;
+
+  for (const provider of KNOWN_PROVIDERS) {
+    if (CREDENTIAL_CHECKERS[provider](ai)) {
+      return provider;
+    }
+  }
+
+  // Check custom providers
+  const customProviders = ai?.custom_providers;
+  if (customProviders) {
+    const firstCustomProvider = Object.entries(customProviders).find(
+      ([_, providerConfig]) => providerConfig?.base_url,
+    );
+    if (firstCustomProvider) {
+      return firstCustomProvider[0];
+    }
+  }
+}
+
+export function getRecommendedModel(config: UserConfig): string | undefined {
+  const provider = getConfiguredProvider(config);
+  if (!provider) {
+    return undefined;
+  }
+  return getKnownModelMaps().defaultModelByProvider.get(provider);
+}
+
+export interface AutoPopulateResult {
+  chatModel: string | undefined;
+  editModel: string | undefined;
+}
+
+/**
+ * Determines which models to auto-populate based on configured credentials.
+ * Returns the recommended model for chat/edit if credentials are configured but models aren't set.
+ *
+ * @param values - The full form values
+ */
+export function autoPopulateModels(values: UserConfig): AutoPopulateResult {
+  const result: AutoPopulateResult = {
+    chatModel: undefined,
+    editModel: undefined,
+  };
+
+  const needsChatModel = !values.ai?.models?.chat_model;
+  const needsEditModel = !values.ai?.models?.edit_model;
+
+  if (!needsChatModel && !needsEditModel) {
+    return result;
+  }
+
+  const recommendedModel = getRecommendedModel(values);
+  if (!recommendedModel) {
+    return result;
+  }
+
+  if (needsChatModel) {
+    result.chatModel = recommendedModel;
+  }
+  if (needsEditModel) {
+    result.editModel = recommendedModel;
+  }
+  return result;
+}

package/src/components/app-config/ai-config.tsx

@@ -115,6 +115,7 @@ interface ApiKeyProps {
   placeholder: string;
   testId: string;
   description?: React.ReactNode;
+  onChange?: (value: string) => void;
 }
 
 export const ApiKey: React.FC<ApiKeyProps> = ({
@@ -124,6 +125,7 @@ export const ApiKey: React.FC<ApiKeyProps> = ({
   placeholder,
   testId,
   description,
+  onChange,
 }) => {
   return (
     <FormField
@@ -141,11 +143,12 @@ export const ApiKey: React.FC<ApiKeyProps> = ({
                 placeholder={placeholder}
                 type="password"
                 {...field}
-                value={asStringOrUndefined(field.value)}
+                value={asStringOrEmpty(field.value)}
                 onChange={(e) => {
                   const value = e.target.value;
                   if (!value.includes("*")) {
                     field.onChange(value);
+                    onChange?.(value);
                   }
                 }}
               />
@@ -168,12 +171,12 @@ interface BaseUrlProps {
   testId: string;
   description?: React.ReactNode;
   disabled?: boolean;
-  defaultValue?: string;
+  onChange?: (value: string) => void;
 }
 
-function asStringOrUndefined<T>(value: T): string | undefined {
+function asStringOrEmpty<T>(value: T): string {
   if (value == null) {
-    return undefined;
+    return "";
   }
 
   if (typeof value === "string") {
@@ -191,13 +194,12 @@ export const BaseUrl: React.FC<BaseUrlProps> = ({
   testId,
   description,
   disabled = false,
-  defaultValue,
+  onChange,
 }) => {
   return (
     <FormField
       control={form.control}
       name={name}
-      disabled={disabled}
       render={({ field }) => (
         <div className="flex flex-col space-y-1">
           <FormItem className={formItemClasses}>
@@ -208,9 +210,13 @@ export const BaseUrl: React.FC<BaseUrlProps> = ({
                 rootClassName="flex-1"
                 className="m-0 inline-flex h-7"
                 placeholder={placeholder}
-                defaultValue={defaultValue}
                 {...field}
-                value={asStringOrUndefined(field.value)}
+                value={asStringOrEmpty(field.value)}
+                disabled={disabled}
+                onChange={(e) => {
+                  field.onChange(e.target.value);
+                  onChange?.(e.target.value);
+                }}
               />
             </FormControl>
             <FormMessage />
@@ -252,9 +258,8 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
     <FormField
       control={form.control}
       name={name}
-      disabled={disabled}
       render={({ field }) => {
-        const value = asStringOrUndefined(field.value);
+        const value = asStringOrEmpty(field.value);
 
         const selectModel = (modelId: QualifiedModelId) => {
           field.onChange(modelId);
@@ -286,7 +291,8 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
                         className="w-full border-border shadow-none focus-visible:shadow-xs"
                         placeholder={placeholder}
                         {...field}
-                        value={asStringOrUndefined(field.value)}
+                        value={asStringOrEmpty(field.value)}
+                        disabled={disabled}
                         onKeyDown={Events.stopPropagation()}
                       />
                       {value && (
@@ -339,7 +345,6 @@ export const ProviderSelect: React.FC<ProviderSelectProps> = ({
     <FormField
       control={form.control}
       name={name}
-      disabled={disabled}
       render={({ field }) => (
         <div className="flex flex-col space-y-1">
           <FormItem className={formItemClasses}>
@@ -354,14 +359,14 @@ export const ProviderSelect: React.FC<ProviderSelectProps> = ({
                     field.onChange(e.target.value);
                   }
                 }}
-                value={asStringOrUndefined(
+                value={asStringOrEmpty(
                   field.value === true
                     ? "github"
                     : field.value === false
                       ? "none"
                       : field.value,
                 )}
-                disabled={field.disabled}
+                disabled={disabled}
                 className="inline-flex mr-2"
               >
                 {options.map((option) => (
@@ -715,6 +720,22 @@ export const CustomProvidersConfig: React.FC<AiConfigProps> = ({
           </div>
         );
 
+        // Update a provider field by updating the entire custom_providers object.
+        // As this config will be replaced, it needs to be sent in its entirety.
+        const updateProviderField = (opts: {
+          providerName: string;
+          fieldName: keyof CustomProviderConfig;
+          value: string;
+        }) => {
+          field.onChange({
+            ...customProviders,
+            [opts.providerName]: {
+              ...customProviders[opts.providerName],
+              [opts.fieldName]: opts.value || undefined,
+            },
+          });
+        };
+
         const renderAccordionItem = ({
           providerName,
           providerConfig,
@@ -744,6 +765,13 @@ export const CustomProvidersConfig: React.FC<AiConfigProps> = ({
                 }
                 placeholder="sk-..."
                 testId={`custom-provider-${providerName}-api-key`}
+                onChange={(value) =>
+                  updateProviderField({
+                    providerName,
+                    fieldName: "api_key",
+                    value,
+                  })
+                }
               />
               <BaseUrl
                 form={form}
@@ -753,6 +781,13 @@ export const CustomProvidersConfig: React.FC<AiConfigProps> = ({
                 }
                 placeholder="https://api.example.com/v1"
                 testId={`custom-provider-${providerName}-base-url`}
+                onChange={(value) =>
+                  updateProviderField({
+                    providerName,
+                    fieldName: "base_url",
+                    value,
+                  })
+                }
               />
               <Button
                 variant="destructive"
@@ -918,7 +953,6 @@ export const AiProvidersConfig: React.FC<AiConfigProps> = ({
             config={config}
             name="ai.ollama.base_url"
             placeholder="http://localhost:11434/v1"
-            defaultValue="http://localhost:11434/v1"
             testId="ollama-base-url-input"
           />
         </AccordionFormItem>
@@ -1038,7 +1072,6 @@ export const AiProvidersConfig: React.FC<AiConfigProps> = ({
             config={config}
             name="ai.azure.base_url"
             placeholder="https://<your-resource-name>.openai.azure.com/openai/deployments/<deployment-name>?api-version=<api-version>"
-            defaultValue="https://<your-resource-name>.openai.azure.com/openai/deployments/<deployment-name>?api-version=<api-version>"
             testId="ai-azure-base-url-input"
           />
         </AccordionFormItem>
@@ -1427,6 +1460,13 @@ export const AiModelDisplayConfig: React.FC<AiConfigProps> = ({
 
   const deleteModel = useEvent((modelId: QualifiedModelId) => {
     const newModels = customModels.filter((id) => id !== modelId);
+    // Remove from displayed models if it's in there
+    const newDisplayedModels = currentDisplayedModels.filter(
+      (id) => id !== modelId,
+    );
+    form.setValue("ai.models.displayed_models", newDisplayedModels, {
+      shouldDirty: true,
+    });
     form.setValue("ai.models.custom_models", newModels, {
       shouldDirty: true,
     });

package/src/components/app-config/user-config-form.tsx

@@ -50,6 +50,7 @@ import { Banner } from "@/plugins/impl/common/error-banner";
 import { THEMES } from "@/theme/useTheme";
 import { arrayToggle } from "@/utils/arrays";
 import { cn } from "@/utils/cn";
+import { autoPopulateModels } from "../ai/ai-utils";
 import { keyboardShortcutsAtom } from "../editor/controls/keyboard-shortcuts";
 import { Badge } from "../ui/badge";
 import { ExternalLink } from "../ui/links";
@@ -180,6 +181,28 @@ export const UserConfigForm: React.FC = () => {
     defaultValues: config,
   });
 
+  const setAiModels = (values: UserConfig, dirtyAiConfig: UserConfig["ai"]) => {
+    const { chatModel, editModel } = autoPopulateModels(values);
+    if (chatModel || editModel) {
+      dirtyAiConfig = {
+        ...dirtyAiConfig,
+        models: {
+          ...dirtyAiConfig?.models,
+          ...(chatModel && { chat_model: chatModel }),
+          ...(editModel && { edit_model: editModel }),
+        },
+      } as typeof dirtyAiConfig;
+      if (chatModel) {
+        form.setValue("ai.models.chat_model", chatModel);
+      }
+      if (editModel) {
+        form.setValue("ai.models.edit_model", editModel);
+      }
+    }
+
+    return dirtyAiConfig;
+  };
+
   const onSubmitNotDebounced = async (values: UserConfig) => {
     // Only send values that were actually changed to avoid
     // overwriting backend values the form doesn't manage
@@ -187,6 +210,12 @@ export const UserConfigForm: React.FC = () => {
     if (Object.keys(dirtyValues).length === 0) {
       return; // Nothing changed
     }
+
+    // Auto-populate AI models when credentials are set, makes it easier to get started
+    if (dirtyValues.ai) {
+      dirtyValues.ai = setAiModels(values, dirtyValues.ai);
+    }
+
     await saveUserConfig({ config: dirtyValues }).then(() => {
       // Update local state with form values
       setConfig((prev) => ({ ...prev, ...values }));
@@ -993,7 +1022,7 @@ export const UserConfigForm: React.FC = () => {
                       <br />
                       <br />
                       Running marimo in a{" "}
-                      <ExternalLink href="https://docs.marimo.io/guides/editor_features/package_management.html#running-marimo-in-a-sandbox-environment-uv-only">
+                      <ExternalLink href="https://docs.marimo.io/guides/package_management/inlining_dependencies.html">
                         sandboxed environment
                       </ExternalLink>{" "}
                       is only supported by <Kbd className="inline">uv</Kbd>
@@ -1283,6 +1312,39 @@ export const UserConfigForm: React.FC = () => {
                 </div>
               )}
             />
+            <FormField
+              control={form.control}
+              name="experimental.server_side_pdf_export"
+              render={({ field }) => (
+                <div className="flex flex-col gap-y-1">
+                  <FormItem className={formItemClasses}>
+                    <FormLabel className="font-normal">
+                      Better PDF Export
+                    </FormLabel>
+                    <FormControl>
+                      <Checkbox
+                        data-testid="server-side-pdf-export-checkbox"
+                        checked={field.value === true}
+                        onCheckedChange={field.onChange}
+                      />
+                    </FormControl>
+                  </FormItem>
+                  <IsOverridden
+                    userConfig={config}
+                    name="experimental.server_side_pdf_export"
+                  />
+                  <FormDescription>
+                    Enable PDF export using{" "}
+                    <Kbd className="inline">nbconvert</Kbd> and{" "}
+                    <Kbd className="inline">playwright</Kbd>. Refer to{" "}
+                    <ExternalLink href="https://docs.marimo.io/guides/exporting/#exporting-to-pdf-slides-or-rst">
+                      the docs
+                    </ExternalLink>
+                    .
+                  </FormDescription>
+                </div>
+              )}
+            />
           </SettingGroup>
         );
     }

package/src/components/chat/chat-panel.tsx

@@ -262,7 +262,7 @@ const ChatInputFooter: React.FC<ChatInputFooterProps> = memo(
 
     return (
       <TooltipProvider>
-        <div className="px-3 py-2 border-t border-border/20 flex flex-row items-center justify-between">
+        <div className="px-3 py-2 border-t border-border/20 flex flex-row flex-wrap items-center justify-between gap-1">
           <div className="flex items-center gap-2">
             <FeatureFlagged feature="chat_modes">
               <Select value={currentMode} onValueChange={saveModeChange}>
@@ -426,14 +426,14 @@ const ChatInput: React.FC<ChatInputProps> = memo(
 ChatInput.displayName = "ChatInput";
 
 const ChatPanel = () => {
-  const aiEnabled = useAtomValue(aiEnabledAtom);
+  const aiConfigured = useAtomValue(aiEnabledAtom);
   const { handleClick } = useOpenSettingsToTab();
 
-  if (!aiEnabled) {
+  if (!aiConfigured) {
     return (
       <PanelEmptyState
         title="Chat with AI"
-        description="AI is currently disabled. Add your API key to enable."
+        description="No AI provider configured or model selected"
         action={
           <Button variant="outline" size="sm" onClick={() => handleClick("ai")}>
             Edit AI settings