Documentation

Everything you need to integrate html.ai.

Introduction

html.ai provides AI-powered UI personalization for websites. The SDK tracks user behavior, identifies behavioral patterns, and dynamically optimizes content to match each user's intent.

This documentation is organized into four sections:

Getting Started — Installation, setup, and configuration
Core Concepts — How components, attributes, and tracking work
API Reference — SDK methods and events (REST API docs available on the server)
Architecture — System design, services, and Docker deployment

Quick Start

# 1. Clone and start backend
git clone https://github.com/tanujdargan/html.ai.git
cd html.ai
echo "GEMINI_API_KEY=your_gemini_key" > .env
docker-compose up -d

# 2. Add SDK to your HTML
<script type="module" src="./sdk/src/AiOptimizeElement_v2.js"></script>
<script type="module" src="./sdk/src/RewardButton.js"></script>

# 3. Wrap components & add reward button
<ai-opt experiment="hero" component-id="1">
  <h1>Welcome</h1>
  <button>Shop Now</button>
</ai-opt>

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

Full Guide View Architecture