diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 008487a7f..25c467488 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -79,7 +79,6 @@
       "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.28.5",
@@ -1312,7 +1311,6 @@
       "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.4.tgz",
       "integrity": "sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@floating-ui/core": "^1.7.3",
         "@floating-ui/utils": "^0.2.10"
@@ -4027,7 +4025,8 @@
       "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
       "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
@@ -4189,7 +4188,6 @@
       "integrity": "sha512-zWW5KPngR/yvakJgGOmZ5vTBemDoSqF3AcV/LrO5u5wTWyEAVVh+IT39G4gtyAkh3CtTZs8aX/yRM82OfzHJRg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "undici-types": "~7.16.0"
       }
@@ -4205,7 +4203,6 @@
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.26.tgz",
       "integrity": "sha512-RFA/bURkcKzx/X9oumPG9Vp3D3JUgus/d0b67KB0t5S/raciymilkOa66olh78MUI92QLbEJevO7rvqU/kjwKA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.0.2"
@@ -4216,7 +4213,6 @@
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.7.tgz",
       "integrity": "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==",
       "license": "MIT",
-      "peer": true,
       "peerDependencies": {
         "@types/react": "^18.0.0"
       }
@@ -4288,7 +4284,6 @@
       "integrity": "sha512-tK3GPFWbirvNgsNKto+UmB/cRtn6TZfyw0D6IKrW55n6Vbs7KJoZtI//kpTKzE/DUmmnAFD8/Ca46s7Obs92/w==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.46.4",
         "@typescript-eslint/types": "8.46.4",
@@ -4523,7 +4518,6 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -4878,7 +4872,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.8.25",
         "caniuse-lite": "^1.0.30001754",
@@ -5316,7 +5309,8 @@
       "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
       "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/domexception": {
       "version": "4.0.0",
@@ -5357,8 +5351,7 @@
       "version": "8.6.0",
       "resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.6.0.tgz",
       "integrity": "sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/embla-carousel-autoplay": {
       "version": "8.6.0",
@@ -5559,7 +5552,6 @@
       "integrity": "sha512-BhHmn2yNOFA9H9JmmIVKJmd288g9hrVRDkdoIgRCRuSySRUHH7r/DI6aAXW9T1WwUuY3DFgrcaqB+deURBLR5g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -6664,7 +6656,6 @@
       "integrity": "sha512-NIy3oAFp9shda19hy4HK0HRTWKtPJmGdnvywu01nOqNC2vZg+Z+fvJDxpMQA88eb2I9EcafcdjYgsDthnYTvGw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@jest/core": "^29.7.0",
         "@jest/types": "^29.6.3",
@@ -7819,6 +7810,7 @@
       "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "lz-string": "bin/bin.js"
       }
@@ -8406,6 +8398,7 @@
       "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "ansi-regex": "^5.0.1",
         "ansi-styles": "^5.0.0",
@@ -8421,6 +8414,7 @@
       "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=10"
       },
@@ -8521,7 +8515,6 @@
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
       "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -8534,7 +8527,6 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
       "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0",
         "scheduler": "^0.23.2"
@@ -9143,7 +9135,6 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -9285,7 +9276,6 @@
       "integrity": "sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@cspotcode/source-map-support": "^0.8.0",
         "@tsconfig/node10": "^1.0.7",
@@ -9372,7 +9362,6 @@
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -9501,7 +9490,6 @@
       "integrity": "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "^0.27.0",
         "fdir": "^6.5.0",
