💫 feat: Config File & Custom Endpoints (#1474)

* WIP(backend/api): custom endpoint

* WIP(frontend/client): custom endpoint

* chore: adjust typedefs for configs

* refactor: use data-provider for cache keys and rename enums and custom endpoint for better clarity and compatibility

* feat: loadYaml utility

* refactor: rename back to  from  and proof-of-concept for creating schemas from user-defined defaults

* refactor: remove custom endpoint from default endpointsConfig as it will be exclusively managed by yaml config

* refactor(EndpointController): rename variables for clarity

* feat: initial load custom config

* feat(server/utils): add simple `isUserProvided` helper

* chore(types): update TConfig type

* refactor: remove custom endpoint handling from model services as will be handled by config, modularize fetching of models

* feat: loadCustomConfig, loadConfigEndpoints, loadConfigModels

* chore: reorganize server init imports, invoke loadCustomConfig

* refactor(loadConfigEndpoints/Models): return each custom endpoint as standalone endpoint

* refactor(Endpoint/ModelController): spread config values after default (temporary)

* chore(client): fix type issues

* WIP: first pass for multiple custom endpoints
- add endpointType to Conversation schema
- add update zod schemas for both convo/presets to allow non-EModelEndpoint value as endpoint (also using type assertion)
- use `endpointType` value as `endpoint` where mapping to type is necessary using this field
- use custom defined `endpoint` value and not type for mapping to modelsConfig
- misc: add return type to `getDefaultEndpoint`
- in `useNewConvo`, add the endpointType if it wasn't already added to conversation
- EndpointsMenu: use user-defined endpoint name as Title in menu
- TODO: custom icon via custom config, change unknown to robot icon

* refactor(parseConvo): pass args as an object and change where used accordingly; chore: comment out 'create schema' code

* chore: remove unused availableModels field in TConfig type

* refactor(parseCompactConvo): pass args as an object and change where used accordingly

* feat: chat through custom endpoint

* chore(message/convoSchemas): avoid saving empty arrays

* fix(BaseClient/saveMessageToDatabase): save endpointType

* refactor(ChatRoute): show Spinner if endpointsQuery or modelsQuery are still loading, which is apparent with slow fetching of models/remote config on first serve

* fix(useConversation): assign endpointType if it's missing

* fix(SaveAsPreset): pass real endpoint and endpointType when saving Preset)

* chore: recorganize types order for TConfig, add `iconURL`

* feat: custom endpoint icon support:
- use UnknownIcon in all icon contexts
- add mistral and openrouter as known endpoints, and add their icons
- iconURL support

* fix(presetSchema): move endpointType to default schema definitions shared between convoSchema and defaults

* refactor(Settings/OpenAI): remove legacy `isOpenAI` flag

* fix(OpenAIClient): do not invoke abortCompletion on completion error

* feat: add responseSender/label support for custom endpoints:
- use defaultModelLabel field in endpointOption
- add model defaults for custom endpoints in `getResponseSender`
- add `useGetSender` hook which uses EndpointsQuery to determine `defaultModelLabel`
- include defaultModelLabel from endpointConfig in custom endpoint client options
- pass `endpointType` to `getResponseSender`

* feat(OpenAIClient): use custom options from config file

* refactor: rename `defaultModelLabel` to `modelDisplayLabel`

* refactor(data-provider): separate concerns from `schemas` into `parsers`, `config`, and fix imports elsewhere

* feat: `iconURL` and extract environment variables from custom endpoint config values

* feat: custom config validation via zod schema, rename and move to `./projectRoot/librechat.yaml`

* docs: custom config docs and examples

* fix(OpenAIClient/mistral): mistral does not allow singular system message, also add `useChatCompletion` flag to use openai-node for title completions

* fix(custom/initializeClient): extract env var and use `isUserProvided` function

* Update librechat.example.yaml

* feat(InputWithLabel): add className props, and forwardRef

* fix(streamResponse): handle error edge case where either messages or convos query throws an error

* fix(useSSE): handle errorHandler edge cases where error response is and is not properly formatted from API, especially when a conversationId is not yet provided, which ensures stream is properly closed on error

* feat: user_provided keys for custom endpoints

* fix(config/endpointSchema): do not allow default endpoint values in custom endpoint `name`

* feat(loadConfigModels): extract env variables and optimize fetching models

* feat: support custom endpoint iconURL for messages and Nav

* feat(OpenAIClient): add/dropParams support

* docs: update docs with default params, add/dropParams, and notes to use config file instead of `OPENAI_REVERSE_PROXY`

* docs: update docs with additional notes

* feat(maxTokensMap): add mistral models (32k context)

* docs: update openrouter notes

* Update ai_setup.md

* docs(custom_config): add table of contents and fix note about custom name

* docs(custom_config): reorder ToC

* Update custom_config.md

* Add note about `max_tokens` field in custom_config.md

client/src/common/types.ts

@@ -1,4 +1,11 @@
-import type { TConversation, TMessage, TPreset, TLoginUser, TUser } from 'librechat-data-provider';
+import type {
+  TConversation,
+  TMessage,
+  TPreset,
+  TLoginUser,
+  TUser,
+  EModelEndpoint,
+} from 'librechat-data-provider';
 import type { UseMutationResult } from '@tanstack/react-query';
 
 export type TSetOption = (param: number | string) => (newValue: number | string | boolean) => void;
