agent: Add ability to change the API base URL for OpenAI via the UI (#32979)

The `api_url` setting is one that most providers already support and can
be changed via the `settings.json`. We're adding the ability to change
it via the UI for OpenAI specifically so it can be more easily connected
to v0.

Release Notes:

- agent: Added ability to change the API base URL for OpenAI via the UI

---------

Co-authored-by: Bennet Bo Fenner <53836821+bennetbo@users.noreply.github.com>

Cargo.lock

@@ -9008,6 +9008,7 @@ dependencies = [
  "tiktoken-rs",
  "tokio",
  "ui",
+ "ui_input",
  "util",
  "workspace-hack",
  "zed_llm_client",

crates/language_models/Cargo.toml

@@ -55,6 +55,7 @@ thiserror.workspace = true
 tiktoken-rs.workspace = true
 tokio = { workspace = true, features = ["rt", "rt-multi-thread"] }
 ui.workspace = true
+ui_input.workspace = true
 util.workspace = true
 workspace-hack.workspace = true
 zed_llm_client.workspace = true

crates/language_models/src/provider/open_ai.rs

@@ -1,12 +1,11 @@
 use anyhow::{Context as _, Result, anyhow};
 use collections::{BTreeMap, HashMap};
 use credentials_provider::CredentialsProvider;
-use editor::{Editor, EditorElement, EditorStyle};
+
+use fs::Fs;
 use futures::Stream;
 use futures::{FutureExt, StreamExt, future::BoxFuture};
-use gpui::{
+use gpui::{AnyView, App, AsyncApp, Context, Entity, Subscription, Task, Window};
-    AnyView, App, AsyncApp, Context, Entity, FontStyle, Subscription, Task, TextStyle, WhiteSpace,
-};
 use http_client::HttpClient;
 use language_model::{
     AuthenticateError, LanguageModel, LanguageModelCompletionError, LanguageModelCompletionEvent,
@@ -15,16 +14,18 @@ use language_model::{
     LanguageModelToolChoice, LanguageModelToolResultContent, LanguageModelToolUse, MessageContent,
     RateLimiter, Role, StopReason,
 };
+use menu;
 use open_ai::{ImageUrl, Model, ResponseStreamEvent, stream_completion};
 use schemars::JsonSchema;
 use serde::{Deserialize, Serialize};
-use settings::{Settings, SettingsStore};
+use settings::{Settings, SettingsStore, update_settings_file};
 use std::pin::Pin;
 use std::str::FromStr as _;
 use std::sync::Arc;
 use strum::IntoEnumIterator;
-use theme::ThemeSettings;
+
-use ui::{Icon, IconName, List, Tooltip, prelude::*};
+use ui::{ElevationIndex, List, Tooltip, prelude::*};
+use ui_input::SingleLineInput;
 use util::ResultExt;
 
 use crate::{AllLanguageModelSettings, ui::InstructionListItem};
@@ -62,6 +63,7 @@ pub struct State {
 const OPENAI_API_KEY_VAR: &str = "OPENAI_API_KEY";
 
 impl State {
+    //
     fn is_authenticated(&self) -> bool {
         self.api_key.is_some()
     }
@@ -658,7 +660,8 @@ pub fn count_open_ai_tokens(
 }
 
 struct ConfigurationView {
-    api_key_editor: Entity<Editor>,
+    api_key_editor: Entity<SingleLineInput>,
+    api_url_editor: Entity<SingleLineInput>,
     state: gpui::Entity<State>,
     load_credentials_task: Option<Task<()>>,
 }
@@ -666,9 +669,28 @@ struct ConfigurationView {
 impl ConfigurationView {
     fn new(state: gpui::Entity<State>, window: &mut Window, cx: &mut Context<Self>) -> Self {
         let api_key_editor = cx.new(|cx| {
-            let mut editor = Editor::single_line(window, cx);
+            SingleLineInput::new(
-            editor.set_placeholder_text("sk-000000000000000000000000000000000000000000000000", cx);
+                window,
-            editor
+                cx,
+                "sk-000000000000000000000000000000000000000000000000",
+            )
+            .label("API key")
+        });
+
+        let api_url = AllLanguageModelSettings::get_global(cx)
+            .openai
+            .api_url
+            .clone();
+
+        let api_url_editor = cx.new(|cx| {
+            let input = SingleLineInput::new(window, cx, open_ai::OPEN_AI_API_URL).label("API URL");
+
+            if !api_url.is_empty() {
+                input.editor.update(cx, |editor, cx| {
+                    editor.set_text(&*api_url, window, cx);
+                });
+            }
+            input
         });
 
         cx.observe(&state, |_, _, cx| {
@@ -686,7 +708,6 @@ impl ConfigurationView {
                     // We don't log an error, because "not signed in" is also an error.
                     let _ = task.await;
                 }
-
                 this.update(cx, |this, cx| {
                     this.load_credentials_task = None;
                     cx.notify();
@@ -697,14 +718,24 @@ impl ConfigurationView {
 
         Self {
             api_key_editor,
+            api_url_editor,
             state,
             load_credentials_task,
         }
     }
 
     fn save_api_key(&mut self, _: &menu::Confirm, window: &mut Window, cx: &mut Context<Self>) {
-        let api_key = self.api_key_editor.read(cx).text(cx);
+        let api_key = self
-        if api_key.is_empty() {
+            .api_key_editor
+            .read(cx)
+            .editor()
+            .read(cx)
+            .text(cx)
+            .trim()
+            .to_string();
+
+        // Don't proceed if no API key is provided and we're not authenticated
+        if api_key.is_empty() && !self.state.read(cx).is_authenticated() {
             return;
         }
 
@@ -720,8 +751,11 @@ impl ConfigurationView {
     }
 
     fn reset_api_key(&mut self, window: &mut Window, cx: &mut Context<Self>) {
-        self.api_key_editor
+        self.api_key_editor.update(cx, |input, cx| {
-            .update(cx, |editor, cx| editor.set_text("", window, cx));
+            input.editor.update(cx, |editor, cx| {
+                editor.set_text("", window, cx);
+            });
+        });
 
         let state = self.state.clone();
         cx.spawn_in(window, async move |_, cx| {
@@ -732,29 +766,83 @@ impl ConfigurationView {
         cx.notify();
     }
 
-    fn render_api_key_editor(&self, cx: &mut Context<Self>) -> impl IntoElement {
+    fn save_api_url(&mut self, cx: &mut Context<Self>) {
-        let settings = ThemeSettings::get_global(cx);
+        let api_url = self
-        let text_style = TextStyle {
+            .api_url_editor
-            color: cx.theme().colors().text,
+            .read(cx)
-            font_family: settings.ui_font.family.clone(),
+            .editor()
-            font_features: settings.ui_font.features.clone(),
+            .read(cx)
-            font_fallbacks: settings.ui_font.fallbacks.clone(),
+            .text(cx)
-            font_size: rems(0.875).into(),
+            .trim()
-            font_weight: settings.ui_font.weight,
+            .to_string();
-            font_style: FontStyle::Normal,
+
-            line_height: relative(1.3),
+        let current_url = AllLanguageModelSettings::get_global(cx)
-            white_space: WhiteSpace::Normal,
+            .openai
-            ..Default::default()
+            .api_url
+            .clone();
+
+        let effective_current_url = if current_url.is_empty() {
+            open_ai::OPEN_AI_API_URL
+        } else {
+            &current_url
         };
-        EditorElement::new(
+
-            &self.api_key_editor,
+        if !api_url.is_empty() && api_url != effective_current_url {
-            EditorStyle {
+            let fs = <dyn Fs>::global(cx);
-                background: cx.theme().colors().editor_background,
+            update_settings_file::<AllLanguageModelSettings>(fs, cx, move |settings, _| {
-                local_player: cx.theme().players().local(),
+                use crate::settings::{OpenAiSettingsContent, VersionedOpenAiSettingsContent};
-                text: text_style,
+
-                ..Default::default()
+                if settings.openai.is_none() {
-            },
+                    settings.openai = Some(OpenAiSettingsContent::Versioned(
-        )
+                        VersionedOpenAiSettingsContent::V1(
+                            crate::settings::OpenAiSettingsContentV1 {
+                                api_url: Some(api_url.clone()),
+                                available_models: None,
+                            },
+                        ),
+                    ));
+                } else {
+                    if let Some(openai) = settings.openai.as_mut() {
+                        match openai {
+                            OpenAiSettingsContent::Versioned(versioned) => match versioned {
+                                VersionedOpenAiSettingsContent::V1(v1) => {
+                                    v1.api_url = Some(api_url.clone());
+                                }
+                            },
+                            OpenAiSettingsContent::Legacy(legacy) => {
+                                legacy.api_url = Some(api_url.clone());
+                            }
+                        }
+                    }
+                }
+            });
+        }
+    }
+
+    fn reset_api_url(&mut self, window: &mut Window, cx: &mut Context<Self>) {
+        self.api_url_editor.update(cx, |input, cx| {
+            input.editor.update(cx, |editor, cx| {
+                editor.set_text("", window, cx);
+            });
+        });
+        let fs = <dyn Fs>::global(cx);
+        update_settings_file::<AllLanguageModelSettings>(fs, cx, |settings, _cx| {
+            use crate::settings::{OpenAiSettingsContent, VersionedOpenAiSettingsContent};
+
+            if let Some(openai) = settings.openai.as_mut() {
+                match openai {
+                    OpenAiSettingsContent::Versioned(versioned) => match versioned {
+                        VersionedOpenAiSettingsContent::V1(v1) => {
+                            v1.api_url = None;
+                        }
+                    },
+                    OpenAiSettingsContent::Legacy(legacy) => {
+                        legacy.api_url = None;
+                    }
+                }
+            }
+        });
+        cx.notify();
     }
 
     fn should_render_editor(&self, cx: &mut Context<Self>) -> bool {
@@ -766,12 +854,10 @@ impl Render for ConfigurationView {
     fn render(&mut self, _: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
         let env_var_set = self.state.read(cx).api_key_from_env;
 
-        if self.load_credentials_task.is_some() {
+        let api_key_section = if self.should_render_editor(cx) {
-            div().child(Label::new("Loading credentials...")).into_any()
-        } else if self.should_render_editor(cx) {
             v_flex()
-                .size_full()
                 .on_action(cx.listener(Self::save_api_key))
+
                 .child(Label::new("To use Zed's assistant with OpenAI, you need to add an API key. Follow these steps:"))
                 .child(
                     List::new()
@@ -787,18 +873,7 @@ impl Render for ConfigurationView {
                             "Paste your API key below and hit enter to start using the assistant",
                         )),
                 )
-                .child(
+                .child(self.api_key_editor.clone())
-                    h_flex()
-                        .w_full()
-                        .my_2()
-                        .px_2()
-                        .py_1()
-                        .bg(cx.theme().colors().editor_background)
-                        .border_1()
-                        .border_color(cx.theme().colors().border)
-                        .rounded_sm()
-                        .child(self.render_api_key_editor(cx)),
-                )
                 .child(
                     Label::new(
                         format!("You can also assign the {OPENAI_API_KEY_VAR} environment variable and restart Zed."),
@@ -807,7 +882,7 @@ impl Render for ConfigurationView {
                 )
                 .child(
                     Label::new(
-                        "Note that having a subscription for another service like GitHub Copilot won't work.".to_string(),
+                        "Note that having a subscription for another service like GitHub Copilot won't work.",
                     )
                     .size(LabelSize::Small).color(Color::Muted),
                 )
@@ -832,18 +907,82 @@ impl Render for ConfigurationView {
                         })),
                 )
                 .child(
-                    Button::new("reset-key", "Reset Key")
+                    Button::new("reset-key", "Reset API Key")
                         .label_size(LabelSize::Small)
-                        .icon(Some(IconName::Trash))
+                        .icon(IconName::Undo)
                         .icon_size(IconSize::Small)
                         .icon_position(IconPosition::Start)
-                        .disabled(env_var_set)
+                        .layer(ElevationIndex::ModalSurface)
                         .when(env_var_set, |this| {
                             this.tooltip(Tooltip::text(format!("To reset your API key, unset the {OPENAI_API_KEY_VAR} environment variable.")))
                         })
                         .on_click(cx.listener(|this, _, window, cx| this.reset_api_key(window, cx))),
                 )
                 .into_any()
+        };
+
+        let custom_api_url_set =
+            AllLanguageModelSettings::get_global(cx).openai.api_url != open_ai::OPEN_AI_API_URL;
+
+        let api_url_section = if custom_api_url_set {
+            h_flex()
+                .mt_1()
+                .p_1()
+                .justify_between()
+                .rounded_md()
+                .border_1()
+                .border_color(cx.theme().colors().border)
+                .bg(cx.theme().colors().background)
+                .child(
+                    h_flex()
+                        .gap_1()
+                        .child(Icon::new(IconName::Check).color(Color::Success))
+                        .child(Label::new("Custom API URL configured.")),
+                )
+                .child(
+                    Button::new("reset-key", "Reset API URL")
+                        .label_size(LabelSize::Small)
+                        .icon(IconName::Undo)
+                        .icon_size(IconSize::Small)
+                        .icon_position(IconPosition::Start)
+                        .layer(ElevationIndex::ModalSurface)
+                        .on_click(
+                            cx.listener(|this, _, window, cx| this.reset_api_url(window, cx)),
+                        ),
+                )
+                .into_any()
+        } else {
+            v_flex()
+                .on_action(cx.listener(|this, _: &menu::Confirm, _window, cx| {
+                    this.save_api_url(cx);
+                    cx.notify();
+                }))
+                .mt_2()
+                .pt_2()
+                .border_t_1()
+                .border_color(cx.theme().colors().border_variant)
+                .gap_1()
+                .child(
+                    List::new()
+                        .child(InstructionListItem::text_only(
+                            "Optionally, you can change the base URL for the OpenAI API request.",
+                        ))
+                        .child(InstructionListItem::text_only(
+                            "Paste the new API endpoint below and hit enter",
+                        )),
+                )
+                .child(self.api_url_editor.clone())
+                .into_any()
+        };
+
+        if self.load_credentials_task.is_some() {
+            div().child(Label::new("Loading credentials…")).into_any()
+        } else {
+            v_flex()
+                .size_full()
+                .child(api_key_section)
+                .child(api_url_section)
+                .into_any()
         }
     }
 }

crates/ui_input/src/ui_input.rs

@@ -138,18 +138,18 @@ impl Render for SingleLineInput {
             .when_some(self.label.clone(), |this, label| {
                 this.child(
                     Label::new(label)
-                        .size(LabelSize::Default)
+                        .size(LabelSize::Small)
                         .color(if self.disabled {
                             Color::Disabled
                         } else {
-                            Color::Muted
+                            Color::Default
                         }),
                 )
             })
             .child(
                 h_flex()
                     .px_2()
-                    .py_1()
+                    .py_1p5()
                     .bg(style.background_color)
                     .text_color(style.text_color)
                     .rounded_md()