AI Template Editor

Edit Jinja2 UI Resource templates using natural language instructions

The AI Template Editor provides tools for working with Jinja2 UI Resource templates. It includes a built-in validation tool that checks templates for syntax errors and variable usage.

The AI editing features described below (natural language editing, internet access, iterative error fixing) are not yet available. The UI button exists but the backend integration is not implemented. You can still validate templates and use the live preview manually.

Currently Available

• Template Validation: Check templates for Jinja2 syntax errors and variable usage against the schema
• Live Preview: See rendered results instantly to verify changes
• Context-Aware Validation: Validates against your template variables and schema

Planned Features (Not Yet Available)

Accessing the AI Template Editor

1. Navigate to AI Studio → UI Resources
2. Create a new template or edit an existing one
3. Go to the Template tab
4. Click the AI Edit button (purple sparkles icon) in the top right of the template editor

How to Use

1. Describe Your Changes

In the AI Editor dialog, enter a clear instruction describing what you want to change. Examples:

• “Add a button to toggle visibility of the description”
• “Make the layout responsive with Tailwind classes”
• “Add icons to list items using lucide-react icon classes”
• “Change the color scheme to use purple tones”
• “Add hover effects to interactive elements”

2. AI Processes Your Request

The AI will:

• Analyze your current template
• Understand available variables from your context schema
• Use preview data to test rendering
• Research best practices if needed (via internet access)
• Generate the modified template

3. Review the Results

After processing, you’ll see:

• Validation Status: Whether the template is valid
• Edited Template: The modified code with syntax highlighting
• Live Preview: Rendered output with your preview data
• Error Messages: Any validation or rendering errors

4. Apply or Adjust

• Apply Changes: Click “Apply Changes” to update your template
• Try Again: Click “Cancel” and provide different instructions
• Manual Edit: Close the AI editor and make manual adjustments

Best Practices

Writing Effective Instructions

Good Instructions:

• ✅ “Add a card wrapper with shadow and rounded corners”
• ✅ “Make the list items display in a 2-column grid on desktop”
• ✅ “Add a badge showing the item count”
• ✅ “Make it look like Gmail’s interface using https://mail.google.com”
• ✅ “Use the color scheme from https://stripe.com”
• ✅ “Search for modern card design patterns and apply them”
• ✅ “Fix errors” (AI will validate and fix any issues)
• ✅ “Validate the template” (AI will check for errors)

Website-Specific Instructions:

• ✅ “Analyze https://github.com and use their notification card design”
• ✅ “Copy the color palette from https://twitter.com”
• ✅ “Use the spacing and typography from https://notion.so”

Error Fixing Instructions:

• ✅ “Fix the validation errors”
• ✅ “Check for errors and fix them”
• ✅ “Validate and fix any issues”

Less Effective Instructions:

• ❌ “Make it look better” (too vague)
• ❌ “Use variable X” (if X doesn’t exist in your schema)
• ❌ “Add JavaScript” (Jinja2 templates are HTML only)

Template Variables

The AI can only use variables defined in your Context Schema. Make sure your schema includes all necessary variables before using AI editing.

Iterative Editing

For complex changes, break them into smaller steps:

1. First: “Add basic card structure”
2. Then: “Add responsive grid layout”
3. Finally: “Add icons and styling”

Technical Details

AI Capabilities

• Template Engine: Jinja2
• CSS Framework: Tailwind CSS (recommended)
• Icon Library: Lucide (when applicable)
• Internet Access:
  • WebFetch: Can analyze specific website designs by URL
  • WebSearch: Can search for UI/UX patterns and best practices
• Design Extraction: Analyzes colors, spacing, typography, and layout from websites
• Validation Tool: Built-in validate_template tool that:
  • Checks Jinja2 syntax errors
  • Validates variable usage against schema
  • Tests rendering with preview data
  • Provides detailed error reports
  • Gives fix recommendations
• Multi-turn Editing: Can make up to 10 turns for research, editing, and validation

Constraints

The AI Editor:

