JSON Schema Viewer

1"use client";
2 
3import type { JSONSchema7 } from "ai";
4import type { ComponentProps } from "react";
5import { useMemo } from "react";
6import { Badge } from "@/components/ui/badge";
7import { Separator } from "@/components/ui/separator";
8import { cn } from "@/lib/utils";
9 
10interface SchemaProperty {
11	name: string;
12	type: string;
13	required: boolean;
14	description?: string;
15	isArray: boolean;
16	enumValues?: string[];
17	nested?: SchemaProperty[];
18}
19 
20interface UnionBranch {
21	properties: SchemaProperty[];
22	description?: string;
23	branchIndex: number;
24}
25 
26export interface JsonSchemaViewerProps extends ComponentProps<"div"> {
27	schema: JSONSchema7;
28	title?: string;
29}
30 
31function parseProperty(
32	prop: Record<string, unknown>,
33	name: string,
34	required: boolean,
35): SchemaProperty {
36	// Determine property type
37	let type: string;
38	if (prop.enum) {
39		type = "enum";
40	} else if (prop.type === "object") {
41		type = "object";
42	} else if (Array.isArray(prop.type)) {
43		type = prop.type[0] || "any";
44	} else {
45		type = (prop.type as string) || "any";
46	}
47 
48	const result: SchemaProperty = {
49		name,
50		type,
51		required,
52		isArray: false,
53	};
54 
55	// Handle arrays
56	if (prop.type === "array" && prop.items) {
57		result.isArray = true;
58		const items = prop.items;
59 
60		if (typeof items === "object" && !Array.isArray(items)) {
61			const itemProp = parseProperty(
62				items as Record<string, unknown>,
63				"",
64				false,
65			);
66			result.type = itemProp.type;
67			result.enumValues = itemProp.enumValues;
68			result.nested = itemProp.nested;
69		}
70	}
71 
72	// Handle enums
73	if (prop.enum && Array.isArray(prop.enum)) {
74		result.type = "enum";
75		result.enumValues = prop.enum.map(String);
76	}
77 
78	// Handle objects
79	if (prop.type === "object" && prop.properties) {
80		result.nested = [];
81		const requiredFields = Array.isArray(prop.required)
82			? prop.required
83			: [];
84 
85		for (const [nestedName, nestedProp] of Object.entries(
86			prop.properties,
87		)) {
88			const isNestedRequired = requiredFields.includes(nestedName);
89			result.nested.push(
90				parseProperty(nestedProp, nestedName, isNestedRequired),
91			);
92		}
93	}
94 
95	// Extract description
96	if (prop.description && typeof prop.description === "string") {
97		result.description = prop.description;
98	}
99 
100	return result;
101}
102 
103function parseSchema(schema: JSONSchema7): {
104	isUnion: boolean;
105	properties?: SchemaProperty[];
106	unions?: UnionBranch[];
107} {
108	if (!schema || typeof schema !== "object") {
109		return { isUnion: false, properties: [] };
110	}
111 
112	// Handle union schemas (anyOf)
113// … truncated