Installation

Install the package

Install @allpersonas/core in your application. It includes the renderer, animation, browser speech, TypeScript declarations, artwork, styles, and a Web Component.

npm install @allpersonas/core

This is an alpha release. The API may change before 1.0.

Render a face

Call this function with a DOM host after the view mounts. Keep the returned cleanup function and call it when the view is removed.

import { createFace } from '@allpersonas/core';

export function mountAssistant(host: HTMLElement) {
  host.style.width = '280px';
  host.style.height = '340px';
  const face = createFace(host, {
    avatar: 'ruby',
    expression: 'attentive',
  });

  face.update({ thinking: true });
  // When your agent responds:
  face.update({ thinking: false, expression: 'joyful' });

  // Call the returned function when your view unmounts.
  return () => face.destroy();
}

The host controls layout. The SDK owns the host’s contents and includes its styles, so no separate CSS import is required.

Framework support

Use createFace with plain JavaScript, React, Vue, Svelte, or Angular. You can also register <allpersonas-face> and control it with attributes.