Add enum support

client/src/components/DynamicJsonForm.tsx

@@ -17,6 +17,7 @@ export type JsonSchemaType = {
   description?: string;
   properties?: Record<string, JsonSchemaType>;
   items?: JsonSchemaType;
+  enum?: string[];
 };
 
 type JsonObject = { [key: string]: JsonValue };

client/src/components/StringInput.tsx

@@ -0,0 +1,51 @@
+import { Textarea } from "@/components/ui/textarea";
+import { JsonSchemaType } from "./DynamicJsonForm";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "./ui/select";
+
+interface Props {
+  id: string;
+  name: string;
+  property: JsonSchemaType;
+  value: string;
+  onChange: (value: string) => void;
+}
+
+export const StringInput = ({ id, name, property, value, onChange }: Props) => {
+  if (property.enum?.length) {
+    return (
+      <Select
+        value={value}
+        onValueChange={(value) => {
+          onChange(value);
+        }}
+      >
+        <SelectTrigger id={id} name={name}>
+          <SelectValue placeholder={property.description} />
+        </SelectTrigger>
+        <SelectContent>
+          {property.enum.map((item) => (
+            <SelectItem key={item} value={item}>
+              {item}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    );
+  }
+
+  return (
+    <Textarea
+      id={id}
+      name={name}
+      placeholder={property.description}
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+    />
+  );
+};

client/src/components/ToolsTab.tsx

@@ -4,7 +4,6 @@ import { Checkbox } from "@/components/ui/checkbox";
 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, { JsonSchemaType, JsonValue } from "./DynamicJsonForm";
 import {
   ListToolsResult,
@@ -16,6 +15,7 @@ import { useEffect, useState } from "react";
 import ListPane from "./ListPane";
 
 import { CompatibilityCallToolResult } from "@modelcontextprotocol/sdk/types.js";
+import { StringInput } from "./StringInput";
 
 const ToolsTab = ({
   tools,
@@ -192,19 +192,17 @@ const ToolsTab = ({
                           </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"
-                        />
+                        <div className="mt-1">
+                          <StringInput
+                            id={key}
+                            name={key}
+                            property={prop}
+                            value={(params[key] as string) ?? ""}
+                            onChange={(value) =>
+                              setParams({ ...params, [key]: value })
+                            }
+                          />
+                        </div>
                       ) : prop.type === "object" || prop.type === "array" ? (
                         <div className="mt-1">
                           <DynamicJsonForm