Add formats to json schema validator (#47)

Add ability to recognize formats in json schema validator

---------

Co-authored-by: bracesproul <braceasproul@gmail.com>

frontend/app/components/CreateExtractor.tsx

@@ -23,14 +23,20 @@ import Form from "@rjsf/chakra-ui";
 import validator from "@rjsf/validator-ajv8";
 import CodeMirror from "@uiw/react-codemirror";
 import Ajv from "ajv";
+import addFormats from "ajv-formats";
 import React from "react";
 import { useRouter } from "next/navigation";
 
 import { ChatBubbleBottomCenterTextIcon } from "@heroicons/react/24/outline";
 import { useMutation } from "@tanstack/react-query";
 import { suggestExtractor, useCreateExtractor } from "../utils/api";
 
-const ajc = new Ajv();
+const ajv = new Ajv();
+// Adds support for parsing format types like "date-time"
+// and "email" in JSON Schema.
+// A lot of the JSON Schema generated by LLMS will
+// be generated with these formats out of the box.
+addFormats(ajv);
 
 /**
  * Component to create a new extractor with fields
@@ -70,7 +76,7 @@ const CreateExtractor = ({}) => {
   React.useMemo(() => {
     try {
       const parsedSchema = JSON.parse(schema);
-      ajc.compile(parsedSchema);
+      ajv.compile(parsedSchema);
       setCurrentSchemaValid(true);
       setLastValidSchema(parsedSchema);
     } catch (e) {

frontend/package.json

@@ -35,6 +35,7 @@
     "@types/react-dom": "18.2.7",
     "@uiw/react-codemirror": "^4.21.24",
     "ajv": "^8.12.0",
+    "ajv-formats": "^2.1.1",
     "autoprefixer": "10.4.14",
     "axios": "^1.6.8",
     "chakra-react-select": "^4.7.6",

frontend/yarn.lock

@@ -5514,6 +5514,7 @@ __metadata:
     "@typescript-eslint/parser": ^7.3.0
     "@uiw/react-codemirror": ^4.21.24
     ajv: ^8.12.0
+    ajv-formats: ^2.1.1
     autoprefixer: 10.4.14
     axios: ^1.6.8
     chakra-react-select: ^4.7.6