@@ -141,7 +148,7 @@ export type TDisplayProps = TText &
 export type TConfigProps = {
   userKey: string;
   setUserKey: React.Dispatch<React.SetStateAction<string>>;
-  endpoint: string;
+  endpoint: EModelEndpoint | string;
 };
 
 export type TDangerButtonProps = {
@@ -194,9 +201,11 @@ export type IconProps = Pick<TMessage, 'isCreatedByUser' | 'model' | 'error'> &
   Pick<TConversation, 'chatGptLabel' | 'modelLabel' | 'jailbreak'> & {
     size?: number;
     button?: boolean;
+    iconURL?: string;
     message?: boolean;
     className?: string;
-    endpoint?: string | null;
+    endpoint?: EModelEndpoint | string | null;
+    endpointType?: EModelEndpoint | null;
   };
 
 export type Option = Record<string, unknown> & {

client/src/components/Chat/Input/ChatForm.tsx

@@ -30,6 +30,8 @@ export default function ChatForm({ index = 0 }) {
   };
 
   const { requiresKey } = useRequiresKey();
+  const { endpoint: _endpoint, endpointType } = conversation ?? { endpoint: null };
+  const endpoint = endpointType ?? _endpoint;
 
   return (
     <form
@@ -49,9 +51,9 @@ export default function ChatForm({ index = 0 }) {
               onChange={(e: ChangeEvent<HTMLTextAreaElement>) => setText(e.target.value)}
               setText={setText}
               submitMessage={submitMessage}
-              endpoint={conversation?.endpoint}
+              endpoint={endpoint}
             />
-            <AttachFile endpoint={conversation?.endpoint ?? ''} disabled={requiresKey} />
+            <AttachFile endpoint={endpoint ?? ''} disabled={requiresKey} />
             {isSubmitting && showStopButton ? (
               <StopButton stop={handleStopGenerating} setShowStopButton={setShowStopButton} />
             ) : (

client/src/components/Chat/Input/HeaderOptions.tsx

@@ -2,7 +2,8 @@ import { useRecoilState } from 'recoil';
 import { Settings2 } from 'lucide-react';
 import { Root, Anchor } from '@radix-ui/react-popover';
 import { useState, useEffect, useMemo } from 'react';
-import { tPresetSchema, EModelEndpoint } from 'librechat-data-provider';
+import { tPresetUpdateSchema, EModelEndpoint } from 'librechat-data-provider';
+import type { TPreset } from 'librechat-data-provider';
 import { EndpointSettings, SaveAsPresetDialog } from '~/components/Endpoints';
 import { ModelSelect } from '~/components/Input/ModelSelect';
 import { PluginStoreDialog } from '~/components';
@@ -106,7 +107,11 @@ export default function OptionsBar() {
             <SaveAsPresetDialog
               open={saveAsDialogShow}
               onOpenChange={setSaveAsDialogShow}
-              preset={tPresetSchema.parse({ ...conversation })}
+              preset={
+                tPresetUpdateSchema.parse({
+                  ...conversation,
+                }) as TPreset
+              }
             />
             <PluginStoreDialog
               isOpen={showPluginStoreDialog}

client/src/components/Chat/Input/OptionsBar.tsx

@@ -1,7 +1,8 @@
 import { useRecoilState } from 'recoil';
 import { Settings2 } from 'lucide-react';
 import { useState, useEffect, useMemo } from 'react';
-import { tPresetSchema, EModelEndpoint } from 'librechat-data-provider';
+import { tPresetUpdateSchema, EModelEndpoint } from 'librechat-data-provider';
+import type { TPreset } from 'librechat-data-provider';
 import { PluginStoreDialog } from '~/components';
 import {
   EndpointSettings,
@@ -24,14 +25,8 @@ export default function OptionsBar({ messagesTree }) {
     store.showPluginStoreDialog,
   );
 
-  const {
-    showPopover,
-    conversation,
-    latestMessage,
-    setShowPopover,
-    setShowBingToneSetting,
-    textareaHeight,
-  } = useChatContext();
+  const { showPopover, conversation, latestMessage, setShowPopover, setShowBingToneSetting } =
+    useChatContext();
   const { setOption } = useSetIndexOptions();
 
   const { endpoint, conversationId, jailbreak } = conversation ?? {};
@@ -81,14 +76,7 @@ export default function OptionsBar({ messagesTree }) {
     ? altSettings[endpoint]
     : () => setShowPopover((prev) => !prev);
   return (
-    <div
-      className="absolute left-0 right-0 mx-auto mb-2 last:mb-2 md:mx-4 md:last:mb-6 lg:mx-auto lg:max-w-2xl xl:max-w-3xl"
-      style={{
-        // TODO: option to hide footer and handle this
-        // bottom: `${80 + (textareaHeight - 56)}px`, // without footer
-        bottom: `${85 + (textareaHeight - 56)}px`, // with footer
-      }}
-    >
+    <div className="absolute left-0 right-0 mx-auto mb-2 last:mb-2 md:mx-4 md:last:mb-6 lg:mx-auto lg:max-w-2xl xl:max-w-3xl">
       <GenerationButtons
         endpoint={endpoint}
         showPopover={showPopover}
@@ -151,7 +139,7 @@ export default function OptionsBar({ messagesTree }) {
           visible={showPopover}
           saveAsPreset={saveAsPreset}
           closePopover={() => setShowPopover(false)}
-          PopoverButtons={<PopoverButtons endpoint={endpoint} />}
+          PopoverButtons={<PopoverButtons />}
         >
           <div className="px-4 py-4">
             <EndpointSettings
@@ -164,7 +152,11 @@ export default function OptionsBar({ messagesTree }) {
         <SaveAsPresetDialog
           open={saveAsDialogShow}
           onOpenChange={setSaveAsDialogShow}
-          preset={tPresetSchema.parse({ ...conversation })}
+          preset={
+            tPresetUpdateSchema.parse({
+              ...conversation,
+            }) as TPreset
+          }
         />
         <PluginStoreDialog isOpen={showPluginStoreDialog} setIsOpen={setShowPluginStoreDialog} />
       </span>

client/src/components/Chat/Input/PopoverButtons.tsx

@@ -27,7 +27,8 @@ export default function PopoverButtons({
     setShowAgentSettings,
   } = useChatContext();
 
-  const { model, endpoint } = conversation ?? {};
+  const { model, endpoint: _endpoint, endpointType } = conversation ?? {};
+  const endpoint = endpointType ?? _endpoint;
   const isGenerativeModel = model?.toLowerCase()?.includes('gemini');
   const isChatModel = !isGenerativeModel && model?.toLowerCase()?.includes('chat');
   const isTextModel = !isGenerativeModel && !isChatModel && /code|text/.test(model ?? '');

client/src/components/Chat/Landing.tsx

@@ -1,10 +1,12 @@
 import type { ReactNode } from 'react';
+import { useGetEndpointsQuery } from 'librechat-data-provider/react-query';
 import { EModelEndpoint } from 'librechat-data-provider';
 import { icons } from './Menus/Endpoints/Icons';
 import { useChatContext } from '~/Providers';
 import { useLocalize } from '~/hooks';
 
 export default function Landing({ Header }: { Header?: ReactNode }) {
+  const { data: endpointsConfig } = useGetEndpointsQuery();
   const { conversation } = useChatContext();
   const localize = useLocalize();
   let { endpoint } = conversation ?? {};
@@ -16,13 +18,22 @@ export default function Landing({ Header }: { Header?: ReactNode }) {
   ) {
     endpoint = EModelEndpoint.openAI;
   }
+
+  const iconKey = endpointsConfig?.[endpoint ?? '']?.type ? 'unknown' : endpoint ?? 'unknown';
+
   return (
     <div className="relative h-full">
       <div className="absolute left-0 right-0">{Header && Header}</div>
       <div className="flex h-full flex-col items-center justify-center">
         <div className="mb-3 h-[72px] w-[72px]">
           <div className="gizmo-shadow-stroke relative flex h-full items-center justify-center rounded-full bg-white text-black">
-            {icons[endpoint ?? 'unknown']({ size: 41, className: 'h-2/3 w-2/3' })}
+            {icons[iconKey]({
+              size: 41,
+              context: 'landing',
+              className: 'h-2/3 w-2/3',
+              endpoint: endpoint as EModelEndpoint | string,
+              iconURL: endpointsConfig?.[endpoint ?? ''].iconURL,
+            })}
           </div>
         </div>
         <div className="mb-5 text-2xl font-medium dark:text-white">

client/src/components/Chat/Menus/Endpoints/Icons.tsx

@@ -6,8 +6,10 @@ import {
   AzureMinimalIcon,
   BingAIMinimalIcon,
   GoogleMinimalIcon,
+  CustomMinimalIcon,
   LightningIcon,
 } from '~/components/svg';
+import UnknownIcon from './UnknownIcon';
 import { cn } from '~/utils';
 
 export const icons = {
@@ -18,6 +20,7 @@ export const icons = {
   [EModelEndpoint.chatGPTBrowser]: LightningIcon,
   [EModelEndpoint.google]: GoogleMinimalIcon,
   [EModelEndpoint.bingAI]: BingAIMinimalIcon,
+  [EModelEndpoint.custom]: CustomMinimalIcon,
   [EModelEndpoint.assistant]: ({ className = '' }) => (
     <svg
       width="24"
@@ -39,5 +42,5 @@ export const icons = {
       ></path>
     </svg>
   ),
-  unknown: GPTIcon,
+  unknown: UnknownIcon,
 };

client/src/components/Chat/Menus/Endpoints/MenuItem.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { Settings } from 'lucide-react';
 import { EModelEndpoint } from 'librechat-data-provider';
+import { useGetEndpointsQuery } from 'librechat-data-provider/react-query';
 import type { FC } from 'react';
 import { useLocalize, useUserKey } from '~/hooks';
 import { SetKeyDialog } from '~/components/Input/SetKeyDialog';
@@ -26,7 +27,8 @@ const MenuItem: FC<MenuItemProps> = ({
   userProvidesKey,
   ...rest
 }) => {
-  const Icon = icons[endpoint] ?? icons.unknown;
+  const { data: endpointsConfig } = useGetEndpointsQuery();
+
   const [isDialogOpen, setDialogOpen] = useState(false);
   const { newConversation } = useChatContext();
   const { getExpiry } = useUserKey(endpoint);
@@ -44,6 +46,10 @@ const MenuItem: FC<MenuItemProps> = ({
     }
   };
 
+  const endpointType = endpointsConfig?.[endpoint ?? '']?.type;
+  const iconKey = endpointType ? 'unknown' : endpoint ?? 'unknown';
+  const Icon = icons[iconKey];
+
   return (
     <>
       <div
@@ -56,7 +62,15 @@ const MenuItem: FC<MenuItemProps> = ({
         <div className="flex grow items-center justify-between gap-2">
           <div>
             <div className="flex items-center gap-2">
-              {<Icon size={18} className="icon-md shrink-0 dark:text-white" />}
+              {
+                <Icon
+                  size={18}
+                  endpoint={endpoint}
+                  context={'menu-item'}
+                  className="icon-md shrink-0 dark:text-white"
+                  iconURL={endpointsConfig?.[endpoint ?? '']?.iconURL}
+                />
+              }
               <div>
                 {title}
                 <div className="text-token-text-tertiary">{description}</div>
@@ -128,7 +142,13 @@ const MenuItem: FC<MenuItemProps> = ({
         </div>
       </div>
       {userProvidesKey && (
-        <SetKeyDialog open={isDialogOpen} onOpenChange={setDialogOpen} endpoint={endpoint} />
+        <SetKeyDialog
+          open={isDialogOpen}
+          endpoint={endpoint}
+          endpointType={endpointType}
+          onOpenChange={setDialogOpen}
+          userProvideURL={endpointsConfig?.[endpoint ?? '']?.userProvideURL}
+        />
       )}
     </>
   );

client/src/components/Chat/Menus/Endpoints/UnknownIcon.tsx

@@ -0,0 +1,36 @@
+import { EModelEndpoint, KnownEndpoints } from 'librechat-data-provider';
+import { CustomMinimalIcon } from '~/components/svg';
+
+export default function UnknownIcon({
+  className = '',
+  endpoint,
+  iconURL,
+  context,
+}: {
+  iconURL?: string;
+  className?: string;
+  endpoint: EModelEndpoint | string | null;
+  context?: 'landing' | 'menu-item' | 'nav' | 'message';
+}) {
+  if (!endpoint) {
+    return <CustomMinimalIcon className={className} />;
+  }
+
+  const currentEndpoint = endpoint.toLowerCase();
+
+  if (iconURL) {
+    return <img className={className} src={iconURL} alt={`${endpoint} Icon`} />;
+  } else if (currentEndpoint === KnownEndpoints.mistral) {
+    return (
+      <img
+        className={context === 'landing' ? '' : className}
+        src="/assets/mistral.png"
+        alt="Mistral AI Icon"
+      />
+    );
+  } else if (currentEndpoint === KnownEndpoints.openrouter) {
+    return <img className={className} src="/assets/openrouter.png" alt="OpenRouter Icon" />;
+  }
+
+  return <CustomMinimalIcon className={className} />;
+}

client/src/components/Chat/Menus/EndpointsMenu.tsx

@@ -21,7 +21,7 @@ const EndpointsMenu: FC = () => {
   }
   return (
     <Root>
-      <TitleButton primaryText={(alternateName[selected] ?? '') + ' '} />
+      <TitleButton primaryText={(alternateName[selected] ?? selected ?? '') + ' '} />
       <Portal>
         <div
           style={{

client/src/components/Chat/Menus/Presets/EditPresetDialog.tsx

@@ -77,7 +77,6 @@ const EditPresetDialog = ({
                     {'ㅤ'}
                   </Label>
                   <PopoverButtons
-                    endpoint={endpoint}
                     buttonClass="ml-0 w-full dark:bg-gray-700 dark:hover:bg-gray-800 p-2 h-[40px] justify-center mt-0"
                     iconClass="hidden lg:block w-4"
                   />

client/src/components/Chat/Menus/Presets/PresetItems.tsx

@@ -2,6 +2,7 @@ import { Trash2 } from 'lucide-react';
 import { useRecoilValue } from 'recoil';
 import { Close } from '@radix-ui/react-popover';
 import { Flipper, Flipped } from 'react-flip-toolkit';
+import { useGetEndpointsQuery } from 'librechat-data-provider/react-query';
 import type { FC } from 'react';
 import type { TPreset } from 'librechat-data-provider';
 import FileUpload from '~/components/Input/EndpointMenu/FileUpload';
@@ -31,6 +32,7 @@ const PresetItems: FC<{
   clearAllPresets,
   onFileSelected,
 }) => {
+  const { data: endpointsConfig } = useGetEndpointsQuery();
   const defaultPreset = useRecoilValue(store.defaultPreset);
   const localize = useLocalize();
   return (
@@ -93,6 +95,10 @@ const PresetItems: FC<{
               return null;
             }
 
+            const iconKey = endpointsConfig?.[preset.endpoint ?? '']?.type
+              ? 'unknown'
+              : preset.endpoint ?? 'unknown';
+
             return (
               <Close asChild key={`preset-${preset.presetId}`}>
                 <div key={`preset-${preset.presetId}`}>
@@ -103,8 +109,11 @@ const PresetItems: FC<{
                       title={getPresetTitle(preset)}
                       disableHover={true}
                       onClick={() => onSelectPreset(preset)}
-                      icon={icons[preset.endpoint ?? 'unknown']({
+                      icon={icons[iconKey]({
+                        context: 'menu-item',
+                        iconURL: endpointsConfig?.[preset.endpoint ?? ''].iconURL,
                         className: 'icon-md mr-1 dark:text-white',
+                        endpoint: preset.endpoint,
                       })}
                       selected={false}
                       data-testid={`preset-item-${preset}`}

client/src/components/Chat/Menus/PresetsMenu.tsx

@@ -3,6 +3,7 @@ import { BookCopy } from 'lucide-react';
 import { Content, Portal, Root, Trigger } from '@radix-ui/react-popover';
 import { EditPresetDialog, PresetItems } from './Presets';
 import { useLocalize, usePresets } from '~/hooks';
+import { useChatContext } from '~/Providers';
 import { cn } from '~/utils';
 
 const PresetsMenu: FC = () => {
@@ -18,6 +19,7 @@ const PresetsMenu: FC = () => {
     submitPreset,
     exportPreset,
   } = usePresets();
+  const { preset } = useChatContext();
 
   const presets = presetsQuery.data || [];
   return (
@@ -64,7 +66,7 @@ const PresetsMenu: FC = () => {
           </Content>
         </div>
       </Portal>
-      <EditPresetDialog submitPreset={submitPreset} exportPreset={exportPreset} />
+      {preset && <EditPresetDialog submitPreset={submitPreset} exportPreset={exportPreset} />}
     </Root>
   );
 };

client/src/components/Chat/Messages/Content/EditMessage.tsx

@@ -19,7 +19,8 @@ const EditMessage = ({
 
   const textEditor = useRef<HTMLDivElement | null>(null);
   const { conversationId, parentMessageId, messageId } = message;
-  const { endpoint } = conversation ?? { endpoint: null };
+  const { endpoint: _endpoint, endpointType } = conversation ?? { endpoint: null };
+  const endpoint = endpointType ?? _endpoint;
   const updateMessageMutation = useUpdateMessageMutation(conversationId ?? '');
   const localize = useLocalize();
 

client/src/components/Chat/Messages/HoverButtons.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import type { TConversation, TMessage } from 'librechat-data-provider';
 import { Clipboard, CheckMark, EditIcon, RegenerateIcon, ContinueIcon } from '~/components/svg';
-import { useGenerations, useLocalize } from '~/hooks';
+import { useGenerationsByLatest, useLocalize } from '~/hooks';
 import { cn } from '~/utils';
 
 type THoverButtons = {
@@ -28,9 +28,10 @@ export default function HoverButtons({
   latestMessage,
 }: THoverButtons) {
   const localize = useLocalize();
-  const { endpoint } = conversation ?? {};
+  const { endpoint: _endpoint, endpointType } = conversation ?? {};
+  const endpoint = endpointType ?? _endpoint;
   const [isCopied, setIsCopied] = useState(false);
-  const { hideEditButton, regenerateEnabled, continueSupported } = useGenerations({
+  const { hideEditButton, regenerateEnabled, continueSupported } = useGenerationsByLatest({
     isEditing,
     isSubmitting,
     message,

client/src/components/Conversations/Convo.tsx

@@ -1,7 +1,10 @@
 import { useRecoilValue } from 'recoil';
 import { useState, useRef } from 'react';
 import { useParams } from 'react-router-dom';
-import { useUpdateConversationMutation } from 'librechat-data-provider/react-query';
+import {
+  useGetEndpointsQuery,
+  useUpdateConversationMutation,
+} from 'librechat-data-provider/react-query';
 import type { MouseEvent, FocusEvent, KeyboardEvent } from 'react';
 import { useConversations, useNavigateToConvo } from '~/hooks';
 import { MinimalIcon } from '~/components/Endpoints';
@@ -15,8 +18,9 @@ type KeyEvent = KeyboardEvent<HTMLInputElement>;
 
 export default function Conversation({ conversation, retainView, toggleNav, i }) {
   const { conversationId: currentConvoId } = useParams();
-  const activeConvos = useRecoilValue(store.allConversationsSelector);
   const updateConvoMutation = useUpdateConversationMutation(currentConvoId ?? '');
+  const activeConvos = useRecoilValue(store.allConversationsSelector);
+  const { data: endpointsConfig } = useGetEndpointsQuery();
   const { refreshConversations } = useConversations();
   const { navigateToConvo } = useNavigateToConvo();
   const { showToast } = useToastContext();
@@ -86,7 +90,9 @@ export default function Conversation({ conversation, retainView, toggleNav, i })
 
   const icon = MinimalIcon({
     size: 20,
+    iconURL: endpointsConfig?.[conversation.endpoint ?? '']?.iconURL,
     endpoint: conversation.endpoint,
+    endpointType: conversation.endpointType,
     model: conversation.model,
     error: false,
     className: 'mr-0',

client/src/components/Endpoints/EndpointSettings.tsx

@@ -17,8 +17,9 @@ export default function Settings({
   }
 
   const { settings, multiViewSettings } = getSettings(isMultiChat);
-  const { endpoint } = conversation;
-  const models = modelsConfig?.[endpoint] ?? [];
+  const { endpoint: _endpoint, endpointType } = conversation;
+  const models = modelsConfig?.[_endpoint] ?? [];
+  const endpoint = endpointType ?? _endpoint;
   const OptionComponent = settings[endpoint];
 
   if (OptionComponent) {

client/src/components/Endpoints/Icon.tsx

@@ -1,9 +1,11 @@
 import { EModelEndpoint } from 'librechat-data-provider';
+import UnknownIcon from '~/components/Chat/Menus/Endpoints/UnknownIcon';
 import {
   Plugin,
   GPTIcon,
   AnthropicIcon,
   AzureMinimalIcon,
+  CustomMinimalIcon,
   PaLMIcon,
   CodeyIcon,
   GeminiIcon,
@@ -13,9 +15,8 @@ import { IconProps } from '~/common';
 import { cn } from '~/utils';
 
 const Icon: React.FC<IconProps> = (props) => {
-  const { size = 30, isCreatedByUser, button, model = '', endpoint, error, jailbreak } = props;
-
   const { user } = useAuthContext();
+  const { size = 30, isCreatedByUser, button, model = '', endpoint, error, jailbreak } = props;
 
   if (isCreatedByUser) {
     const username = user?.name || 'User';
@@ -94,8 +95,22 @@ const Icon: React.FC<IconProps> = (props) => {
             : `rgba(0, 163, 255, ${button ? 0.75 : 1})`,
         name: 'ChatGPT',
       },
+      [EModelEndpoint.custom]: {
+        icon: <CustomMinimalIcon size={size * 0.7} />,
+        name: 'Custom',
+      },
       null: { icon: <GPTIcon size={size * 0.7} />, bg: 'grey', name: 'N/A' },
-      default: { icon: <GPTIcon size={size * 0.7} />, bg: 'grey', name: 'UNKNOWN' },
+      default: {
+        icon: (
+          <UnknownIcon
+            iconURL={props.iconURL}
+            endpoint={endpoint ?? ''}
+            className="icon-sm"
+            context="message"
+          />
+        ),
+        name: endpoint,
+      },
     };
 
     const { icon, bg, name } =

client/src/components/Endpoints/MinimalIcon.tsx

@@ -1,4 +1,5 @@
 import { EModelEndpoint } from 'librechat-data-provider';
+import UnknownIcon from '~/components/Chat/Menus/Endpoints/UnknownIcon';
 import {
   AzureMinimalIcon,
   OpenAIMinimalIcon,
@@ -6,6 +7,7 @@ import {
   PluginMinimalIcon,
   BingAIMinimalIcon,
   GoogleMinimalIcon,
+  CustomMinimalIcon,
   AnthropicIcon,
 } from '~/components/svg';
 import { cn } from '~/utils';
@@ -32,9 +34,23 @@ const MinimalIcon: React.FC<IconProps> = (props) => {
       icon: <AnthropicIcon className="icon-md shrink-0 dark:text-white" />,
       name: props.modelLabel || 'Claude',
     },
+    [EModelEndpoint.custom]: {
+      icon: <CustomMinimalIcon />,
+      name: 'Custom',
+    },
     [EModelEndpoint.bingAI]: { icon: <BingAIMinimalIcon />, name: 'BingAI' },
     [EModelEndpoint.chatGPTBrowser]: { icon: <LightningIcon />, name: 'ChatGPT' },
-    default: { icon: <OpenAIMinimalIcon />, name: 'UNKNOWN' },
+    default: {
+      icon: (
+        <UnknownIcon
+          iconURL={props.iconURL}
+          endpoint={endpoint}
+          className="icon-sm"
+          context="nav"
+        />
+      ),
+      name: endpoint,
+    },
   };
 
   const { icon, name } = endpointIcons[endpoint] ?? endpointIcons.default;

client/src/components/Endpoints/Settings/OpenAI.tsx

@@ -1,6 +1,4 @@
 import TextareaAutosize from 'react-textarea-autosize';
-import type { TModelSelectProps } from '~/common';
-import { ESide } from '~/common';
 import {
   SelectDropDown,
   Input,
@@ -10,9 +8,11 @@ import {
   HoverCard,
   HoverCardTrigger,
 } from '~/components/ui';
-import OptionHover from './OptionHover';
 import { cn, defaultTextProps, optionText, removeFocusOutlines } from '~/utils/';
+import type { TModelSelectProps } from '~/common';
+import OptionHover from './OptionHover';
 import { useLocalize } from '~/hooks';
+import { ESide } from '~/common';
 
 export default function Settings({ conversation, setOption, models, readonly }: TModelSelectProps) {
   const localize = useLocalize();
@@ -28,9 +28,6 @@ export default function Settings({ conversation, setOption, models, readonly }:
     frequency_penalty: freqP,
     presence_penalty: presP,
   } = conversation;
-  const endpoint = conversation.endpoint || 'openAI';
-  const isOpenAI = endpoint === 'openAI' || endpoint === 'azureOpenAI';
-
   const setModel = setOption('model');
   const setChatGptLabel = setOption('chatGptLabel');
   const setPromptPrefix = setOption('promptPrefix');
@@ -52,47 +49,43 @@ export default function Settings({ conversation, setOption, models, readonly }:
             containerClassName="flex w-full resize-none"
           />
         </div>
-        {isOpenAI && (
-          <>
-            <div className="grid w-full items-center gap-2">
-              <Label htmlFor="chatGptLabel" className="text-left text-sm font-medium">
-                {localize('com_endpoint_custom_name')}{' '}
-                <small className="opacity-40">({localize('com_endpoint_default_blank')})</small>
-              </Label>
-              <Input
-                id="chatGptLabel"
-                disabled={readonly}
-                value={chatGptLabel || ''}
-                onChange={(e) => setChatGptLabel(e.target.value ?? null)}
-                placeholder={localize('com_endpoint_openai_custom_name_placeholder')}
-                className={cn(
-                  defaultTextProps,
-                  'dark:bg-gray-700 dark:hover:bg-gray-700/60 dark:focus:bg-gray-700',
-                  'flex h-10 max-h-10 w-full resize-none px-3 py-2',
-                  removeFocusOutlines,
-                )}
-              />
-            </div>
-            <div className="grid w-full items-center gap-2">
-              <Label htmlFor="promptPrefix" className="text-left text-sm font-medium">
-                {localize('com_endpoint_prompt_prefix')}{' '}
-                <small className="opacity-40">({localize('com_endpoint_default_blank')})</small>
-              </Label>
-              <TextareaAutosize
-                id="promptPrefix"
-                disabled={readonly}
-                value={promptPrefix || ''}
-                onChange={(e) => setPromptPrefix(e.target.value ?? null)}
-                placeholder={localize('com_endpoint_openai_prompt_prefix_placeholder')}
-                className={cn(
-                  defaultTextProps,
-                  'dark:bg-gray-700 dark:hover:bg-gray-700/60 dark:focus:bg-gray-700',
-                  'flex max-h-[138px] min-h-[100px] w-full resize-none px-3 py-2 ',
-                )}
-              />
-            </div>
-          </>
-        )}
+        <div className="grid w-full items-center gap-2">
+          <Label htmlFor="chatGptLabel" className="text-left text-sm font-medium">
+            {localize('com_endpoint_custom_name')}{' '}
+            <small className="opacity-40">({localize('com_endpoint_default_blank')})</small>
+          </Label>
+          <Input
+            id="chatGptLabel"
+            disabled={readonly}
+            value={chatGptLabel || ''}
+            onChange={(e) => setChatGptLabel(e.target.value ?? null)}
+            placeholder={localize('com_endpoint_openai_custom_name_placeholder')}
+            className={cn(
+              defaultTextProps,
+              'dark:bg-gray-700 dark:hover:bg-gray-700/60 dark:focus:bg-gray-700',
+              'flex h-10 max-h-10 w-full resize-none px-3 py-2',
+              removeFocusOutlines,
+            )}
+          />
+        </div>
+        <div className="grid w-full items-center gap-2">
+          <Label htmlFor="promptPrefix" className="text-left text-sm font-medium">
+            {localize('com_endpoint_prompt_prefix')}{' '}
+            <small className="opacity-40">({localize('com_endpoint_default_blank')})</small>
+          </Label>
+          <TextareaAutosize
+            id="promptPrefix"
+            disabled={readonly}
+            value={promptPrefix || ''}
+            onChange={(e) => setPromptPrefix(e.target.value ?? null)}
+            placeholder={localize('com_endpoint_openai_prompt_prefix_placeholder')}
+            className={cn(
+              defaultTextProps,
+              'dark:bg-gray-700 dark:hover:bg-gray-700/60 dark:focus:bg-gray-700',
+              'flex max-h-[138px] min-h-[100px] w-full resize-none px-3 py-2 ',
+            )}
+          />
+        </div>
       </div>
       <div className="col-span-5 flex flex-col items-center justify-start gap-6 px-3 sm:col-span-2">
         <HoverCard openDelay={300}>
@@ -101,7 +94,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
               <Label htmlFor="temp-int" className="text-left text-sm font-medium">
                 {localize('com_endpoint_temperature')}{' '}
                 <small className="opacity-40">
-                  ({localize('com_endpoint_default_with_num', isOpenAI ? '1' : '0')})
+                  ({localize('com_endpoint_default_with_num', '1')})
                 </small>
               </Label>
               <InputNumber

client/src/components/Endpoints/Settings/settings.ts

@@ -1,13 +1,14 @@
 import { EModelEndpoint } from 'librechat-data-provider';
-import OpenAISettings from './OpenAI';
-import BingAISettings from './BingAI';
-import AnthropicSettings from './Anthropic';
-import { Google, Plugins, GoogleSettings, PluginSettings } from './MultiView';
 import type { FC } from 'react';
 import type { TModelSelectProps, TBaseSettingsProps, TModels } from '~/common';
+import { Google, Plugins, GoogleSettings, PluginSettings } from './MultiView';
+import AnthropicSettings from './Anthropic';
+import BingAISettings from './BingAI';
+import OpenAISettings from './OpenAI';
 
 const settings: { [key: string]: FC<TModelSelectProps> } = {
   [EModelEndpoint.openAI]: OpenAISettings,
+  [EModelEndpoint.custom]: OpenAISettings,
   [EModelEndpoint.azureOpenAI]: OpenAISettings,
   [EModelEndpoint.bingAI]: BingAISettings,
   [EModelEndpoint.anthropic]: AnthropicSettings,

client/src/components/Input/ModelSelect/ModelSelect.tsx

@@ -28,9 +28,11 @@ export default function ModelSelect({
     return null;
   }
 
-  const { endpoint } = conversation;
+  const { endpoint: _endpoint, endpointType } = conversation;
+  const models = modelsConfig?.[_endpoint] ?? [];
+  const endpoint = endpointType ?? _endpoint;
+
   const OptionComponent = isMultiChat ? multiChatOptions[endpoint] : options[endpoint];
-  const models = modelsConfig?.[endpoint] ?? [];
 
   if (!OptionComponent) {
     return null;

client/src/components/Input/ModelSelect/options.ts

@@ -12,6 +12,7 @@ import PluginsByIndex from './PluginsByIndex';
 
 export const options: { [key: string]: FC<TModelSelectProps> } = {
   [EModelEndpoint.openAI]: OpenAI,
+  [EModelEndpoint.custom]: OpenAI,
   [EModelEndpoint.azureOpenAI]: OpenAI,
   [EModelEndpoint.bingAI]: BingAI,
   [EModelEndpoint.google]: Google,

client/src/components/Input/SetKeyDialog/CustomEndpoint.tsx

@@ -0,0 +1,46 @@
+import { EModelEndpoint } from 'librechat-data-provider';
+import { useFormContext, Controller } from 'react-hook-form';
+import InputWithLabel from './InputWithLabel';
+
+const CustomEndpoint = ({
+  endpoint,
+  userProvideURL,
+}: {
+  endpoint: EModelEndpoint | string;
+  userProvideURL?: boolean | null;
+}) => {
+  const { control } = useFormContext();
+  return (
+    <form className="flex-wrap">
+      <Controller
+        name="apiKey"
+        control={control}
+        render={({ field }) => (
+          <InputWithLabel
+            id="apiKey"
+            {...field}
+            label={`${endpoint} API Key`}
+            labelClassName="mb-1"
+            inputClassName="mb-2"
+          />
+        )}
+      />
+      {userProvideURL && (
+        <Controller
+          name="baseURL"
+          control={control}
+          render={({ field }) => (
+            <InputWithLabel
+              id="baseURL"
+              {...field}
+              label={`${endpoint} API URL`}
+              labelClassName="mb-1"
+            />
+          )}
+        />
+      )}
+    </form>
+  );
+};
+
+export default CustomEndpoint;

client/src/components/Input/SetKeyDialog/InputWithLabel.tsx

@@ -1,21 +1,26 @@
-import React, { ChangeEvent, FC } from 'react';
+import { forwardRef } from 'react';
+import type { ChangeEvent, FC, Ref } from 'react';
 import { cn, defaultTextPropsLabel, removeFocusOutlines } from '~/utils/';
 import { Input, Label } from '~/components/ui';
 import { useLocalize } from '~/hooks';
 
 interface InputWithLabelProps {
+  id: string;
   value: string;
-  onChange: (event: ChangeEvent<HTMLInputElement>) => void;
   label: string;
   subLabel?: string;
-  id: string;
+  onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+  labelClassName?: string;
+  inputClassName?: string;
+  ref?: Ref<HTMLInputElement>;
 }
 
-const InputWithLabel: FC<InputWithLabelProps> = ({ value, onChange, label, subLabel, id }) => {
+const InputWithLabel: FC<InputWithLabelProps> = forwardRef((props, ref) => {
+  const { id, value, label, subLabel, onChange, labelClassName = '', inputClassName = '' } = props;
   const localize = useLocalize();
   return (
     <>
-      <div className="flex flex-row">
+      <div className={cn('flex flex-row', labelClassName)}>
         <Label htmlFor={id} className="text-left text-sm font-medium">
           {label}
         </Label>
@@ -24,21 +29,22 @@ const InputWithLabel: FC<InputWithLabelProps> = ({ value, onChange, label, subLa
         )}
         <br />
       </div>
-
       <Input
         id={id}
         data-testid={`input-${id}`}
         value={value ?? ''}
         onChange={onChange}
+        ref={ref}
         placeholder={`${localize('com_endpoint_config_value')} ${label}`}
         className={cn(
           defaultTextPropsLabel,
           'flex h-10 max-h-10 w-full resize-none px-3 py-2',
           removeFocusOutlines,
+          inputClassName,
         )}
       />
     </>
   );
-};
+});
 
 export default InputWithLabel;

client/src/components/Input/SetKeyDialog/SetKeyDialog.tsx

@@ -1,10 +1,13 @@
 import React, { useState } from 'react';
+import { useForm, FormProvider } from 'react-hook-form';
 import { EModelEndpoint, alternateName } from 'librechat-data-provider';
 import type { TDialogProps } from '~/common';
 import DialogTemplate from '~/components/ui/DialogTemplate';
 import { RevokeKeysButton } from '~/components/Nav';
 import { Dialog, Dropdown } from '~/components/ui';
 import { useUserKey, useLocalize } from '~/hooks';
+import { useToastContext } from '~/Providers';
+import CustomConfig from './CustomEndpoint';
 import GoogleConfig from './GoogleConfig';
 import OpenAIConfig from './OpenAIConfig';
 import OtherConfig from './OtherConfig';
@@ -13,6 +16,7 @@ import HelpText from './HelpText';
 const endpointComponents = {
   [EModelEndpoint.google]: GoogleConfig,
   [EModelEndpoint.openAI]: OpenAIConfig,
+  [EModelEndpoint.custom]: CustomConfig,
   [EModelEndpoint.azureOpenAI]: OpenAIConfig,
   [EModelEndpoint.gptPlugins]: OpenAIConfig,
   default: OtherConfig,
@@ -31,12 +35,28 @@ const SetKeyDialog = ({
   open,
   onOpenChange,
   endpoint,
+  endpointType,
+  userProvideURL,
 }: Pick<TDialogProps, 'open' | 'onOpenChange'> & {
-  endpoint: string;
+  endpoint: EModelEndpoint | string;
+  endpointType?: EModelEndpoint;
+  userProvideURL?: boolean | null;
 }) => {
+  const methods = useForm({
+    defaultValues: {
+      apiKey: '',
+      baseURL: '',
+      // TODO: allow endpoint definitions from user
+      // name: '',
+      // TODO: add custom endpoint models defined by user
+      // models: '',
+    },
+  });
+
   const [userKey, setUserKey] = useState('');
   const [expiresAtLabel, setExpiresAtLabel] = useState(EXPIRY.TWELVE_HOURS.display);
   const { getExpiry, saveUserKey } = useUserKey(endpoint);
+  const { showToast } = useToastContext();
   const localize = useLocalize();
 
   const expirationOptions = Object.values(EXPIRY);
@@ -48,12 +68,42 @@ const SetKeyDialog = ({
   const submit = () => {
     const selectedOption = expirationOptions.find((option) => option.display === expiresAtLabel);
     const expiresAt = Date.now() + (selectedOption ? selectedOption.value : 0);
-    saveUserKey(userKey, expiresAt);
-    onOpenChange(false);
+
+    const saveKey = (key: string) => {
+      saveUserKey(key, expiresAt);
+      onOpenChange(false);
+    };
+
+    if (endpoint === EModelEndpoint.custom || endpointType === EModelEndpoint.custom) {
+      // TODO: handle other user provided options besides baseURL and apiKey
+      methods.handleSubmit((data) => {
+        const emptyValues = Object.keys(data).filter((key) => {
+          if (key === 'baseURL' && !userProvideURL) {
+            return false;
+          }
+          return data[key] === '';
+        });
+
+        if (emptyValues.length > 0) {
+          showToast({
+            message: 'The following fields are required: ' + emptyValues.join(', '),
+            status: 'error',
+          });
+          onOpenChange(true);
+        } else {
+          saveKey(JSON.stringify(data));
+          methods.reset();
+        }
+      })();
+      return;
+    }
+
+    saveKey(userKey);
     setUserKey('');
   };
 
-  const EndpointComponent = endpointComponents[endpoint] ?? endpointComponents['default'];
+  const EndpointComponent =
+    endpointComponents[endpointType ?? endpoint] ?? endpointComponents['default'];
   const expiryTime = getExpiry();
 
   return (
@@ -77,7 +127,14 @@ const SetKeyDialog = ({
               options={expirationOptions.map((option) => option.display)}
               width={185}
             />
-            <EndpointComponent userKey={userKey} setUserKey={setUserKey} endpoint={endpoint} />
+            <FormProvider {...methods}>
+              <EndpointComponent
+                userKey={userKey}
+                setUserKey={setUserKey}
+                endpoint={endpoint}
+                userProvideURL={userProvideURL}
+              />
+            </FormProvider>
             <HelpText endpoint={endpoint} />
           </div>
         }

client/src/components/svg/CustomMinimalIcon.tsx

@@ -0,0 +1,30 @@
+import { cn } from '~/utils';
+export default function CustomMinimalIcon({
+  size = 25,
+  className = '',
+}: {
+  size?: number;
+  className?: string;
+}) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={cn('lucide lucide-bot', className)}
+    >
+      <path d="M12 8V4H8" />
+      <rect width="16" height="12" x="4" y="8" rx="2" />
+      <path d="M2 14h2" />
+      <path d="M20 14h2" />
+      <path d="M15 13v2" />
+      <path d="M9 13v2" />
+    </svg>
+  );
+}

client/src/components/svg/index.ts

@@ -8,6 +8,7 @@ export { default as Clipboard } from './Clipboard';
 export { default as CheckMark } from './CheckMark';
 export { default as CrossIcon } from './CrossIcon';
 export { default as LogOutIcon } from './LogOutIcon';
+export { default as CustomMinimalIcon } from './CustomMinimalIcon';
 export { default as LightningIcon } from './LightningIcon';
 export { default as AttachmentIcon } from './AttachmentIcon';
 export { default as MessagesSquared } from './MessagesSquared';

client/src/hooks/Conversations/index.ts

@@ -1 +1,2 @@
 export { default as usePresets } from './usePresets';
+export { default as useGetSender } from './useGetSender';

client/src/hooks/Conversations/useGetSender.ts

@@ -0,0 +1,15 @@
+import { useCallback } from 'react';
+import { getResponseSender } from 'librechat-data-provider';
+import { useGetEndpointsQuery } from 'librechat-data-provider/react-query';
+import type { TEndpointOption, TEndpointsConfig } from 'librechat-data-provider';
+
+export default function useGetSender() {
+  const { data: endpointsConfig = {} as TEndpointsConfig } = useGetEndpointsQuery();
+  return useCallback(
+    (endpointOption: TEndpointOption) => {
+      const { modelDisplayLabel } = endpointsConfig[endpointOption.endpoint ?? ''] ?? {};
+      return getResponseSender({ ...endpointOption, modelDisplayLabel });
+    },
+    [endpointsConfig],
+  );
+}

client/src/hooks/Input/useTextarea.ts

@@ -1,7 +1,8 @@
-import { useEffect, useRef } from 'react';
 import debounce from 'lodash/debounce';
-import { TEndpointOption, getResponseSender } from 'librechat-data-provider';
+import { useEffect, useRef } from 'react';
+import { TEndpointOption } from 'librechat-data-provider';
 import type { KeyboardEvent } from 'react';
+import useGetSender from '~/hooks/Conversations/useGetSender';
 import { useChatContext } from '~/Providers/ChatContext';
 import useFileHandling from '~/hooks/useFileHandling';
 import useLocalize from '~/hooks/useLocalize';
@@ -14,6 +15,7 @@ export default function useTextarea({ setText, submitMessage, disabled = false }
   const isComposing = useRef(false);
   const inputRef = useRef<HTMLTextAreaElement | null>(null);
   const { handleFiles } = useFileHandling();
+  const getSender = useGetSender();
   const localize = useLocalize();
 
   const { conversationId, jailbreak } = conversation || {};
@@ -59,7 +61,7 @@ export default function useTextarea({ setText, submitMessage, disabled = false }
         return localize('com_endpoint_message_not_appendable');
       }
 
-      const sender = getResponseSender(conversation as TEndpointOption);
+      const sender = getSender(conversation as TEndpointOption);
 
       return `${localize('com_endpoint_message')} ${sender ? sender : 'ChatGPT'}…`;
     };
@@ -82,7 +84,7 @@ export default function useTextarea({ setText, submitMessage, disabled = false }
     debouncedSetPlaceholder();
 
     return () => debouncedSetPlaceholder.cancel();
-  }, [conversation, disabled, latestMessage, isNotAppendable, localize]);
+  }, [conversation, disabled, latestMessage, isNotAppendable, localize, getSender]);
 
   const handleKeyDown = (e: KeyEvent) => {
     if (e.key === 'Enter' && isSubmitting) {

client/src/hooks/Messages/useMessageHelpers.ts

@@ -1,5 +1,6 @@
-import { useEffect, useRef } from 'react';
 import copy from 'copy-to-clipboard';
+import { useEffect, useRef } from 'react';
+import { useGetEndpointsQuery } from 'librechat-data-provider/react-query';
 import type { TMessage } from 'librechat-data-provider';
 import type { TMessageProps } from '~/common';
 import Icon from '~/components/Endpoints/Icon';
@@ -7,6 +8,7 @@ import { useChatContext } from '~/Providers';
 
 export default function useMessageHelpers(props: TMessageProps) {
   const latestText = useRef('');
+  const { data: endpointsConfig } = useGetEndpointsQuery();
   const { message, currentEditId, setCurrentEditId } = props;
 
   const {
@@ -51,6 +53,7 @@ export default function useMessageHelpers(props: TMessageProps) {
   const icon = Icon({
     ...conversation,
     ...(message as TMessage),
+    iconURL: endpointsConfig?.[conversation?.endpoint ?? '']?.iconURL,
     model: message?.model ?? conversation?.model,
     size: 28.8,
   });

client/src/hooks/useChatHelpers.ts

@@ -1,18 +1,20 @@
 import { v4 } from 'uuid';
 import { useCallback, useState } from 'react';
 import { useQueryClient } from '@tanstack/react-query';
+import { QueryKeys, parseCompactConvo } from 'librechat-data-provider';
 import { useRecoilState, useResetRecoilState, useSetRecoilState } from 'recoil';
-import { QueryKeys, parseCompactConvo, getResponseSender } from 'librechat-data-provider';
-import { useGetMessagesByConvoId } from 'librechat-data-provider/react-query';
+import { useGetMessagesByConvoId, useGetEndpointsQuery } from 'librechat-data-provider/react-query';
 import type {
   TMessage,
   TSubmission,
   TEndpointOption,
   TConversation,
+  TEndpointsConfig,
   TGetConversationsResponse,
 } from 'librechat-data-provider';
 import type { TAskFunction } from '~/common';
 import useSetFilesToDelete from './useSetFilesToDelete';
+import useGetSender from './Conversations/useGetSender';
 import { useAuthContext } from './AuthContext';
 import useUserKey from './Input/useUserKey';
 import useNewConvo from './useNewConvo';
@@ -20,10 +22,12 @@ import store from '~/store';
 
 // this to be set somewhere else
 export default function useChatHelpers(index = 0, paramId: string | undefined) {
+  const { data: endpointsConfig = {} as TEndpointsConfig } = useGetEndpointsQuery();
   const [files, setFiles] = useRecoilState(store.filesByIndex(index));
   const [showStopButton, setShowStopButton] = useState(true);
   const [filesLoading, setFilesLoading] = useState(false);
   const setFilesToDelete = useSetFilesToDelete();
+  const getSender = useGetSender();
 
   const queryClient = useQueryClient();
   const { isAuthenticated } = useAuthContext();
@@ -31,7 +35,7 @@ export default function useChatHelpers(index = 0, paramId: string | undefined) {
   const { newConversation } = useNewConvo(index);
   const { useCreateConversationAtom } = store;
   const { conversation, setConversation } = useCreateConversationAtom(index);
-  const { conversationId, endpoint } = conversation ?? {};
+  const { conversationId, endpoint, endpointType } = conversation ?? {};
 
   const queryParam = paramId === 'new' ? paramId : conversationId ?? paramId ?? '';
 
@@ -151,13 +155,21 @@ export default function useChatHelpers(index = 0, paramId: string | undefined) {
     const isEditOrContinue = isEdited || isContinued;
 
     // set the endpoint option
-    const convo = parseCompactConvo(endpoint, conversation ?? {});
+    const convo = parseCompactConvo({
+      endpoint,
+      endpointType,
+      conversation: conversation ?? {},
+    });
+
+    const { modelDisplayLabel } = endpointsConfig[endpoint ?? ''] ?? {};
     const endpointOption = {
       ...convo,
       endpoint,
+      endpointType,
+      modelDisplayLabel,
       key: getExpiry(),
     } as TEndpointOption;
-    const responseSender = getResponseSender({ model: conversation?.model, ...endpointOption });
+    const responseSender = getSender({ model: conversation?.model, ...endpointOption });
 
     let currentMessages: TMessage[] | null = getMessages() ?? [];
 

client/src/hooks/useConversation.ts

@@ -7,6 +7,7 @@ import type {
   TSubmission,
   TPreset,
   TModelsConfig,
+  TEndpointsConfig,
 } from 'librechat-data-provider';
 import { buildDefaultConvo, getDefaultEndpoint } from '~/utils';
 import useOriginNavigate from './useOriginNavigate';
@@ -18,7 +19,7 @@ const useConversation = () => {
   const setMessages = useSetRecoilState<TMessagesAtom>(store.messages);
   const setSubmission = useSetRecoilState<TSubmission | null>(store.submission);
   const resetLatestMessage = useResetRecoilState(store.latestMessage);
-  const { data: endpointsConfig = {} } = useGetEndpointsQuery();
+  const { data: endpointsConfig = {} as TEndpointsConfig } = useGetEndpointsQuery();
 
   const switchToConversation = useRecoilCallback(
     ({ snapshot }) =>
@@ -37,6 +38,10 @@ const useConversation = () => {
             endpointsConfig,
           });
 
+          if (!conversation.endpointType && endpointsConfig[defaultEndpoint]?.type) {
+            conversation.endpointType = endpointsConfig[defaultEndpoint]?.type;
+          }
+
           const models = modelsConfig?.[defaultEndpoint] ?? [];
           conversation = buildDefaultConvo({
             conversation,

client/src/hooks/useDefaultConvo.ts

@@ -1,13 +1,13 @@
 import { useRecoilValue } from 'recoil';
 import { useGetEndpointsQuery } from 'librechat-data-provider/react-query';
-import type { TConversation, TPreset } from 'librechat-data-provider';
+import type { TConversation, TPreset, TEndpointsConfig } from 'librechat-data-provider';
 import { getDefaultEndpoint, buildDefaultConvo } from '~/utils';
 import store from '~/store';
 
 type TDefaultConvo = { conversation: Partial<TConversation>; preset?: Partial<TPreset> | null };
 
 const useDefaultConvo = () => {
-  const { data: endpointsConfig = {} } = useGetEndpointsQuery();
+  const { data: endpointsConfig = {} as TEndpointsConfig } = useGetEndpointsQuery();
   const modelsConfig = useRecoilValue(store.modelsConfig);
 
   const getDefaultConversation = ({ conversation, preset }: TDefaultConvo) => {

client/src/hooks/useGenerationsByLatest.ts

@@ -19,6 +19,7 @@ export default function useGenerationsByLatest({
   const { error, messageId, searchResult, finish_reason, isCreatedByUser } = message ?? {};
   const isEditableEndpoint = !![
     EModelEndpoint.openAI,
+    EModelEndpoint.custom,
     EModelEndpoint.google,
     EModelEndpoint.assistant,
     EModelEndpoint.anthropic,
@@ -39,6 +40,7 @@ export default function useGenerationsByLatest({
     !![
       EModelEndpoint.azureOpenAI,
       EModelEndpoint.openAI,
+      EModelEndpoint.custom,
       EModelEndpoint.chatGPTBrowser,
       EModelEndpoint.google,
       EModelEndpoint.bingAI,

client/src/hooks/useNewConvo.ts

@@ -7,7 +7,13 @@ import {
   useRecoilState,
   useRecoilValue,
 } from 'recoil';
-import type { TConversation, TSubmission, TPreset, TModelsConfig } from 'librechat-data-provider';
+import type {
+  TConversation,
+  TSubmission,
+  TPreset,
+  TModelsConfig,
+  TEndpointsConfig,
+} from 'librechat-data-provider';
 import { buildDefaultConvo, getDefaultEndpoint } from '~/utils';
 import { useDeleteFilesMutation } from '~/data-provider';
 import useOriginNavigate from './useOriginNavigate';
@@ -22,7 +28,7 @@ const useNewConvo = (index = 0) => {
   const [files, setFiles] = useRecoilState(store.filesByIndex(index));
   const setSubmission = useSetRecoilState<TSubmission | null>(store.submissionByIndex(index));
   const resetLatestMessage = useResetRecoilState(store.latestMessageFamily(index));
-  const { data: endpointsConfig = {} } = useGetEndpointsQuery();
+  const { data: endpointsConfig = {} as TEndpointsConfig } = useGetEndpointsQuery();
 
   const { mutateAsync } = useDeleteFilesMutation({
     onSuccess: () => {
@@ -62,6 +68,10 @@ const useNewConvo = (index = 0) => {
             endpointsConfig,
           });
 
+          if (!conversation.endpointType && endpointsConfig[defaultEndpoint]?.type) {
+            conversation.endpointType = endpointsConfig[defaultEndpoint]?.type;
+          }
+
           const models = modelsConfig?.[defaultEndpoint] ?? [];
           conversation = buildDefaultConvo({
             conversation,

client/src/hooks/useSSE.ts

@@ -1,3 +1,4 @@
+import { v4 } from 'uuid';
 import { useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 import {
@@ -5,7 +6,7 @@ import {
   SSE,
   createPayload,
   tMessageSchema,
-  tConversationSchema,
+  tConvoUpdateSchema,
   EModelEndpoint,
   removeNullishValues,
 } from 'librechat-data-provider';
@@ -152,10 +153,10 @@ export default function useSSE(submission: TSubmission | null, index = 0) {
 
     let update = {} as TConversation;
     setConversation((prevState) => {
-      update = tConversationSchema.parse({
+      update = tConvoUpdateSchema.parse({
         ...prevState,
         conversationId,
-      });
+      }) as TConversation;
 
       setStorage(update);
       return update;
@@ -207,10 +208,37 @@ export default function useSSE(submission: TSubmission | null, index = 0) {
     setIsSubmitting(false);
   };
 
-  const errorHandler = (data: TResData, submission: TSubmission) => {
+  const errorHandler = ({ data, submission }: { data?: TResData; submission: TSubmission }) => {
     const { messages, message } = submission;
 
-    if (!data.conversationId) {
+    const conversationId = message?.conversationId ?? submission?.conversationId;
+    const parseErrorResponse = (data: TResData | Partial<TMessage>) => {
+      const metadata = data['responseMessage'] ?? data;
+      return tMessageSchema.parse({
+        ...metadata,
+        error: true,
+        parentMessageId: message?.messageId,
+      });
+    };
+
+    if (!data) {
+      const convoId = conversationId ?? v4();
+      const errorResponse = parseErrorResponse({
+        text: 'Error connecting to server',
+        ...submission,
+        conversationId: convoId,
+      });
+      setMessages([...messages, message, errorResponse]);
+      newConversation({ template: { conversationId: convoId } });
+      setIsSubmitting(false);
+      return;
+    }
+
+    if (!conversationId && !data.conversationId) {
+      const convoId = v4();
+      const errorResponse = parseErrorResponse(data);
+      setMessages([...messages, message, errorResponse]);
+      newConversation({ template: { conversationId: convoId } });
       setIsSubmitting(false);
       return;
     }
@@ -318,19 +346,20 @@ export default function useSSE(submission: TSubmission | null, index = 0) {
       abortConversation(message?.conversationId ?? submission?.conversationId, submission);
 
     events.onerror = function (e: MessageEvent) {
-      console.log('error in opening conn.');
+      console.log('error in server stream.');
       startupConfig?.checkBalance && balanceQuery.refetch();
       events.close();
 
-      let data = {} as TResData;
+      let data: TResData | undefined = undefined;
       try {
-        data = JSON.parse(e.data);
+        data = JSON.parse(e.data) as TResData;
       } catch (error) {
         console.error(error);
         console.log(e);
       }
 
-      errorHandler(data, { ...submission, message });
+      errorHandler({ data, submission: { ...submission, message } });
+      events.oncancel();
     };
 
     setIsSubmitting(true);

client/src/hooks/useSetIndexOptions.ts

@@ -1,5 +1,11 @@
 import { useRecoilValue, useSetRecoilState } from 'recoil';
-import { TPreset, TPlugin, tConversationSchema, EModelEndpoint } from 'librechat-data-provider';
+import {
+  TPreset,
+  TPlugin,
+  tConvoUpdateSchema,
+  EModelEndpoint,
+  TConversation,
+} from 'librechat-data-provider';
 import type { TSetExample, TSetOption, TSetOptionsPayload } from '~/common';
 import usePresetIndexOptions from './usePresetIndexOptions';
 import { useChatContext } from '~/Providers/ChatContext';
@@ -36,11 +42,12 @@ const useSetOptions: TUseSetOptions = (preset = false) => {
       setLastBingSettings({ ...lastBingSettings, jailbreak: newValue });
     }
 
-    setConversation((prevState) =>
-      tConversationSchema.parse({
-        ...prevState,
-        ...update,
-      }),
+    setConversation(
+      (prevState) =>
+        tConvoUpdateSchema.parse({
+          ...prevState,
+          ...update,
+        }) as TConversation,
     );
   };
 
@@ -51,11 +58,12 @@ const useSetOptions: TUseSetOptions = (preset = false) => {
     currentExample[type] = { content: newValue };
     current[i] = currentExample;
     update['examples'] = current;
-    setConversation((prevState) =>
-      tConversationSchema.parse({
-        ...prevState,
-        ...update,
-      }),
+    setConversation(
+      (prevState) =>
+        tConvoUpdateSchema.parse({
+          ...prevState,
+          ...update,
+        }) as TConversation,
     );
   };
 
@@ -64,11 +72,12 @@ const useSetOptions: TUseSetOptions = (preset = false) => {
     const current = conversation?.examples?.slice() || [];
     current.push({ input: { content: '' }, output: { content: '' } });
     update['examples'] = current;
-    setConversation((prevState) =>
-      tConversationSchema.parse({
-        ...prevState,
-        ...update,
-      }),
+    setConversation(
+      (prevState) =>
+        tConvoUpdateSchema.parse({
+          ...prevState,
+          ...update,
+        }) as TConversation,
     );
   };
 
@@ -77,21 +86,23 @@ const useSetOptions: TUseSetOptions = (preset = false) => {
     const current = conversation?.examples?.slice() || [];
     if (current.length <= 1) {
       update['examples'] = [{ input: { content: '' }, output: { content: '' } }];
-      setConversation((prevState) =>
-        tConversationSchema.parse({
-          ...prevState,
-          ...update,
-        }),
+      setConversation(
+        (prevState) =>
+          tConvoUpdateSchema.parse({
+            ...prevState,
+            ...update,
+          }) as TConversation,
       );
       return;
     }
     current.pop();
     update['examples'] = current;
-    setConversation((prevState) =>
-      tConversationSchema.parse({
-        ...prevState,
-        ...update,
-      }),
+    setConversation(
+      (prevState) =>
+        tConvoUpdateSchema.parse({
+          ...prevState,
+          ...update,
+        }) as TConversation,
     );
   };
 
@@ -113,11 +124,12 @@ const useSetOptions: TUseSetOptions = (preset = false) => {
       lastModelUpdate.secondaryModel = newValue;
       setLastModel(lastModelUpdate);
     }
-    setConversation((prevState) =>
-      tConversationSchema.parse({
-        ...prevState,
-        agentOptions,
-      }),
+    setConversation(
+      (prevState) =>
+        tConvoUpdateSchema.parse({
+          ...prevState,
+          agentOptions,
+        }) as TConversation,
     );
   };
 
@@ -139,11 +151,12 @@ const useSetOptions: TUseSetOptions = (preset = false) => {
     }
 
     localStorage.setItem('lastSelectedTools', JSON.stringify(update['tools']));
-    setConversation((prevState) =>
-      tConversationSchema.parse({
-        ...prevState,
-        ...update,
-      }),
+    setConversation(
+      (prevState) =>
+        tConvoUpdateSchema.parse({
+          ...prevState,
+          ...update,
+        }) as TConversation,
     );
   };
 

client/src/routes/ChatRoute.tsx

@@ -9,6 +9,7 @@ import {
 import { useNewConvo, useConfigOverride } from '~/hooks';
 import ChatView from '~/components/Chat/ChatView';
 import useAuthRedirect from './useAuthRedirect';
+import { Spinner } from '~/components/svg';
 import store from '~/store';
 
 export default function ChatRoute() {
@@ -51,6 +52,10 @@ export default function ChatRoute() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [initialConvoQuery.data, modelsQuery.data, endpointsQuery.data]);
 
+  if (endpointsQuery.isLoading || modelsQuery.isLoading) {
+    return <Spinner className="m-auto dark:text-white" />;
+  }
+
   if (!isAuthenticated) {
     return null;
   }

client/src/store/endpoints.ts

@@ -11,6 +11,7 @@ const defaultConfig: TEndpointsConfig = {
   [EModelEndpoint.gptPlugins]: null,
   [EModelEndpoint.google]: null,
   [EModelEndpoint.anthropic]: null,
+  [EModelEndpoint.custom]: null,
 };
 
 const endpointsConfig = atom<TEndpointsConfig>({
@@ -55,6 +56,7 @@ const availableEndpoints = selector({
       'bingAI',
       'google',
       'anthropic',
+      'custom',
     ];
     const f = get(endpointsFilter);
     return endpoints.filter((endpoint) => f[endpoint]);

client/src/utils/buildDefaultConvo.ts

@@ -15,10 +15,12 @@ const buildDefaultConvo = ({
 }) => {
   const { lastSelectedModel, lastSelectedTools, lastBingSettings } = getLocalStorageItems();
   const { jailbreak, toneStyle } = lastBingSettings;
+  const { endpointType } = conversation;
 
   if (!endpoint) {
     return {
       ...conversation,
+      endpointType,
       endpoint,
     };
   }
@@ -44,13 +46,20 @@ const buildDefaultConvo = ({
     secondaryModels = [...availableModels];
   }
 
-  const convo = parseConvo(endpoint, lastConversationSetup, {
-    models: possibleModels,
-    secondaryModels,
+  const convo = parseConvo({
+    endpoint,
+    endpointType,
+    conversation: lastConversationSetup,
+    possibleValues: {
+      models: possibleModels,
+      secondaryModels,
+    },
   });
+
   const defaultConvo = {
     ...conversation,
     ...convo,
+    endpointType,
     endpoint,
   };
 

client/src/utils/cleanupPreset.ts

@@ -6,7 +6,7 @@ type TCleanupPreset = {
 };
 
 const cleanupPreset = ({ preset: _preset }: TCleanupPreset): TPreset => {
-  const { endpoint } = _preset;
+  const { endpoint, endpointType } = _preset;
   if (!endpoint) {
     console.error(`Unknown endpoint ${endpoint}`, _preset);
     return {
@@ -16,12 +16,13 @@ const cleanupPreset = ({ preset: _preset }: TCleanupPreset): TPreset => {
     };
   }
 
-  const parsedPreset = parseConvo(endpoint, _preset);
+  const parsedPreset = parseConvo({ endpoint, endpointType, conversation: _preset });
 
   return {
     presetId: _preset?.presetId ?? null,
     ...parsedPreset,
     endpoint,
+    endpointType,
     title: _preset?.title ?? 'New Preset',
   } as TPreset;
 };

client/src/utils/getDefaultEndpoint.ts

@@ -1,4 +1,9 @@
-import type { TConversation, TPreset, TEndpointsConfig } from 'librechat-data-provider';
+import type {
+  TConversation,
+  TPreset,
+  TEndpointsConfig,
+  EModelEndpoint,
+} from 'librechat-data-provider';
 import getLocalStorageItems from './getLocalStorageItems';
 import mapEndpoints from './mapEndpoints';
 
@@ -42,7 +47,7 @@ const getDefinedEndpoint = (endpointsConfig: TEndpointsConfig) => {
   return endpoints.find((e) => Object.hasOwn(endpointsConfig ?? {}, e));
 };
 
-const getDefaultEndpoint = ({ convoSetup, endpointsConfig }: TDefaultEndpoint) => {
+const getDefaultEndpoint = ({ convoSetup, endpointsConfig }: TDefaultEndpoint): EModelEndpoint => {
   return (
     getEndpointFromSetup(convoSetup, endpointsConfig) ||
     getEndpointFromLocalStorage(endpointsConfig) ||

client/src/utils/mapEndpoints.ts

@@ -1,20 +1,37 @@
 import { defaultEndpoints } from 'librechat-data-provider';
-import type { TEndpointsConfig } from 'librechat-data-provider';
+import type { EModelEndpoint, TEndpointsConfig } from 'librechat-data-provider';
 
-const getEndpointsFilter = (config: TEndpointsConfig) => {
+const getEndpointsFilter = (endpointsConfig: TEndpointsConfig) => {
   const filter: Record<string, boolean> = {};
-  for (const key of Object.keys(config)) {
-    filter[key] = !!config[key];
+  for (const key of Object.keys(endpointsConfig)) {
+    filter[key] = !!endpointsConfig[key];
   }
   return filter;
 };
 
-const getAvailableEndpoints = (filter: Record<string, boolean>) => {
-  const endpoints = defaultEndpoints;
-  return endpoints.filter((endpoint) => filter[endpoint]);
+const getAvailableEndpoints = (
+  filter: Record<string, boolean>,
+  endpointsConfig: TEndpointsConfig,
+) => {
+  const defaultSet = new Set(defaultEndpoints);
+  const availableEndpoints: EModelEndpoint[] = [];
+
+  for (const endpoint in endpointsConfig) {
+    // Check if endpoint is in the filter or its type is in defaultEndpoints
+    if (
+      filter[endpoint] ||
+      (endpointsConfig[endpoint]?.type && defaultSet.has(endpointsConfig[endpoint].type))
+    ) {
+      availableEndpoints.push(endpoint as EModelEndpoint);
+    }
+  }
+
+  return availableEndpoints;
 };
 
-export default function mapEndpoints(config: TEndpointsConfig) {
-  const filter = getEndpointsFilter(config);
-  return getAvailableEndpoints(filter).sort((a, b) => config[a].order - config[b].order);
+export default function mapEndpoints(endpointsConfig: TEndpointsConfig) {
+  const filter = getEndpointsFilter(endpointsConfig);
+  return getAvailableEndpoints(filter, endpointsConfig).sort(
+    (a, b) => (endpointsConfig[a]?.order ?? 0) - (endpointsConfig[b]?.order ?? 0),
+  );
 }

client/src/utils/presets.ts

@@ -26,7 +26,10 @@ export const getPresetTitle = (preset: TPreset) => {
   let modelInfo = model || '';
   let label = '';
 
-  if (endpoint && [EModelEndpoint.azureOpenAI, EModelEndpoint.openAI].includes(endpoint)) {
+  if (
+    endpoint &&
+    [EModelEndpoint.azureOpenAI, EModelEndpoint.openAI, EModelEndpoint.custom].includes(endpoint)
+  ) {
     label = chatGptLabel || '';
   } else if (endpoint && [EModelEndpoint.google, EModelEndpoint.anthropic].includes(endpoint)) {
     label = modelLabel || '';