FieldCraft, a Cursor for Form Builders

FieldCraft uses Tambo AI to act as an intelligent cursor, directly manipulating the user interface based on natural language commands. This creates a dynamic, user-driven UI/UX.

🎥 Demo and Code

Check out the live demo and the full codebase for FieldCraft.

nadinev6 / FieldCraft

FieldCraft

FieldCraft is Cursor for Form Builders powered by Tambo AI, designed for the TamboHack. It uses Next.js, React, TypeScript, Tailwind CSS, and Zod for schema validation. This README will guide you through the architecture and file structure so you can replicate or extend the app.

---

Overview

FieldCraft enables dynamic, schema-driven form creation and rendering. Forms are defined using JSON objects validated by Zod schemas, and rendered as interactive UI components. The app supports multi-section forms, conditional logic, and extensible field types.

---

File Structure & Key Components

1. Form Field Schemas

Defines the blueprint for each form field type using Zod.

• File: src/lib/form-field-schemas.ts
• Purpose: Centralized schema definitions for all supported field types and structural elements.

Supported Field Types:

• Basic Fields: text, email, password, number, checkbox, select, radio, textarea, date
• Structural Elements: group (for sections), divider (for visual separation)

Form Definition Flexibility:

The…

View on GitHub

---

🧠 AI-Driven UI

FieldCraft's has the ability is to directly control components and dynamically generate forms. This approach makes is very easy to build forms without using technical terms.

Dynamic Generation

Unlike traditional form builders like react-jsonschema-form, where you must first write a static, pre-defined schema, FieldCraft's input is a natural language prompt from a user. The AI's job is to generate the Zod schema dynamically in real-time. This is the most valuable and innovative part of the process: a dynamic, user-driven generation.

AI-Driven UI & Interactables

• Interactable Components: Components can be wrapped with withInteractable (e.g., ThemeToggle), allowing the AI to update their props in place.

• Dynamic Control: The AI can modify a component's state based on natural language commands, creating a user-driven UI. Users can also continue building other forms in the same chat and view previous versions in the canvas space.

Example: A user can say, "Change the theme to dark mode," and the AI will update the ThemeToggle component's state.

Single-Page or Multi-Step Form Builder

FieldCraft simplifies the creation of forms and their content. Users can generate complex forms with features like step-by-step navigation, conditional logic, and real-time validation with a single prompt. If a user provides all the necessary specifications in one prompt, the AI assistant will generate a complete JSON object, and the application's renderer will then create the entire form at once.

---

🔧 How It Works

• The AI's job is to produce the data.

• The zod schema's job is to validate that data.

The AI assistant responds with a JSON object that matches the propsSchema, which is defined in form-definitions.ts and multistep-form-definitions.ts. If a user's term is vague, the assistant will guide them toward a more specific request.

Adding New Fields

The system is designed to be easily extensible. Any new field type must be defined with a corresponding zod schema.

Example: To add a new field type called Box Rating (up to 10), you would:

1. Add a new zod schema in form-field-schemas.ts to define the structure and validation rules (label, name, maxRating).
2. Update the union type in form-renderer.tsx to include the new schema.
3. Add the new field type to the validation logic in form-validation.tsx.

See the Full list of available Styling Options.

---

Content Generation

The repository comes pre-configured with example multi-step forms, providing users with a starting point for full customization.

Users can customize templates for preference-based multi-step forms or define all fields in a single prompt.

• "Create a multi-step user registration form with account setup, personal info, preferences, and review steps."

• "Build a product feedback form with multiple rating steps and a recommendation section."

Dynamic Styling

Users can ask the AI to style forms directly, giving them full control over the appearance through natural language.

• "Make the form background light blue."
• "Change the text to dark gray and increase font size."
• "Add a green border with rounded corners."
• "Make the form more compact with less padding."

---

Additional Resources

For a deeper understanding of the application's design and how to add more features, view the Best Practices here.

---

FieldCraft was built for the TamboHack: For Your UI Only.