@@ -9595,7 +9583,6 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
diff --git a/frontend/src/components/Chat/ChatInputArea.styles.ts b/frontend/src/components/Chat/ChatInputArea.styles.ts
index 75b67ff53..b147da5f7 100644
--- a/frontend/src/components/Chat/ChatInputArea.styles.ts
+++ b/frontend/src/components/Chat/ChatInputArea.styles.ts
@@ -79,6 +79,7 @@ export const useChatInputAreaStyles = makeStyles({
     display: 'flex',
     gap: tokens.spacingHorizontalXS,
     marginRight: tokens.spacingHorizontalS,
+    alignItems: 'center',
   },
   iconButtonsRight: {
     display: 'flex',
@@ -131,4 +132,53 @@ export const useChatInputAreaStyles = makeStyles({
     color: tokens.colorPaletteRedForeground1,
     fontWeight: tokens.fontWeightSemibold as unknown as string,
   },
+  conversionBarBottom: {
+    display: 'flex',
+    alignItems: 'flex-start',
+    gap: tokens.spacingHorizontalXS,
+    padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalL}`,
+    paddingLeft: `calc(${tokens.spacingHorizontalL} + 32px + ${tokens.spacingHorizontalXS} + 32px + ${tokens.spacingHorizontalS})`,
+    borderTop: `1px solid ${tokens.colorNeutralStroke1}`,
+    backgroundColor: tokens.colorNeutralBackground4,
+    overflow: 'hidden',
+  },
+  conversionLabel: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: tokens.spacingHorizontalXXS,
+    flex: 1,
+    minWidth: 0,
+    overflow: 'hidden',
+  },
+  conversionText: {
+    whiteSpace: 'pre-wrap',
+    wordBreak: 'break-word',
+    fontFamily: tokens.fontFamilyMonospace,
+    fontSize: tokens.fontSizeBase200,
+    minWidth: 0,
+    flex: 1,
+    maxHeight: '80px',
+    overflowY: 'auto',
+  },
+  originalBadge: {
+    display: 'inline-block',
+    padding: `0 ${tokens.spacingHorizontalXS}`,
+    marginRight: tokens.spacingHorizontalXS,
+    borderRadius: tokens.borderRadiusSmall,
+    backgroundColor: tokens.colorPaletteBlueBackground2,
+    color: tokens.colorPaletteBlueForeground2,
+    fontSize: tokens.fontSizeBase100,
+    fontWeight: tokens.fontWeightSemibold as unknown as string,
+    flexShrink: 0,
+  },
+  convertedBadge: {
+    display: 'inline-block',
+    padding: `0 ${tokens.spacingHorizontalXS}`,
+    borderRadius: tokens.borderRadiusSmall,
+    backgroundColor: tokens.colorPaletteGreenBackground2,
+    color: tokens.colorPaletteGreenForeground2,
+    fontSize: tokens.fontSizeBase100,
+    fontWeight: tokens.fontWeightSemibold as unknown as string,
+    flexShrink: 0,
+  },
 })
diff --git a/frontend/src/components/Chat/ChatInputArea.test.tsx b/frontend/src/components/Chat/ChatInputArea.test.tsx
index c2712acdd..777be2dd0 100644
--- a/frontend/src/components/Chat/ChatInputArea.test.tsx
+++ b/frontend/src/components/Chat/ChatInputArea.test.tsx
@@ -26,12 +26,31 @@ describe("ChatInputArea", () => {
   it("should render input area and send button", () => {
     render(
       <TestWrapper>
-        <ChatInputArea {...defaultProps} />
+        <ChatInputArea {...defaultProps} onToggleConverterPanel={jest.fn()} />
       </TestWrapper>
     );
 
     expect(screen.getByRole("textbox")).toBeInTheDocument();
     expect(getSendButton()).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /convert/i })).toBeInTheDocument();
+  });
+
+  it("should call converter panel toggle handler when convert button is clicked", async () => {
+    const user = userEvent.setup();
+    const onToggleConverterPanel = jest.fn();
+
+    render(
+      <TestWrapper>
+        <ChatInputArea
+          {...defaultProps}
+          onToggleConverterPanel={onToggleConverterPanel}
+        />
+      </TestWrapper>
+    );
+
+    await user.click(screen.getByRole("button", { name: /convert/i }));
+
+    expect(onToggleConverterPanel).toHaveBeenCalledTimes(1);
   });
 
   it("should call onSend with input value when send button clicked", async () => {
diff --git a/frontend/src/components/Chat/ChatInputArea.tsx b/frontend/src/components/Chat/ChatInputArea.tsx
index 12ef7b3d2..dd8850d92 100644
--- a/frontend/src/components/Chat/ChatInputArea.tsx
+++ b/frontend/src/components/Chat/ChatInputArea.tsx
@@ -1,12 +1,12 @@
 import { useState, useEffect, useLayoutEffect, useRef, forwardRef, useImperativeHandle, KeyboardEvent } from 'react'
 import {
   Button,
-  tokens,
   Caption1,
   Tooltip,
   Text,
+  tokens,
 } from '@fluentui/react-components'
-import { SendRegular, AttachRegular, DismissRegular, InfoRegular, AddRegular, CopyRegular, WarningRegular, SettingsRegular } from '@fluentui/react-icons'
+import { SendRegular, AttachRegular, DismissRegular, InfoRegular, AddRegular, CopyRegular, WarningRegular, SettingsRegular, ArrowShuffleRegular } from '@fluentui/react-icons'
 import { MessageAttachment, TargetInstance } from '../../types'
 import { useChatInputAreaStyles } from './ChatInputArea.styles'
 
@@ -68,9 +68,16 @@ interface ChatInputAreaProps {
   attackOperator?: string
   noTargetSelected?: boolean
   onConfigureTarget?: () => void
+  onToggleConverterPanel?: () => void
+  isConverterPanelOpen?: boolean
+  onInputChange?: (value: string) => void
+  onAttachmentsChange?: (types: string[]) => void
+  convertedValue?: string | null
+  originalValue?: string | null
+  onClearConversion?: () => void
 }
 
-const ChatInputArea = forwardRef<ChatInputAreaHandle, ChatInputAreaProps>(function ChatInputArea({ onSend, disabled = false, activeTarget, singleTurnLimitReached = false, onNewConversation, operatorLocked = false, crossTargetLocked = false, onUseAsTemplate, attackOperator, noTargetSelected = false, onConfigureTarget }, ref) {
+const ChatInputArea = forwardRef<ChatInputAreaHandle, ChatInputAreaProps>(function ChatInputArea({ onSend, disabled = false, activeTarget, singleTurnLimitReached = false, onNewConversation, operatorLocked = false, crossTargetLocked = false, onUseAsTemplate, attackOperator, noTargetSelected = false, onConfigureTarget, onToggleConverterPanel, isConverterPanelOpen = false, onInputChange, onAttachmentsChange, convertedValue, originalValue, onClearConversion }, ref) {
   const styles = useChatInputAreaStyles()
   const [input, setInput] = useState('')
   const [attachments, setAttachments] = useState<MessageAttachment[]>([])
@@ -126,9 +133,10 @@ const ChatInputArea = forwardRef<ChatInputAreaHandle, ChatInputAreaProps>(functi
 
   const handleSend = () => {
     if ((input || attachments.length > 0) && !disabled) {
-      onSend(input, undefined, attachments)
+      onSend(input, convertedValue ?? undefined, attachments)
       setInput('')
       setAttachments([])
+      onClearConversion?.()
       if (textareaRef.current) {
         textareaRef.current.style.height = 'auto'
       }
@@ -156,7 +164,13 @@ const ChatInputArea = forwardRef<ChatInputAreaHandle, ChatInputAreaProps>(functi
       textareaRef.current.style.height = 'auto'
       textareaRef.current.style.height = Math.min(textareaRef.current.scrollHeight, 96) + 'px'
     }
-  }, [input])
+    onInputChange?.(input)
+  }, [input, onInputChange])
+
+  useEffect(() => {
+    const types = [...new Set(attachments.map((a) => a.type))]
+    onAttachmentsChange?.(types)
+  }, [attachments, onAttachmentsChange])
 
   const handleInput = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     setInput(e.target.value)
@@ -261,7 +275,19 @@ const ChatInputArea = forwardRef<ChatInputAreaHandle, ChatInputAreaProps>(functi
               disabled={disabled}
               title="Attach files"
             />
+            <Button
+              className={styles.iconButton}
+              appearance={isConverterPanelOpen ? 'primary' : 'subtle'}
+              icon={<ArrowShuffleRegular />}
+              onClick={onToggleConverterPanel}
+              disabled={disabled || !onToggleConverterPanel}
+              data-testid="toggle-converter-panel-btn"
+              title="Toggle converter panel"
+            />
             </div>
+          {convertedValue && (
+            <span className={styles.originalBadge} data-testid="original-banner">Original</span>
+          )}
           <textarea
             ref={textareaRef}
             className={styles.textInput}
@@ -271,6 +297,7 @@ const ChatInputArea = forwardRef<ChatInputAreaHandle, ChatInputAreaProps>(functi
             onKeyDown={handleKeyDown}
             disabled={disabled}
             rows={1}
+            data-testid="chat-input"
           />
           <div className={styles.iconButtonsRight}>
             {activeTarget && activeTarget.supports_multi_turn === false && (
@@ -293,6 +320,22 @@ const ChatInputArea = forwardRef<ChatInputAreaHandle, ChatInputAreaProps>(functi
             />
           </div>
           </div>
+          {convertedValue && (
+            <div className={styles.conversionBarBottom} data-testid="converted-indicator">
+              <span className={styles.convertedBadge}>Converted</span>
+              <Text size={200} className={styles.conversionText}>
+                {convertedValue}
+              </Text>
+              <Button
+                appearance="subtle"
+                size="small"
+                onClick={onClearConversion}
+                data-testid="clear-conversion-btn"
+              >
+                ✕
+              </Button>
+            </div>
+          )}
         </div>
         </>
         )}
diff --git a/frontend/src/components/Chat/ChatWindow.test.tsx b/frontend/src/components/Chat/ChatWindow.test.tsx
index ec446d81f..e8f9151e7 100644
--- a/frontend/src/components/Chat/ChatWindow.test.tsx
+++ b/frontend/src/components/Chat/ChatWindow.test.tsx
@@ -3,7 +3,7 @@ import userEvent from "@testing-library/user-event";
 import { FluentProvider, webLightTheme } from "@fluentui/react-components";
 import ChatWindow from "./ChatWindow";
 import { Message, TargetInfo, TargetInstance } from "../../types";
-import { attacksApi } from "../../services/api";
+import { attacksApi, convertersApi } from "../../services/api";
 import * as messageMapper from "../../utils/messageMapper";
 
 jest.mock("../../services/api", () => ({
@@ -16,6 +16,13 @@ jest.mock("../../services/api", () => ({
     createConversation: jest.fn(),
     changeMainConversation: jest.fn(),
   },
+  convertersApi: {
+    listConverterCatalog: jest.fn(),
+    listConverters: jest.fn(),
+    getConverter: jest.fn(),
+    createConverter: jest.fn(),
+    previewConversion: jest.fn(),
+  },
   labelsApi: {
     getLabels: jest.fn().mockImplementation(() => new Promise(() => {})),
   },
@@ -27,6 +34,7 @@ jest.mock("../../utils/messageMapper", () => ({
 }));
 
 const mockedAttacksApi = attacksApi as jest.Mocked<typeof attacksApi>;
+const mockedConvertersApi = convertersApi as jest.Mocked<typeof convertersApi>;
 const mockedMapper = messageMapper as jest.Mocked<typeof messageMapper>;
 
 const TestWrapper: React.FC<{ children: React.ReactNode }> = ({
@@ -241,6 +249,12 @@ describe("ChatWindow Integration", () => {
       conversations: [],
       main_conversation_id: null,
     });
+    mockedConvertersApi.listConverters.mockResolvedValue({
+      items: [],
+    });
+    mockedConvertersApi.listConverterCatalog.mockResolvedValue({
+      items: [],
+    });
   });
 
   // -----------------------------------------------------------------------
@@ -2096,6 +2110,257 @@ describe("ChatWindow Integration", () => {
     });
   });
 
+  it("should toggle converter panel when convert button is clicked", async () => {
+    render(
+      <TestWrapper>
+        <ChatWindow
+          {...defaultProps}
+          attackResultId="ar-converter-panel"
+          conversationId="conv-converter-panel"
+          activeConversationId="conv-converter-panel"
+          relatedConversationCount={0}
+        />
+      </TestWrapper>
+    );
+
+    expect(screen.queryByTestId("converter-panel")).not.toBeInTheDocument();
+
+    const toggleBtn = screen.getByTestId("toggle-converter-panel-btn");
+    await userEvent.click(toggleBtn);
+
+    await waitFor(() => {
+      expect(screen.getByTestId("converter-panel")).toBeInTheDocument();
+    });
+
+    await userEvent.click(toggleBtn);
+
+    await waitFor(() => {
+      expect(screen.queryByTestId("converter-panel")).not.toBeInTheDocument();
+    });
+  });
+
+  it("should load and display converters in the converter panel", async () => {
+    mockedConvertersApi.listConverterCatalog.mockResolvedValue({
+      items: [
+        {
+          converter_type: "Base64Converter",
+          supported_input_types: ["text"],
+          supported_output_types: ["text"],
+          parameters: [],
+        },
+      ],
+    });
+
+    render(
+      <TestWrapper>
+        <ChatWindow
+          {...defaultProps}
+          attackResultId="ar-converter-list"
+          conversationId="conv-converter-list"
+          activeConversationId="conv-converter-list"
+          relatedConversationCount={0}
+        />
+      </TestWrapper>
+    );
+
+    await userEvent.click(screen.getByTestId("toggle-converter-panel-btn"));
+
+    await waitFor(() => {
+      expect(screen.getByTestId("converter-panel-list")).toBeInTheDocument();
+      expect(screen.getByTestId("converter-panel-select")).toBeInTheDocument();
+      expect(screen.getByTestId("converter-item-Base64Converter")).toBeInTheDocument();
+      expect(screen.getByText("In:")).toBeInTheDocument();
+      expect(screen.getByText("Out:")).toBeInTheDocument();
+      expect(screen.getByTestId("converter-output")).toBeInTheDocument();
+      expect(screen.getByTestId("converter-preview-btn")).toBeInTheDocument();
+      expect(screen.getByText("Converted output will appear here.")).toBeInTheDocument();
+      // No params section when parameters is empty
+      expect(screen.queryByTestId("converter-params")).not.toBeInTheDocument();
+    });
+  });
+
+  it("should show parameter form when converter has parameters", async () => {
+    mockedConvertersApi.listConverterCatalog.mockResolvedValue({
+      items: [
+        {
+          converter_type: "Base64Converter",
+          supported_input_types: ["text"],
+          supported_output_types: ["text"],
+          parameters: [
+            {
+              name: "encoding_func",
+              type_name: "Literal['b64encode', 'urlsafe_b64encode']",
+              required: false,
+              default_value: "b64encode",
+              choices: ["b64encode", "urlsafe_b64encode"],
+            },
+          ],
+        },
+      ],
+    });
+
+    render(
+      <TestWrapper>
+        <ChatWindow
+          {...defaultProps}
+          attackResultId="ar-converter-params"
+          conversationId="conv-converter-params"
+          activeConversationId="conv-converter-params"
+          relatedConversationCount={0}
+        />
+      </TestWrapper>
+    );
+
+    await userEvent.click(screen.getByTestId("toggle-converter-panel-btn"));
+
+    await waitFor(() => {
+      expect(screen.getByTestId("converter-params")).toBeInTheDocument();
+      expect(screen.getByTestId("param-encoding_func")).toBeInTheDocument();
+      expect(screen.getByText("Parameters")).toBeInTheDocument();
+    });
+  });
+
+  it("should preview conversion when Preview button is clicked", async () => {
+    mockedConvertersApi.listConverterCatalog.mockResolvedValue({
+      items: [
+        {
+          converter_type: "Base64Converter",
+          supported_input_types: ["text"],
+          supported_output_types: ["text"],
+          parameters: [],
+        },
+      ],
+    });
+    mockedConvertersApi.createConverter.mockResolvedValue({
+      converter_id: "test-conv-id",
+      converter_type: "Base64Converter",
+    });
+    mockedConvertersApi.previewConversion.mockResolvedValue({
+      converted_value: "aGVsbG8=",
+    });
+
+    render(
+      <TestWrapper>
+        <ChatWindow
+          {...defaultProps}
+          attackResultId="ar-converter-preview"
+          conversationId="conv-converter-preview"
+          activeConversationId="conv-converter-preview"
+          relatedConversationCount={0}
+        />
+      </TestWrapper>
+    );
+
+    // Type in the chat input textarea first
+    const chatInput = screen.getByTestId("chat-input");
+    await userEvent.type(chatInput, "hello");
+
+    // Open converter panel
+    await userEvent.click(screen.getByTestId("toggle-converter-panel-btn"));
+
+    await waitFor(() => {
+      expect(screen.getByTestId("converter-preview-btn")).toBeInTheDocument();
+    });
+
+    // Click Preview — should use chat input text
+    await userEvent.click(screen.getByTestId("converter-preview-btn"));
+
+    await waitFor(() => {
+      expect(screen.getByTestId("converter-preview-result")).toBeInTheDocument();
+      expect(screen.getByText("aGVsbG8=")).toBeInTheDocument();
+    });
+
+    expect(mockedConvertersApi.createConverter).toHaveBeenCalledWith({
+      type: "Base64Converter",
+      params: {},
+    });
+    expect(mockedConvertersApi.previewConversion).toHaveBeenCalledWith({
+      original_value: "hello",
+      converter_ids: ["test-conv-id"],
+    });
+  });
+
+  it("should switch converter details when a different dropdown option is selected", async () => {
+    mockedConvertersApi.listConverterCatalog.mockResolvedValue({
+      items: [
+        {
+          converter_type: "Base64Converter",
+          supported_input_types: ["text"],
+          supported_output_types: ["text"],
+          parameters: [],
+        },
+        {
+          converter_type: "CharSwapConverter",
+          supported_input_types: ["text"],
+          supported_output_types: ["text"],
+          parameters: [],
+        },
+      ],
+    });
+
+    render(
+      <TestWrapper>
+        <ChatWindow
+          {...defaultProps}
+          attackResultId="ar-converter-select"
+          conversationId="conv-converter-select"
+          activeConversationId="conv-converter-select"
+          relatedConversationCount={0}
+        />
+      </TestWrapper>
+    );
+
+    await userEvent.click(screen.getByTestId("toggle-converter-panel-btn"));
+
+    // Wait for initial render with first converter selected
+    await waitFor(() => {
+      expect(screen.getByTestId("converter-item-Base64Converter")).toBeInTheDocument();
+    });
+
+    // Click combobox to open the dropdown listbox
+    const input = screen.getByRole("combobox");
+    await userEvent.click(input);
+
+    // Find and click the second converter option
+    const option = await screen.findByRole("option", { name: /CharSwapConverter/ });
+    await userEvent.click(option);
+
+    await waitFor(() => {
+      expect(screen.getByTestId("converter-item-CharSwapConverter")).toBeInTheDocument();
+    });
+  }, 15000);
+
+  it("should allow converter and conversation panels to be open at the same time", async () => {
+    mockedAttacksApi.getMessages.mockResolvedValue({ messages: [] });
+    mockedAttacksApi.getConversations.mockResolvedValue({
+      main_conversation_id: "conv-both-panels",
+      conversations: [
+        { conversation_id: "conv-both-panels", is_main: true, message_count: 1, created_at: "2026-01-01T00:00:00Z" },
+      ],
+    });
+    mockedMapper.backendMessagesToFrontend.mockReturnValue([]);
+
+    render(
+      <TestWrapper>
+        <ChatWindow
+          {...defaultProps}
+          attackResultId="ar-both-panels"
+          conversationId="conv-both-panels"
+          activeConversationId="conv-both-panels"
+          relatedConversationCount={0}
+        />
+      </TestWrapper>
+    );
+
+    await userEvent.click(screen.getByTestId("toggle-converter-panel-btn"));
+    await userEvent.click(screen.getByTestId("toggle-panel-btn"));
+
+    await waitFor(() => {
+      expect(screen.getByTestId("converter-panel")).toBeInTheDocument();
+      expect(screen.getByTestId("conversation-panel")).toBeInTheDocument();
+    });
+  });
+
   // -----------------------------------------------------------------------
   // Copy to input with attachments
   // -----------------------------------------------------------------------
diff --git a/frontend/src/components/Chat/ChatWindow.tsx b/frontend/src/components/Chat/ChatWindow.tsx
index e7e57cbd6..4739c865a 100644
--- a/frontend/src/components/Chat/ChatWindow.tsx
+++ b/frontend/src/components/Chat/ChatWindow.tsx
@@ -9,6 +9,7 @@ import { AddRegular, PanelRightRegular } from '@fluentui/react-icons'
 import MessageList from './MessageList'
 import ChatInputArea from './ChatInputArea'
 import ConversationPanel from './ConversationPanel'
+import ConverterPanel from './ConverterPanel'
 import LabelsBar from '../Labels/LabelsBar'
 import type { ChatInputAreaHandle } from './ChatInputArea'
 import { attacksApi } from '../../services/api'
@@ -65,6 +66,12 @@ export default function ChatWindow({
   const [loadedConversationId, setLoadedConversationId] = useState<string | null>(null)
   const isSending = activeConversationId ? sendingConversations.has(activeConversationId) : Boolean(sendingConversations.size)
   const [isPanelOpen, setIsPanelOpen] = useState(false)
+  const [isConverterPanelOpen, setIsConverterPanelOpen] = useState(false)
+  const [chatInputText, setChatInputText] = useState('')
+  const [attachmentTypes, setAttachmentTypes] = useState<string[]>([])
+  const [convertedValue, setConvertedValue] = useState<string | null>(null)
+  const [originalValue, setOriginalValue] = useState<string | null>(null)
+  const [activeConverterInstanceId, setActiveConverterInstanceId] = useState<string | null>(null)
   const [panelRefreshKey, setPanelRefreshKey] = useState(0)
   const inputBoxRef = useRef<ChatInputAreaHandle>(null)
 
@@ -149,7 +156,7 @@ export default function ChatWindow({
     }
   }, [attackResultId, activeConversationId, onSelectConversation, loadConversation])
 
-  const handleSend = async (originalValue: string, _convertedValue: string | undefined, attachments: MessageAttachment[]) => {
+  const handleSend = async (originalValue: string, convertedValue: string | undefined, attachments: MessageAttachment[]) => {
     if (!activeTarget) { return }
 
     // Track which conversation this send belongs to (may be updated after attack creation)
@@ -157,12 +164,17 @@ export default function ChatWindow({
     // Mark synchronously so the useEffect guard sees it immediately
     sendingConvIdsRef.current.add(sendConvId)
 
+    // When a converter is active, show a preview locally while the backend applies it
+    const hasConversion = activeConverterInstanceId != null && convertedValue != null
+    const displayContent = hasConversion ? convertedValue : originalValue
+
     // Add user message with attachments for display
     const userMessage: Message = {
       role: 'user',
-      content: originalValue,
+      content: displayContent,
       timestamp: new Date().toISOString(),
       attachments: attachments.length > 0 ? attachments : undefined,
+      originalContent: hasConversion ? originalValue : undefined,
     }
     setMessages(prev => [...prev, userMessage])
 
@@ -182,9 +194,16 @@ export default function ChatWindow({
     setMessages(prev => [...prev, loadingMessage])
 
     try {
-      // Build message pieces from text + attachments
+      // Build message pieces from text + attachments — always use original text
       const pieces = await buildMessagePieces(originalValue, attachments)
 
+      // If a converter was previewed, set converted_value on the text piece directly.
+      // The backend skips converter application when converted_value is already set,
+      // but still stores converter_identifiers metadata.
+      if (hasConversion && pieces.length > 0 && pieces[0].data_type === 'text') {
+        pieces[0].converted_value = convertedValue
+      }
+
       // Create attack lazily on first message
       let currentAttackResultId = attackResultId
       let currentConversationId = conversationId
@@ -225,6 +244,7 @@ export default function ChatWindow({
       const effectiveConvId = currentActiveConversationId ?? currentConversationId
 
       // Send message to target
+      const converterIds = activeConverterInstanceId ? [activeConverterInstanceId] : undefined
       const response = await attacksApi.addMessage(currentAttackResultId!, {
         role: 'user',
         pieces,
@@ -232,8 +252,14 @@ export default function ChatWindow({
         target_registry_name: activeTarget.target_registry_name,
         target_conversation_id: effectiveConvId!,
         labels: labels ?? undefined,
+        converter_ids: converterIds,
       })
 
+      // Clear converter state after successful send
+      setConvertedValue(null)
+      setOriginalValue(null)
+      setActiveConverterInstanceId(null)
+
       // Only update displayed messages if the user is still viewing this conversation.
       // If they switched away the response is persisted server-side and will appear
       // when they navigate back.
@@ -449,6 +475,18 @@ export default function ChatWindow({
 
   return (
     <div className={styles.root}>
+      {isConverterPanelOpen && (
+        <ConverterPanel
+          onClose={() => setIsConverterPanelOpen(false)}
+          previewText={chatInputText}
+          activeInputTypes={chatInputText.trim() ? ['text', ...attachmentTypes] : attachmentTypes}
+          onUseConvertedValue={(original, converted, converterInstanceId) => {
+            setOriginalValue(original)
+            setConvertedValue(converted)
+            setActiveConverterInstanceId(converterInstanceId)
+          }}
+        />
+      )}
       <div className={styles.chatArea}>
         <div className={styles.ribbon}>
           <div className={styles.conversationInfo}>
@@ -518,6 +556,13 @@ export default function ChatWindow({
           attackOperator={isOperatorLocked ? attackOperator ?? undefined : undefined}
           noTargetSelected={!activeTarget}
           onConfigureTarget={!activeTarget ? () => onNavigate?.('config') : undefined}
+          onToggleConverterPanel={() => setIsConverterPanelOpen(prev => !prev)}
+          isConverterPanelOpen={isConverterPanelOpen}
+          onInputChange={setChatInputText}
+          onAttachmentsChange={setAttachmentTypes}
+          convertedValue={convertedValue}
+          originalValue={originalValue}
+          onClearConversion={() => { setConvertedValue(null); setOriginalValue(null); setActiveConverterInstanceId(null) }}
         />
       </div>
       {isPanelOpen && (
diff --git a/frontend/src/components/Chat/ConverterPanel.styles.ts b/frontend/src/components/Chat/ConverterPanel.styles.ts
new file mode 100644
index 000000000..35f2e97f7
--- /dev/null
+++ b/frontend/src/components/Chat/ConverterPanel.styles.ts
@@ -0,0 +1,227 @@
+import { makeStyles, tokens } from '@fluentui/react-components'
+
+export const useConverterPanelStyles = makeStyles({
+  resizeContainer: {
+    display: 'flex',
+    flexDirection: 'row',
+    height: '100%',
+    flexShrink: 0,
+  },
+  root: {
+    display: 'flex',
+    flexDirection: 'column',
+    height: '100%',
+    flex: 1,
+    minWidth: 0,
+    backgroundColor: tokens.colorNeutralBackground3,
+    overflow: 'hidden',
+  },
+  resizeHandle: {
+    width: '4px',
+    cursor: 'col-resize',
+    backgroundColor: 'transparent',
+    borderRight: `1px solid ${tokens.colorNeutralStroke1}`,
+    flexShrink: 0,
+    ':hover': {
+      backgroundColor: tokens.colorBrandBackground2,
+    },
+    ':active': {
+      backgroundColor: tokens.colorBrandBackground,
+    },
+  },
+  header: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalM}`,
+    borderBottom: `1px solid ${tokens.colorNeutralStroke1}`,
+    minHeight: '48px',
+    gap: tokens.spacingHorizontalS,
+  },
+  headerTitle: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: tokens.spacingVerticalXXS,
+    minWidth: 0,
+  },
+  body: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: tokens.spacingVerticalM,
+    padding: tokens.spacingHorizontalL,
+    overflowY: 'auto',
+    flex: 1,
+  },
+  hintText: {
+    color: tokens.colorNeutralForeground3,
+  },
+  loading: {
+    display: 'flex',
+    justifyContent: 'center',
+    paddingTop: tokens.spacingVerticalL,
+  },
+  converterList: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: tokens.spacingVerticalS,
+  },
+  converterCard: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: tokens.spacingVerticalXXS,
+    padding: tokens.spacingVerticalS,
+    borderRadius: tokens.borderRadiusMedium,
+    border: `1px solid ${tokens.colorNeutralStroke1}`,
+    backgroundColor: tokens.colorNeutralBackground1,
+  },
+  converterName: {
+    minWidth: 0,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+  },
+  metaRow: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    gap: tokens.spacingHorizontalXS,
+    rowGap: tokens.spacingVerticalXXS,
+  },
+  badgeText: {
+    color: tokens.colorNeutralForeground2,
+  },
+  emptyState: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: tokens.spacingVerticalS,
+  },
+  llmBadge: {
+    display: 'inline-block',
+    marginLeft: tokens.spacingHorizontalXS,
+    padding: `0 ${tokens.spacingHorizontalXXS}`,
+    borderRadius: tokens.borderRadiusSmall,
+    backgroundColor: tokens.colorPalettePurpleBackground2,
+    color: tokens.colorPalettePurpleForeground2,
+    fontSize: tokens.fontSizeBase100,
+    fontWeight: tokens.fontWeightSemibold as unknown as string,
+    verticalAlign: 'middle',
+  },
+  optionContent: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    width: '100%',
+    gap: tokens.spacingHorizontalXS,
+  },
+  optionBadges: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '2px',
+    flexShrink: 0,
+  },
+  typeBadge: {
+    display: 'inline-block',
+    padding: `0 3px`,
+    borderRadius: tokens.borderRadiusSmall,
+    fontSize: '10px',
+    fontWeight: tokens.fontWeightSemibold as unknown as string,
+    lineHeight: '16px',
+    verticalAlign: 'middle',
+  },
+  typeArrow: {
+    fontSize: '10px',
+    color: tokens.colorNeutralForeground3,
+  },
+  // Input type colors (solid backgrounds)
+  input_text: {
+    backgroundColor: tokens.colorPaletteBlueBackground2,
+    color: tokens.colorPaletteBlueForeground2,
+  },
+  input_image_path: {
+    backgroundColor: tokens.colorPaletteGreenBackground2,
+    color: tokens.colorPaletteGreenForeground2,
+  },
+  input_audio_path: {
+    backgroundColor: tokens.colorPaletteYellowBackground2,
+    color: tokens.colorPaletteYellowForeground2,
+  },
+  input_video_path: {
+    backgroundColor: tokens.colorPalettePurpleBackground2,
+    color: tokens.colorPalettePurpleForeground2,
+  },
+  // Output type colors (outlined/lighter)
+  output_text: {
+    backgroundColor: 'transparent',
+    color: tokens.colorPaletteBlueForeground2,
+    border: `1px solid ${tokens.colorPaletteBlueBorderActive}`,
+  },
+  output_image_path: {
+    backgroundColor: 'transparent',
+    color: tokens.colorPaletteGreenForeground2,
+    border: `1px solid ${tokens.colorPaletteGreenBorderActive}`,
+  },
+  output_audio_path: {
+    backgroundColor: 'transparent',
+    color: tokens.colorPaletteYellowForeground2,
+    border: `1px solid ${tokens.colorPaletteYellowBorderActive}`,
+  },
+  output_video_path: {
+    backgroundColor: 'transparent',
+    color: tokens.colorPalettePurpleForeground2,
+    border: `1px solid ${tokens.colorPalettePurpleBorderActive}`,
+  },
+  outputSection: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: tokens.spacingVerticalXS,
+    marginTop: tokens.spacingVerticalS,
+  },
+  paramsSection: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: tokens.spacingVerticalS,
+    padding: tokens.spacingVerticalS,
+    borderRadius: tokens.borderRadiusMedium,
+    border: `1px solid ${tokens.colorNeutralStroke1}`,
+    backgroundColor: tokens.colorNeutralBackground1,
+  },
+  paramsSectionHeader: {
+    justifyContent: 'flex-start',
+    fontWeight: tokens.fontWeightSemibold as unknown as string,
+    padding: 0,
+  },
+  paramBlock: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: tokens.spacingVerticalXXS,
+  },
+  paramLabel: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: tokens.spacingHorizontalXXS,
+  },
+  paramInfo: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    color: tokens.colorNeutralForeground3,
+    cursor: 'help',
+  },
+  outputBox: {
+    padding: tokens.spacingVerticalS,
+    borderRadius: tokens.borderRadiusMedium,
+    border: `1px solid ${tokens.colorNeutralStroke1}`,
+    backgroundColor: tokens.colorNeutralBackground1,
+    minHeight: '80px',
+    whiteSpace: 'pre-wrap' as const,
+    wordBreak: 'break-word' as const,
+    overflowY: 'auto' as const,
+    maxHeight: '200px',
+  },
+  previewPre: {
+    margin: 0,
+    whiteSpace: 'pre-wrap',
+    wordBreak: 'break-word',
+    fontFamily: tokens.fontFamilyMonospace,
+    fontSize: tokens.fontSizeBase200,
+    color: tokens.colorNeutralForeground1,
+  },
+})
diff --git a/frontend/src/components/Chat/ConverterPanel.tsx b/frontend/src/components/Chat/ConverterPanel.tsx
new file mode 100644
index 000000000..8d6c6261c
--- /dev/null
+++ b/frontend/src/components/Chat/ConverterPanel.tsx
@@ -0,0 +1,384 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { Button, Combobox, Field, Input, MessageBar, MessageBarBody, Option, Select, Spinner, Text, Tooltip } from '@fluentui/react-components'
+import { ChevronDownRegular, ChevronRightRegular, DismissRegular, InfoRegular, PlayRegular } from '@fluentui/react-icons'
+import { convertersApi } from '../../services/api'
+import { toApiError } from '../../services/errors'
+import type { ConverterCatalogEntry } from '../../types'
+import { useConverterPanelStyles } from './ConverterPanel.styles'
+
+interface ConverterPanelProps {
+  onClose: () => void
+  previewText?: string
+  activeInputTypes?: string[]
+  onUseConvertedValue?: (original: string, converted: string, converterInstanceId: string) => void
+}
+
+export default function ConverterPanel({ onClose, previewText = '', activeInputTypes = ['text'], onUseConvertedValue }: ConverterPanelProps) {
+  const styles = useConverterPanelStyles()
+  const [converters, setConverters] = useState<ConverterCatalogEntry[]>([])
+  const [selectedConverterType, setSelectedConverterType] = useState('')
+  const [query, setQuery] = useState('')
+  const [paramValues, setParamValues] = useState<Record<string, string>>({})
+  const [paramsExpanded, setParamsExpanded] = useState(true)
+  const [previewOutput, setPreviewOutput] = useState('')
+  const [previewConverterInstanceId, setPreviewConverterInstanceId] = useState<string | null>(null)
+  const [isPreviewing, setIsPreviewing] = useState(false)
+  const [previewError, setPreviewError] = useState<string | null>(null)
+  const [isLoading, setIsLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    let isMounted = true
+
+    const loadConverters = async () => {
+      setIsLoading(true)
+      setError(null)
+
+      try {
+        const response = await convertersApi.listConverterCatalog()
+        if (!isMounted) {
+          return
+        }
+        setConverters(response.items)
+        const first = response.items[0]?.converter_type || ''
+        setSelectedConverterType((current) => current || first)
+        setQuery((current) => current || first)
+      } catch (err) {
+        if (!isMounted) {
+          return
+        }
+        setConverters([])
+        setSelectedConverterType('')
+        setQuery('')
+        setError(toApiError(err).detail)
+      } finally {
+        if (isMounted) {
+          setIsLoading(false)
+        }
+      }
+    }
+
+    void loadConverters()
+
+    return () => {
+      isMounted = false
+    }
+  }, [])
+
+  // Map frontend attachment types to backend data type prefixes
+  const inputTypeSet = useMemo(() => {
+    const set = new Set<string>()
+    for (const t of activeInputTypes) {
+      if (t === 'text') set.add('text')
+      else if (t === 'image') set.add('image_path')
+      else if (t === 'audio') set.add('audio_path')
+      else if (t === 'video') set.add('video_path')
+    }
+    if (set.size === 0) set.add('text')
+    return set
+  }, [activeInputTypes])
+
+  const filteredConverters = useMemo(() => {
+    // First filter by supported input types
+    const byType = converters.filter((c) => {
+      const supported = c.supported_input_types ?? []
+      if (supported.length === 0) return true
+      return supported.some((s) => inputTypeSet.has(s))
+    })
+    // Then filter by search query
+    if (query === selectedConverterType) {
+      return byType
+    }
+    return byType.filter((c) => c.converter_type.toLowerCase().includes(query.toLowerCase()))
+  }, [converters, query, selectedConverterType, inputTypeSet])
+
+  const selectedConverter = converters.find(
+    (converter) => converter.converter_type === selectedConverterType
+  ) ?? converters[0]
+
+  const handlePreview = async () => {
+    if (!selectedConverterType || !previewText.trim()) {
+      return
+    }
+    setIsPreviewing(true)
+    setPreviewError(null)
+    setPreviewOutput('')
+
+    try {
+      const createResponse = await convertersApi.createConverter({
+        type: selectedConverterType,
+        params: { ...paramValues },
+      })
+
+      const previewResponse = await convertersApi.previewConversion({
+        original_value: previewText,
+        converter_ids: [createResponse.converter_id],
+      })
+
+      setPreviewOutput(previewResponse.converted_value)
+      setPreviewConverterInstanceId(createResponse.converter_id)
+    } catch (err) {
+      setPreviewError(toApiError(err).detail)
+    } finally {
+      setIsPreviewing(false)
+    }
+  }
+
+  const [panelWidth, setPanelWidth] = useState(320)
+  const isDragging = useRef(false)
+
+  const handleMouseDown = useCallback(() => {
+    isDragging.current = true
+    document.body.style.cursor = 'col-resize'
+    document.body.style.userSelect = 'none'
+  }, [])
+
+  useEffect(() => {
+    const handleMouseMove = (e: MouseEvent) => {
+      if (!isDragging.current) return
+      const newWidth = Math.max(240, Math.min(600, e.clientX))
+      setPanelWidth(newWidth)
+    }
+    const handleMouseUp = () => {
+      if (!isDragging.current) return
+      isDragging.current = false
+      document.body.style.cursor = ''
+      document.body.style.userSelect = ''
+    }
+    document.addEventListener('mousemove', handleMouseMove)
+    document.addEventListener('mouseup', handleMouseUp)
+    return () => {
+      document.removeEventListener('mousemove', handleMouseMove)
+      document.removeEventListener('mouseup', handleMouseUp)
+    }
+  }, [])
+
+  return (
+    <div className={styles.resizeContainer} style={{ width: panelWidth, minWidth: panelWidth }}>
+      <aside className={styles.root} data-testid="converter-panel">
+        <div className={styles.header}>
+        <div className={styles.headerTitle}>
+          <Text weight="semibold" size={300}>Converters</Text>
+          <Text size={200} className={styles.hintText}>
+            Select and preview prompt converters here in the next step.
+          </Text>
+        </div>
+        <Button
+          appearance="subtle"
+          size="small"
+          icon={<DismissRegular />}
+          onClick={onClose}
+          data-testid="close-converter-panel-btn"
+        />
+      </div>
+      <div className={styles.body}>
+        {isLoading && (
+          <div className={styles.loading} data-testid="converter-panel-loading">
+            <Spinner size="tiny" />
+          </div>
+        )}
+
+        {!isLoading && error && (
+          <MessageBar intent="error" data-testid="converter-panel-error">
+            <MessageBarBody>{error}</MessageBarBody>
+          </MessageBar>
+        )}
+
+        {!isLoading && !error && converters.length === 0 && (
+          <div className={styles.emptyState} data-testid="converter-panel-empty">
+            <Text size={300}>No converter types are currently available.</Text>
+            <Text size={200} className={styles.hintText}>
+              Once the backend converter catalog is available, converter types will appear here.
+            </Text>
+          </div>
+        )}
+
+        {!isLoading && !error && converters.length > 0 && (
+          <div className={styles.converterList} data-testid="converter-panel-list">
+            <Field label="Converter">
+              <Combobox
+                value={query}
+                selectedOptions={selectedConverterType ? [selectedConverterType] : []}
+                onOptionSelect={(_, data) => {
+                  const newType = data.optionValue ?? ''
+                  setSelectedConverterType(newType)
+                  setQuery(data.optionText ?? '')
+                  // Reset param values to defaults for the newly selected converter
+                  const newConverter = converters.find((c) => c.converter_type === newType)
+                  const defaults: Record<string, string> = {}
+                  for (const p of newConverter?.parameters ?? []) {
+                    if (p.default_value != null) {
+                      defaults[p.name] = p.default_value
+                    }
+                  }
+                  setParamValues(defaults)
+                  setPreviewOutput('')
+                  setPreviewConverterInstanceId(null)
+                  setPreviewError(null)
+                }}
+                onChange={(e) => setQuery((e.target as HTMLInputElement).value)}
+                placeholder="Search converters..."
+                data-testid="converter-panel-select"
+              >
+                {filteredConverters.map((converter) => (
+                  <Tooltip
+                    key={converter.converter_type}
+                    content={converter.description || converter.converter_type}
+                    relationship="description"
+                    positioning="after"
+                  >
+                    <Option value={converter.converter_type} text={converter.converter_type}>
+                      <span className={styles.optionContent}>
+                        {converter.converter_type}
+                        {converter.is_llm_based && <span className={styles.llmBadge}>LLM</span>}
+                      </span>
+                    </Option>
+                  </Tooltip>
+                ))}
+              </Combobox>
+            </Field>
+            {selectedConverter && (
+              <div
+                className={styles.converterCard}
+                data-testid={`converter-item-${selectedConverter.converter_type}`}
+              >
+                <Text weight="semibold" size={300} className={styles.converterName}>
+                  {selectedConverter.converter_type}
+                </Text>
+                {selectedConverter.description && (
+                  <Text size={200} className={styles.hintText}>
+                    {selectedConverter.description}
+                  </Text>
+                )}
+                <div className={styles.metaRow}>
+                  <Text size={200} className={styles.badgeText}>In:</Text>
+                  {(selectedConverter.supported_input_types ?? []).map((t) => (
+                    <span key={t} className={`${styles.typeBadge} ${styles[`input_${t}` as keyof typeof styles] ?? ''}`}>
+                      {t.replace('_path', '')}
+                    </span>
+                  ))}
+                </div>
+                <div className={styles.metaRow}>
+                  <Text size={200} className={styles.badgeText}>Out:</Text>
+                  {(selectedConverter.supported_output_types ?? []).map((t) => (
+                    <span key={t} className={`${styles.typeBadge} ${styles[`output_${t}` as keyof typeof styles] ?? ''}`}>
+                      {t.replace('_path', '')}
+                    </span>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {selectedConverter && (selectedConverter.parameters?.length ?? 0) > 0 && (
+              <div className={styles.paramsSection} data-testid="converter-params">
+                <Button
+                  appearance="transparent"
+                  size="small"
+                  icon={paramsExpanded ? <ChevronDownRegular /> : <ChevronRightRegular />}
+                  onClick={() => setParamsExpanded((prev) => !prev)}
+                  className={styles.paramsSectionHeader}
+                  data-testid="toggle-params-btn"
+                >
+                  Parameters
+                </Button>
+                {paramsExpanded && (selectedConverter.parameters ?? []).map((param) => (
+                  <div key={param.name} className={styles.paramBlock}>
+                    <span className={styles.paramLabel}>
+                      <Text size={200} weight="semibold">{param.name}{param.required ? ' *' : ''}</Text>
+                      {param.description && (
+                        <Tooltip content={param.description} relationship="description">
+                          <span className={styles.paramInfo}><InfoRegular fontSize={12} /></span>
+                        </Tooltip>
+                      )}
+                    </span>
+                    {param.choices ? (
+                      <Select
+                        value={paramValues[param.name] ?? param.default_value ?? ''}
+                        onChange={(_, data) =>
+                          setParamValues((prev) => ({ ...prev, [param.name]: data.value }))
+                        }
+                        data-testid={`param-${param.name}`}
+                      >
+                        {param.choices.map((choice) => (
+                          <option key={choice} value={choice}>
+                            {choice}
+                          </option>
+                        ))}
+                      </Select>
+                    ) : (
+                      <Input
+                        value={paramValues[param.name] ?? ''}
+                        placeholder={param.default_value ?? undefined}
+                        onChange={(_, data) =>
+                          setParamValues((prev) => ({ ...prev, [param.name]: data.value }))
+                        }
+                        data-testid={`param-${param.name}`}
+                      />
+                    )}
+                    <Text size={100} className={styles.hintText}>{param.type_name}</Text>
+                  </div>
+                ))}
+              </div>
+            )}
+
+            <div className={styles.outputSection} data-testid="converter-preview-section">
+              <Button
+                appearance="primary"
+                size="small"
+                icon={isPreviewing ? <Spinner size="tiny" /> : <PlayRegular />}
+                onClick={handlePreview}
+                disabled={isPreviewing || !previewText.trim() || !selectedConverterType}
+                data-testid="converter-preview-btn"
+              >
+                {isPreviewing ? 'Converting...' : 'Preview'}
+              </Button>
+
+              {!previewText.trim() && (
+                <Text size={200} className={styles.hintText}>
+                  Type in the chat input box to preview a conversion.
+                </Text>
+              )}
+
+              {previewError && (
+                <MessageBar intent="error" data-testid="converter-preview-error">
+                  <MessageBarBody>{previewError}</MessageBarBody>
+                </MessageBar>
+              )}
+
+              <div data-testid="converter-output">
+                <Text weight="semibold" size={300}>Output</Text>
+                <div className={styles.outputBox}>
+                  {previewOutput ? (
+                    <pre className={styles.previewPre} data-testid="converter-preview-result">{previewOutput}</pre>
+                  ) : (
+                    <Text size={200} className={styles.hintText}>
+                      Converted output will appear here.
+                    </Text>
+                  )}
+                </div>
+              </div>
+
+              {previewOutput && previewConverterInstanceId && (
+                <Button
+                  appearance="primary"
+                  size="small"
+                  onClick={() => onUseConvertedValue?.(previewText, previewOutput, previewConverterInstanceId)}
+                  disabled={!onUseConvertedValue}
+                  data-testid="use-converted-btn"
+                >
+                  Use Converted Value
+                </Button>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+    </aside>
+    <div
+      className={styles.resizeHandle}
+      onMouseDown={handleMouseDown}
+      data-testid="converter-panel-resize"
+    />
+    </div>
+  )
+}
diff --git a/frontend/src/services/api.ts b/frontend/src/services/api.ts
index 55b079313..a7c21c4c8 100644
--- a/frontend/src/services/api.ts
+++ b/frontend/src/services/api.ts
@@ -3,6 +3,10 @@ import { toApiError } from './errors'
 import type {
   TargetInstance,
   TargetListResponse,
+  ConverterCatalogEntry,
+  ConverterCatalogResponse,
+  ConverterInstance,
+  ConverterListResponse,
   CreateTargetRequest,
   CreateAttackRequest,
   CreateAttackResponse,
@@ -105,6 +109,33 @@ export const targetsApi = {
   },
 }
 
+export const convertersApi = {
+  listConverterCatalog: async (): Promise<ConverterCatalogResponse> => {
+    const response = await apiClient.get('/converters/catalog')
+    return response.data
+  },
+
+  listConverters: async (): Promise<ConverterListResponse> => {
+    const response = await apiClient.get('/converters')
+    return response.data
+  },
+
+  getConverter: async (converterId: string): Promise<ConverterInstance> => {
+    const response = await apiClient.get(`/converters/${encodeURIComponent(converterId)}`)
+    return response.data
+  },
+
+  createConverter: async (request: { type: string; params?: Record<string, unknown> }): Promise<{ converter_id: string; converter_type: string }> => {
+    const response = await apiClient.post('/converters', request)
+    return response.data
+  },
+
+  previewConversion: async (request: { original_value: string; converter_ids: string[] }): Promise<{ converted_value: string }> => {
+    const response = await apiClient.post('/converters/preview', request)
+    return response.data
+  },
+}
+
 export const attacksApi = {
   createAttack: async (request: CreateAttackRequest): Promise<CreateAttackResponse> => {
     const response = await apiClient.post('/attacks', request)
diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
index a98817874..c66d327cb 100644
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -75,6 +75,44 @@ export interface CreateTargetRequest {
   params: Record<string, unknown>
 }
 
+// --- Converters ---
+
+export interface ConverterInstance {
+  converter_id: string
+  converter_type: string
+  display_name?: string | null
+  supported_input_types: string[]
+  supported_output_types: string[]
+  converter_specific_params?: Record<string, unknown> | null
+  sub_converter_ids?: string[] | null
+}
+
+export interface ConverterListResponse {
+  items: ConverterInstance[]
+}
+
+export interface ConverterParameterSchema {
+  name: string
+  type_name: string
+  required: boolean
+  default_value?: string | null
+  choices?: string[] | null
+  description?: string | null
+}
+
+export interface ConverterCatalogEntry {
+  converter_type: string
+  supported_input_types: string[]
+  supported_output_types: string[]
+  parameters: ConverterParameterSchema[]
+  is_llm_based: boolean
+  description?: string | null
+}
+
+export interface ConverterCatalogResponse {
+  items: ConverterCatalogEntry[]
+}
+
 // --- Attacks ---
 
 export interface TargetInfo {
diff --git a/pyrit/backend/models/converters.py b/pyrit/backend/models/converters.py
index 1c4e615f8..ba5ca5390 100644
--- a/pyrit/backend/models/converters.py
+++ b/pyrit/backend/models/converters.py
@@ -14,8 +14,11 @@
 from pyrit.models import PromptDataType
 
 __all__ = [
+    "ConverterCatalogEntry",
+    "ConverterCatalogResponse",
     "ConverterInstance",
     "ConverterInstanceListResponse",
+    "ConverterParameterSchema",
     "CreateConverterRequest",
     "CreateConverterResponse",
     "ConverterPreviewRequest",
@@ -24,6 +27,45 @@
 ]
 
 
+# ============================================================================
+# Converter Catalog (Available Types)
+# ============================================================================
+
+
+class ConverterParameterSchema(BaseModel):
+    """Schema for a single converter constructor parameter."""
+
+    name: str = Field(..., description="Parameter name")
+    type_name: str = Field(..., description="Human-readable type (e.g. 'str', 'int', 'Literal[...]')")
+    required: bool = Field(..., description="Whether the parameter must be provided")
+    default_value: Optional[str] = Field(None, description="String representation of default value, if any")
+    choices: Optional[list[str]] = Field(None, description="Allowed values for Literal types")
+    description: Optional[str] = Field(None, description="Parameter description from docstring")
+
+
+class ConverterCatalogEntry(BaseModel):
+    """A converter type available from the backend registry."""
+
+    converter_type: str = Field(..., description="Converter class name (e.g., 'Base64Converter')")
+    supported_input_types: list[str] = Field(
+        default_factory=list, description="Input data types supported by this converter type"
+    )
+    supported_output_types: list[str] = Field(
+        default_factory=list, description="Output data types produced by this converter type"
+    )
+    parameters: list[ConverterParameterSchema] = Field(
+        default_factory=list, description="Constructor parameters for dynamic form generation"
+    )
+    is_llm_based: bool = Field(False, description="Whether this converter requires an LLM target")
+    description: Optional[str] = Field(None, description="Short description of the converter from its docstring")
+
+
+class ConverterCatalogResponse(BaseModel):
+    """Response for listing available converter types from the registry."""
+
+    items: list[ConverterCatalogEntry] = Field(..., description="List of available converter types")
+
+
 # ============================================================================
 # Converter Instances (Runtime Objects)
 # ============================================================================
diff --git a/pyrit/backend/routes/converters.py b/pyrit/backend/routes/converters.py
index 095b6ef44..8b4c610bd 100644
--- a/pyrit/backend/routes/converters.py
+++ b/pyrit/backend/routes/converters.py
@@ -12,6 +12,7 @@
 
 from pyrit.backend.models.common import ProblemDetail
 from pyrit.backend.models.converters import (
+    ConverterCatalogResponse,
     ConverterInstance,
     ConverterInstanceListResponse,
     ConverterPreviewRequest,
@@ -41,6 +42,21 @@ async def list_converters() -> ConverterInstanceListResponse:
     return await service.list_converters_async()
 
 
+@router.get(
+    "/catalog",
+    response_model=ConverterCatalogResponse,
+)
+async def list_converter_catalog() -> ConverterCatalogResponse:
+    """
+    List all available converter types from the backend converter registry.
+
+    Returns:
+        ConverterCatalogResponse: List of available converter types.
+    """
+    service = get_converter_service()
+    return await service.list_converter_catalog_async()
+
+
 @router.post(
     "",
     response_model=CreateConverterResponse,
diff --git a/pyrit/backend/services/attack_service.py b/pyrit/backend/services/attack_service.py
index 5bb4f6bbc..24775cdf8 100644
--- a/pyrit/backend/services/attack_service.py
+++ b/pyrit/backend/services/attack_service.py
@@ -729,6 +729,18 @@ async def _update_attack_after_message_async(
                     children=new_children,
                 )
                 update_fields["attack_identifier"] = new_aid.to_dict()
+                # Also update atomic_attack_identifier so get_attack_strategy_identifier() sees the change
+                if ar.atomic_attack_identifier:
+                    atomic = ComponentIdentifier.from_dict(ar.atomic_attack_identifier.to_dict())
+                    atomic_children = dict(atomic.children)
+                    atomic_children["attack"] = new_aid
+                    new_atomic = ComponentIdentifier(
+                        class_name=atomic.class_name,
+                        class_module=atomic.class_module,
+                        params=dict(atomic.params),
+                        children=atomic_children,
+                    )
+                    update_fields["atomic_attack_identifier"] = new_atomic.to_dict()
 
         self._memory.update_attack_result_by_id(
             attack_result_id=attack_result_id,
diff --git a/pyrit/backend/services/converter_service.py b/pyrit/backend/services/converter_service.py
index a0579239c..14333cdad 100644
--- a/pyrit/backend/services/converter_service.py
+++ b/pyrit/backend/services/converter_service.py
@@ -12,15 +12,20 @@
 - Retrieved from registry (pre-registered at startup or created earlier)
 """
 
+import inspect
+import re
 import uuid
 from functools import lru_cache
-from typing import Any, Optional
+from typing import Any, Literal, Optional, Union, get_args, get_origin
 
 from pyrit import prompt_converter
 from pyrit.backend.mappers.converter_mappers import converter_object_to_instance
 from pyrit.backend.models.converters import (
+    ConverterCatalogEntry,
+    ConverterCatalogResponse,
     ConverterInstance,
     ConverterInstanceListResponse,
+    ConverterParameterSchema,
     ConverterPreviewRequest,
     ConverterPreviewResponse,
     CreateConverterRequest,
@@ -52,6 +57,110 @@ def _build_converter_class_registry() -> dict[str, type]:
 # Module-level class registry (built once on import)
 _CONVERTER_CLASS_REGISTRY: dict[str, type] = _build_converter_class_registry()
 
+# Types that can be rendered as simple form fields
+_SIMPLE_TYPES: set[type] = {str, int, float, bool}
+
+
+def _is_simple_type(annotation: Any) -> bool:
+    """Return True if the annotation represents a type renderable in a form field."""
+    if annotation in _SIMPLE_TYPES:
+        return True
+    origin = get_origin(annotation)
+    if origin is Literal:
+        return True
+    if origin is Union:
+        args = get_args(annotation)
+        non_none = [a for a in args if a is not type(None)]
+        return len(non_none) == 1 and _is_simple_type(non_none[0])
+    return False
+
+
+def _serialize_type(annotation: Any) -> str:
+    """Convert a type annotation to a concise human-readable string."""
+    if annotation is inspect.Parameter.empty:
+        return "Any"
+    origin = get_origin(annotation)
+    if origin is Literal:
+        args = get_args(annotation)
+        return f"Literal[{', '.join(repr(a) for a in args)}]"
+    if origin is Union:
+        args = get_args(annotation)
+        non_none = [a for a in args if a is not type(None)]
+        if len(non_none) == 1:
+            inner = _serialize_type(non_none[0])
+            return f"Optional[{inner}]" if len(args) > len(non_none) else inner
+    if hasattr(annotation, "__name__"):
+        return annotation.__name__
+    return str(annotation)
+
+
+def _parse_arg_descriptions(converter_class: type) -> dict[str, str]:
+    """Parse parameter descriptions from Google-style docstring Args section."""
+    doc = (converter_class.__init__.__doc__ or converter_class.__doc__ or "").strip()
+    match = re.search(r"Args:\s*\n(.*?)(?:\n\s*\n|\n\s*Returns:|\n\s*Raises:|\Z)", doc, re.DOTALL)
+    if not match:
+        return {}
+    args_block = match.group(1)
+    # Detect indentation of first parameter line
+    indent_match = re.match(r"^(\s+)", args_block)
+    indent = indent_match.group(1) if indent_match else r"\s+"
+    pattern = rf"^{indent}(\w+)\s*(?:\([^)]*\))?\s*:\s*(.+?)(?=\n{indent}\w|\Z)"
+    descriptions: dict[str, str] = {}
+    for m in re.finditer(pattern, args_block, re.DOTALL | re.MULTILINE):
+        descriptions[m.group(1)] = " ".join(m.group(2).split())
+    return descriptions
+
+
+def _extract_parameters(converter_class: type) -> list[ConverterParameterSchema]:
+    """Extract simple constructor parameters from a converter class."""
+    try:
+        sig = inspect.signature(converter_class.__init__)
+    except (ValueError, TypeError):
+        return []
+
+    arg_descriptions = _parse_arg_descriptions(converter_class)
+
+    params: list[ConverterParameterSchema] = []
+    for name, p in sig.parameters.items():
+        if name == "self":
+            continue
+        if not _is_simple_type(p.annotation):
+            continue
+
+        no_default = p.default is inspect.Parameter.empty
+        is_sentinel = hasattr(p.default, "__class__") and "Sentinel" in type(p.default).__name__
+        required = no_default or is_sentinel
+
+        default_value: Optional[str] = None
+        if not required and p.default is not None:
+            default_value = str(p.default)
+
+        choices: Optional[list[str]] = None
+        if get_origin(p.annotation) is Literal:
+            choices = [str(a) for a in get_args(p.annotation)]
+
+        params.append(
+            ConverterParameterSchema(
+                name=name,
+                type_name=_serialize_type(p.annotation),
+                required=required,
+                default_value=default_value,
+                choices=choices,
+                description=arg_descriptions.get(name),
+            )
+        )
+
+    return params
+
+
+def _is_llm_based(converter_class: type) -> bool:
+    """Return True if the converter requires an LLM target parameter."""
+    try:
+        sig = inspect.signature(converter_class.__init__)
+    except (ValueError, TypeError):
+        return False
+    return any("target" in name.lower() for name in sig.parameters if name != "self")
+
 
 class ConverterService:
     """
@@ -93,6 +202,38 @@ async def list_converters_async(self) -> ConverterInstanceListResponse:
         ]
         return ConverterInstanceListResponse(items=items)
 
+    async def list_converter_catalog_async(self) -> ConverterCatalogResponse:
+        """
+        List all available converter types from the backend converter registry.
+
+        Returns:
+            ConverterCatalogResponse containing all available converter classes.
+        """
+        items: list[ConverterCatalogEntry] = []
+        for converter_type, converter_class in sorted(_CONVERTER_CLASS_REGISTRY.items()):
+            if converter_type in ("PromptConverter", "ConverterResult") or "Strategy" in converter_type:
+                continue
+
+            supported_input_types = [str(data_type) for data_type in getattr(converter_class, "SUPPORTED_INPUT_TYPES", ())]
+            supported_output_types = [str(data_type) for data_type in getattr(converter_class, "SUPPORTED_OUTPUT_TYPES", ())]
+
+            # Extract first paragraph of docstring as description
+            raw_doc = (converter_class.__doc__ or "").strip()
+            description = raw_doc.split("\n\n")[0].replace("\n", " ").strip() or None
+
+            items.append(
+                ConverterCatalogEntry(
+                    converter_type=converter_type,
+                    supported_input_types=supported_input_types,
+                    supported_output_types=supported_output_types,
+                    parameters=_extract_parameters(converter_class),
+                    is_llm_based=_is_llm_based(converter_class),
+                    description=description,
+                )
+            )
+
+        return ConverterCatalogResponse(items=items)
+
     async def get_converter_async(self, *, converter_id: str) -> Optional[ConverterInstance]:
         """
         Get a converter instance by ID.
@@ -135,6 +276,7 @@ async def create_converter_async(self, *, request: CreateConverterRequest) -> Cr
         # Resolve any converter references in params and instantiate
         params = self._resolve_converter_params(params=request.params)
         converter_class = self._get_converter_class(converter_type=request.type)
+        params = self._coerce_params(converter_class=converter_class, params=params)
         converter_obj = converter_class(**params)
         self._registry.register_instance(converter_obj, name=converter_id)
 
@@ -226,6 +368,51 @@ def _resolve_converter_params(self, *, params: dict[str, Any]) -> dict[str, Any]
                 resolved["converter"] = conv_obj
         return resolved
 
+    @staticmethod
+    def _coerce_params(*, converter_class: type, params: dict[str, Any]) -> dict[str, Any]:
+        """
+        Coerce parameter values to match the converter's __init__ type annotations.
+
+        The frontend sends all values as strings; this converts them to int, float,
+        or bool as needed based on the constructor signature.
+
+        Returns:
+            Params dict with values coerced to the expected types.
+        """
+        try:
+            sig = inspect.signature(converter_class.__init__)
+        except (ValueError, TypeError):
+            return params
+
+        coerced = dict(params)
+        for name, value in coerced.items():
+            if name not in sig.parameters or not isinstance(value, str):
+                continue
+            annotation = sig.parameters[name].annotation
+            if annotation is inspect.Parameter.empty:
+                continue
+
+            origin = get_origin(annotation)
+            # Unwrap Optional[X] to X
+            if origin is Union:
+                args = get_args(annotation)
+                non_none = [a for a in args if a is not type(None)]
+                if len(non_none) == 1:
+                    annotation = non_none[0]
+                    origin = get_origin(annotation)
+
+            try:
+                if annotation is int:
+                    coerced[name] = int(value)
+                elif annotation is float:
+                    coerced[name] = float(value)
+                elif annotation is bool:
+                    coerced[name] = value.lower() in ("true", "1", "yes")
+            except (ValueError, TypeError):
+                pass
+
+        return coerced
+
     def _gather_converters(self, *, converter_ids: list[str]) -> list[tuple[str, str, Any]]:
         """
         Gather converters to apply from IDs.
diff --git a/tests/unit/backend/test_api_routes.py b/tests/unit/backend/test_api_routes.py
index 0618ed150..cbfc74f3b 100644
--- a/tests/unit/backend/test_api_routes.py
+++ b/tests/unit/backend/test_api_routes.py
@@ -27,6 +27,7 @@
 )
 from pyrit.backend.models.common import PaginationInfo
 from pyrit.backend.models.converters import (
+    ConverterCatalogResponse,
     ConverterInstance,
     ConverterInstanceListResponse,
     ConverterPreviewResponse,
@@ -865,6 +866,29 @@ def test_list_converters(self, client: TestClient) -> None:
             data = response.json()
             assert data["items"] == []
 
+    def test_list_converter_catalog(self, client: TestClient) -> None:
+        """Test listing available converter types from the converter catalog."""
+        with patch("pyrit.backend.routes.converters.get_converter_service") as mock_get_service:
+            mock_service = MagicMock()
+            mock_service.list_converter_catalog_async = AsyncMock(
+                return_value=ConverterCatalogResponse(
+                    items=[
+                        {
+                            "converter_type": "Base64Converter",
+                            "supported_input_types": ["text"],
+                            "supported_output_types": ["text"],
+                        }
+                    ]
+                )
+            )
+            mock_get_service.return_value = mock_service
+
+            response = client.get("/api/converters/catalog")
+
+            assert response.status_code == status.HTTP_200_OK
+            data = response.json()
+            assert data["items"][0]["converter_type"] == "Base64Converter"
+
     def test_create_converter_success(self, client: TestClient) -> None:
         """Test successful converter instance creation."""
         with patch("pyrit.backend.routes.converters.get_converter_service") as mock_get_service:
diff --git a/tests/unit/backend/test_converter_service.py b/tests/unit/backend/test_converter_service.py
index 0deb273b2..04e41e32c 100644
--- a/tests/unit/backend/test_converter_service.py
+++ b/tests/unit/backend/test_converter_service.py
@@ -76,6 +76,32 @@ async def test_list_converters_returns_converters_from_registry(self) -> None:
         assert result.items[0].converter_specific_params == {"param1": "value1", "param2": 42}
 
 
+class TestListConverterCatalog:
+    """Tests for ConverterService.list_converter_catalog_async method."""
+
+    @pytest.mark.asyncio
+    async def test_list_converter_catalog_returns_known_converter_types(self) -> None:
+        """Test that the converter catalog exposes available converter classes."""
+        service = ConverterService()
+
+        result = await service.list_converter_catalog_async()
+
+        converter_types = [item.converter_type for item in result.items]
+        assert "Base64Converter" in converter_types
+        assert "CaesarConverter" in converter_types
+
+    @pytest.mark.asyncio
+    async def test_list_converter_catalog_includes_supported_types(self) -> None:
+        """Test that catalog entries include supported input and output types."""
+        service = ConverterService()
+
+        result = await service.list_converter_catalog_async()
+
+        base64_entry = next(item for item in result.items if item.converter_type == "Base64Converter")
+        assert "text" in base64_entry.supported_input_types
+        assert "text" in base64_entry.supported_output_types
+
+
 class TestGetConverter:
     """Tests for ConverterService.get_converter method."""