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

  • pnpm

  • yarn

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

  • pnpm

  • yarn

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.