Clawatar — 3D VRM Avatar Viewer
Give your AI agent a body. Web-based VRM avatar with 162 animations, expressions, TTS lip sync, and AI chat.
Install & Start
CODEBLOCK0
Opens at http://localhost:3000 with WS control at ws://localhost:8765.
Users must provide their own VRM model (drag & drop onto page, or set model.url in clawatar.config.json).
WebSocket Commands
Send JSON to ws://localhost:8765:
play_action
CODEBLOCK1
set_expression
{"type": "set_expression", "name": "happy", "weight": 0.8}
Expressions:
happy,
angry,
sad,
surprised, INLINECODE7
speak (requires ElevenLabs API key)
CODEBLOCK3
reset
CODEBLOCK4
Quick Animation Reference
| Mood | Action ID |
|---|
| Greeting | INLINECODE8 |
| Happy |
116_Happy Hand Gesture |
| Thinking |
88_Thinking |
| Agreeing |
118_Head Nod Yes |
| Disagreeing |
144_Shaking Head No |
| Laughing |
125_Laughing |
| Sad |
142_Sad Idle |
| Dancing |
105_Dancing,
143_Samba Dancing,
164_Ymca Dance |
| Thumbs Up |
153_Standing Thumbs Up |
| Idle |
119_Idle |
Full list: public/animations/catalog.json (162 animations)
Sending Commands from Agent
CODEBLOCK5
UI Features
- - Touch reactions: Click avatar head/body for reactions
- Emotion bar: Quick 😊😢😠😮😌💃 buttons
- Background scenes: Sakura Garden, Night Sky, Café, Sunset
- Camera presets: Face, Portrait, Full Body, Cinematic
- Voice chat: Mic input → AI response → TTS lip sync
Config
Edit clawatar.config.json for ports, voice settings, model URL. TTS requires ElevenLabs API key in env (ELEVENLABS_API_KEY) or ~/.openclaw/openclaw.json under skills.entries.sag.apiKey.
Notes
- - Animations from Mixamo — credit required, non-commercial
- VRM model not included (BYOM — Bring Your Own Model)
- Works standalone without OpenClaw; AI chat is optional
Clawatar — 3D VRM 虚拟形象查看器
为你的AI智能体赋予身体。基于Web的VRM虚拟形象，支持162种动画、表情、TTS唇形同步和AI对话。
安装与启动
bash
克隆并安装
git clone https://github.com/Dongping-Chen/Clawatar.git ~/.openclaw/workspace/clawatar
cd ~/.openclaw/workspace/clawatar && npm install
启动（Vite + WebSocket服务器）
npm run start
在 http://localhost:3000 打开，WS控制端位于 ws://localhost:8765。
用户需自行提供VRM模型（拖拽到页面，或在 clawatar.config.json 中设置 model.url）。
WebSocket 命令
向 ws://localhost:8765 发送JSON：
play_action
json
{type: play
action, actionid: 161_Waving}
set_expression
json
{type: set_expression, name: happy, weight: 0.8}
表情：happy、angry、sad、surprised、relaxed
speak（需要ElevenLabs API密钥）
json
{type: speak, text: 你好！, action
id: 161Waving, expression: happy}
reset
json
{type: reset}
快速动画参考
116Happy Hand Gesture |
| 思考 | 88_Thinking |
| 同意 | 118_Head Nod Yes |
| 不同意 | 144_Shaking Head No |
| 大笑 | 125_Laughing |
| 悲伤 | 142_Sad Idle |
| 跳舞 | 105
Dancing、143Samba Dancing、164_Ymca Dance |
| 竖大拇指 | 153_Standing Thumbs Up |
| 待机 | 119_Idle |
完整列表：public/animations/catalog.json（162种动画）
从智能体发送命令
bash
cd ~/.openclaw/workspace/clawatar && node -e
const W=require(ws),s=new W(ws://localhost:8765);
s.on(open,()=>{s.send(JSON.stringify({type:speak,text:你好！,actionid:161Waving,expression:happy}));setTimeout(()=>s.close(),1000)})
UI功能
- - 触摸反应：点击虚拟形象头部/身体触发反应
- 情绪栏：快速😊😢😠😮😌💃按钮
- 背景场景：樱花花园、夜空、咖啡馆、日落
- 相机预设：面部、半身、全身、电影
- 语音聊天：麦克风输入 → AI响应 → TTS唇形同步
配置
编辑 clawatar.config.json 设置端口、语音参数、模型URL。TTS需要在环境变量（ELEVENLABSAPIKEY）或 ~/.openclaw/openclaw.json 的 skills.entries.sag.apiKey 中提供ElevenLabs API密钥。
备注
- - 动画来自 Mixamo — 需注明出处，仅限非商业用途
- 不包含VRM模型（BYOM — 自带模型）
- 可独立运行，无需OpenClaw；AI对话为可选功能
