From 4542119157d9f7cffaa7322f061b5f9144cfd341 Mon Sep 17 00:00:00 2001
From: jjjuk <gmodhl67@gmail.com>
Date: Mon, 14 Jul 2025 02:00:49 +0300
Subject: [PATCH 1/5] feature(client): tool parameters raw input mode,
 togglegroup component

---
 client/src/components/ToolsTab.tsx       | 269 ++++++++++++-----------
 client/src/components/ui/togglegroup.tsx |  38 ++++
 package-lock.json                        |  55 +++++
 package.json                             |   1 +
 4 files changed, 240 insertions(+), 123 deletions(-)
 create mode 100644 client/src/components/ui/togglegroup.tsx

diff --git a/client/src/components/ToolsTab.tsx b/client/src/components/ToolsTab.tsx
index 3c7db84e..0d8d59c0 100644
--- a/client/src/components/ToolsTab.tsx
+++ b/client/src/components/ToolsTab.tsx
@@ -18,6 +18,8 @@ import { useEffect, useState } from "react";
 import ListPane from "./ListPane";
 import JsonView from "./JsonView";
 import ToolResults from "./ToolResults";
+import JsonEditor from "./JsonEditor";
+import { ToggleGroup, ToggleGroupItem } from "./ui/togglegroup";
 
 const ToolsTab = ({
   tools,
@@ -46,6 +48,14 @@ const ToolsTab = ({
   const [params, setParams] = useState<Record<string, unknown>>({});
   const [isToolRunning, setIsToolRunning] = useState(false);
   const [isOutputSchemaExpanded, setIsOutputSchemaExpanded] = useState(false);
+  const [paramsInputMode, setParamsInputMode] = useState<string>("raw");
+
+  const jsonEditor = JsonEditor({
+    value: JSON.stringify(params, null, 2),
+    onChange: (str: string) => {
+      setParams(JSON.parse(str));
+    },
+  });
 
   useEffect(() => {
     const params = Object.entries(
@@ -97,118 +107,121 @@ const ToolsTab = ({
                 <p className="text-sm text-gray-600 dark:text-gray-400">
                   {selectedTool.description}
                 </p>
-                {Object.entries(selectedTool.inputSchema.properties ?? []).map(
-                  ([key, value]) => {
-                    const prop = value as JsonSchemaType;
-                    const inputSchema =
-                      selectedTool.inputSchema as JsonSchemaType;
-                    const required = isPropertyRequired(key, inputSchema);
-                    return (
-                      <div key={key}>
-                        <Label
-                          htmlFor={key}
-                          className="block text-sm font-medium text-gray-700 dark:text-gray-300"
-                        >
-                          {key}
-                          {required && (
-                            <span className="text-red-500 ml-1">*</span>
-                          )}
-                        </Label>
-                        {prop.type === "boolean" ? (
-                          <div className="flex items-center space-x-2 mt-2">
-                            <Checkbox
+                {paramsInputMode === "form" &&
+                  Object.entries(selectedTool.inputSchema.properties ?? []).map(
+                    ([key, value]) => {
+                      const prop = value as JsonSchemaType;
+                      const inputSchema =
+                        selectedTool.inputSchema as JsonSchemaType;
+                      const required = isPropertyRequired(key, inputSchema);
+                      return (
+                        <div key={key}>
+                          <Label
+                            htmlFor={key}
+                            className="block text-sm font-medium text-gray-700 dark:text-gray-300"
+                          >
+                            {key}
+                            {required && (
+                              <span className="text-red-500 ml-1">*</span>
+                            )}
+                          </Label>
+                          {prop.type === "boolean" ? (
+                            <div className="flex items-center space-x-2 mt-2">
+                              <Checkbox
+                                id={key}
+                                name={key}
+                                checked={!!params[key]}
+                                onCheckedChange={(checked: boolean) =>
+                                  setParams({
+                                    ...params,
+                                    [key]: checked,
+                                  })
+                                }
+                              />
+                              <label
+                                htmlFor={key}
+                                className="text-sm font-medium text-gray-700 dark:text-gray-300"
+                              >
+                                {prop.description || "Toggle this option"}
+                              </label>
+                            </div>
+                          ) : prop.type === "string" ? (
+                            <Textarea
                               id={key}
                               name={key}
-                              checked={!!params[key]}
-                              onCheckedChange={(checked: boolean) =>
+                              placeholder={prop.description}
+                              value={(params[key] as string) ?? ""}
+                              onChange={(e) =>
                                 setParams({
                                   ...params,
-                                  [key]: checked,
+                                  [key]: e.target.value,
                                 })
                               }
+                              className="mt-1"
                             />
-                            <label
-                              htmlFor={key}
-                              className="text-sm font-medium text-gray-700 dark:text-gray-300"
-                            >
-                              {prop.description || "Toggle this option"}
-                            </label>
-                          </div>
-                        ) : prop.type === "string" ? (
-                          <Textarea
-                            id={key}
-                            name={key}
-                            placeholder={prop.description}
-                            value={(params[key] as string) ?? ""}
-                            onChange={(e) =>
-                              setParams({
-                                ...params,
-                                [key]: e.target.value,
-                              })
-                            }
-                            className="mt-1"
-                          />
-                        ) : prop.type === "object" || prop.type === "array" ? (
-                          <div className="mt-1">
-                            <DynamicJsonForm
-                              schema={{
-                                type: prop.type,
-                                properties: prop.properties,
-                                description: prop.description,
-                                items: prop.items,
-                              }}
-                              value={
-                                (params[key] as JsonValue) ??
-                                generateDefaultValue(prop)
-                              }
-                              onChange={(newValue: JsonValue) => {
-                                setParams({
-                                  ...params,
-                                  [key]: newValue,
-                                });
-                              }}
-                            />
-                          </div>
-                        ) : prop.type === "number" ||
-                          prop.type === "integer" ? (
-                          <Input
-                            type="number"
-                            id={key}
-                            name={key}
-                            placeholder={prop.description}
-                            value={(params[key] as string) ?? ""}
-                            onChange={(e) => {
-                              const value = e.target.value;
-                              setParams({
-                                ...params,
-                                [key]: value === "" ? "" : Number(value),
-                              });
-                            }}
-                            className="mt-1"
-                          />
-                        ) : (
-                          <div className="mt-1">
-                            <DynamicJsonForm
-                              schema={{
-                                type: prop.type,
-                                properties: prop.properties,
-                                description: prop.description,
-                                items: prop.items,
-                              }}
-                              value={params[key] as JsonValue}
-                              onChange={(newValue: JsonValue) => {
+                          ) : prop.type === "object" ||
+                            prop.type === "array" ? (
+                            <div className="mt-1">
+                              <DynamicJsonForm
+                                schema={{
+                                  type: prop.type,
+                                  properties: prop.properties,
+                                  description: prop.description,
+                                  items: prop.items,
+                                }}
+                                value={
+                                  (params[key] as JsonValue) ??
+                                  generateDefaultValue(prop)
+                                }
+                                onChange={(newValue: JsonValue) => {
+                                  setParams({
+                                    ...params,
+                                    [key]: newValue,
+                                  });
+                                }}
+                              />
+                            </div>
+                          ) : prop.type === "number" ||
+                            prop.type === "integer" ? (
+                            <Input
+                              type="number"
+                              id={key}
+                              name={key}
+                              placeholder={prop.description}
+                              value={(params[key] as string) ?? ""}
+                              onChange={(e) => {
+                                const value = e.target.value;
                                 setParams({
                                   ...params,
-                                  [key]: newValue,
+                                  [key]: value === "" ? "" : Number(value),
                                 });
                               }}
+                              className="mt-1"
                             />
-                          </div>
-                        )}
-                      </div>
-                    );
-                  },
-                )}
+                          ) : (
+                            <div className="mt-1">
+                              <DynamicJsonForm
+                                schema={{
+                                  type: prop.type,
+                                  properties: prop.properties,
+                                  description: prop.description,
+                                  items: prop.items,
+                                }}
+                                value={params[key] as JsonValue}
+                                onChange={(newValue: JsonValue) => {
+                                  setParams({
+                                    ...params,
+                                    [key]: newValue,
+                                  });
+                                }}
+                              />
+                            </div>
+                          )}
+                        </div>
+                      );
+                    },
+                  )}
+                {paramsInputMode === "raw" && jsonEditor}
                 {selectedTool.outputSchema && (
                   <div className="bg-gray-50 dark:bg-gray-900 p-3 rounded-lg">
                     <div className="flex items-center justify-between mb-2">
@@ -245,29 +258,39 @@ const ToolsTab = ({
                     </div>
                   </div>
                 )}
-                <Button
-                  onClick={async () => {
-                    try {
-                      setIsToolRunning(true);
-                      await callTool(selectedTool.name, params);
-                    } finally {
-                      setIsToolRunning(false);
-                    }
-                  }}
-                  disabled={isToolRunning}
-                >
-                  {isToolRunning ? (
-                    <>
-                      <Loader2 className="w-4 h-4 mr-2 animate-spin" />
-                      Running...
-                    </>
-                  ) : (
-                    <>
-                      <Send className="w-4 h-4 mr-2" />
-                      Run Tool
-                    </>
-                  )}
-                </Button>
+                <div className="flex justify-between align-middle">
+                  <Button
+                    onClick={async () => {
+                      try {
+                        setIsToolRunning(true);
+                        await callTool(selectedTool.name, params);
+                      } finally {
+                        setIsToolRunning(false);
+                      }
+                    }}
+                    disabled={isToolRunning}
+                  >
+                    {isToolRunning ? (
+                      <>
+                        <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                        Running...
+                      </>
+                    ) : (
+                      <>
+                        <Send className="w-4 h-4 mr-2" />
+                        Run Tool
+                      </>
+                    )}
+                  </Button>
+                  <ToggleGroup
+                    type="single"
+                    defaultValue="bold"
+                    onValueChange={setParamsInputMode}
+                  >
+                    <ToggleGroupItem value="form">form</ToggleGroupItem>
+                    <ToggleGroupItem value="raw">raw</ToggleGroupItem>
+                  </ToggleGroup>
+                </div>
                 <ToolResults
                   toolResult={toolResult}
                   selectedTool={selectedTool}
diff --git a/client/src/components/ui/togglegroup.tsx b/client/src/components/ui/togglegroup.tsx
new file mode 100644
index 00000000..b7c80108
--- /dev/null
+++ b/client/src/components/ui/togglegroup.tsx
@@ -0,0 +1,38 @@
+import * as React from "react";
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+import { cn } from "@/lib/utils";
+
+// Container for toggle items
+const ToggleGroup = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <ToggleGroupPrimitive.Root
+    ref={ref}
+    className={cn(
+      "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+      className,
+    )}
+    {...props}
+  />
+));
+ToggleGroup.displayName = "ToggleGroup";
+
+// Individual toggle item (styled like TabsTrigger)
+const ToggleGroupItem = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <ToggleGroupPrimitive.Item
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+      "bg-muted data-[state=on]:bg-background data-[state=on]:text-foreground",
+      className,
+    )}
+    {...props}
+  />
+));
+ToggleGroupItem.displayName = "ToggleGroupItem";
+
+export { ToggleGroup, ToggleGroupItem };
diff --git a/package-lock.json b/package-lock.json
index 709ce621..bd7a014b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,6 +18,7 @@
         "@modelcontextprotocol/inspector-client": "^0.16.1",
         "@modelcontextprotocol/inspector-server": "^0.16.1",
         "@modelcontextprotocol/sdk": "^1.13.1",
+        "@radix-ui/react-toggle-group": "^1.1.10",
         "concurrently": "^9.0.1",
         "open": "^10.1.0",
         "shell-quote": "^1.8.2",
@@ -2675,6 +2676,60 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-toggle": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle/-/react-toggle-1.1.9.tgz",
+      "integrity": "sha512-ZoFkBBz9zv9GWer7wIjvdRxmh2wyc2oKWw6C6CseWd6/yq1DK/l5lJ+wnsmFwJZbBYqr02mrf8A2q/CVCuM3ZA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toggle-group": {
+      "version": "1.1.10",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle-group/-/react-toggle-group-1.1.10.tgz",
+      "integrity": "sha512-kiU694Km3WFLTC75DdqgM/3Jauf3rD9wxeS9XtyWFKsBUeZA337lC+6uUazT7I1DhanZ5gyD5Stf8uf2dbQxOQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-roving-focus": "1.1.10",
+        "@radix-ui/react-toggle": "1.1.9",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-tooltip": {
       "version": "1.2.7",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.2.7.tgz",
diff --git a/package.json b/package.json
index b0a2e98e..1664a6e1 100644
--- a/package.json
+++ b/package.json
@@ -51,6 +51,7 @@
     "@modelcontextprotocol/inspector-client": "^0.16.1",
     "@modelcontextprotocol/inspector-server": "^0.16.1",
     "@modelcontextprotocol/sdk": "^1.13.1",
+    "@radix-ui/react-toggle-group": "^1.1.10",
     "concurrently": "^9.0.1",
     "open": "^10.1.0",
     "shell-quote": "^1.8.2",

From fb2c6e07323d320ea5f3c0cca5e346a93823016d Mon Sep 17 00:00:00 2001
From: jjjuk <gmodhl67@gmail.com>
Date: Mon, 14 Jul 2025 02:25:50 +0300
Subject: [PATCH 2/5] fix(client): wrong tool parameters default mode

---
 client/src/components/ToolsTab.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/ToolsTab.tsx b/client/src/components/ToolsTab.tsx
index 0d8d59c0..9a8255ab 100644
--- a/client/src/components/ToolsTab.tsx
+++ b/client/src/components/ToolsTab.tsx
@@ -48,7 +48,7 @@ const ToolsTab = ({
   const [params, setParams] = useState<Record<string, unknown>>({});
   const [isToolRunning, setIsToolRunning] = useState(false);
   const [isOutputSchemaExpanded, setIsOutputSchemaExpanded] = useState(false);
-  const [paramsInputMode, setParamsInputMode] = useState<string>("raw");
+  const [paramsInputMode, setParamsInputMode] = useState<string>("form");
 
   const jsonEditor = JsonEditor({
     value: JSON.stringify(params, null, 2),

From 0cf27ae55a13ab979d19678f4c546fc173b51177 Mon Sep 17 00:00:00 2001
From: jjjuk <gmodhl67@gmail.com>
Date: Mon, 14 Jul 2025 03:04:54 +0300
Subject: [PATCH 3/5] fix: tool parameters raw mode use DynamicJsonForm

---
 client/src/components/DynamicJsonForm.tsx |  4 +-
 client/src/components/ToolsTab.tsx        | 47 ++++++++++++++---------
 2 files changed, 31 insertions(+), 20 deletions(-)

diff --git a/client/src/components/DynamicJsonForm.tsx b/client/src/components/DynamicJsonForm.tsx
index 4fbd45ca..6f8c46c2 100644
--- a/client/src/components/DynamicJsonForm.tsx
+++ b/client/src/components/DynamicJsonForm.tsx
@@ -13,6 +13,7 @@ interface DynamicJsonFormProps {
   value: JsonValue;
   onChange: (value: JsonValue) => void;
   maxDepth?: number;
+  forceSimpleObject?: boolean;
 }
 
 const isSimpleObject = (schema: JsonSchemaType): boolean => {
@@ -58,8 +59,9 @@ const DynamicJsonForm = ({
   value,
   onChange,
   maxDepth = 3,
+  forceSimpleObject = false,
 }: DynamicJsonFormProps) => {
-  const isOnlyJSON = !isSimpleObject(schema);
+  const isOnlyJSON = forceSimpleObject || !isSimpleObject(schema);
   const [isJsonMode, setIsJsonMode] = useState(isOnlyJSON);
   const [jsonError, setJsonError] = useState<string>();
   const [copiedJson, setCopiedJson] = useState<boolean>(false);
diff --git a/client/src/components/ToolsTab.tsx b/client/src/components/ToolsTab.tsx
index 9a8255ab..4116e250 100644
--- a/client/src/components/ToolsTab.tsx
+++ b/client/src/components/ToolsTab.tsx
@@ -5,7 +5,7 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { TabsContent } from "@/components/ui/tabs";
 import { Textarea } from "@/components/ui/textarea";
-import DynamicJsonForm from "./DynamicJsonForm";
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/togglegroup";
 import type { JsonValue, JsonSchemaType } from "@/utils/jsonUtils";
 import { generateDefaultValue, isPropertyRequired } from "@/utils/schemaUtils";
 import {
@@ -16,10 +16,9 @@ import {
 import { Loader2, Send, ChevronDown, ChevronUp } from "lucide-react";
 import { useEffect, useState } from "react";
 import ListPane from "./ListPane";
+import DynamicJsonForm from "./DynamicJsonForm";
 import JsonView from "./JsonView";
 import ToolResults from "./ToolResults";
-import JsonEditor from "./JsonEditor";
-import { ToggleGroup, ToggleGroupItem } from "./ui/togglegroup";
 
 const ToolsTab = ({
   tools,
@@ -50,13 +49,6 @@ const ToolsTab = ({
   const [isOutputSchemaExpanded, setIsOutputSchemaExpanded] = useState(false);
   const [paramsInputMode, setParamsInputMode] = useState<string>("form");
 
-  const jsonEditor = JsonEditor({
-    value: JSON.stringify(params, null, 2),
-    onChange: (str: string) => {
-      setParams(JSON.parse(str));
-    },
-  });
-
   useEffect(() => {
     const params = Object.entries(
       selectedTool?.inputSchema.properties ?? [],
@@ -221,7 +213,22 @@ const ToolsTab = ({
                       );
                     },
                   )}
-                {paramsInputMode === "raw" && jsonEditor}
+                {paramsInputMode === "raw" && (
+                  <DynamicJsonForm
+                    forceSimpleObject
+                    schema={{
+                      type: "object",
+                      properties: selectedTool.inputSchema.properties as Record<
+                        string,
+                        JsonSchemaType
+                      >,
+                    }}
+                    value={params as JsonValue}
+                    onChange={(newValue: JsonValue) => {
+                      setParams(newValue as Record<string, unknown>);
+                    }}
+                  />
+                )}
                 {selectedTool.outputSchema && (
                   <div className="bg-gray-50 dark:bg-gray-900 p-3 rounded-lg">
                     <div className="flex items-center justify-between mb-2">
@@ -282,14 +289,16 @@ const ToolsTab = ({
                       </>
                     )}
                   </Button>
-                  <ToggleGroup
-                    type="single"
-                    defaultValue="bold"
-                    onValueChange={setParamsInputMode}
-                  >
-                    <ToggleGroupItem value="form">form</ToggleGroupItem>
-                    <ToggleGroupItem value="raw">raw</ToggleGroupItem>
-                  </ToggleGroup>
+                  {
+                    <ToggleGroup
+                      type="single"
+                      defaultValue="bold"
+                      onValueChange={setParamsInputMode}
+                    >
+                      <ToggleGroupItem value="form">form</ToggleGroupItem>
+                      <ToggleGroupItem value="raw">raw</ToggleGroupItem>
+                    </ToggleGroup>
+                  }
                 </div>
                 <ToolResults
                   toolResult={toolResult}

From baeb69b8e87ad38ca81fd93eddf1fbc9cbd8e1a7 Mon Sep 17 00:00:00 2001
From: jjjuk <gmodhl67@gmail.com>
Date: Mon, 14 Jul 2025 03:10:33 +0300
Subject: [PATCH 4/5] fix: tool parameters mode ToggleGroup wrong default value

---
 client/src/components/ToolsTab.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/ToolsTab.tsx b/client/src/components/ToolsTab.tsx
index 4116e250..4645debf 100644
--- a/client/src/components/ToolsTab.tsx
+++ b/client/src/components/ToolsTab.tsx
@@ -292,7 +292,7 @@ const ToolsTab = ({
                   {
                     <ToggleGroup
                       type="single"
-                      defaultValue="bold"
+                      defaultValue="form"
                       onValueChange={setParamsInputMode}
                     >
                       <ToggleGroupItem value="form">form</ToggleGroupItem>

From d19cf3608ee310c9c72338ce7c582a897b5bc728 Mon Sep 17 00:00:00 2001
From: jjjuk <gmodhl67@gmail.com>
Date: Mon, 14 Jul 2025 16:31:54 +0300
Subject: [PATCH 5/5] fix: DynamicJsonForm don't update on values change in
 forceJsonMode. better prop naming

---
 client/src/components/DynamicJsonForm.tsx | 10 +++++-----
 client/src/components/ToolsTab.tsx        |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/client/src/components/DynamicJsonForm.tsx b/client/src/components/DynamicJsonForm.tsx
index 6f8c46c2..0da5a9f9 100644
--- a/client/src/components/DynamicJsonForm.tsx
+++ b/client/src/components/DynamicJsonForm.tsx
@@ -13,7 +13,7 @@ interface DynamicJsonFormProps {
   value: JsonValue;
   onChange: (value: JsonValue) => void;
   maxDepth?: number;
-  forceSimpleObject?: boolean;
+  forceJsonMode?: boolean;
 }
 
 const isSimpleObject = (schema: JsonSchemaType): boolean => {
@@ -59,9 +59,9 @@ const DynamicJsonForm = ({
   value,
   onChange,
   maxDepth = 3,
-  forceSimpleObject = false,
+  forceJsonMode = false,
 }: DynamicJsonFormProps) => {
-  const isOnlyJSON = forceSimpleObject || !isSimpleObject(schema);
+  const isOnlyJSON = forceJsonMode || !isSimpleObject(schema);
   const [isJsonMode, setIsJsonMode] = useState(isOnlyJSON);
   const [jsonError, setJsonError] = useState<string>();
   const [copiedJson, setCopiedJson] = useState<boolean>(false);
@@ -101,12 +101,12 @@ const DynamicJsonForm = ({
 
   // Update rawJsonValue when value prop changes
   useEffect(() => {
-    if (!isJsonMode) {
+    if (!isJsonMode || forceJsonMode) {
       setRawJsonValue(
         JSON.stringify(value ?? generateDefaultValue(schema), null, 2),
       );
     }
-  }, [value, schema, isJsonMode]);
+  }, [value, schema, isJsonMode, forceJsonMode]);
 
   const handleSwitchToFormMode = () => {
     if (isJsonMode) {
diff --git a/client/src/components/ToolsTab.tsx b/client/src/components/ToolsTab.tsx
index 4645debf..3ce4b2e9 100644
--- a/client/src/components/ToolsTab.tsx
+++ b/client/src/components/ToolsTab.tsx
@@ -215,7 +215,7 @@ const ToolsTab = ({
                   )}
                 {paramsInputMode === "raw" && (
                   <DynamicJsonForm
-                    forceSimpleObject
+                    forceJsonMode
                     schema={{
                       type: "object",
                       properties: selectedTool.inputSchema.properties as Record<