feat: Add configuration generator UI

package.json

@@ -31,7 +31,11 @@
     "@docusaurus/plugin-ideal-image": "3.6.3",
     "@docusaurus/preset-classic": "3.6.3",
     "@docusaurus/theme-search-algolia": "3.6.3",
+    "@graphiql/create-fetcher": "^0.1.0",
     "@mdx-js/react": "^3.0.1",
+    "@rjsf/core": "^6.5.3",
+    "@rjsf/utils": "^6.5.3",
+    "@rjsf/validator-ajv8": "^6.5.3",
     "autoprefixer": "^10.4.19",
     "clsx": "^2.1.1",
     "graphiql": "^3.3.1",
@@ -49,8 +53,7 @@
     "react-hot-toast": "^2.4.1",
     "react-on-screen": "^2.1.1",
     "react-platform-js": "^0.0.1",
-    "tailwindcss": "^3.4.4",
-    "@graphiql/create-fetcher": "^0.1.0"
+    "tailwindcss": "^3.4.4"
   },
   "devDependencies": {
     "@babel/core": "^7.24.7",

src/pages/app/config.tsx

@@ -0,0 +1,66 @@
+import React, { useEffect, useState } from 'react';
+import Layout from '@theme/Layout';
+import Form from '@rjsf/core';
+import validator from '@rjsf/validator-ajv8';
+
+export default function ConfigApp() {
+  const [schema, setSchema] = useState<any>(null);
+  const [formData, setFormData] = useState<any>({});
+
+  useEffect(() => {
+    fetch('https://raw.githubusercontent.com/tailcallhq/tailcall/main/generated/.tailcallrc.schema.json')
+      .then((res) => res.json())
+      .then((data) => {
+        setSchema(data);
+      })
+      .catch((err) => console.error("Failed to load schema:", err));
+  }, []);
+
+  const handleDownload = () => {
+    const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(formData, null, 2));
+    const downloadAnchorNode = document.createElement('a');
+    downloadAnchorNode.setAttribute("href",     dataStr);
+    downloadAnchorNode.setAttribute("download", ".tailcallrc.json");
+    document.body.appendChild(downloadAnchorNode);
+    downloadAnchorNode.click();
+    downloadAnchorNode.remove();
+  };
+
+  return (
+    <Layout
+      title="Tailcall Configurator"
+      description="Create, update, and download Tailcall Configurations visually"
+    >
+      <main className="container margin-vert--lg">
+        <div className="row">
+          <div className="col col--8 col--offset-2">
+            <h1>Tailcall Configurator</h1>
+            <p>Use the form below to visually generate your Tailcall configuration.</p>
+
+            {schema ? (
+              <div className="card shadow--md padding--md" style={{ background: 'var(--ifm-background-surface-color)' }}>
+                <Form 
+                  schema={schema} 
+                  validator={validator}
+                  formData={formData}
+                  onChange={(e) => setFormData(e.formData)}
+                  onSubmit={handleDownload}
+                >
+                  <div style={{ marginTop: '20px' }}>
+                    <button type="submit" className="button button--primary button--lg">
+                      Download Configuration
+                    </button>
+                  </div>
+                </Form>
+              </div>
+            ) : (
+              <div className="text--center padding--xl">
+                <div>Loading schema...</div>
+              </div>
+            )}
+          </div>
+        </div>
+      </main>
+    </Layout>
+  );
+}