From dd65dc02d00a8cb8173173b679197c0e8b7acc6b Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 7 May 2026 13:25:51 +0000
Subject: [PATCH] feat: add image generation as an ephemeral tool toggle in
 chat menu

Image generation was only reachable by explicitly adding a DALL-E/Flux/Gemini
tool to an agent. Add it as a first-class toggle in the chat input tools
dropdown alongside web search, code interpreter, file search, etc., so users
can enable it directly in any chat.

The toggle maps to the gemini_image_gen backend tool when enabled.

- data-provider: AgentCapabilities.image_gen, defaultAgentCapabilities,
  LocalStorageKeys.LAST_IMAGE_GEN_TOGGLE_, TEphemeralAgent.image_gen
- packages/api/agents: load.ts and added.ts push 'gemini_image_gen' when
  the ephemeral image_gen flag is set
- client: useAgentCapabilities exposes imageGenEnabled, BadgeRowContext
  exposes the imageGen toggle, ToolsDropdown adds the menu entry,
  ImageGen.tsx renders the active/pinned badge

https://claude.ai/code/session_014RgsxcUvbQBuNa1dA9vt61
---
 client/src/Providers/BadgeRowContext.tsx      | 21 +++++++
 client/src/components/Chat/Input/BadgeRow.tsx |  2 +
 client/src/components/Chat/Input/ImageGen.tsx | 26 +++++++++
 .../components/Chat/Input/ToolsDropdown.tsx   | 58 ++++++++++++++++++-
 .../src/hooks/Agents/useAgentCapabilities.ts  |  7 +++
 packages/api/src/agents/added.ts              |  5 ++
 packages/api/src/agents/load.ts               |  3 +
 packages/data-provider/src/config.ts          |  4 ++
 packages/data-provider/src/types.ts           |  1 +
 9 files changed, 124 insertions(+), 3 deletions(-)
 create mode 100644 client/src/components/Chat/Input/ImageGen.tsx

