Getting started
Build a simple web application showcasing your avatar in few step.
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!
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.