• ✅ Modifies template content only
• ✅ Uses only variables from your context schema
• ✅ Validates syntax and rendering
• ✅ Preserves existing functionality unless asked to change
• ❌ Cannot create new files
• ❌ Cannot modify context schema
• ❌ Cannot add JavaScript (templates are HTML only)

Security

• All AI operations are server-side
• Templates are sandboxed during rendering
• Only staff users can access AI editing
• Internet access is read-only (research purposes)

Troubleshooting

Template has validation errors

• Check that all variables in the template exist in your context schema
• Verify Jinja2 syntax is correct (proper tags, filters)
• Review error messages for specific issues

Preview failed to render

• Verify preview data matches the context schema
• Check for missing required variables
• Verify data types match schema definitions

AI didn't understand my instruction

• Be more specific about what you want
• Break complex changes into smaller steps
• Refer to specific variables by name
• Provide examples if possible

Example Workflows

Scenario 1: Adding Interactive Features

1. Initial Template:

   <div class="p-4">
     <h3>{{ title }}</h3>
     <p>{{ description }}</p>
   </div>
   

2. AI Instruction: “Add a toggle button to show/hide the description, and style it with Tailwind”

3. AI Output:

   <div class="p-4 border rounded-lg">
     <div class="flex justify-between items-center">
       <h3 class="text-lg font-semibold">{{ title }}</h3>
       <button class="px-3 py-1 bg-purple-600 text-white rounded hover:bg-purple-700"
               onclick="this.closest('div').querySelector('.description').classList.toggle('hidden')">
         Toggle
       </button>
     </div>
     <p class="description mt-2 text-gray-600">{{ description }}</p>
   </div>
   

4. Review: Check the preview, verify it works as expected

5. Apply: Click “Apply Changes” to update the template

Scenario 2: Analyzing a Website Design

1. Initial Template:

   <div class="p-4">
     <h3>{{ title }}</h3>
     <p>{{ description }}</p>
   </div>
   

2. AI Instruction: “Make it look like Stripe’s pricing cards from https://stripe.com/pricing”

3. AI Process:

   • Uses WebFetch to analyze Stripe’s pricing page
   • Extracts design elements: color scheme, spacing, shadows, typography
   • Applies Stripe’s design patterns to the template

4. AI Output:

   <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 hover:shadow-lg transition-shadow">
     <h3 class="text-xl font-semibold text-gray-900 mb-2">{{ title }}</h3>
     <p class="text-gray-600 text-sm leading-relaxed">{{ description }}</p>
   </div>
   

5. Review: Preview shows a Stripe-inspired card design

6. Apply: Click “Apply Changes” to update the template

Scenario 3: Validating and Fixing Errors

1. Template with Errors:

   <div class="card">
     <h3>{{ titel }}</h3>  <!-- Typo: should be 'title' -->
     <p>{{ description | safe }</p>
     {% if status = 'active' %}  <!-- Wrong syntax: should be '==' -->
       <span>Active</span>
     {% endif %}
   </div>
   

2. AI Instruction: “Fix errors”

3. AI Process:

   • Uses validate_template tool
   • Gets validation report:
     ❌ STATUS: Template has validation errors
     
     --- Template Syntax Validation ---
     Errors:
       • Line 3: Undefined variable 'titel' (did you mean 'title'?)
       • Line 5: Invalid comparison syntax, use '==' not '='
     
     --- Recommended Actions ---
     • Fix syntax errors listed above
     • Use Edit tool to make corrections
     • Run validate_template again after fixing
     
   • Uses Edit to fix: titel → title
   • Uses Edit to fix: status = 'active' → status == 'active'
   • Runs validate_template again to confirm fixes

4. AI Output:

   <div class="card">
     <h3>{{ title }}</h3>
     <p>{{ description | safe }}</p>
     {% if status == 'active' %}
       <span>Active</span>
     {% endif %}
   </div>
   

5. Validation Report: ✅ Template is valid and renders successfully!

6. Result: All errors fixed automatically

Related Features

• UI Resources — Template management and syntax reference
• UI Resource Tool — Return rich UI components from agents
• UI Resources Guide — Design patterns and accessibility