FieldCraft: Trình Tạo Biểu Mẫu Thông Minh với Tambo AI

Giới thiệu về FieldCraft

FieldCraft là một ứng dụng trình tạo biểu mẫu được phát triển dựa trên trí tuệ nhân tạo Tambo AI, cho phép người dùng tùy chỉnh giao diện người dùng một cách linh hoạt thông qua các lệnh bằng ngôn ngữ tự nhiên. Điều này tạo ra một trải nghiệm người dùng (UI/UX) động và thân thiện hơn.

🎥 Demo và Mã Nguồn

Bạn có thể xem bản demo trực tiếp và mã nguồn đầy đủ cho FieldCraft trên GitHub.

Tổng quan về FieldCraft

FieldCraft cho phép tạo và hiển thị các biểu mẫu động dựa trên cấu trúc JSON được xác thực bởi các sơ đồ Zod. Ứng dụng hỗ trợ các biểu mẫu nhiều phần, logic điều kiện và các kiểu trường có thể mở rộng, mang lại sự linh hoạt tối đa cho người dùng.

Cấu trúc Tệp và Các Thành Phần Chính

1. Sơ Đồ Trường Biểu Mẫu

Định nghĩa các kiểu trường biểu mẫu với sự hỗ trợ của Zod.

Tệp: src/lib/form-field-schemas.ts
Mục đích: Định nghĩa tập trung cho tất cả các kiểu trường được hỗ trợ và các yếu tố cấu trúc.

Các Kiểu Trường Được Hỗ Trợ:

Trường Cơ Bản: text, email, password, number, checkbox, select, radio, textarea, date
Các Yếu Tố Cấu Trúc: group (cho các phần), divider (để phân cách trực quan)

Linh Hoạt Trong Định Nghĩa Biểu Mẫu:

FieldCraft cho phép định nghĩa các kiểu trường một cách linh hoạt, cho phép người dùng tạo ra các biểu mẫu phù hợp với nhu cầu cụ thể của họ.

🧠 Giao Diện Người Dùng Dựa Trên AI

FieldCraft có khả năng điều khiển trực tiếp các thành phần và tạo ra các biểu mẫu một cách động. Điều này giúp người dùng xây dựng biểu mẫu mà không cần sử dụng các thuật ngữ kỹ thuật.

Tạo Ra Động

Khác với các trình tạo biểu mẫu truyền thống như react-jsonschema-form, nơi bạn cần viết một sơ đồ tĩnh trước, FieldCraft nhận đầu vào từ một yêu cầu bằng ngôn ngữ tự nhiên từ người dùng. Công việc của AI là tạo ra sơ đồ Zod một cách động trong thời gian thực. Đây là phần giá trị nhất và đổi mới nhất của quy trình: một sự tạo ra động dựa trên người dùng.

Giao Diện Người Dùng Dựa Trên AI & Các Thành Phần Tương Tác

Các Thành Phần Tương Tác: Các thành phần có thể được bọc trong withInteractable (ví dụ, ThemeToggle), cho phép AI cập nhật thuộc tính của chúng ngay tại chỗ.
Kiểm Soát Động: AI có thể thay đổi trạng thái của một thành phần dựa trên các lệnh bằng ngôn ngữ tự nhiên, tạo ra một giao diện người dùng dựa trên sự dẫn dắt của người dùng. Người dùng cũng có thể tiếp tục xây dựng các biểu mẫu khác trong cùng một cuộc trò chuyện và xem các phiên bản trước trong không gian canvas.

Ví dụ: Người dùng có thể nói, "Thay đổi giao diện sang chế độ tối," và AI sẽ cập nhật trạng thái của thành phần ThemeToggle.

Trình Tạo Biểu Mẫu Một Trang hoặc Nhiều Bước

