Backend Services Guide - Techtree Avatar

🎯 Quick Overview

Two backend services power your AI avatar experience:
• HGA (Enterprise) - Advanced widget with full API control
• Techtree Avatar (Simple) - Plug-and-play minimal setup

Feature	HGA Backend	Techtree Avatar Backend
Best For	Enterprise apps, custom integration	Quick demos, simple websites
Setup Complexity	Advanced (API keys, webhooks)	Simple (just embed code)
Customization	Full control via APIs	Limited styling only
Avatar Quality	HeyGen photorealistic	Basic 3D avatar
Mobile Support	✅ Full responsive	✅ Full responsive

🏢

HGA Avatar Widget (Enterprise)

Advanced backend service with full API control and HeyGen integration

Production Ready

🌐 Service URLs

STAGING hga-avatar-widget.rr-startech-innovation.workers.dev

PRODUCTION hga-avatar-widget-production.rr-startech-innovation.workers.dev

⚡ Key Features

HeyGen Integration - Photorealistic avatar streaming
OpenAI GPT - Advanced conversational AI
JWT Authentication - Secure session management
Rate Limiting - Built-in abuse protection
CORS Support - Cross-domain embedding
PostMessage API - Parent-child communication

🛠 Technology Stack

Hono.js
Web Framework

TypeScript
Type Safety

Cloudflare
Edge Workers

HeyGen SDK
Avatar Engine

📡 API Endpoints

POST /api/v1/token Generate session token

POST /api/v1/stream/start Start avatar session

GET /widget/* Widget HTML interface

GET /embed.js Embed script

🚀

Techtree Avatar (Simple)

Minimal backend service for quick avatar deployment

Production Ready

🌐 Service URL

LIVE ttavatar-worker.rr-startech-innovation.workers.dev

⚡ Key Features

Plug & Play - No setup required
Basic 3D Avatar - Lightweight animation
Voice & Text - Multiple input methods
WebSocket Streaming - Real-time communication
Mobile Optimized - Touch-friendly interface
No API Keys - Ready to use immediately

🛠 Technology Stack

Vanilla JS
No Dependencies

WebSockets
Real-time

Web Speech
Voice Input

Cloudflare
Pages/Workers

🎯 Perfect For

Quick Demos

Instant avatar for presentations and prototypes

Simple Websites

Basic chat widget without complex setup

Learning

Understanding avatar integration concepts

🔌 Quick Integration Examples

HGA Backend (Advanced)

<!-- Load the embed script -->
<script src="https://hga-avatar-widget.rr-startech-innovation.workers.dev/embed.js"></script>

<!-- Create container -->
<div id="avatar-widget"></div>

<script>
// Initialize with options
HGAAvatarWidget.init({
  container: '#avatar-widget',
  apiKey: 'your-api-key',
  avatarId: 'heygen-avatar-id',
  onReady: () => console.log('Avatar ready'),
  onMessage: (msg) => console.log('Avatar said:', msg)
});
</script>

Techtree Avatar Backend (Simple)

<!-- Just add an iframe - that's it! -->
<iframe
  src="https://ttavatar-worker.rr-startech-innovation.workers.dev"
  width="800"
  height="600"
  allow="microphone"
  style="border: none; border-radius: 12px;">
</iframe>

✅ Ready to start?
• For enterprise use: HGA Integration Guide →
• For quick setup: Techtree Avatar Integration Guide →
• See it live: Live Demo →