FieldCraft，表單產生器的遊標
FieldCraft 使用Tambo AI作為智慧遊標，依照自然語言指令直接操控使用者介面。這創造了一個動態的、使用者驅動的 UI/UX。
🎥 示範和程式碼
{% 嵌入 https://youtu.be/W7i0ZMEhVFw %}
查看 FieldCraft 的現場示範和完整程式碼庫。
{% 嵌入 https://github.com/nadinev6/FieldCraft %}
🧠 AI驅動的UI
FieldCraft 的功能是直接控制元件並動態產生表單。這種方法使得表單的建立變得非常簡單，無需使用專業術語。
動態生成
與傳統的表單建構器（例如react-jsonschema-form不同，FieldCraft 的輸入是來自使用者的自然語言提示。傳統的表單建構器需要先編寫靜態的預先定義模式，而 FieldCraft 的輸入是來自使用者的自然語言提示。 AI 的任務是即時動態產生 Zod 模式。這是整個流程中最有價值、最具創新性的部分：動態的、使用者驅動的生成。
AI驅動的UI與互動功能
-
可交互元件：元件可以用
withInteractable包裝（例如ThemeToggle），從而允許 AI 就地更新其道具。 -
動態控制： AI 可以根據自然語言指令修改元件狀態，從而建立使用者驅動的 UI。用戶還可以在同一聊天中繼續建立其他表單，並在畫布空間中查看先前的版本。
範例：使用者可以說“將主題變更為暗模式”，然後 AI 將更新ThemeToggle元件的狀態。
單頁或多步驟表單產生器
FieldCraft 簡化了表單及其內容的建立。使用者只需一個提示，即可產生具有逐步導航、條件邏輯和即時驗證等功能的複雜表單。如果使用者在一個提示中提供了所有必要的規範，AI 助理將產生一個完整的 JSON 物件，然後應用程式的渲染器將立即建立整個表單。
🔧 工作原理
-
人工智慧的工作是產生資料。
-
zod 模式的作用是驗證資料。
AI 助理會傳回一個 JSON 物件，該物件與propsSchema匹配，該屬性在form-definitions.ts和multistep-form-definitions.ts中定義。如果使用者的輸入比較模糊，助手會引導他們提出更具體的請求。
新增字段
該系統設計為易於擴展。任何新的欄位類型都必須使用對應的 zod 模式進行定義。
範例：要新增一個名為Box Rating （最多 10）」的新欄位類型，您需要：
-
在
form-field-schemas.ts中新增一個新的zod 模式來定義結構和驗證規則（標籤、名稱、maxRating）。 -
更新
form-renderer.tsx中的聯合類型以包含新模式。 -
將新的欄位類型新增至
form-validation.tsx中的驗證邏輯。
查看可用樣式選項的完整清單。
內容生成
此儲存庫預先配置了範例多步驟表單，為使用者提供了完全客製化的起點。
使用者可以自訂基於偏好的多步驟表單的模板，或在單一提示中定義所有欄位。
-
“建立一個多步驟用戶註冊表，其中包含帳戶設定、個人資訊、偏好設定和審核步驟。 ”
-
“建立具有多個評級步驟和推薦部分的產品回饋表。 ”
動態造型
使用者可以直接要求人工智慧設計表單樣式，透過自然語言完全控制外觀。
-
“使表單背景變為淺藍色。 ”
-
“將文字更改為深灰色並增加字體大小。 ”
-
“加入帶有圓角的綠色邊框。 ”
-
“使用更少的填充使表單更加緊湊。 ”
其他資源
要更深入地了解應用程式的設計以及如何加入更多功能，請查看此處的最佳實踐。
FieldCraft 是為TamboHack 建造的：僅適用於您的 UI 。
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
