Add UI template system for reusable generated UIs

[GeneralJerel]

Overview

Introduce a template system to store and reuse generated UIs. Currently, when an AI generates a UI from data (e.g., Invoice JSON → Invoice UI), there's no way to save that layout and style for future use. This feature would enable users to capture a "liked" UI structure and apply it to similar data.

Use Case

Invoice Example:

1. User provides invoice JSON data
2. AI generates a beautiful Invoice UI with specific styling and layout
3. User likes the design and wants to reuse this style for all future invoices
4. Instead of regenerating from scratch each time, use the saved template
5. Templates can be modified/tweaked for different invoice types

Goals

• Save generated UI structures as reusable templates
• Store templates in a schema format (JSON, Zod, or similar)
• Apply templates to new data with the same structure
• Modify/customize templates without affecting the original
• Version and manage multiple template variants

Implementation Considerations

• Schema Definition: Define a schema to represent UI templates

  • Component types and props
  • Layout structure
  • Styling information
  • Data bindings/mappings

• Template Storage: Where and how to persist templates

  • Database/file storage
  • User-owned vs. shared templates
  • Template versioning

• Template Application: How to apply templates to new data

  • Schema matching/validation
  • Partial template application
  • Override/customize specific sections

• Integration with Generative UI: How templates interact with the generative UI system

  • Use templates as "style guides" for generation
  • Save newly generated UIs as templates
  • Mix template-based and AI-generated components

Example Data Structure

interface UITemplate {
  id: string;
  name: string;
  description: string;
  schema: Zod.ZodSchema | JSONSchema;
  components: Component[];
  styling: Record<string, any>;
  createdAt: Date;
  updatedAt: Date;
  version: number;
}

interface Component {
  type: string;
  props: Record<string, any>;
  dataBinding?: string;
  children?: Component[];
}

Next Steps

1. Define the template schema format
2. Design the template storage/management layer
3. Build template application engine
4. Create UI for saving/managing templates
5. Integrate with existing generative UI system