Getting Started

Get up and running with html.ai in minutes.

Installation

Clone the repository and start the backend services:

# Clone the repository
git clone https://github.com/tanujdargan/html.ai.git
cd html.ai

# Navigate to the htmlTag directory
cd htmlTag

# Create .env file with your API key
echo "GEMINI_API_KEY=your_gemini_key" > .env

# Start backend and MongoDB with Docker Compose
docker-compose up -d

This starts the following services:

  • MongoDB - Database on port 27017
  • AI Engine - Core optimization API on port 3000
  • Analytics - Dashboard API on port 3001
  • Demo Pages - Sample implementations on port 8083
  • Dashboard - Admin panel on port 8084

Quick Start

1

Import the SDK components

Add the custom element scripts to your HTML page. The SDK includes the AI optimization tag and the reward button component.

<!-- AI Optimization Tag -->
<script type="module" src="./sdk/src/AiOptimizeElement_v2.js"></script>

<!-- Reward Button Component -->
<script type="module" src="./sdk/src/RewardButton.js"></script>
2

Wrap content with ai-opt

Wrap any content you want to optimize with the <ai-opt> custom element. Assign a unique experiment name and component-id for tracking.

<ai-opt experiment="hero-block" component-id="1">
  <div class="hero">
    <img src="product.jpg" alt="Product">
    <div class="hero-info">
      <h2>Your Product Title</h2>
      <p>Product description that AI will personalize.</p>
      <button class="btn">Shop Now</button>
    </div>
  </div>
</ai-opt>
3

Add reward button for feedback

Add a <reward-button> to send reward signals to the AI. Use component-ids to pass an array of component IDs that should receive the reward.

<!-- Single component reward -->
<reward-button
  variant="A"
  reward="100"
  component-ids='["1"]'>
  Give Reward
</reward-button>

<!-- Multiple components reward (v1.12+) -->
<reward-button
  variant="A"
  reward="50"
  component-ids='["1", "2", "3"]'>
  Reward All
</reward-button>

Configuration

ai-opt Attributes

AttributeDescription
experimentUnique experiment name for the component (e.g., "hero-block")
component-idUnique ID to link with reward-button for tracking

reward-button Attributes

AttributeDescription
variantVariant identifier (A, B, etc.) for tracking which variant received the reward
rewardPoint value to assign when clicked (default: 1)
component-idsJSON array of component IDs to reward (v1.12+). Example: '["1", "2"]'
component-idSingle component ID to reward (legacy, use component-ids for arrays)

Full Example

Here is a complete example showing the AI optimization tag and reward button working together:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AI Shop Demo</title>

    <!-- AI Optimization Tag -->
    <script type="module" src="./sdk/src/AiOptimizeElement_v2.js"></script>

    <!-- Reward Button Component -->
    <script type="module" src="./sdk/src/RewardButton.js"></script>
</head>

<body>
    <h1>AI-Optimized Shop Demo</h1>

    <ai-opt experiment="hero-block" component-id="1">
        <div class="hero">
            <img src="product.jpg" alt="Shoes">
            <div class="hero-info">
                <h2>Comfort Runner Shoes</h2>
                <p>Ultra-light running shoes designed for all-day comfort.</p>
                <button class="btn">Shop Now</button>
            </div>
        </div>
    </ai-opt>

    <!-- Reward button with array of component IDs -->
    <reward-button
        variant="A"
        reward="100"
        component-ids='["1"]'>
        Give Reward
    </reward-button>
</body>
</html>