FieldCraft đơn giản hóa quá trình tạo các biểu mẫu và nội dung của chúng. Người dùng có thể tạo ra các biểu mẫu phức tạp với các tính năng như điều hướng từng bước, logic điều kiện và xác thực thời gian thực chỉ với một yêu cầu. Nếu người dùng cung cấp tất cả các thông số cần thiết trong một yêu cầu, trợ lý AI sẽ tạo ra một đối tượng JSON hoàn chỉnh, và trình hiển thị của ứng dụng sẽ tạo ra toàn bộ biểu mẫu một lần.

🔧 Cách Thức Hoạt Động

Công việc của AI là tạo ra dữ liệu.
Công việc của sơ đồ zod là xác thực dữ liệu đó.

Trợ lý AI phản hồi với một đối tượng JSON phù hợp với propsSchema, được định nghĩa trong form-definitions.ts và multistep-form-definitions.ts. Nếu thuật ngữ của người dùng không rõ ràng, trợ lý sẽ hướng dẫn họ đến một yêu cầu cụ thể hơn.

Thêm Trường Mới

Hệ thống được thiết kế để dễ dàng mở rộng. Bất kỳ kiểu trường mới nào cũng phải được định nghĩa với một sơ đồ zod tương ứng.

Ví dụ: Để thêm một kiểu trường mới gọi là Box Rating (tối đa 10), bạn sẽ:

Thêm một sơ đồ zod mới trong form-field-schemas.ts để định nghĩa cấu trúc và quy tắc xác thực (nhãn, tên, maxRating).
Cập nhật kiểu hợp nhất trong form-renderer.tsx để bao gồm sơ đồ mới.
Thêm kiểu trường mới vào logic xác thực trong form-validation.tsx.

Tham khảo danh sách đầy đủ các tùy chọn định dạng có sẵn.

Tạo Nội Dung

Kho lưu trữ đã được cấu hình sẵn với các biểu mẫu nhiều bước mẫu, cung cấp cho người dùng một điểm khởi đầu để tùy chỉnh hoàn toàn.

Người dùng có thể tùy chỉnh các mẫu cho các biểu mẫu nhiều bước dựa trên sở thích hoặc định nghĩa tất cả các trường trong một yêu cầu duy nhất.

"Tạo một biểu mẫu đăng ký người dùng nhiều bước với thiết lập tài khoản, thông tin cá nhân, sở thích và bước xem xét."
"Xây dựng một biểu mẫu phản hồi sản phẩm với nhiều bước xếp hạng và một phần khuyến nghị."

Định Dạng Động

Người dùng có thể yêu cầu AI định dạng các biểu mẫu trực tiếp, cho phép họ kiểm soát hoàn toàn về diện mạo thông qua ngôn ngữ tự nhiên.

"Làm cho nền biểu mẫu có màu xanh nhạt."
"Thay đổi văn bản thành màu xám đậm và tăng kích thước phông chữ."
"Thêm một viền xanh với các góc tròn."
"Làm cho biểu mẫu gọn hơn với ít đệm hơn."

Thực Hành Tốt Nhất

Để hiểu rõ hơn về cách thiết kế ứng dụng và cách thêm nhiều tính năng hơn, hãy xem các Thực Hành Tốt Nhất tại đây.

Các Câu Hỏi Thường Gặp (FAQ)

1. FieldCraft có thể tích hợp với những công nghệ nào?

FieldCraft có thể tích hợp với Next.js, React, TypeScript, và các thư viện phổ biến khác.

2. Làm thế nào để thêm các trường mới vào FieldCraft?

Bạn có thể thêm các trường mới bằng cách định nghĩa sơ đồ zod tương ứng và cập nhật logic xác thực.

3. FieldCraft có hỗ trợ nhiều ngôn ngữ không?

Có, bạn có thể tùy chỉnh FieldCraft để hỗ trợ nhiều ngôn ngữ khác nhau dựa trên yêu cầu của người dùng.

FieldCraft được xây dựng cho TamboHack: Dành Riêng Cho Giao Diện Của Bạn.