Back to Blog
Developer4 min read

Avatar SDK: Integrate AI Characters in Minutes

Add animated AI avatars to your application with our TypeScript SDK. Built-in caching, rate limiting, and full type definitions.

Varie TeamFebruary 4, 2026
#sdk#tutorial#developer#typescript

We've released @varie-ai/avatar-sdk — a TypeScript SDK that makes it easy to integrate animated AI avatars into any application.

Why an SDK?

Raw API calls work, but they leave you to handle:

  • Caching (models are 3-10MB — you don't want to re-download)
  • Rate limiting (be a good API citizen)
  • Bundle unpacking (.varie files need extraction)
  • Type safety (what fields does a character have?)

The SDK handles all of this for you.

Quick Start

Install the package:

bash
npm install @varie-ai/avatar-sdk

Then discover characters and download models:

typescript
import { VarieAvatarSDK } from '@varie-ai/avatar-sdk';

const sdk = new VarieAvatarSDK();

// 1. Discover available characters
const { characters } = await sdk.discover({
  genre: 'fantasy',
  limit: 10
});

// 2. Get character details
const character = await sdk.getCharacter(characters[0].id);
console.log(character.name, character.tagline);

// 3. Download the Spine model
const model = await sdk.downloadModel(character.id, {
  type: 'full',
  onProgress: (p) => console.log(`${p.percent}%`)
});

// Ready for Spine runtime
const { skeleton, atlas, texture } = model.files;

That's it. The SDK handles caching, rate limiting, and bundle unpacking automatically.

Features

Caching

Models are cached in IndexedDB (browser) or memory (Node.js):

  • Character list: Cached for 1 hour
  • Character details: Cached for 1 week
  • Model files: Cached until you clear them
typescript
// Check cache stats
const stats = await sdk.getCacheStats();
console.log(stats.modelCount, stats.totalSize);

// Clear when needed
await sdk.clearCache();

Rate Limiting

Client-side throttling prevents API abuse:

typescript
const sdk = new VarieAvatarSDK({
  rateLimitPerSecond: 5  // Default
});

// Check status
const status = sdk.getRateLimitStatus();
console.log(status.remaining, status.resetAt);

TypeScript

Full type definitions for everything:

typescript
interface Character {
  id: string;
  name: string;
  tagline: string;
  quotes: string[];
  genre: string;
  personalityTags: string[];
  avatarUrl: string;
  story: string;
  publicModel: {
    status: 'full_ready' | 'base_ready' | 'failed' | null;
    baseUrl?: string;
    fullUrl?: string;
  };
}

Error Handling

Typed errors with specific codes:

typescript
import { SDKError, SDKErrorCode } from '@varie-ai/avatar-sdk';

try {
  await sdk.downloadModel('invalid_id');
} catch (err) {
  if (err instanceof SDKError) {
    switch (err.code) {
      case SDKErrorCode.NOT_FOUND:
        console.log('Character not found');
        break;
      case SDKErrorCode.MODEL_NOT_AVAILABLE:
        console.log('Model not ready yet');
        break;
      case SDKErrorCode.RATE_LIMITED:
        console.log('Too many requests');
        break;
    }
  }
}

Spine Rendering

The SDK returns unpacked model files ready for any Spine 4.x runtime.

Basic Setup

typescript
const model = await sdk.downloadModel(characterId);

// Create texture from blob
const textureUrl = URL.createObjectURL(model.files.texture);
const image = new Image();
image.src = textureUrl;
await new Promise(resolve => image.onload = resolve);

// Create atlas and skeleton
const atlas = new spine.TextureAtlas(model.files.atlas);
const skeletonJson = new spine.SkeletonJson(
  new spine.AtlasAttachmentLoader(atlas)
);
const skeletonData = skeletonJson.readSkeletonData(model.files.skeleton);

// Ready to render
const skeleton = new spine.Skeleton(skeletonData);

Animations & Interactivity

All characters come with:

  • Idle animations with natural breathing and movement
  • Emotional expressions (happy, sad, surprised, thinking)
  • Talking animations with lip sync
  • Eye tracking that follows cursor or gaze targets

See examples/browser/spine-render.html in the SDK repo for a complete working example.

What You Can Build

  • Desktop companions — Electron overlay apps with animated characters (like our Claude Code companion)
  • Web mascots — Add a reactive character to your website or app
  • Interactive chatbots — Characters that express emotions during conversation
  • Educational apps — Animated tutors or guides

Examples

We provide working examples in the SDK repo:

ExampleDescription
examples/browser/index.htmlBasic discover, select, download workflow
examples/browser/spine-render.htmlFull Spine rendering with eye tracking
examples/node/index.tsNode.js CLI example

To run examples locally:

bash
git clone https://github.com/varie-ai/avatar-sdk.git
cd avatar-sdk
npm install && npm run build

# Serve on port 3000 (required for CORS)
python3 -m http.server 3000

# Open http://localhost:3000/examples/browser/

Full Documentation

API Reference

GitHub: avatar-sdk


Questions? Reach out at dev@varie.ai.

Ready to try AI Avatars?