diff --git a/client/src/Providers/BadgeRowContext.tsx b/client/src/Providers/BadgeRowContext.tsx
index 025532f0c6a..a74ac0e7c01 100644
--- a/client/src/Providers/BadgeRowContext.tsx
+++ b/client/src/Providers/BadgeRowContext.tsx
@@ -18,6 +18,7 @@ interface BadgeRowContextType {
   agentsConfig?: TAgentsEndpoint | null;
   skills: ReturnType<typeof useToolToggle>;
   webSearch: ReturnType<typeof useToolToggle>;
+  imageGen: ReturnType<typeof useToolToggle>;
   artifacts: ReturnType<typeof useToolToggle>;
   fileSearch: ReturnType<typeof useToolToggle>;
   codeInterpreter: ReturnType<typeof useToolToggle>;
@@ -98,12 +99,14 @@ export default function BadgeRowProvider({
       const codeToggleKey = `${LocalStorageKeys.LAST_CODE_TOGGLE_}${storageSuffix}`;
       const webSearchToggleKey = `${LocalStorageKeys.LAST_WEB_SEARCH_TOGGLE_}${storageSuffix}`;
       const fileSearchToggleKey = `${LocalStorageKeys.LAST_FILE_SEARCH_TOGGLE_}${storageSuffix}`;
+      const imageGenToggleKey = `${LocalStorageKeys.LAST_IMAGE_GEN_TOGGLE_}${storageSuffix}`;
       const artifactsToggleKey = `${LocalStorageKeys.LAST_ARTIFACTS_TOGGLE_}${storageSuffix}`;
       const skillsToggleKey = `${LocalStorageKeys.LAST_SKILLS_TOGGLE_}${storageSuffix}`;
 
       const codeToggleValue = getTimestampedValue(codeToggleKey);
       const webSearchToggleValue = getTimestampedValue(webSearchToggleKey);
       const fileSearchToggleValue = getTimestampedValue(fileSearchToggleKey);
+      const imageGenToggleValue = getTimestampedValue(imageGenToggleKey);
       const artifactsToggleValue = getTimestampedValue(artifactsToggleKey);
       const skillsToggleValue = getTimestampedValue(skillsToggleKey);
 
@@ -133,6 +136,14 @@ export default function BadgeRowProvider({
         }
       }
 
+      if (imageGenToggleValue !== null) {
+        try {
+          initialValues[AgentCapabilities.image_gen] = JSON.parse(imageGenToggleValue);
+        } catch (e) {
+          console.error('Failed to parse image gen toggle value:', e);
+        }
+      }
+
       if (artifactsToggleValue !== null) {
         try {
           initialValues[AgentCapabilities.artifacts] = JSON.parse(artifactsToggleValue);
@@ -232,6 +243,15 @@ export default function BadgeRowProvider({
     isAuthenticated: true,
   });
 
+  /** ImageGen hook — toggle maps to gemini_image_gen tool server-side */
+  const imageGen = useToolToggle({
+    conversationId,
+    storageContextKey,
+    toolKey: AgentCapabilities.image_gen,
+    localStorageKey: LocalStorageKeys.LAST_IMAGE_GEN_TOGGLE_,
+    isAuthenticated: true,
+  });
+
   /** Artifacts hook - using a custom key since it's not a Tool but a capability */
   const artifacts = useToolToggle({
     conversationId,
@@ -255,6 +275,7 @@ export default function BadgeRowProvider({
   const value: BadgeRowContextType = {
     skills,
     webSearch,
+    imageGen,
     artifacts,
     fileSearch,
     agentsConfig,
diff --git a/client/src/components/Chat/Input/BadgeRow.tsx b/client/src/components/Chat/Input/BadgeRow.tsx
index 7b7140c9fb9..5b52008bb84 100644
--- a/client/src/components/Chat/Input/BadgeRow.tsx
+++ b/client/src/components/Chat/Input/BadgeRow.tsx
@@ -19,6 +19,7 @@ import { useChatBadges } from '~/hooks';
 import ToolDialogs from './ToolDialogs';
 import FileSearch from './FileSearch';
 import Artifacts from './Artifacts';
+import ImageGen from './ImageGen';
 import MCPSelect from './MCPSelect';
 import WebSearch from './WebSearch';
 import Skills from './Skills';
@@ -374,6 +375,7 @@ function BadgeRow({
             <WebSearch />
             <CodeInterpreter />
             <FileSearch />
+            <ImageGen />
             <Skills />
             <Artifacts />
             <MCPSelect />
diff --git a/client/src/components/Chat/Input/ImageGen.tsx b/client/src/components/Chat/Input/ImageGen.tsx
new file mode 100644
index 00000000000..bd14e93a4c9
--- /dev/null
+++ b/client/src/components/Chat/Input/ImageGen.tsx
@@ -0,0 +1,26 @@
+import React, { memo } from 'react';
+import { Image } from 'lucide-react';
+import { CheckboxButton } from '@librechat/client';
+import { useLocalize } from '~/hooks';
+import { useBadgeRowContext } from '~/Providers';
+
+function ImageGen() {
+  const localize = useLocalize();
+  const context = useBadgeRowContext();
+  const { toggleState: imageGen, debouncedChange, isPinned } = context?.imageGen ?? {};
+
+  return (
+    (imageGen || isPinned) && (
+      <CheckboxButton
+        className="max-w-fit"
+        checked={imageGen}
+        setValue={debouncedChange}
+        label={localize('com_ui_image_gen')}
+        isCheckedClassName="border-pink-600/40 bg-pink-500/10 hover:bg-pink-700/10"
+        icon={<Image className="icon-md" aria-hidden="true" />}
+      />
+    )
+  );
+}
+
+export default memo(ImageGen);
diff --git a/client/src/components/Chat/Input/ToolsDropdown.tsx b/client/src/components/Chat/Input/ToolsDropdown.tsx
index a0b969ce59b..728da94914f 100644
--- a/client/src/components/Chat/Input/ToolsDropdown.tsx
+++ b/client/src/components/Chat/Input/ToolsDropdown.tsx
@@ -1,7 +1,14 @@
 import React, { useState, useMemo, useCallback } from 'react';
 import * as Ariakit from '@ariakit/react';
 import { TooltipAnchor, DropdownPopup, PinIcon, VectorIcon } from '@librechat/client';
-import { Globe, ScrollText, Settings, Settings2, TerminalSquareIcon } from 'lucide-react';
+import {
+  Globe,
+  Image,
+  ScrollText,
+  Settings,
+  Settings2,
+  TerminalSquareIcon,
+} from 'lucide-react';
 import type { MenuItemProps } from '~/common';
 import {
   AuthType,
@@ -26,8 +33,14 @@ const ToolsDropdown = ({ disabled }: ToolsDropdownProps) => {
   const context = useBadgeRowContext();
   const { data: startupConfig } = useGetStartupConfig();
 
-  const { codeEnabled, webSearchEnabled, artifactsEnabled, fileSearchEnabled, skillsEnabled } =
-    useAgentCapabilities(context?.agentsConfig?.capabilities ?? defaultAgentCapabilities);
+  const {
+    codeEnabled,
+    webSearchEnabled,
+    imageGenEnabled,
+    artifactsEnabled,
+    fileSearchEnabled,
+    skillsEnabled,
+  } = useAgentCapabilities(context?.agentsConfig?.capabilities ?? defaultAgentCapabilities);
 
   const canUseWebSearch = useHasAccess({
     permissionType: PermissionTypes.WEB_SEARCH,
@@ -59,6 +72,7 @@ const ToolsDropdown = ({ disabled }: ToolsDropdownProps) => {
   const {
     skills,
     webSearch,
+    imageGen,
     artifacts,
     fileSearch,
     mcpServerManager,
@@ -74,6 +88,7 @@ const ToolsDropdown = ({ disabled }: ToolsDropdownProps) => {
     authData: webSearchAuthData,
   } = webSearch ?? {};
   const { isPinned: isCodePinned, setIsPinned: setIsCodePinned } = codeInterpreter ?? {};
+  const { isPinned: isImageGenPinned, setIsPinned: setIsImageGenPinned } = imageGen ?? {};
   const { isPinned: isFileSearchPinned, setIsPinned: setIsFileSearchPinned } = fileSearch ?? {};
   const { isPinned: isArtifactsPinned, setIsPinned: setIsArtifactsPinned } = artifacts ?? {};
   const { isPinned: isSkillsPinned, setIsPinned: setIsSkillsPinned } = skills ?? {};
@@ -99,6 +114,11 @@ const ToolsDropdown = ({ disabled }: ToolsDropdownProps) => {
     fileSearch?.debouncedChange({ value: newValue });
   }, [fileSearch]);
 
+  const handleImageGenToggle = useCallback(() => {
+    const newValue = !imageGen?.toggleState;
+    imageGen?.debouncedChange({ value: newValue });
+  }, [imageGen]);
+
   const handleArtifactsToggle = useCallback(() => {
     const currentState = artifacts?.toggleState;
     if (!currentState || currentState === '') {
@@ -221,6 +241,38 @@ const ToolsDropdown = ({ disabled }: ToolsDropdownProps) => {
     });
   }
 
+  if (imageGenEnabled) {
+    dropdownItems.push({
+      onClick: handleImageGenToggle,
+      hideOnClick: false,
+      render: (props) => (
+        <div {...props}>
+          <div className="flex items-center gap-2">
+            <Image className="icon-md" aria-hidden="true" />
+            <span>{localize('com_ui_image_gen')}</span>
+          </div>
+          <button
+            type="button"
+            onClick={(e) => {
+              e.stopPropagation();
+              setIsImageGenPinned?.(!isImageGenPinned);
+            }}
+            className={cn(
+              'rounded p-1 transition-all duration-200',
+              'hover:bg-surface-secondary hover:shadow-sm',
+              !isImageGenPinned && 'text-text-secondary hover:text-text-primary',
+            )}
+            aria-label={isImageGenPinned ? localize('com_ui_unpin') : localize('com_ui_pin')}
+          >
+            <div className="h-4 w-4">
+              <PinIcon unpin={isImageGenPinned} />
+            </div>
+          </button>
+        </div>
+      ),
+    });
+  }
+
   if (canUseSkills && skillsEnabled) {
     dropdownItems.push({
       onClick: handleSkillsToggle,
diff --git a/client/src/hooks/Agents/useAgentCapabilities.ts b/client/src/hooks/Agents/useAgentCapabilities.ts
index 170d8f78215..ef68dab1482 100644
--- a/client/src/hooks/Agents/useAgentCapabilities.ts
+++ b/client/src/hooks/Agents/useAgentCapabilities.ts
@@ -9,6 +9,7 @@ interface AgentCapabilitiesResult {
   contextEnabled: boolean;
   fileSearchEnabled: boolean;
   webSearchEnabled: boolean;
+  imageGenEnabled: boolean;
   codeEnabled: boolean;
   skillsEnabled: boolean;
   deferredToolsEnabled: boolean;
@@ -53,6 +54,11 @@ export default function useAgentCapabilities(
     [capabilities],
   );
 
+  const imageGenEnabled = useMemo(
+    () => capabilities?.includes(AgentCapabilities.image_gen) ?? false,
+    [capabilities],
+  );
+
   const codeEnabled = useMemo(
     () => capabilities?.includes(AgentCapabilities.execute_code) ?? false,
     [capabilities],
@@ -82,6 +88,7 @@ export default function useAgentCapabilities(
     contextEnabled,
     artifactsEnabled,
     webSearchEnabled,
+    imageGenEnabled,
     fileSearchEnabled,
     deferredToolsEnabled,
     programmaticToolsEnabled,
diff --git a/packages/api/src/agents/added.ts b/packages/api/src/agents/added.ts
index 587f3bc437e..fe0f36c9bad 100644
--- a/packages/api/src/agents/added.ts
+++ b/packages/api/src/agents/added.ts
@@ -68,6 +68,7 @@ export async function loadAddedAgent(
       execute_code?: boolean;
       file_search?: boolean;
       web_search?: boolean;
+      image_gen?: boolean;
       artifacts?: unknown;
     };
     [key: string]: unknown;
@@ -121,6 +122,7 @@ export async function loadAddedAgent(
         execute_code?: boolean;
         file_search?: boolean;
         web_search?: boolean;
+        image_gen?: boolean;
         artifacts?: unknown;
       }
     | undefined;
@@ -159,6 +161,9 @@ export async function loadAddedAgent(
   if (ephemeralAgent?.web_search === true || modelSpec?.webSearch === true) {
     tools.push(Tools.web_search);
   }
+  if (ephemeralAgent?.image_gen === true) {
+    tools.push('gemini_image_gen');
+  }
 
   const addedServers = new Set<string>();
   for (const mcpServer of mcpServers) {
diff --git a/packages/api/src/agents/load.ts b/packages/api/src/agents/load.ts
index 05746d1195f..9aeb1f176a5 100644
--- a/packages/api/src/agents/load.ts
+++ b/packages/api/src/agents/load.ts
@@ -71,6 +71,9 @@ export async function loadEphemeralAgent(
   if (ephemeralAgent?.web_search === true || modelSpec?.webSearch === true) {
     tools.push(Tools.web_search);
   }
+  if (ephemeralAgent?.image_gen === true) {
+    tools.push('gemini_image_gen');
+  }
 
   const addedServers = new Set<string>();
   if (mcpServers.size > 0) {
diff --git a/packages/data-provider/src/config.ts b/packages/data-provider/src/config.ts
index d8fc071c6f3..d0d59714cc5 100644
--- a/packages/data-provider/src/config.ts
+++ b/packages/data-provider/src/config.ts
@@ -351,6 +351,7 @@ export enum AgentCapabilities {
   execute_code = 'execute_code',
   file_search = 'file_search',
   web_search = 'web_search',
+  image_gen = 'image_gen',
   artifacts = 'artifacts',
   subagents = 'subagents',
   actions = 'actions',
@@ -442,6 +443,7 @@ export const defaultAgentCapabilities = [
   AgentCapabilities.execute_code,
   AgentCapabilities.file_search,
   AgentCapabilities.web_search,
+  AgentCapabilities.image_gen,
   AgentCapabilities.artifacts,
   AgentCapabilities.subagents,
   AgentCapabilities.actions,
@@ -2201,6 +2203,8 @@ export enum LocalStorageKeys {
   LAST_WEB_SEARCH_TOGGLE_ = 'LAST_WEB_SEARCH_TOGGLE_',
   /** Last checked toggle for File Search per conversation ID */
   LAST_FILE_SEARCH_TOGGLE_ = 'LAST_FILE_SEARCH_TOGGLE_',
+  /** Last checked toggle for Image Generation per conversation ID */
+  LAST_IMAGE_GEN_TOGGLE_ = 'LAST_IMAGE_GEN_TOGGLE_',
   /** Last checked toggle for Artifacts per conversation ID */
   LAST_ARTIFACTS_TOGGLE_ = 'LAST_ARTIFACTS_TOGGLE_',
   /** Last checked toggle for Skills per conversation ID */
diff --git a/packages/data-provider/src/types.ts b/packages/data-provider/src/types.ts
index 72b17f0dcdc..1faabdce238 100644
--- a/packages/data-provider/src/types.ts
+++ b/packages/data-provider/src/types.ts
@@ -101,6 +101,7 @@ export type TEphemeralAgent = {
   web_search?: boolean;
   file_search?: boolean;
   execute_code?: boolean;
+  image_gen?: boolean;
   artifacts?: string;
   skills?: boolean;
 };