How to Use Moonshine.dev AI Assistant for Easy Code Generation in MXHX and FeathersUI

Introduction

Welcome back to Part 5 of our comprehensive Moonshine.dev series! Throughout our journey, we've built a solid foundation of knowledge and skills. In Part 1, we discovered the power of the WYSIWYG editor and created our first simple interface. Part 2 took us deeper into MXHX code structure and layout management. In Part 3, we mastered styling techniques to create visually appealing forms. And in Part 4, we tackled complex nested layouts to build professional Event Registration forms.

While the visual canvas editor is incredibly powerful and gives you complete control over your interface design, at some point creating forms manually can become time-consuming, especially when dealing with repetitive tasks or complex forms with many similar fields. This is where Moonshine.dev's AI Assistant becomes your ultimate productivity booster, allowing you to generate sophisticated forms automatically and speed up your workflow dramatically.

Premium Features

To unlock the full potential of AI-powered form generation, you'll need to create an account on Moonshine.dev and purchase a subscription. The AI Assistant is a premium feature that requires an active subscription to access its powerful form generation capabilities.

Account Creation Process

1. Navigate to Moonshine.dev and click the "Sign Up" button in the top navigation.

2. Fill in your registration details:

   • Email address

   • Full name

   • Secure password

   • Accept the terms of service

3. Verify your email address by clicking the confirmation link sent to your inbox.

4. Once verified, you'll be prompted to choose a subscription plan that includes AI Assistant access.

   
   

Logging In

1. Visit Moonshine.dev and click "Sign In".

2. Enter your credentials and access your dashboard.

3. Create new canvas

4. When you open AI Assistant panel on the right it will give you a welcome message, indicating your subscription is active.

   
   

   

   AI Chat Interface

   
   
   
   

Using AI code generation

The AI Assistant understands natural language and can generate complete forms based on your descriptions. Let's explore how to use it effectively.

Example of a General Prompt

For quick form generation, you can use simple, general prompts:

Create a contact form with basic fields

The AI will interpret this and generate a standard contact form including:

• Name field

• Email field

• Message textarea

• Submit button

• Appropriate styling and layout

Generated Contact Form

Of course, because AI generation is a non-deterministic process your results may vary slightly.

Example of a Detailed Prompt

For more control over your form's structure and content, provide detailed specifications:

Create a pizza order form with: 

Pizza Details section: 
- Size (radio buttons: Small | Medium | Large in one row) 
- Crust Type dropdown | Quantity stepper (side by side) 

Toppings section: 
- Meat checkboxes in 2 columns: Pepperoni, Sausage, Ham, Bacon 
- Veggie checkboxes in 2 columns: Mushrooms, Peppers, Onions, Olives 

Delivery section: 
- Customer Name | Phone (side by side) 
- Address (full width text area) 
- Delivery Time date picker | Special Instructions toggle 

Style with warm orange/red colors and playful fonts

This detailed prompt will generate a comprehensive form with:

• Organized sections using nested layouts (Pizza Details, Toppings, Delivery Info)

• Mixed layout arrangements: radio buttons in rows, checkboxes in columns, side-by-side text inputs

• Various component types: Radio buttons, NumericStepper, CheckBoxes, TextInput, TextArea

• Custom styling with warm orange theme and professional spacing

• Complex nested structure showcasing MXHX layout capabilities

  
  

  

  Generated Pizza Order Form

  
  

Refining Existing Form

One of the most powerful features of the AI Assistant is its ability to work with your existing forms. The form currently open in your editor is always part of the AI's context, allowing for seamless modifications and enhancements.

Adding Fields to Existing Form

If you have a form already created and want to extend it, simply describe what you'd like to add:

Add a "Emergency Contact" section to this form with:
- Emergency Contact Name (text input)
- Relationship (dropdown: Spouse, Parent, Sibling, Friend, Other)  
- Emergency Phone Number (text input)
Place this section before the submit button

The AI will analyze your existing form structure and seamlessly integrate the new fields while maintaining the current styling and layout patterns.

Contact Form with Added Fields

Styling Existing Form

You can also request styling changes to your current form:

Update the styling of this form to:
- Use a modern dark theme with white text
- Add subtle shadows to input fields
- Make the submit button green with rounded corners
- Increase spacing between sections for better readability

The AI will apply these styling changes while preserving the form's functionality and structure.

Contact Form with Applied Styling

Best Practices for AI Prompts

To get the best results from the AI Assistant:

1. Be Specific: Include field types and styling preferences.

2. Organize Your Request: Structure your prompt with clear sections and bullet points.

3. Reference Standards: Mention specific FeathersUI controls.

4. Iterate: Start with a basic prompt, then refine with additional requests.

5. Test Generated Forms: Always review and test the generated forms before deployment.

   
   

Summary

In Part 5, we've explored how Moonshine.dev's AI Assistant can revolutionize your form creation workflow. You've learned how to leverage artificial intelligence to generate sophisticated forms from natural language descriptions, dramatically reducing development time while maintaining professional quality.

With the AI Assistant in your toolkit, you now have the complete Moonshine.dev skill set: from manual design and coding to AI-powered generation, enabling you to tackle any UI development challenge efficiently.

Get in Touch

Need additional help or have special requests for your projects? The Moonshine.dev team is here to support you:

• Technical Support: Get help with implementation issues and troubleshooting

• Feature Requests: Suggest new AI capabilities or components

• Consulting Services: Available for complex enterprise projects

For all inquiries, reach us at help@moonshine.dev - we're committed to helping you succeed with your UI development projects.

Additional Resources

For continued learning and reference:

• mxhx.dev - MXHX documentation and examples

• feathersui.com - Complete Feathers UI component reference

• Moonshine.dev Blog - Latest updates and advanced tutorials