fix: When tool type cannot be determined, use DynamicJsonForm

Author: max-stytch

client/src/components/DynamicJsonForm.tsx

@@ -36,15 +36,17 @@ interface DynamicJsonFormProps {
   value: JsonValue;
   onChange: (value: JsonValue) => void;
   maxDepth?: number;
+  onlyJSON?: boolean;
 }
 
 const DynamicJsonForm = ({
   schema,
   value,
   onChange,
   maxDepth = 3,
+  onlyJSON = false,
 }: DynamicJsonFormProps) => {
-  const [isJsonMode, setIsJsonMode] = useState(false);
+  const [isJsonMode, setIsJsonMode] = useState(onlyJSON);
   const [jsonError, setJsonError] = useState<string>();
   // Store the raw JSON string to allow immediate feedback during typing
   // while deferring parsing until the user stops typing
@@ -374,9 +376,11 @@ const DynamicJsonForm = ({
             Format JSON
           </Button>
         )}
-        <Button variant="outline" size="sm" onClick={handleSwitchToFormMode}>
-          {isJsonMode ? "Switch to Form" : "Switch to JSON"}
-        </Button>
+        {!onlyJSON && (
+          <Button variant="outline" size="sm" onClick={handleSwitchToFormMode}>
+            {isJsonMode ? "Switch to Form" : "Switch to JSON"}
+          </Button>
+        )}
       </div>
 
       {isJsonMode ? (

client/src/components/ToolsTab.tsx

@@ -40,7 +40,13 @@ const ToolsTab = ({
 }) => {
   const [params, setParams] = useState<Record<string, unknown>>({});
   useEffect(() => {
-    setParams({});
+    const params = Object.entries(
+      selectedTool?.inputSchema.properties ?? [],
+    ).map(([key, value]) => [
+      key,
+      generateDefaultValue(value as JsonSchemaType),
+    ]);
+    setParams(Object.fromEntries(params));
   }, [selectedTool]);
 
   const renderToolResult = () => {
@@ -194,10 +200,7 @@ const ToolsTab = ({
                               description: prop.description,
                               items: prop.items,
                             }}
-                            value={
-                              (params[key] as JsonValue) ??
-                              generateDefaultValue(prop)
-                            }
+                            value={params[key] as JsonValue}
                             onChange={(newValue: JsonValue) => {
                               setParams({
                                 ...params,
@@ -206,29 +209,40 @@ const ToolsTab = ({
                             }}
                           />
                         </div>
-                      ) : (
+                      ) : prop.type === "number" || prop.type === "integer" ? (
                         <Input
-                          type={
-                            prop.type === "number" || prop.type === "integer"
-                              ? "number"
-                              : "text"
-                          }
+                          type="number"
                           id={key}
                           name={key}
                           placeholder={prop.description}
                           value={(params[key] as string) ?? ""}
                           onChange={(e) =>
                             setParams({
                               ...params,
-                              [key]:
-                                prop.type === "number" ||
-                                prop.type === "integer"
-                                  ? Number(e.target.value)
-                                  : e.target.value,
+                              [key]: Number(e.target.value),
                             })
                           }
                           className="mt-1"
                         />
+                      ) : (
+                        <div className="mt-1">
+                          <DynamicJsonForm
+                            onlyJSON
+                            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>
                   );