JET AI Engine

The AI Engine is the intelligence behind JET—it's what transforms your natural language into working code, intelligent layouts, and functional backends. Understanding how it works will help you craft better prompts and predict results.

What the AI Engine Handles

JET's AI Composer manages every aspect of web development:

• Layout & Structure: Section arrangement, component nesting, responsive grids

• Content & Copy: Text generation, tone matching, content hierarchy

• Styling & Design: Colors, typography, spacing, animations, themes

• Functionality: Form validation, database connections, API integrations

• Routing: Multi-page navigation, URL structure, redirects

• Backend Logic: Database schemas, CRUD operations, authentication

You describe the what, JET handles the how.

How Prompts Are Interpreted

When you send a prompt, the AI Engine follows a four-stage process:

1. Intent Detection The engine identifies what you're asking for:

• Creation: "Add a pricing section"

• Modification: "Make the hero darker"

• Deletion: "Remove the testimonials"

• Query: "What components are available for team sections?"

2. Slot Filling The engine extracts specific requirements from your prompt:

• Assets: Images, logos, icons needed

• CTAs: Button text and actions

• Constraints: Colors, fonts, sizing

• Content: Headlines, descriptions, data

3. Template Selection Based on your intent, the engine either:

• Selects a matching pre-built component

• Generates custom code from scratch

• Combines multiple components

• Modifies existing elements

4. Code Generation & Integration The engine produces:

• HTML structure (semantic and accessible)

• CSS styling (responsive and optimized)

• JavaScript interactivity (when needed)

• Backend APIs and database schemas

• Deployment configuration

Example: Parsed Output

When you say:

"Add a features section with three cards highlighting speed, security, and support. Use icons and keep it minimal."

The engine parses this into:

json

{
  "action": "insert",
  "component": "FeatureGrid",
  "position": "after_hero",
  "props": {
    "columns": 3,
    "items": [
      {
        "icon": "zap",
        "title": "Lightning Fast",
        "description": "Auto-generated speed copy"
      },
      {
        "icon": "shield",
        "title": "Bank-Level Security",
        "description": "Auto-generated security copy"
      },
      {
        "icon": "headphones",
        "title": "24/7 Support",
        "description": "Auto-generated support copy"
      }
    ],
    "style": "minimal"
  }
}
```

Then generates the actual code and integrates it into your site.

### **Core Capabilities & Examples**

**Adding Sections**
- Prompt: *"Add a testimonial carousel"*
- Result: Carousel component with 3 placeholder testimonials, auto-play, and navigation

**Changing Copy**
- Prompt: *"Change the hero headline to 'Build Websites by Talking'"*
- Result: Updates the specific text element while preserving styling

**Wiring Forms to Database**
- Prompt: *"Connect the contact form to save name, email, and message to a database"*
- Result: Creates database table, API endpoint, form validation, and success/error handling

**Creating Data Schemas**
- Prompt: *"Create a blog post schema with title, content, author, date, and featured image"*
- Result: Database table, admin interface for managing posts, and API for fetching posts

**Complex Layouts**
- Prompt: *"Create a 2-column layout: sidebar with navigation on left, main content on right"*
- Result: Responsive layout that stacks vertically on mobile

### **Prompt Engineering Tips**

**Be Specific When It Matters**

❌ Generic: *"Make it better"*  
✅ Specific: *"Increase font size to 24px and add more whitespace between sections"*

❌ Vague: *"Add some products"*  
✅ Clear: *"Add a product grid showing 6 items with image, title, price, and add-to-cart button"*

**Include Sample Content**

❌ Without context: *"Add team bios"*  
✅ With context: *"Add team section with 4 members: John (CEO), Sarah (CTO), Mike (Designer), Lisa (Marketing). Include photos, titles, and short bios."*

**Use Visual Language**

❌ Technical: *"Modify the flexbox alignment"*  
✅ Visual: *"Center all the text in this section"*

❌ Abstract: *"Improve the hierarchy"*  
✅ Concrete: *"Make the headline bigger and bolder, shrink the subheading"*

### **Common Transformation Patterns**

| **If You Want This** | **Say This** |
|----------------------|--------------|
| Duplicate a section | "Copy the pricing section and place it at the bottom" |
| Change colors | "Make all buttons green (#2ECC71)" |
| Add animation | "Add a fade-in animation when scrolling to the features" |
| Mobile layout fix | "Stack the three columns vertically on mobile" |
| Form validation | "Add email validation and required fields to the form" |
| Content generation | "Write 3 benefit descriptions for a productivity app" |

### **What the Engine Cannot Do**

To set proper expectations, here's what JET's AI won't handle:

- **Legal content:** Terms of service, privacy policies (you'll need a lawyer)
- **Licensed assets:** Can't generate copyrighted images or brand logos
- **Live payment processing:** Integrates with Stripe/PayPal but you configure credentials
- **SEO guarantees:** Creates SEO-friendly structure, but ranking depends on many factors
- **Custom server logic:** Complex backend algorithms beyond standard CRUD operations

For these scenarios, JET provides the foundation and you add the specialized components.

### **Architecture Diagram**
```
User Prompt → Natural Language Understanding (NLU)
                          ↓
            Intent Classification + Entity Extraction
                          ↓
              ┌───────────┴───────────┐
              ↓                       ↓
      Template Selector         Code Generator
              ↓                       ↓
      Component Library         Custom Elements
              └───────────┬───────────┘
                          ↓
                Backend Generator
               (APIs + Database)
                          ↓
                  Renderer → Live Preview

Debugging & Change History

View Recent Changes: Click "Version History" to see a timeline of all modifications with before/after comparisons.

Revert Specific Changes: Don't like the last update? Click "Undo" or select a previous snapshot to revert.

Inspect Generated Code: Advanced users can view the actual HTML/CSS/JS by clicking "View Code" in the inspector panel.

Understanding Errors: If JET can't complete your request, it will explain why and suggest alternatives:

• "I couldn't find an image at that URL. Can you upload the image directly?"

• "That color value isn't valid. Try using hex format like #FF5733"

Getting Better Results

The more you use JET, the better it understands your preferences. The AI learns:

• Your design style (colors, layouts, typography)

• Common component patterns you use

• Your content tone and voice

• Typical site structures you build

This means your 10th website will build faster than your first, with fewer clarifying questions.

Pro Tip: If you're building multiple similar sites (like client landing pages), create a "Style Guide" prompt and reuse it:

"Use my brand style: Primary color #3498db, secondary #2ecc71, fonts are Poppins for headings and Inter for body. Keep layouts clean and minimal with lots of whitespace. Always include a sticky header and footer with social links."

Save this as a template and start each new project with it.