← lab

@three-ws/avatar SDK

The npm SDK bundle loaded from /avatar-sdk/dist/index.mjs (what consumers would get from npm install @three-ws/avatar once it's published). On mount it registers <agent-3d> as a custom element. The Creator section opens the iframe modal that resolves with a GLB Blob — the same flow third-party sites would use.

1. Drop-in web component

<script type="module" src="/avatar-sdk/dist/index.mjs"></script>
<agent-3d src="/avatars/default.glb"></agent-3d>
waiting for SDK to register the custom element…

2. Hand off by avatar ID

<script type="module" src="/avatar-sdk/dist/index.mjs"></script>
<agent-3d avatar-id="AVATAR_UUID"></agent-3d>

The SDK resolves avatar-id against GET /api/avatars/:id on the same origin the SDK was loaded from (override with api-base="https://other.host"). This is the durable handoff the gallery picker emits, and it keeps working even if the underlying GLB URL changes.

picking a real public avatar from /api/avatars/public…

3. Programmatic Creator

import { AvatarCreator } from '/avatar-sdk/src/creator.js';

const creator = new AvatarCreator({
  onExport: (glbBlob) => { /* save it */ },
});
creator.open();
click to open the modal.