From 4bc44c4d19342f4f49d73cc67f43315d952d0b17 Mon Sep 17 00:00:00 2001
From: Maxwell Gerber <max@stytch.com>
Date: Tue, 8 Apr 2025 14:54:48 -0700
Subject: [PATCH] fix: When tool type cannot be determined, use DynamicJsonForm

---
 client/src/components/DynamicJsonForm.tsx | 12 ++++--
 client/src/components/ToolsTab.tsx        | 46 +++++++++++++++--------
 2 files changed, 38 insertions(+), 20 deletions(-)

diff --git a/client/src/components/DynamicJsonForm.tsx b/client/src/components/DynamicJsonForm.tsx
index f5b0d63..a3fd847 100644
--- a/client/src/components/DynamicJsonForm.tsx
+++ b/client/src/components/DynamicJsonForm.tsx
@@ -36,6 +36,7 @@ interface DynamicJsonFormProps {
   value: JsonValue;
   onChange: (value: JsonValue) => void;
   maxDepth?: number;
+  onlyJSON?: boolean;
 }
 
 const DynamicJsonForm = ({
@@ -43,8 +44,9 @@ const DynamicJsonForm = ({
   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 ? (
diff --git a/client/src/components/ToolsTab.tsx b/client/src/components/ToolsTab.tsx
index a9e9bf8..8eddad1 100644
--- a/client/src/components/ToolsTab.tsx
+++ b/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,13 +209,9 @@ 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}
@@ -220,15 +219,30 @@ const ToolsTab = ({
                           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>
                   );