Smithery Schema Form

1"use client";
2 
3import { useForm } from "react-hook-form";
4import { Button } from "@/components/ui/button";
5import {
6	Field,
7	FieldDescription,
8	FieldError,
9	FieldLabel,
10} from "@/components/ui/field";
11import { Input } from "@/components/ui/input";
12import {
13	Select,
14	SelectContent,
15	SelectItem,
16	SelectTrigger,
17	SelectValue,
18} from "@/components/ui/select";
19import { Switch } from "@/components/ui/switch";
20import { Textarea } from "@/components/ui/textarea";
21 
22interface JSONSchema {
23	type?: string;
24	properties?: Record<string, JSONSchemaProperty>;
25	required?: string[];
26	additionalProperties?: boolean;
27}
28 
29interface JSONSchemaProperty {
30	type?: string | string[];
31	description?: string;
32	enum?: string[];
33	minimum?: number;
34	maximum?: number;
35	default?: unknown;
36	items?: JSONSchemaProperty;
37}
38 
39interface SchemaFormProps {
40	schema: unknown;
41	onSubmit: (data: Record<string, unknown>) => void;
42	isLoading?: boolean;
43}
44 
45export function SchemaForm({ schema, onSubmit, isLoading }: SchemaFormProps) {
46	// Extract JSON schema from various formats
47	const jsonSchema: JSONSchema =
48		schema && typeof schema === "object" && "jsonSchema" in schema
49			? (schema as { jsonSchema: JSONSchema }).jsonSchema
50			: (schema as JSONSchema) || {};
51 
52	const {
53		register,
54		handleSubmit,
55		formState: { errors },
56		setValue,
57		watch,
58	} = useForm<Record<string, unknown>>({
59		defaultValues: getDefaultValues(jsonSchema),
60	});
61 
62	const properties = jsonSchema.properties || {};
63	const requiredFields = jsonSchema.required || [];
64 
65	return (
66		<form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
67			{Object.entries(properties).map(([name, property]) => {
68				const isRequired = requiredFields.includes(name);
69				return (
70					<Field key={name}>
71						<FieldLabel htmlFor={name}>
72							{formatFieldName(name)}
73							{isRequired && <span className="text-destructive ml-1">*</span>}
74						</FieldLabel>
75						{property.description && (
76							<FieldDescription>{property.description}</FieldDescription>
77						)}
78						{renderField(name, property, register, setValue, watch, isRequired)}
79						<FieldError errors={errors[name] ? [errors[name]] : undefined} />
80					</Field>
81				);
82			})}
83			<Button type="submit" disabled={isLoading} className="w-full">
84				{isLoading ? "Executing..." : "Execute"}
85			</Button>
86		</form>
87	);
88}
89 
90function renderField(
91	name: string,
92	property: JSONSchemaProperty,
93	register: ReturnType<typeof useForm>["register"],
94	setValue: ReturnType<typeof useForm>["setValue"],
95// … truncated