Clawatar
@Dongping-Chen
npx machina-cli add skill @Dongping-Chen/clawatar --openclawClawatar — 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
# Clone and install
git clone https://github.com/Dongping-Chen/Clawatar.git ~/.openclaw/workspace/clawatar
cd ~/.openclaw/workspace/clawatar && npm install
# Start (Vite + WebSocket server)
npm run start
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
{"type": "play_action", "action_id": "161_Waving"}
set_expression
{"type": "set_expression", "name": "happy", "weight": 0.8}
Expressions: happy, angry, sad, surprised, relaxed
speak (requires ElevenLabs API key)
{"type": "speak", "text": "Hello!", "action_id": "161_Waving", "expression": "happy"}
reset
{"type": "reset"}
Quick Animation Reference
| Mood | Action ID |
|---|---|
| Greeting | 161_Waving |
| 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
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:'Hello!',action_id:'161_Waving',expression:'happy'}));setTimeout(()=>s.close(),1000)})
"
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
Overview
Clawatar provides a web-based VRM avatar with 162 animations, expressions, TTS lip sync, and AI chat. It runs locally and is controllable via WebSocket, enabling live action, expression changes, and voice interactions using your own VRM model.
How This Skill Works
A web-based VRM viewer (Vite) runs locally with a built-in WebSocket server. Load your VRM model into the viewer, then connect to ws://localhost:8765 and send commands like play_action, set_expression, or speak to drive animations, expressions, and lip-sync in real time. TTS lip-sync requires an ElevenLabs API key, and the model URL is configured via clawatar.config.json.
When to Use It
- Add a visual avatar to an AI assistant or chatbot on a website
- Create a VTuber-style character that users can talk to in real time
- Provide an avatar companion with expressions and gestures in a dashboard
- Demonstrate products or tutorials with a talking 3D character
- Build an educational or training agent with a talking VRM avatar
Quick Start
- Step 1: Clone and install: git clone https://github.com/Dongping-Chen/Clawatar.git ~/.openclaw/workspace/clawatar && cd ~/.openclaw/workspace/clawatar && npm install
- Step 2: Start the server: npm run start
- Step 3: Open http://localhost:3000 and load your VRM model by dragging it onto the page or set model.url in clawatar.config.json; control via WS at ws://localhost:8765
Best Practices
- Use a compatible VRM model (BYOM) and update clawatar.config.json with model.url
- Leverage explicit action_id and expression names to avoid ambiguous commands
- Securely manage ElevenLabs API keys; do not expose keys in frontend code
- Preview animations with the Quick Animation Reference to select appropriate moods
- Test locally at http://localhost:3000 and control via ws://localhost:8765 for smooth lip-sync and reactions
Example Use Cases
- An AI customer support agent on a website, delivering answers with lip-synced gestures
- A live-stream VTuber-style character that responds to chat in real time
- An interactive product demo where the avatar points to features while speaking
- An educational tutor avatar that explains concepts with expressions and motion
- A kiosk assistant with a talking avatar that users can drag and drop their own VRM model into
