@marimo-team/islands 0.19.5-dev40 → 0.19.5-dev44

package/dist/main.js

@@ -60790,11 +60790,11 @@ ${r}
     },
     replace: (e, r) => e.endsWith(`.${r}`) ? e : `${Filenames.withoutExtension(e)}.${r}`
   };
-  async function downloadHTMLAsImage(e, r) {
-    let c = document.getElementById("App"), d = (c == null ? void 0 : c.scrollTop) ?? 0;
-    document.body.classList.add("printing");
+  async function downloadHTMLAsImage(e) {
+    let { element: r, filename: c, prepare: d } = e, f = document.getElementById("App"), h = (f == null ? void 0 : f.scrollTop) ?? 0, _;
+    d ? _ = d(r) : document.body.classList.add("printing");
     try {
-      downloadByURL(await toPng(e), Filenames.toPNG(r));
+      downloadByURL(await toPng(r), Filenames.toPNG(c));
     } catch {
       toast({
         title: "Error",
@@ -60802,8 +60802,8 @@ ${r}
         variant: "danger"
       });
     } finally {
-      document.body.classList.remove("printing"), requestAnimationFrame(() => {
-        c == null ? void 0 : c.scrollTo(0, d);
+      _ == null ? void 0 : _(), document.body.classList.contains("printing") && document.body.classList.remove("printing"), requestAnimationFrame(() => {
+        f == null ? void 0 : f.scrollTo(0, h);
       });
     }
   }
@@ -101103,7 +101103,7 @@ Defaulting to \`null\`.`;
       return Logger.warn("Failed to get version from mount config"), null;
     }
   }
-  const marimoVersionAtom = atom(getVersionFromMountConfig() || "0.19.5-dev40"), showCodeInRunModeAtom = atom(true);
+  const marimoVersionAtom = atom(getVersionFromMountConfig() || "0.19.5-dev44"), showCodeInRunModeAtom = atom(true);
   atom(null);
   var VIRTUAL_FILE_REGEX = /\/@file\/([^\s"&'/]+)\.([\dA-Za-z]+)/g, VirtualFileTracker = class e {
     constructor() {
@@ -101524,7 +101524,10 @@ Defaulting to \`null\`.`;
   }
   async function _temp3() {
     let e = document.getElementById("App");
-    e && await downloadHTMLAsImage(e, document.title);
+    e && await downloadHTMLAsImage({
+      element: e,
+      filename: document.title
+    });
   }
   async function _temp4() {
     document.getElementById("App") && await downloadAsHTML({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.19.5-dev40",
+  "version": "0.19.5-dev44",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

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 }));