> ## Documentation Index
> Fetch the complete documentation index at: https://ago.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# 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.

<Warning>
  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.
</Warning>

## 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](https://mail.google.com)"
* ✅ "Use the color scheme from [https://stripe.com](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](https://github.com) and use their notification card design"
* ✅ "Copy the color palette from [https://twitter.com](https://twitter.com)"
* ✅ "Use the spacing and typography from [https://notion.so](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

<AccordionGroup>
  <Accordion title="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
  </Accordion>

  <Accordion title="Preview failed to render">
    * Verify preview data matches the context schema
    * Check for missing required variables
    * Verify data types match schema definitions
  </Accordion>

  <Accordion title="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
  </Accordion>
</AccordionGroup>

## Example Workflows

### Scenario 1: Adding Interactive Features

1. **Initial Template**:
   ```jinja2 theme={null}
   <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**:
   ```jinja2 theme={null}
   <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**:
   ```jinja2 theme={null}
   <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](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**:
   ```jinja2 theme={null}
   <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**:
   ```jinja2 theme={null}
   <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**:
   ```jinja2 theme={null}
   <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](./ui-resources) — Template management and syntax reference
* [UI Resource Tool](../tools/ui-resource-tool) — Return rich UI components from agents
* [UI Resources Guide](../guides/ui-resources-guide) — Design patterns and accessibility