The avatars SDK support a wide range of platforms and languages. This tutorial will walk through how to build a simple web application showcasing your avatar using react-ts + vite.

This guide is aimed at novice web developers developing applications based on TypeScript. If you are familiar with web coding, you may want to jump straight into next session.

npm create vite@latest my-new-avatars-app -- --template react-ts

​
Installation

After created a new project, install avatars SDK. You can also install any dependencies you need for your project.

npm i @avatechai/avatars

Avatars requires Node.js version 17.02+, please upgrade if your package manager warns about it.

​
Basic Example in React

You can replace the code of “App.tsx” with the code below and that’s it!

App.tsx
import { useAvatar } from '@avatechai/avatars/react'
import { defaultAvatarLoaders } from '@avatechai/avatars/default-loaders'

function App() {
  const { avatarDisplay } = useAvatar({
    // Avatar State
    avatarId: '5118f46f-2cb4-4ce1-9b75-f0ac659fc3fc',

    // Loader + Plugins
    avatarLoaders: defaultAvatarLoaders,
  })
  return <>{avatarDisplay}</>
}

export default App;

Model created by 奈奈子＊DG 工作室@Live2D -> https://booth.pm/ja/items/4746187 using as demo purposes

​
TypeScript Support

The SDK is written in TypeScript and ships with type definitions.