AI Avatar

Name: AI Avatar
Rating: 4.67 (3 reviews)
Author: Web Developer Hyper

VRM 3D avatar companion that reacts when you send messages to AI or any website. Includes an animation editor for custom poses.

As of June 2026, AI Avatar has 31 users and a 4.67/5 rating from 3 reviews in the Productivity category.

Web Developer Hyper Productivity

Chrome Web Store ↗.crx

Users0%

Rating0%

4.67

3 reviews

Reviews0%

Version

10.0.0

Manifest V3

90-day change · In the last 90 days this extension 5 version updates, changed permissions.

History

11 snapshots

Tracking since Apr 1, 2026.

View as table

Date	Users	Rating	Reviews	Version
Apr 1, 2026	—	—	—	3.0.0
Apr 17, 2026	—	—	—	3.0.0
Apr 22, 2026	16	4.50	2	5.0.1
Apr 27, 2026	13	4.50	2	6.0.1
May 5, 2026	16	4.50	2	6.0.1
May 10, 2026	19	4.50	2	6.0.1
May 15, 2026	20	4.67	3	7.0.1
May 22, 2026	25	4.67	3	7.0.1
May 28, 2026	28	4.67	3	7.0.1
Jun 4, 2026	31	4.67	3	8.0.0
Jun 10, 2026	30	4.67	3	8.0.0
Now	31	4.67	3	10.0.0

Changelog

Jun 10, 2026

description

AI Avatar — Chrome Extension
(日本語の説明は下部をご覧ください / Japanese version below)

A VRM 3D character in your browser side panel that reacts to AI activity on ChatGPT and Claude. Animations and speech bubbles all run without AI too.

💻 Also available as a VS Code Extension — reacts to Claude Code / GitHub Copilot activity directly in your editor.
🎉 Thank you for 100+ installs on VS Code!
https://marketplace.visualstudio.com/items?itemName=web-developer-hyper.ai-avatar

📖 Read the story behind this project on DEV.to:
v1 → https://dev.to/webdeveloperhyper/ai-avatar-meet-your-ideal-girlfriendboyfriend-for-free-21n5
v2 → https://dev.to/webdeveloperhyper/ai-avatar-v2-with-pose-editor-vs-code-extension-38n2
v4 → https://dev.to/webdeveloperhyper/how-to-get-cheered-up-247-ai-avatar-v4-with-animation-editor-chrome-extension-vs-code-2f07
v6 → https://dev.to/webdeveloperhyper/let-superheroes-cheer-you-up-ai-avatar-v6-chrome-extension-vs-code-extension-2ak7
v7 → https://dev.to/webdeveloperhyper/well-support-you-with-all-our-might-ai-avatar-v7-pose-capture-and-more-vs-code-and-chrome-3aab
v8 → coming soon!

✨ FEATURES

🎭 Live reactions — character automatically reacts when you send a message to AI
🔄 Change Avatar — swap your VRM character anytime with the button at the top
💃 Animations — play .vrma motion clips or custom JSON poses; 5-state button: off / Default / Random (v7)/ Random Custom (v8)/ Custom (v2)
🎬 Animation Editor — create multi-keyframe animations with in / hold / out timing (v4)
🎨 Random Editor — edit zone-split pattern JSON in the Animation Editor; Body & Arms / Legs / Fingers zones (v8)
🎥 OrbitControls — drag to rotate, scroll to zoom, right-click to pan
👀 Eye tracking — eyes and head follow your mouse cursor when idle
💬 Lipsync — mouth animates while AI is replying
😊 Click or press Enter to interact — triggers a smile, nod, and animation (if ON)
💬 Custom speech messages — edit the speech bubble messages via the Messages button
😂 Jokes — avatar tells jokes via the Jokes button
📸 Pose Capture — capture a real body pose with webcam and export it as a VRM animation JSON (v7)
❤️ Positive word reactions (VS Code only) — heart counter and animations on positive/negative words (v7)
🔍 Prompt Checker [Beta] (VS Code only) — instant rule-based feedback on your AI prompt clarity (v7)
🦁 Giant Mode (Chrome only) — float the avatar as a draggable, resizable overlay over any web page (v7)


🤖 SUPPORTED SITES

The avatar automatically reacts on:
- 🤖 ChatGPT (chatgpt.com)
- 🤖 Claude (claude.ai)

Enter key reaction works on all websites.


🚀 GETTING STARTED

No setup needed — comes with a built-in sample character.

1. Install the extension from the Chrome Web Store
2. Pin it to the toolbar
3. Click the AI Avatar icon and open the Side Panel
4. Chat with any supported AI site — your avatar reacts automatically


🎨 USE YOUR OWN VRM CHARACTER

You can create your own 3D avatar for free using VRoid (https://vroid.com/en) — no 3D modeling skills needed. Design your character and export it as a .vrm file.

Click the Change Avatar button at the top of the panel to pick a .vrm file.

v6 adds new sample characters — three girls and two boys — plus cute, cool, and funny pose packs. Download the zip free from GitHub Releases:
https://github.com/webdeveloperhyper/ai-avatar/releases


💃 ANIMATIONS

The Animation button cycles through five states:
- Off: no motion clips play
- Animation: Default — plays the built-in sample poses included with the extension
- Animation: Random — generates random poses from built-in zone patterns (v7)
- Animation: Random Custom — pick your own zone-pattern JSON, plays random pose combos (v8)
- Animation: Custom — opens a file picker, plays .vrma and .json pose files from your chosen files

👉 VRMA Animation files are not included in the extension because they cannot be redistributed under their license terms. Download them for free from the official VRoid Project:
https://booth.pm/en/items/5512385

The pack includes 7 animations: Show full body, Greeting, Peace sign, Shoot, Spin, Model pose, and Squat.

1. Download and unzip the pack
2. Click Animation until it shows Animation: Custom
3. Pick the .vrma files
4. A random clip plays each time the AI responds


🎬 ANIMATION EDITOR (v4+)

Click Edit Animation to open the animation editor as a full tab:

Views:
- Three synchronized cameras side by side: RIGHT / FRONT / LEFT — see all angles at once (v8)
- Image button switches to 2x2 layout — load any reference image alongside the three camera views (v8)

Bone editing:
- Full 2-column bone list covering head, neck, spine, arms, hands, legs, and all 30 finger bones (v5)
- Drag the slider or type a value in degrees to rotate each bone (v5)
- A bone arc trail appears on the avatar when you focus a slider — visual rotation feedback (v8)
- Quick-apply preset buttons at the bottom: Body & Arms / Legs / Fingers zone presets (v8)

Keyframes & timing:
- Add multiple keyframes with + KF to build a full animation sequence (v4)
- Each keyframe has In (fade in), Hold, and Out (fade out, last keyframe only) timing (v4)
- Navigate with < >, delete with - KF, preview with Play (v4)

Expression:
- Per-keyframe expression: Default / Happy / Wink (v7)

Actions:
- Load — pick a different JSON pose file to edit
- Save — write the animation back to the JSON file; adds it to the random pool
- Reload — re-read the file from disk, discarding unsaved edits
- JSON to VRMA — export the keyframe animation as a .vrma VRM Animation file (v8)
- Exit — close the editor tab and reopen the sidebar (v8)

Random Editor (v8):
- Click Random Editor to open the zone-split pattern JSON editor
- Pick a pattern JSON file (e.g. your custom random-custom.json)
- Switch between Body & Arms / Legs / Fingers zones — only relevant bones shown, unrelated ones hidden
- Navigate patterns with < >, add with +, delete with −; name is editable
- Save writes all edits back to the JSON file; Reload re-reads from disk
- Exit Random returns to the normal editor


💬 SPEECH BUBBLE MESSAGES

Click the Messages button to edit the messages shown in the speech bubble when the avatar reacts.
Enter messages separated by | (pipe), e.g. You can do it! | Nice work! | Love that fix!
Messages are saved and persist across sessions.


🗺️ ROADMAP

✅ v1
- VRM character in VS Code sidebar
- Live reactions to Claude Code activity
- Eye tracking, lipsync, OrbitControls
- Change Avatar, speech bubble messages

✅ v2
- 3-state Animation button (off / Default / Custom)
- Custom pose editor with JSON save/load
- Jokes button
- GitHub Copilot watcher support

✅ v3
- 🌐 Chrome extension (this extension)
- Various fixes and adjustments

✅ v4
- Pose Editor upgraded to full Animation Editor
- Multi-keyframe timeline with in / hold / out timing
- Various fixes and adjustments

✅ v5
- All 30 finger bones added to the animation editor
- Animation editor values now shown and saved in degrees (backward compatible with existing files)
- BG toggle button — switch to gray background to see dark-colored avatars
- Various UI polish: button styling, focus outlines, editor colors
- Fixed reload to always restore the latest saved pose

✅ v6
- New sample characters: 3 girls and 2 boys (free download from GitHub Releases)
- New pose packs: cute, cool, and funny poses (free download from GitHub Releases)
- https://github.com/webdeveloperhyper/ai-avatar/releases

✅ v7
- 📸 Pose Capture — capture a real body pose with webcam and export it as a VRM animation JSON
- ❤️ Positive word reactions (VS Code only) — heart counter, smile, and heart overlay animation when positive words are detected; broken heart and head shake on negative words
- 🦁 Giant Mode (Chrome only) — float the avatar as a draggable, resizable overlay over any web page
- 🎲 Animation: Random mode — new 4th state generates random poses from zone patterns (expression, body + arm, fingers, legs)
- 😊 Expression editor — add Happy or Wink expressions to animation keyframes directly in the editor
- 🖱️ Click anywhere on page to react (Chrome only) — clicking any web page triggers an animation on the avatar
- 🔍 Prompt Checker [Beta] (VS Code only) — paste any AI prompt and get instant rule-based feedback: too vague, missing action verb, vague references, unnecessary filler, too many tasks, and missing file context

✅ v8
- 🎲 Animation: Random Custom — 5th animation state; pick a custom zone-pattern JSON, plays random pose combos
- 🎨 Random Editor — zone-split pattern JSON editor inside the Animation Editor (Body & Arms / Legs / Fingers zones)
- 🎬 Animation Editor update — now opens as a full-screen tab; three-camera view (RIGHT / FRONT / LEFT), image reference layout, bone arc trail, zone preset buttons, JSON to VRMA export

v9 — Now creating!
- 🎉 More fun updates


---


AI Avatar — Chrome拡張機能

ブラウザのサイドパネルに表示されるVRM 3Dキャラクターが、ChatGPTやClaudeへのメッセージ送信に反応します。AIなしでもアニメーションや吹き出しが動作します。

💻 VS Code拡張機能としても利用可能 — エディタ上でClaude Code / GitHub Copilotの動作に反応します。
🎉 VS Code版100インストール達成！ありがとうございます！
https://marketplace.visualstudio.com/items?itemName=web-developer-hyper.ai-avatar

📖 開発ストーリーはDEV.toで読めます：
v1 → https://dev.to/webdeveloperhyper/ai-avatar-meet-your-ideal-girlfriendboyfriend-for-free-21n5
v2 → https://dev.to/webdeveloperhyper/ai-avatar-v2-with-pose-editor-vs-code-extension-38n2
v4 → https://dev.to/webdeveloperhyper/how-to-get-cheered-up-247-ai-avatar-v4-with-animation-editor-chrome-extension-vs-code-2f07
v6 → https://dev.to/webdeveloperhyper/let-superheroes-cheer-you-up-ai-avatar-v6-chrome-extension-vs-code-extension-2ak7
v7 → https://dev.to/webdeveloperhyper/well-support-you-with-all-our-might-ai-avatar-v7-pose-capture-and-more-vs-code-and-chrome-3aab
v8 → coming soon!


✨ 機能一覧

🎭 リアクション — AIにメッセージを送ると自動でキャラクターが反応
🔄 アバター変更 — 上部のボタンでVRMキャラクターをいつでも変更可能
💃 アニメーション — .vrmaモーションクリップやカスタムJSONポーズを再生；5段階ボタン：オフ / デフォルト / ランダム (v7)/ ランダムカスタム (v8)/ カスタム (v2)
🎬 アニメーションエディタ — 複数キーフレームのアニメーションをIn / Hold / Outタイミングで作成 (v4)
🎨 ランダムエディタ — アニメーションエディタ内でゾーン分割パターンJSONを直接編集（ボディ＆アーム / 脚 / 指ゾーン）(v8)
🎥 オービットコントロール — ドラッグで回転、スクロールでズーム、右クリックでパン
👀 視線追跡 — アイドル時に目と頭がマウスカーソルを追う
💬 リップシンク — AIの返答中に口が動く
😊 クリックまたはEnterキーで反応 — スマイル、うなずき、アニメーションが発動
💬 カスタム吹き出しメッセージ — Messagesボタンから吹き出しのメッセージを編集
😂 ジョーク — Jokesボタンでアバターがジョークを言う
📸 ポーズキャプチャ — ウェブカメラで体のポーズを撮影し、VRMアニメーションJSONとして書き出し (v7)
❤️ ポジティブワード反応（VS Code限定）— ポジティブ/ネガティブワード検出時にハートカウンターとアニメーション (v7)
🔍 プロンプトチェッカー [Beta]（VS Code限定）— AIプロンプトの明確さをルールベースで即チェック (v7)
🦁 ジャイアントモード（Chrome限定）— ドラッグ・リサイズ可能なオーバーレイとしてアバターをどのページにも表示 (v7)


🤖 対応サイト

以下のサイトで自動反応します：
- 🤖 ChatGPT (chatgpt.com)
- 🤖 Claude (claude.ai)

Enterキーの反応はすべてのウェブサイトで動作します。


🚀 はじめ方

セットアップ不要 — サンプルキャラクターが最初から入っています。

1. Chrome ウェブストアから拡張機能をインストール
2. ツールバーにピン留め
3. AI Avatarアイコンをクリックしてサイドパネルを開く
4. 対応AIサイトでチャットすると自動でアバターが反応


🎨 自分のVRMキャラクターを使う

VRoid (https://vroid.com/ja) を使えば3Dモデリングの知識なしに無料でオリジナルアバターを作れます。キャラクターをデザインして.vrmファイルとしてエクスポートしてください。

パネル上部の「Change Avatar」ボタンから.vrmファイルを選択できます。

v6では新しいサンプルキャラクター（女の子3体・男の子2体）とポーズパック（かわいい・クール・おもしろ）を追加しました。GitHubリリースページからzipを無料でダウンロードできます：
https://github.com/webdeveloperhyper/ai-avatar/releases


💃 アニメーション

Animationボタンで5つの状態を切り替えます：
- オフ：モーションクリップを再生しない
- Animation: Default — 拡張機能に含まれるサンプルポーズを再生
- Animation: Random — 内蔵のゾーンパターンからランダムにポーズを生成 (v7)
- Animation: Random Custom — カスタムゾーンパターンJSONを選択してランダムなポーズコンボを再生 (v8)
- Animation: Custom — ファイルを選択し、.vrmaや.jsonポーズファイルを再生

👉 VRMAアニメーションファイルはライセンスの都合上、拡張機能に含まれていません。公式VRoidプロジェクトから無料でダウンロードできます：
https://booth.pm/ja/items/5512385

パックには7つのアニメーションが含まれます：全身表示、挨拶、ピースサイン、シュート、スピン、モデルポーズ、スクワット。

1. パックをダウンロードして解凍
2. AnimationボタンをAnimation: Customになるまでクリック
3. .vrmaファイルを選択
4. AIが返答するたびにランダムなクリップが再生


🎬 アニメーションエディタ (v4+)

「Edit Animation」をクリックすると専用タブとしてエディタが開きます：

表示：
- RIGHT / FRONT / LEFT の3方向カメラを同期表示 — すべての角度を一画面で確認 (v8)
- Imageボタンで2×2レイアウトに切り替え — 参考画像を横に並べて表示可能 (v8)

ボーン編集：
- 全身の2カラムボーンリスト — 全30本の指ボーンを含む (v5)
- スライダーまたは度数入力でボーンを回転 (v5)
- スライダーにフォーカスするとアバターにボーン弧トレイルが表示 — 視覚的フィードバック (v8)
- 下部プリセットボタン：ボディ＆アーム / 脚 / 指のゾーンパターンをワンタッチ適用 (v8)

キーフレームとタイミング：
- + KFで複数キーフレームを追加してアニメーションシーケンスを構築 (v4)
- 各キーフレームにIn（フェードイン）・Hold・Out（フェードアウト、最終KFのみ）タイミング設定 (v4)
- < > でナビゲート、- KFで削除、Playでプレビュー (v4)

表情：
- キーフレームごとに表情設定：Default / Happy / Wink (v7)

アクション：
- Load — 別のJSONポーズファイルを選択
- Save — JSONファイルに書き戻し、ランダムプールに追加
- Reload — ディスクからファイルを再読み込み、未保存の編集を破棄
- JSON to VRMA — キーフレームアニメーションを.vrmaファイルとしてエクスポート (v8)
- Exit — エディタタブを閉じてサイドバーを再表示 (v8)

ランダムエディタ (v8)：
- Random Editorをクリックしてゾーン分割パターンJSONエディタを開く
- パターンJSONファイルを選択（例：カスタムrandom-custom.json）
- ボディ＆アーム / 脚 / 指ゾーンを切り替え — 関連ボーンのみ表示、無関係なボーンは非表示
- < > でナビゲート、+で追加、−で削除、名前を編集可能
- SaveでJSONに書き戻し、Reloadでディスクから再読み込み
- Exit Randomで通常エディタに戻る


💬 吹き出しメッセージ

Messagesボタンをクリックして、アバターが反応したときに吹き出しに表示するメッセージを編集できます。
メッセージは | （パイプ）で区切って入力します。例：頑張って！ | いいね！ | 完璧！
メッセージは保存され、セッションをまたいで維持されます。


🗺️ ロードマップ

✅ v1
- VS CodeサイドバーにVRMキャラクター表示
- Claude Code活動へのライブ反応
- 視線追跡、リップシンク、オービットコントロール
- アバター変更、吹き出しメッセージ

✅ v2
- 3段階Animationボタン（オフ / デフォルト / カスタム）
- カスタムポーズエディタ（JSON保存・読み込み）
- Jokesボタン
- GitHub Copilotウォッチャー対応

✅ v3
- 🌐 Chrome拡張機能（この拡張機能）
- 各種修正・調整

✅ v4
- ポーズエディタをフルアニメーションエディタにアップグレード
- In / Hold / Outタイミング付き複数キーフレームタイムライン
- 各種修正・調整

✅ v5
- アニメーションエディタに全30本の指ボーンを追加
- エディタの値を度数で表示・保存（既存ファイルとの後方互換性あり）
- BGトグルボタン追加 — グレー背景に切り替えて暗色アバターを見やすく
- UIの各種改善：ボタンスタイル、フォーカス枠、エディタの配色
- リロードが最後に保存したポーズを正しく復元するよう修正

✅ v6
- 新サンプルキャラクター：女の子3体・男の子2体（GitHubリリースから無料ダウンロード）
- 新ポーズパック：かわいい・クール・おもしろ（GitHubリリースから無料ダウンロード）
- https://github.com/webdeveloperhyper/ai-avatar/releases

✅ v7
- 📸 ポーズキャプチャツール — ウェブカメラで体のポーズを撮影し、VRMアニメーションJSONとして書き出し
- ❤️ ポジティブワード反応 — ポジティブワード検出時にハートカウンター・スマイル・ハートオーバーレイアニメーション；ネガティブワードには割れたハートと首振り
- 🦁 ジャイアントモード（Chrome限定）— ドラッグ・リサイズ可能なオーバーレイとしてアバターをどのページにも表示
- 🎲 Animation: Randomモード — 内蔵のゾーンパターン（表情・体と腕・指・脚）からランダムにかわいいポーズを生成する新しい第4状態 (v7)
- 😊 表情エディタ — アニメーションエディタのキーフレームにHappyまたはWink表情を追加可能
- 🖱️ ページのどこかをクリックで反応（Chrome限定）— ウェブページをクリックするとアバターがアニメーションで反応
- 🔍 プロンプトチェッカー [Beta]（VS Code限定）— AIプロンプトを貼り付けるだけで、曖昧すぎる・アクション動詞なし・代名詞で指示・余分な前置き・タスク過多・ファイル情報なし などをルールベースで即チェック

✅ v8
- 🎲 Animation: Random Custom — 第5のアニメーション状態；カスタムゾーンパターンJSONを選択してランダムなポーズコンボを再生
- 🎨 ランダムエディタ — アニメーションエディタ内のゾーン分割パターンJSONエディタ（ボディ＆アーム / 脚 / 指ゾーン）
- 🎬 アニメーションエディタ アップデート — フルスクリーンタブとして起動；3方向カメラ表示（RIGHT / FRONT / LEFT）、参考画像レイアウト、ボーン弧トレイル、ゾーンプリセットボタン、JSON to VRMAエクスポート

v9 — 開発中！
- 🎉 お楽しみに

AI Avatar — Chrome Extension
(日本語の説明は下部をご覧ください / Japanese version below)

A VRM 3D character in your browser side panel that reacts to AI activity on ChatGPT and Claude. Animations and speech bubbles all run without AI too.

💻 Also available as a VS Code Extension — reacts to Claude Code / GitHub Copilot activity directly in your editor.
🎉 Thank you for 100+ installs on VS Code!
https://marketplace.visualstudio.com/items?itemName=web-developer-hyper.ai-avatar

📖 Read the story behind this project on DEV.to:
v1 → https://dev.to/webdeveloperhyper/ai-avatar-meet-your-ideal-girlfriendboyfriend-for-free-21n5
v2 → https://dev.to/webdeveloperhyper/ai-avatar-v2-with-pose-editor-vs-code-extension-38n2
v4 → https://dev.to/webdeveloperhyper/how-to-get-cheered-up-247-ai-avatar-v4-with-animation-editor-chrome-extension-vs-code-2f07
v6 → https://dev.to/webdeveloperhyper/let-superheroes-cheer-you-up-ai-avatar-v6-chrome-extension-vs-code-extension-2ak7
v7 → https://dev.to/webdeveloperhyper/well-support-you-with-all-our-might-ai-avatar-v7-pose-capture-and-more-vs-code-and-chrome-3aab
v10 → coming soon!

✨ FEATURES

🎭 Live reactions — character automatically reacts when you send a message to AI
🔄 Change Avatar — swap your VRM character anytime with the button at the top
💃 Animations — play .vrma motion clips or custom JSON poses; 5 separate toggle buttons: Off / Default / Random (v7) / Custom (v2) / Custom Random (v8) (v10)
💬 AI Speech Bubble (VS Code only) — toggle Fixed/AI mode; in AI mode the character reacts to Claude Code activity with context-aware speech (v10)
🎬 Animation Editor — create multi-keyframe animations with in / hold / out timing (v4)
🎨 Random Editor — edit zone-split pattern JSON in the Animation Editor; Body & Arms / Legs / Fingers zones (v8)
🎥 OrbitControls — drag to rotate, scroll to zoom, right-click to pan
👀 Eye tracking — eyes and head follow your mouse cursor when idle
💬 Lipsync — mouth animates while AI is replying
😊 Click or press Enter to interact — triggers a smile, nod, and animation (if ON)
💬 Custom speech messages — edit the speech bubble messages via the Messages button
😂 Jokes — avatar tells jokes via the Jokes button
📸 Pose Capture — capture a real body pose with webcam and export it as a VRM animation JSON (v7)
❤️ Positive word reactions (VS Code only) — heart counter and animations on positive/negative words (v7)
🔍 Prompt Checker [Beta] (VS Code only) — instant rule-based feedback on your AI prompt clarity (v7)
🦁 Giant Mode (Chrome only) — float the avatar as a draggable, resizable overlay over any web page (v7)
🤖 AI Chat — always-visible chat input; ask the avatar anything; replies appear as speech bubbles and trigger animations; supports Gemini API and Ollama (v9)

ROADMAP

v10 — Now Creating!
- 💬 AI Speech Bubble (VS Code only) — toggle between Fixed and AI mode; in AI mode the character reacts to Claude Code activity with context-aware speech; messages customizable
- 🎛️ Toolbar redesign — 4 fixed rows always visible; animation split into 5 separate toggle buttons (Off / Default / Random / Custom / Custom Random); Positive Words and Negative Words as direct buttons
- 🎭 Improved idle & thinking animations — random idle head micro-tilt every 6–10s; thinking state now shows a natural Z-axis pondering tilt with gentle oscillation

v11 — Coming soon!
- 🎉 More fun updates

📖 Full documentation, images, videos on GitHub:
https://github.com/webdeveloperhyper/ai-avatar

---

AI Avatar — Chrome拡張機能

ブラウザのサイドパネルに表示されるVRM 3Dキャラクターが、ChatGPTやClaudeへのメッセージ送信に反応します。AIなしでもアニメーションや吹き出しが動作します。

💻 VS Code拡張機能としても利用可能 — エディタ上でClaude Code / GitHub Copilotの動作に反応します。
🎉 VS Code版100インストール達成！ありがとうございます！
https://marketplace.visualstudio.com/items?itemName=web-developer-hyper.ai-avatar

📖 開発ストーリーはDEV.toで読めます：
v1 → https://dev.to/webdeveloperhyper/ai-avatar-meet-your-ideal-girlfriendboyfriend-for-free-21n5
v2 → https://dev.to/webdeveloperhyper/ai-avatar-v2-with-pose-editor-vs-code-extension-38n2
v4 → https://dev.to/webdeveloperhyper/how-to-get-cheered-up-247-ai-avatar-v4-with-animation-editor-chrome-extension-vs-code-2f07
v6 → https://dev.to/webdeveloperhyper/let-superheroes-cheer-you-up-ai-avatar-v6-chrome-extension-vs-code-extension-2ak7
v7 → https://dev.to/webdeveloperhyper/well-support-you-with-all-our-might-ai-avatar-v7-pose-capture-and-more-vs-code-and-chrome-3aab
v10 → coming soon!


✨ 機能一覧

🎭 リアクション — AIにメッセージを送ると自動でキャラクターが反応
🔄 アバター変更 — 上部のボタンでVRMキャラクターをいつでも変更可能
💃 アニメーション — .vrmaモーションクリップやカスタムJSONポーズを再生；5つの独立トグルボタン：Off / Default / Random (v7) / Custom (v2) / Custom Random (v8) (v10)
💬 AI吹き出し（VS Code限定）— Fixed/AIモードを切り替え；AIモードでは Claude Code の活動に反応してコンテキストに応じた発言をする (v10)
🎬 アニメーションエディタ — 複数キーフレームのアニメーションをIn / Hold / Outタイミングで作成 (v4)
🎨 ランダムエディタ — アニメーションエディタ内でゾーン分割パターンJSONを直接編集（ボディ＆アーム / 脚 / 指ゾーン）(v8)
🎥 オービットコントロール — ドラッグで回転、スクロールでズーム、右クリックでパン
👀 視線追跡 — アイドル時に目と頭がマウスカーソルを追う
💬 リップシンク — AIの返答中に口が動く
😊 クリックまたはEnterキーで反応 — スマイル、うなずき、アニメーションが発動
💬 カスタム吹き出しメッセージ — Messagesボタンから吹き出しのメッセージを編集
😂 ジョーク — Jokesボタンでアバターがジョークを言う
📸 ポーズキャプチャ — ウェブカメラで体のポーズを撮影し、VRMアニメーションJSONとして書き出し (v7)
❤️ ポジティブワード反応（VS Code限定）— ポジティブ/ネガティブワード検出時にハートカウンターとアニメーション (v7)
🔍 プロンプトチェッカー [Beta]（VS Code限定）— AIプロンプトの明確さをルールベースで即チェック (v7)
🦁 ジャイアントモード（Chrome限定）— ドラッグ・リサイズ可能なオーバーレイとしてアバターをどのページにも表示 (v7)
🤖 AIチャット — 常時表示のチャット入力；アバターに何でも質問できる；返答は吹き出しでアニメーション付き；Gemini APIとOllama対応 (v9)

ロードマップ

v10 — 開発中！
- 💬 AI吹き出し（VS Code限定）— FixedとAIモードを切り替え；AIモードではClaude Codeの活動に反応してキャラクターがコンテキストに応じた発言をする；メッセージはカスタマイズ可能
- 🎛️ ツールバーリデザイン — 4行固定表示；アニメーションを5つの独立したトグルボタンに分割（Off / Default / Random / Custom / Custom Random）；ポジティブワード・ネガティブワードをダイレクトボタンに
- 🎭 アイドル・思考アニメーション改善 — アイドル時に6〜10秒ごとランダムな頭の微傾き；思考中は自然なZ軸の首かしげポーズとゆっくりした揺れを追加

v11 — 近日公開！
- 🎉 お楽しみに

📖 詳細なドキュメント・画像・動画はGitHubで：
https://github.com/webdeveloperhyper/ai-avatar

May 28, 2026

description

AI Avatar — Chrome Extension
(日本語の説明は下部をご覧ください / Japanese version below)

A VRM 3D character in your browser side panel that reacts to AI activity on ChatGPT and Claude. Animations and speech bubbles all run without AI too.

💻 Also available as a VS Code Extension — reacts to Claude Code / GitHub Copilot activity directly in your editor.
🎉 Thank you for 100+ installs on VS Code!
https://marketplace.visualstudio.com/items?itemName=web-developer-hyper.ai-avatar

📖 Read the story behind this project on DEV.to:
v1 → https://dev.to/webdeveloperhyper/ai-avatar-meet-your-ideal-girlfriendboyfriend-for-free-21n5
v2 → https://dev.to/webdeveloperhyper/ai-avatar-v2-with-pose-editor-vs-code-extension-38n2
v4 → https://dev.to/webdeveloperhyper/how-to-get-cheered-up-247-ai-avatar-v4-with-animation-editor-chrome-extension-vs-code-2f07
v6 → https://dev.to/webdeveloperhyper/let-superheroes-cheer-you-up-ai-avatar-v6-chrome-extension-vs-code-extension-2ak7
v7 → coming soon!

✨ FEATURES

🎭 Live reactions — character automatically reacts when you send a message to AI
🔄 Change Avatar — swap your VRM character anytime with the button at the top
💃 Animations — play .vrma motion clips or custom JSON poses; 4-state button: off / Default / Random / Custom
🎬 Animation Editor — create multi-keyframe animations with in / hold / out timing (v4)
🎥 OrbitControls — drag to rotate, scroll to zoom, right-click to pan
👀 Eye tracking — eyes and head follow your mouse cursor when idle
💬 Lipsync — mouth animates while AI is replying
😊 Click or press Enter to interact — triggers a smile, nod, and animation (if ON)
💬 Custom speech messages — edit the speech bubble messages via the Messages button
😂 Jokes — avatar tells jokes via the Jokes button
📸 Pose Capture — capture a real body pose with webcam and export it as a VRM animation JSON (v7)
❤️ Positive word reactions (VS Code only) — heart counter and animations on positive/negative words (v7)
🔍 Prompt Checker [Beta] (VS Code only) — instant rule-based feedback on your AI prompt clarity (v7)
🦁 Giant Mode (Chrome only) — float the avatar as a draggable, resizable overlay over any web page (v7)


🤖 SUPPORTED SITES

The avatar automatically reacts on:
- 🤖 ChatGPT (chatgpt.com)
- 🤖 Claude (claude.ai)

Enter key reaction works on all websites.


🚀 GETTING STARTED

No setup needed — comes with a built-in sample character.

1. Install the extension from the Chrome Web Store
2. Pin it to the toolbar
3. Click the AI Avatar icon and open the Side Panel
4. Chat with any supported AI site — your avatar reacts automatically


🎨 USE YOUR OWN VRM CHARACTER

You can create your own 3D avatar for free using VRoid (https://vroid.com/en) — no 3D modeling skills needed. Design your character and export it as a .vrm file.

Click the Change Avatar button at the top of the panel to pick a .vrm file.

v6 adds new sample characters — three girls and two boys — plus cute, cool, and funny pose packs. Download the zip free from GitHub Releases:
https://github.com/webdeveloperhyper/ai-avatar/releases


💃 ANIMATIONS

The Animation button cycles through four states:
- Off: no motion clips play
- Animation: Default — plays the built-in sample poses included with the extension
- Animation: Random — generates random poses from built-in zone patterns (v7)
- Animation: Custom — opens a file picker, plays .vrma and .json pose files from your chosen files

👉 VRMA Animation files are not included in the extension because they cannot be redistributed under their license terms. Download them for free from the official VRoid Project:
https://booth.pm/en/items/5512385

The pack includes 7 animations: Show full body, Greeting, Peace sign, Shoot, Spin, Model pose, and Squat.

1. Download and unzip the pack
2. Click Animation until it shows Animation: Custom
3. Pick the .vrma files
4. A random clip plays each time the AI responds


🎬 ANIMATION EDITOR (v4+)

Click Edit Animation to open the animation editor overlay:
- Select a body part from the dropdown — including all 30 finger bones (v5)
- Use the axis button to switch between X / Y / Z rotation
- Drag the slider (or type a value in degrees) to rotate the bone — values shown in degrees (v5)
- Add multiple keyframes with the + button to build a full animation sequence (v4)
- Each keyframe has In (fade in), Hold, and Out (fade out, last keyframe only) timing (v4)
- Navigate keyframes with the < > buttons (v4)
- Press Play to preview the full animation (in → hold → out) exactly as it plays normally (v4)
- Click Save to save the animation as a JSON file (saved in degrees for easy editing)
- Click Reload to restore the last saved values
- The saved animation is added to the pool and plays randomly like any other animation

A file picker appears when you click Edit Animation (v4):
- First time: Cancel the file picker to open a default animation
- Next time: Pick an existing JSON file to load and edit


💬 SPEECH BUBBLE MESSAGES

Click the Messages button to edit the messages shown in the speech bubble when the avatar reacts.
Enter messages separated by | (pipe), e.g. You can do it! | Nice work! | Love that fix!
Messages are saved and persist across sessions.


🗺️ ROADMAP

✅ v1
- VRM character in VS Code sidebar
- Live reactions to Claude Code activity
- Eye tracking, lipsync, OrbitControls
- Change Avatar, speech bubble messages

✅ v2
- 3-state Animation button (off / Default / Custom)
- Custom pose editor with JSON save/load
- Jokes button
- GitHub Copilot watcher support

✅ v3
- 🌐 Chrome extension (this extension)
- Various fixes and adjustments

✅ v4
- Pose Editor upgraded to full Animation Editor
- Multi-keyframe timeline with in / hold / out timing
- Various fixes and adjustments

✅ v5
- All 30 finger bones added to the animation editor
- Animation editor values now shown and saved in degrees (backward compatible with existing files)
- BG toggle button — switch to gray background to see dark-colored avatars
- Various UI polish: button styling, focus outlines, editor colors
- Fixed reload to always restore the latest saved pose

✅ v6
- New sample characters: 3 girls and 2 boys (free download from GitHub Releases)
- New pose packs: cute, cool, and funny poses (free download from GitHub Releases)
- https://github.com/webdeveloperhyper/ai-avatar/releases

✅ v7
- 📸 Pose Capture — capture a real body pose with webcam and export it as a VRM animation JSON
- ❤️ Positive word reactions (VS Code only) — heart counter, smile, and heart overlay animation when positive words are detected; broken heart and head shake on negative words
- 🦁 Giant Mode (Chrome only) — float the avatar as a draggable, resizable overlay over any web page
- 🎲 Animation: Random mode — new 4th state generates random poses from zone patterns (expression, body + arm, fingers, legs)
- 😊 Expression editor — add Happy or Wink expressions to animation keyframes directly in the editor
- 🖱️ Click anywhere on page to react (Chrome only) — clicking any web page triggers an animation on the avatar
- 🔍 Prompt Checker [Beta] (VS Code only) — paste any AI prompt and get instant rule-based feedback: too vague, missing action verb, vague references, unnecessary filler, too many tasks, and missing file context

v8 — Now creating!
- 🎉 More fun updates


---


AI Avatar — Chrome拡張機能

ブラウザのサイドパネルに表示されるVRM 3Dキャラクターが、ChatGPTやClaudeへのメッセージ送信に反応します。AIなしでもアニメーションや吹き出しが動作します。

💻 VS Code拡張機能としても利用可能 — エディタ上でClaude Code / GitHub Copilotの動作に反応します。
🎉 VS Code版100インストール達成！ありがとうございます！
https://marketplace.visualstudio.com/items?itemName=web-developer-hyper.ai-avatar

📖 開発ストーリーはDEV.toで読めます：
v1 → https://dev.to/webdeveloperhyper/ai-avatar-meet-your-ideal-girlfriendboyfriend-for-free-21n5
v2 → https://dev.to/webdeveloperhyper/ai-avatar-v2-with-pose-editor-vs-code-extension-38n2
v4 → https://dev.to/webdeveloperhyper/how-to-get-cheered-up-247-ai-avatar-v4-with-animation-editor-chrome-extension-vs-code-2f07
v6 → https://dev.to/webdeveloperhyper/let-superheroes-cheer-you-up-ai-avatar-v6-chrome-extension-vs-code-extension-2ak7
v7 → coming soon!


✨ 機能一覧

🎭 リアクション — AIにメッセージを送ると自動でキャラクターが反応
🔄 アバター変更 — 上部のボタンでVRMキャラクターをいつでも変更可能
💃 アニメーション — .vrmaモーションクリップやカスタムJSONポーズを再生；4段階ボタン：オフ / デフォルト / ランダム / カスタム
🎬 アニメーションエディタ — 複数キーフレームのアニメーションをIn / Hold / Outタイミングで作成 (v4)
🎥 オービットコントロール — ドラッグで回転、スクロールでズーム、右クリックでパン
👀 視線追跡 — アイドル時に目と頭がマウスカーソルを追う
💬 リップシンク — AIの返答中に口が動く
😊 クリックまたはEnterキーで反応 — スマイル、うなずき、アニメーションが発動
💬 カスタム吹き出しメッセージ — Messagesボタンから吹き出しのメッセージを編集
😂 ジョーク — Jokesボタンでアバターがジョークを言う
📸 ポーズキャプチャ — ウェブカメラで体のポーズを撮影し、VRMアニメーションJSONとして書き出し (v7)
❤️ ポジティブワード反応（VS Code限定）— ポジティブ/ネガティブワード検出時にハートカウンターとアニメーション (v7)
🔍 プロンプトチェッカー [Beta]（VS Code限定）— AIプロンプトの明確さをルールベースで即チェック (v7)
🦁 ジャイアントモード（Chrome限定）— ドラッグ・リサイズ可能なオーバーレイとしてアバターをどのページにも表示 (v7)


🤖 対応サイト

以下のサイトで自動反応します：
- 🤖 ChatGPT (chatgpt.com)
- 🤖 Claude (claude.ai)

Enterキーの反応はすべてのウェブサイトで動作します。


🚀 はじめ方

セットアップ不要 — サンプルキャラクターが最初から入っています。

1. Chrome ウェブストアから拡張機能をインストール
2. ツールバーにピン留め
3. AI Avatarアイコンをクリックしてサイドパネルを開く
4. 対応AIサイトでチャットすると自動でアバターが反応


🎨 自分のVRMキャラクターを使う

VRoid (https://vroid.com/ja) を使えば3Dモデリングの知識なしに無料でオリジナルアバターを作れます。キャラクターをデザインして.vrmファイルとしてエクスポートしてください。

パネル上部の「Change Avatar」ボタンから.vrmファイルを選択できます。

v6では新しいサンプルキャラクター（女の子3体・男の子2体）とポーズパック（かわいい・クール・おもしろ）を追加しました。GitHubリリースページからzipを無料でダウンロードできます：
https://github.com/webdeveloperhyper/ai-avatar/releases


💃 アニメーション

Animationボタンで4つの状態を切り替えます：
- オフ：モーションクリップを再生しない
- Animation: Default — 拡張機能に含まれるサンプルポーズを再生
- Animation: Random — 内蔵のゾーンパターンからランダムにポーズを生成 (v7)
- Animation: Custom — ファイルを選択し、.vrmaや.jsonポーズファイルを再生

👉 VRMAアニメーションファイルはライセンスの都合上、拡張機能に含まれていません。公式VRoidプロジェクトから無料でダウンロードできます：
https://booth.pm/ja/items/5512385

パックには7つのアニメーションが含まれます：全身表示、挨拶、ピースサイン、シュート、スピン、モデルポーズ、スクワット。

1. パックをダウンロードして解凍
2. AnimationボタンをAnimation: Customになるまでクリック
3. .vrmaファイルを選択
4. AIが返答するたびにランダムなクリップが再生


🎬 アニメーションエディタ (v4+)

「Edit Animation」をクリックしてエディタを開きます：
- ドロップダウンから体のパーツを選択 — 全30本の指ボーンに対応 (v5)
- 軸ボタンでX / Y / Z回転を切り替え
- スライダーを動かす（または度数で値を入力）してボーンを回転 — 値は度数表示 (v5)
- +ボタンで複数キーフレームを追加してアニメーションシーケンスを作成 (v4)
- 各キーフレームにIn（フェードイン）、Hold、Out（フェードアウト、最終KFのみ）のタイミング設定 (v4)
- < > ボタンでキーフレームを移動 (v4)
- Playボタンでアニメーション全体をプレビュー (v4)
- SaveでアニメーションをJSONファイルとして保存（度数で保存されるため直接編集も簡単）
- ReloadでSaveした最新の状態に戻す
- 保存したアニメーションはプールに追加され、通常のアニメーションと同様にランダム再生

「Edit Animation」をクリックするとファイルピッカーが表示されます：
- 初回：ファイルピッカーをキャンセルするとデフォルトアニメーションが開く
- 2回目以降：既存のJSONファイルを選択して読み込み・編集


💬 吹き出しメッセージ

Messagesボタンをクリックして、アバターが反応したときに吹き出しに表示するメッセージを編集できます。
メッセージは | （パイプ）で区切って入力します。例：頑張って！ | いいね！ | 完璧！
メッセージは保存され、セッションをまたいで維持されます。


🗺️ ロードマップ

✅ v1
- VS CodeサイドバーにVRMキャラクター表示
- Claude Code活動へのライブ反応
- 視線追跡、リップシンク、オービットコントロール
- アバター変更、吹き出しメッセージ

✅ v2
- 3段階Animationボタン（オフ / デフォルト / カスタム）
- カスタムポーズエディタ（JSON保存・読み込み）
- Jokesボタン
- GitHub Copilotウォッチャー対応

✅ v3
- 🌐 Chrome拡張機能（この拡張機能）
- 各種修正・調整

✅ v4
- ポーズエディタをフルアニメーションエディタにアップグレード
- In / Hold / Outタイミング付き複数キーフレームタイムライン
- 各種修正・調整

✅ v5
- アニメーションエディタに全30本の指ボーンを追加
- エディタの値を度数で表示・保存（既存ファイルとの後方互換性あり）
- BGトグルボタン追加 — グレー背景に切り替えて暗色アバターを見やすく
- UIの各種改善：ボタンスタイル、フォーカス枠、エディタの配色
- リロードが最後に保存したポーズを正しく復元するよう修正

✅ v6
- 新サンプルキャラクター：女の子3体・男の子2体（GitHubリリースから無料ダウンロード）
- 新ポーズパック：かわいい・クール・おもしろ（GitHubリリースから無料ダウンロード）
- https://github.com/webdeveloperhyper/ai-avatar/releases

✅ v7
- 📸 ポーズキャプチャツール — ウェブカメラで体のポーズを撮影し、VRMアニメーションJSONとして書き出し
- ❤️ ポジティブワード反応 — ポジティブワード検出時にハートカウンター・スマイル・ハートオーバーレイアニメーション；ネガティブワードには割れたハートと首振り
- 🦁 ジャイアントモード（Chrome限定）— ドラッグ・リサイズ可能なオーバーレイとしてアバターをどのページにも表示
- 🎲 Animation: Randomモード — 内蔵のゾーンパターン（表情・体と腕・指・脚）からランダムにかわいいポーズを生成する新しい第4状態 (v7)
- 😊 表情エディタ — アニメーションエディタのキーフレームにHappyまたはWink表情を追加可能
- 🖱️ ページのどこかをクリックで反応（Chrome限定）— ウェブページをクリックするとアバターがアニメーションで反応
- 🔍 プロンプトチェッカー [Beta]（VS Code限定）— AIプロンプトを貼り付けるだけで、曖昧すぎる・アクション動詞なし・代名詞で指示・余分な前置き・タスク過多・ファイル情報なし などをルールベースで即チェック

v8 — 開発中！
- 🎉 お楽しみに

AI Avatar — Chrome Extension
(日本語の説明は下部をご覧ください / Japanese version below)

A VRM 3D character in your browser side panel that reacts to AI activity on ChatGPT and Claude. Animations and speech bubbles all run without AI too.

💻 Also available as a VS Code Extension — reacts to Claude Code / GitHub Copilot activity directly in your editor.
🎉 Thank you for 100+ installs on VS Code!
https://marketplace.visualstudio.com/items?itemName=web-developer-hyper.ai-avatar

📖 Read the story behind this project on DEV.to:
v1 → https://dev.to/webdeveloperhyper/ai-avatar-meet-your-ideal-girlfriendboyfriend-for-free-21n5
v2 → https://dev.to/webdeveloperhyper/ai-avatar-v2-with-pose-editor-vs-code-extension-38n2
v4 → https://dev.to/webdeveloperhyper/how-to-get-cheered-up-247-ai-avatar-v4-with-animation-editor-chrome-extension-vs-code-2f07
v6 → https://dev.to/webdeveloperhyper/let-superheroes-cheer-you-up-ai-avatar-v6-chrome-extension-vs-code-extension-2ak7
v7 → https://dev.to/webdeveloperhyper/well-support-you-with-all-our-might-ai-avatar-v7-pose-capture-and-more-vs-code-and-chrome-3aab
v8 → coming soon!

✨ FEATURES

🎭 Live reactions — character automatically reacts when you send a message to AI
🔄 Change Avatar — swap your VRM character anytime with the button at the top
💃 Animations — play .vrma motion clips or custom JSON poses; 5-state button: off / Default / Random (v7)/ Random Custom (v8)/ Custom (v2)
🎬 Animation Editor — create multi-keyframe animations with in / hold / out timing (v4)
🎨 Random Editor — edit zone-split pattern JSON in the Animation Editor; Body & Arms / Legs / Fingers zones (v8)
🎥 OrbitControls — drag to rotate, scroll to zoom, right-click to pan
👀 Eye tracking — eyes and head follow your mouse cursor when idle
💬 Lipsync — mouth animates while AI is replying
😊 Click or press Enter to interact — triggers a smile, nod, and animation (if ON)
💬 Custom speech messages — edit the speech bubble messages via the Messages button
😂 Jokes — avatar tells jokes via the Jokes button
📸 Pose Capture — capture a real body pose with webcam and export it as a VRM animation JSON (v7)
❤️ Positive word reactions (VS Code only) — heart counter and animations on positive/negative words (v7)
🔍 Prompt Checker [Beta] (VS Code only) — instant rule-based feedback on your AI prompt clarity (v7)
🦁 Giant Mode (Chrome only) — float the avatar as a draggable, resizable overlay over any web page (v7)


🤖 SUPPORTED SITES

The avatar automatically reacts on:
- 🤖 ChatGPT (chatgpt.com)
- 🤖 Claude (claude.ai)

Enter key reaction works on all websites.


🚀 GETTING STARTED

No setup needed — comes with a built-in sample character.

1. Install the extension from the Chrome Web Store
2. Pin it to the toolbar
3. Click the AI Avatar icon and open the Side Panel
4. Chat with any supported AI site — your avatar reacts automatically


🎨 USE YOUR OWN VRM CHARACTER

You can create your own 3D avatar for free using VRoid (https://vroid.com/en) — no 3D modeling skills needed. Design your character and export it as a .vrm file.

Click the Change Avatar button at the top of the panel to pick a .vrm file.

v6 adds new sample characters — three girls and two boys — plus cute, cool, and funny pose packs. Download the zip free from GitHub Releases:
https://github.com/webdeveloperhyper/ai-avatar/releases


💃 ANIMATIONS

The Animation button cycles through five states:
- Off: no motion clips play
- Animation: Default — plays the built-in sample poses included with the extension
- Animation: Random — generates random poses from built-in zone patterns (v7)
- Animation: Random Custom — pick your own zone-pattern JSON, plays random pose combos (v8)
- Animation: Custom — opens a file picker, plays .vrma and .json pose files from your chosen files

👉 VRMA Animation files are not included in the extension because they cannot be redistributed under their license terms. Download them for free from the official VRoid Project:
https://booth.pm/en/items/5512385

The pack includes 7 animations: Show full body, Greeting, Peace sign, Shoot, Spin, Model pose, and Squat.

1. Download and unzip the pack
2. Click Animation until it shows Animation: Custom
3. Pick the .vrma files
4. A random clip plays each time the AI responds


🎬 ANIMATION EDITOR (v4+)

Click Edit Animation to open the animation editor as a full tab:

Views:
- Three synchronized cameras side by side: RIGHT / FRONT / LEFT — see all angles at once (v8)
- Image button switches to 2x2 layout — load any reference image alongside the three camera views (v8)

Bone editing:
- Full 2-column bone list covering head, neck, spine, arms, hands, legs, and all 30 finger bones (v5)
- Drag the slider or type a value in degrees to rotate each bone (v5)
- A bone arc trail appears on the avatar when you focus a slider — visual rotation feedback (v8)
- Quick-apply preset buttons at the bottom: Body & Arms / Legs / Fingers zone presets (v8)

Keyframes & timing:
- Add multiple keyframes with + KF to build a full animation sequence (v4)
- Each keyframe has In (fade in), Hold, and Out (fade out, last keyframe only) timing (v4)
- Navigate with < >, delete with - KF, preview with Play (v4)

Expression:
- Per-keyframe expression: Default / Happy / Wink (v7)

Actions:
- Load — pick a different JSON pose file to edit
- Save — write the animation back to the JSON file; adds it to the random pool
- Reload — re-read the file from disk, discarding unsaved edits
- JSON to VRMA — export the keyframe animation as a .vrma VRM Animation file (v8)
- Exit — close the editor tab and reopen the sidebar (v8)

Random Editor (v8):
- Click Random Editor to open the zone-split pattern JSON editor
- Pick a pattern JSON file (e.g. your custom random-custom.json)
- Switch between Body & Arms / Legs / Fingers zones — only relevant bones shown, unrelated ones hidden
- Navigate patterns with < >, add with +, delete with −; name is editable
- Save writes all edits back to the JSON file; Reload re-reads from disk
- Exit Random returns to the normal editor


💬 SPEECH BUBBLE MESSAGES

Click the Messages button to edit the messages shown in the speech bubble when the avatar reacts.
Enter messages separated by | (pipe), e.g. You can do it! | Nice work! | Love that fix!
Messages are saved and persist across sessions.


🗺️ ROADMAP

✅ v1
- VRM character in VS Code sidebar
- Live reactions to Claude Code activity
- Eye tracking, lipsync, OrbitControls
- Change Avatar, speech bubble messages

✅ v2
- 3-state Animation button (off / Default / Custom)
- Custom pose editor with JSON save/load
- Jokes button
- GitHub Copilot watcher support

✅ v3
- 🌐 Chrome extension (this extension)
- Various fixes and adjustments

✅ v4
- Pose Editor upgraded to full Animation Editor
- Multi-keyframe timeline with in / hold / out timing
- Various fixes and adjustments

✅ v5
- All 30 finger bones added to the animation editor
- Animation editor values now shown and saved in degrees (backward compatible with existing files)
- BG toggle button — switch to gray background to see dark-colored avatars
- Various UI polish: button styling, focus outlines, editor colors
- Fixed reload to always restore the latest saved pose

✅ v6
- New sample characters: 3 girls and 2 boys (free download from GitHub Releases)
- New pose packs: cute, cool, and funny poses (free download from GitHub Releases)
- https://github.com/webdeveloperhyper/ai-avatar/releases

✅ v7
- 📸 Pose Capture — capture a real body pose with webcam and export it as a VRM animation JSON
- ❤️ Positive word reactions (VS Code only) — heart counter, smile, and heart overlay animation when positive words are detected; broken heart and head shake on negative words
- 🦁 Giant Mode (Chrome only) — float the avatar as a draggable, resizable overlay over any web page
- 🎲 Animation: Random mode — new 4th state generates random poses from zone patterns (expression, body + arm, fingers, legs)
- 😊 Expression editor — add Happy or Wink expressions to animation keyframes directly in the editor
- 🖱️ Click anywhere on page to react (Chrome only) — clicking any web page triggers an animation on the avatar
- 🔍 Prompt Checker [Beta] (VS Code only) — paste any AI prompt and get instant rule-based feedback: too vague, missing action verb, vague references, unnecessary filler, too many tasks, and missing file context

✅ v8
- 🎲 Animation: Random Custom — 5th animation state; pick a custom zone-pattern JSON, plays random pose combos
- 🎨 Random Editor — zone-split pattern JSON editor inside the Animation Editor (Body & Arms / Legs / Fingers zones)
- 🎬 Animation Editor update — now opens as a full-screen tab; three-camera view (RIGHT / FRONT / LEFT), image reference layout, bone arc trail, zone preset buttons, JSON to VRMA export

v9 — Now creating!
- 🎉 More fun updates


---


AI Avatar — Chrome拡張機能

ブラウザのサイドパネルに表示されるVRM 3Dキャラクターが、ChatGPTやClaudeへのメッセージ送信に反応します。AIなしでもアニメーションや吹き出しが動作します。

💻 VS Code拡張機能としても利用可能 — エディタ上でClaude Code / GitHub Copilotの動作に反応します。
🎉 VS Code版100インストール達成！ありがとうございます！
https://marketplace.visualstudio.com/items?itemName=web-developer-hyper.ai-avatar

📖 開発ストーリーはDEV.toで読めます：
v1 → https://dev.to/webdeveloperhyper/ai-avatar-meet-your-ideal-girlfriendboyfriend-for-free-21n5
v2 → https://dev.to/webdeveloperhyper/ai-avatar-v2-with-pose-editor-vs-code-extension-38n2
v4 → https://dev.to/webdeveloperhyper/how-to-get-cheered-up-247-ai-avatar-v4-with-animation-editor-chrome-extension-vs-code-2f07
v6 → https://dev.to/webdeveloperhyper/let-superheroes-cheer-you-up-ai-avatar-v6-chrome-extension-vs-code-extension-2ak7
v7 → https://dev.to/webdeveloperhyper/well-support-you-with-all-our-might-ai-avatar-v7-pose-capture-and-more-vs-code-and-chrome-3aab
v8 → coming soon!


✨ 機能一覧

🎭 リアクション — AIにメッセージを送ると自動でキャラクターが反応
🔄 アバター変更 — 上部のボタンでVRMキャラクターをいつでも変更可能
💃 アニメーション — .vrmaモーションクリップやカスタムJSONポーズを再生；5段階ボタン：オフ / デフォルト / ランダム (v7)/ ランダムカスタム (v8)/ カスタム (v2)
🎬 アニメーションエディタ — 複数キーフレームのアニメーションをIn / Hold / Outタイミングで作成 (v4)
🎨 ランダムエディタ — アニメーションエディタ内でゾーン分割パターンJSONを直接編集（ボディ＆アーム / 脚 / 指ゾーン）(v8)
🎥 オービットコントロール — ドラッグで回転、スクロールでズーム、右クリックでパン
👀 視線追跡 — アイドル時に目と頭がマウスカーソルを追う
💬 リップシンク — AIの返答中に口が動く
😊 クリックまたはEnterキーで反応 — スマイル、うなずき、アニメーションが発動
💬 カスタム吹き出しメッセージ — Messagesボタンから吹き出しのメッセージを編集
😂 ジョーク — Jokesボタンでアバターがジョークを言う
📸 ポーズキャプチャ — ウェブカメラで体のポーズを撮影し、VRMアニメーションJSONとして書き出し (v7)
❤️ ポジティブワード反応（VS Code限定）— ポジティブ/ネガティブワード検出時にハートカウンターとアニメーション (v7)
🔍 プロンプトチェッカー [Beta]（VS Code限定）— AIプロンプトの明確さをルールベースで即チェック (v7)
🦁 ジャイアントモード（Chrome限定）— ドラッグ・リサイズ可能なオーバーレイとしてアバターをどのページにも表示 (v7)


🤖 対応サイト

以下のサイトで自動反応します：
- 🤖 ChatGPT (chatgpt.com)
- 🤖 Claude (claude.ai)

Enterキーの反応はすべてのウェブサイトで動作します。


🚀 はじめ方

セットアップ不要 — サンプルキャラクターが最初から入っています。

1. Chrome ウェブストアから拡張機能をインストール
2. ツールバーにピン留め
3. AI Avatarアイコンをクリックしてサイドパネルを開く
4. 対応AIサイトでチャットすると自動でアバターが反応


🎨 自分のVRMキャラクターを使う

VRoid (https://vroid.com/ja) を使えば3Dモデリングの知識なしに無料でオリジナルアバターを作れます。キャラクターをデザインして.vrmファイルとしてエクスポートしてください。

パネル上部の「Change Avatar」ボタンから.vrmファイルを選択できます。

v6では新しいサンプルキャラクター（女の子3体・男の子2体）とポーズパック（かわいい・クール・おもしろ）を追加しました。GitHubリリースページからzipを無料でダウンロードできます：
https://github.com/webdeveloperhyper/ai-avatar/releases


💃 アニメーション

Animationボタンで5つの状態を切り替えます：
- オフ：モーションクリップを再生しない
- Animation: Default — 拡張機能に含まれるサンプルポーズを再生
- Animation: Random — 内蔵のゾーンパターンからランダムにポーズを生成 (v7)
- Animation: Random Custom — カスタムゾーンパターンJSONを選択してランダムなポーズコンボを再生 (v8)
- Animation: Custom — ファイルを選択し、.vrmaや.jsonポーズファイルを再生

👉 VRMAアニメーションファイルはライセンスの都合上、拡張機能に含まれていません。公式VRoidプロジェクトから無料でダウンロードできます：
https://booth.pm/ja/items/5512385

パックには7つのアニメーションが含まれます：全身表示、挨拶、ピースサイン、シュート、スピン、モデルポーズ、スクワット。

1. パックをダウンロードして解凍
2. AnimationボタンをAnimation: Customになるまでクリック
3. .vrmaファイルを選択
4. AIが返答するたびにランダムなクリップが再生


🎬 アニメーションエディタ (v4+)

「Edit Animation」をクリックすると専用タブとしてエディタが開きます：

表示：
- RIGHT / FRONT / LEFT の3方向カメラを同期表示 — すべての角度を一画面で確認 (v8)
- Imageボタンで2×2レイアウトに切り替え — 参考画像を横に並べて表示可能 (v8)

ボーン編集：
- 全身の2カラムボーンリスト — 全30本の指ボーンを含む (v5)
- スライダーまたは度数入力でボーンを回転 (v5)
- スライダーにフォーカスするとアバターにボーン弧トレイルが表示 — 視覚的フィードバック (v8)
- 下部プリセットボタン：ボディ＆アーム / 脚 / 指のゾーンパターンをワンタッチ適用 (v8)

キーフレームとタイミング：
- + KFで複数キーフレームを追加してアニメーションシーケンスを構築 (v4)
- 各キーフレームにIn（フェードイン）・Hold・Out（フェードアウト、最終KFのみ）タイミング設定 (v4)
- < > でナビゲート、- KFで削除、Playでプレビュー (v4)

表情：
- キーフレームごとに表情設定：Default / Happy / Wink (v7)

アクション：
- Load — 別のJSONポーズファイルを選択
- Save — JSONファイルに書き戻し、ランダムプールに追加
- Reload — ディスクからファイルを再読み込み、未保存の編集を破棄
- JSON to VRMA — キーフレームアニメーションを.vrmaファイルとしてエクスポート (v8)
- Exit — エディタタブを閉じてサイドバーを再表示 (v8)

ランダムエディタ (v8)：
- Random Editorをクリックしてゾーン分割パターンJSONエディタを開く
- パターンJSONファイルを選択（例：カスタムrandom-custom.json）
- ボディ＆アーム / 脚 / 指ゾーンを切り替え — 関連ボーンのみ表示、無関係なボーンは非表示
- < > でナビゲート、+で追加、−で削除、名前を編集可能
- SaveでJSONに書き戻し、Reloadでディスクから再読み込み
- Exit Randomで通常エディタに戻る


💬 吹き出しメッセージ

Messagesボタンをクリックして、アバターが反応したときに吹き出しに表示するメッセージを編集できます。
メッセージは | （パイプ）で区切って入力します。例：頑張って！ | いいね！ | 完璧！
メッセージは保存され、セッションをまたいで維持されます。


🗺️ ロードマップ

✅ v1
- VS CodeサイドバーにVRMキャラクター表示
- Claude Code活動へのライブ反応
- 視線追跡、リップシンク、オービットコントロール
- アバター変更、吹き出しメッセージ

✅ v2
- 3段階Animationボタン（オフ / デフォルト / カスタム）
- カスタムポーズエディタ（JSON保存・読み込み）
- Jokesボタン
- GitHub Copilotウォッチャー対応

✅ v3
- 🌐 Chrome拡張機能（この拡張機能）
- 各種修正・調整

✅ v4
- ポーズエディタをフルアニメーションエディタにアップグレード
- In / Hold / Outタイミング付き複数キーフレームタイムライン
- 各種修正・調整

✅ v5
- アニメーションエディタに全30本の指ボーンを追加
- エディタの値を度数で表示・保存（既存ファイルとの後方互換性あり）
- BGトグルボタン追加 — グレー背景に切り替えて暗色アバターを見やすく
- UIの各種改善：ボタンスタイル、フォーカス枠、エディタの配色
- リロードが最後に保存したポーズを正しく復元するよう修正

✅ v6
- 新サンプルキャラクター：女の子3体・男の子2体（GitHubリリースから無料ダウンロード）
- 新ポーズパック：かわいい・クール・おもしろ（GitHubリリースから無料ダウンロード）
- https://github.com/webdeveloperhyper/ai-avatar/releases

✅ v7
- 📸 ポーズキャプチャツール — ウェブカメラで体のポーズを撮影し、VRMアニメーションJSONとして書き出し
- ❤️ ポジティブワード反応 — ポジティブワード検出時にハートカウンター・スマイル・ハートオーバーレイアニメーション；ネガティブワードには割れたハートと首振り
- 🦁 ジャイアントモード（Chrome限定）— ドラッグ・リサイズ可能なオーバーレイとしてアバターをどのページにも表示
- 🎲 Animation: Randomモード — 内蔵のゾーンパターン（表情・体と腕・指・脚）からランダムにかわいいポーズを生成する新しい第4状態 (v7)
- 😊 表情エディタ — アニメーションエディタのキーフレームにHappyまたはWink表情を追加可能
- 🖱️ ページのどこかをクリックで反応（Chrome限定）— ウェブページをクリックするとアバターがアニメーションで反応
- 🔍 プロンプトチェッカー [Beta]（VS Code限定）— AIプロンプトを貼り付けるだけで、曖昧すぎる・アクション動詞なし・代名詞で指示・余分な前置き・タスク過多・ファイル情報なし などをルールベースで即チェック

✅ v8
- 🎲 Animation: Random Custom — 第5のアニメーション状態；カスタムゾーンパターンJSONを選択してランダムなポーズコンボを再生
- 🎨 ランダムエディタ — アニメーションエディタ内のゾーン分割パターンJSONエディタ（ボディ＆アーム / 脚 / 指ゾーン）
- 🎬 アニメーションエディタ アップデート — フルスクリーンタブとして起動；3方向カメラ表示（RIGHT / FRONT / LEFT）、参考画像レイアウト、ボーン弧トレイル、ゾーンプリセットボタン、JSON to VRMAエクスポート

v9 — 開発中！
- 🎉 お楽しみに

May 10, 2026

description

AI Avatar — Chrome Extension
(日本語の説明は下部をご覧ください / Japanese version below)

A VRM 3D character in your browser side panel that reacts to AI activity on ChatGPT and Claude. Animations and speech bubbles all run without AI too.

💻 Also available as a VS Code Extension — reacts to Claude Code / GitHub Copilot activity directly in your editor.
https://marketplace.visualstudio.com/items?itemName=web-developer-hyper.ai-avatar

📖 Read the story behind this project on DEV.to:
v1 → https://dev.to/webdeveloperhyper/ai-avatar-meet-your-ideal-girlfriendboyfriend-for-free-21n5
v2 → https://dev.to/webdeveloperhyper/ai-avatar-v2-with-pose-editor-vs-code-extension-38n2
v4 → https://dev.to/webdeveloperhyper/how-to-get-cheered-up-247-ai-avatar-v4-with-animation-editor-chrome-extension-vs-code-2f07
v6 → https://dev.to/webdeveloperhyper/let-superheroes-cheer-you-up-ai-avatar-v6-chrome-extension-vs-code-extension-2ak7

✨ FEATURES

🎭 Live reactions — character automatically reacts when you send a message to AI
🔄 Change Avatar — swap your VRM character anytime with the button at the top
💃 Animations — play .vrma motion clips or custom JSON poses; 3-state button: off / Default / Custom
🎬 Animation Editor — create multi-keyframe animations with in / hold / out timing (v4)
🎥 OrbitControls — drag to rotate, scroll to zoom, right-click to pan
👀 Eye tracking — eyes and head follow your mouse cursor when idle
💬 Lipsync — mouth animates while AI is replying
😊 Click or press Enter to interact — triggers a smile, nod, and animation (if ON)
💬 Custom speech messages — edit the speech bubble messages via the Messages button
😂 Jokes — avatar tells jokes via the Jokes button


🤖 SUPPORTED SITES

The avatar automatically reacts on:
- 🤖 ChatGPT (chatgpt.com)
- 🤖 Claude (claude.ai)

Enter key reaction works on all websites.


🚀 GETTING STARTED

No setup needed — comes with a built-in sample character.

1. Install the extension from the Chrome Web Store
2. Pin it to the toolbar
3. Click the AI Avatar icon and open the Side Panel
4. Chat with any supported AI site — your avatar reacts automatically


🎨 USE YOUR OWN VRM CHARACTER

You can create your own 3D avatar for free using VRoid (https://vroid.com/en) — no 3D modeling skills needed. Design your character and export it as a .vrm file.

Click the Change Avatar button at the top of the panel to pick a .vrm file.

v6 adds new sample characters — three girls and two boys — plus cute, cool, and funny pose packs. Download the zip free from GitHub Releases:
https://github.com/webdeveloperhyper/ai-avatar/releases


💃 ANIMATIONS

The Animation button cycles through three states:
- Off: no motion clips play
- Animation: Default — plays the built-in sample poses included with the extension
- Animation: Custom — opens a file picker, plays .vrma and .json pose files from your chosen files

👉 VRMA Animation files are not included in the extension because they cannot be redistributed under their license terms. Download them for free from the official VRoid Project:
https://booth.pm/en/items/5512385

The pack includes 7 animations: Show full body, Greeting, Peace sign, Shoot, Spin, Model pose, and Squat.

1. Download and unzip the pack
2. Click Animation until it shows Animation: Custom
3. Pick the .vrma files
4. A random clip plays each time the AI responds


🎬 ANIMATION EDITOR (v4+)

Click Edit Animation to open the animation editor overlay:
- Select a body part from the dropdown — including all 30 finger bones (v5)
- Use the axis button to switch between X / Y / Z rotation
- Drag the slider (or type a value in degrees) to rotate the bone — values shown in degrees (v5)
- Add multiple keyframes with the + button to build a full animation sequence (v4)
- Each keyframe has In (fade in), Hold, and Out (fade out, last keyframe only) timing (v4)
- Navigate keyframes with the < > buttons (v4)
- Press Play to preview the full animation (in → hold → out) exactly as it plays normally (v4)
- Click Save to save the animation as a JSON file (saved in degrees for easy editing)
- Click Reload to restore the last saved values
- The saved animation is added to the pool and plays randomly like any other animation

A file picker appears when you click Edit Animation (v4):
- First time: Cancel the file picker to open a default animation
- Next time: Pick an existing JSON file to load and edit


💬 SPEECH BUBBLE MESSAGES

Click the Messages button to edit the messages shown in the speech bubble when the avatar reacts.
Enter messages separated by | (pipe), e.g. You can do it! | Nice work! | Love that fix!
Messages are saved and persist across sessions.


🗺️ ROADMAP

✅ v1
- VRM character in VS Code sidebar
- Live reactions to Claude Code activity
- Eye tracking, lipsync, OrbitControls
- Change Avatar, speech bubble messages

✅ v2
- 3-state Animation button (off / Default / Custom)
- Custom pose editor with JSON save/load
- Jokes button
- GitHub Copilot watcher support

✅ v3
- 🌐 Chrome extension (this extension)
- Various fixes and adjustments

✅ v4
- Pose Editor upgraded to full Animation Editor
- Multi-keyframe timeline with in / hold / out timing
- Various fixes and adjustments

✅ v5
- All 30 finger bones added to the animation editor
- Animation editor values now shown and saved in degrees (backward compatible with existing files)
- BG toggle button — switch to gray background to see dark-colored avatars
- Various UI polish: button styling, focus outlines, editor colors
- Fixed reload to always restore the latest saved pose

✅ v6
- New sample characters: 3 girls and 2 boys (free download from GitHub Releases)
- New pose packs: cute, cool, and funny poses (free download from GitHub Releases)
- https://github.com/webdeveloperhyper/ai-avatar/releases

v7 — Now creating!
- 🎉 More fun updates


---


AI Avatar — Chrome拡張機能

ブラウザのサイドパネルに表示されるVRM 3Dキャラクターが、ChatGPTやClaudeへのメッセージ送信に反応します。AIなしでもアニメーションや吹き出しが動作します。

💻 VS Code拡張機能としても利用可能 — エディタ上でClaude Code / GitHub Copilotの動作に反応します。
https://marketplace.visualstudio.com/items?itemName=web-developer-hyper.ai-avatar

📖 開発ストーリーはDEV.toで読めます：
v1 → https://dev.to/webdeveloperhyper/ai-avatar-meet-your-ideal-girlfriendboyfriend-for-free-21n5
v2 → https://dev.to/webdeveloperhyper/ai-avatar-v2-with-pose-editor-vs-code-extension-38n2
v4 → https://dev.to/webdeveloperhyper/how-to-get-cheered-up-247-ai-avatar-v4-with-animation-editor-chrome-extension-vs-code-2f07
v6 → https://dev.to/webdeveloperhyper/let-superheroes-cheer-you-up-ai-avatar-v6-chrome-extension-vs-code-extension-2ak7


✨ 機能一覧

🎭 リアクション — AIにメッセージを送ると自動でキャラクターが反応
🔄 アバター変更 — 上部のボタンでVRMキャラクターをいつでも変更可能
💃 アニメーション — .vrmaモーションクリップやカスタムJSONポーズを再生；3段階ボタン：オフ / デフォルト / カスタム
🎬 アニメーションエディタ — 複数キーフレームのアニメーションをIn / Hold / Outタイミングで作成 (v4)
🎥 オービットコントロール — ドラッグで回転、スクロールでズーム、右クリックでパン
👀 視線追跡 — アイドル時に目と頭がマウスカーソルを追う
💬 リップシンク — AIの返答中に口が動く
😊 クリックまたはEnterキーで反応 — スマイル、うなずき、アニメーションが発動
💬 カスタム吹き出しメッセージ — Messagesボタンから吹き出しのメッセージを編集
😂 ジョーク — Jokesボタンでアバターがジョークを言う


🤖 対応サイト

以下のサイトで自動反応します：
- 🤖 ChatGPT (chatgpt.com)
- 🤖 Claude (claude.ai)

Enterキーの反応はすべてのウェブサイトで動作します。


🚀 はじめ方

セットアップ不要 — サンプルキャラクターが最初から入っています。

1. Chrome ウェブストアから拡張機能をインストール
2. ツールバーにピン留め
3. AI Avatarアイコンをクリックしてサイドパネルを開く
4. 対応AIサイトでチャットすると自動でアバターが反応


🎨 自分のVRMキャラクターを使う

VRoid (https://vroid.com/ja) を使えば3Dモデリングの知識なしに無料でオリジナルアバターを作れます。キャラクターをデザインして.vrmファイルとしてエクスポートしてください。

パネル上部の「Change Avatar」ボタンから.vrmファイルを選択できます。

v6では新しいサンプルキャラクター（女の子3体・男の子2体）とポーズパック（かわいい・クール・おもしろ）を追加しました。GitHubリリースページからzipを無料でダウンロードできます：
https://github.com/webdeveloperhyper/ai-avatar/releases


💃 アニメーション

Animationボタンで3つの状態を切り替えます：
- オフ：モーションクリップを再生しない
- Animation: Default — 拡張機能に含まれるサンプルポーズを再生
- Animation: Custom — ファイルを選択し、.vrmaや.jsonポーズファイルを再生

👉 VRMAアニメーションファイルはライセンスの都合上、拡張機能に含まれていません。公式VRoidプロジェクトから無料でダウンロードできます：
https://booth.pm/ja/items/5512385

パックには7つのアニメーションが含まれます：全身表示、挨拶、ピースサイン、シュート、スピン、モデルポーズ、スクワット。

1. パックをダウンロードして解凍
2. AnimationボタンをAnimation: Customになるまでクリック
3. .vrmaファイルを選択
4. AIが返答するたびにランダムなクリップが再生


🎬 アニメーションエディタ (v4+)

「Edit Animation」をクリックしてエディタを開きます：
- ドロップダウンから体のパーツを選択 — 全30本の指ボーンに対応 (v5)
- 軸ボタンでX / Y / Z回転を切り替え
- スライダーを動かす（または度数で値を入力）してボーンを回転 — 値は度数表示 (v5)
- +ボタンで複数キーフレームを追加してアニメーションシーケンスを作成 (v4)
- 各キーフレームにIn（フェードイン）、Hold、Out（フェードアウト、最終KFのみ）のタイミング設定 (v4)
- < > ボタンでキーフレームを移動 (v4)
- Playボタンでアニメーション全体をプレビュー (v4)
- SaveでアニメーションをJSONファイルとして保存（度数で保存されるため直接編集も簡単）
- ReloadでSaveした最新の状態に戻す
- 保存したアニメーションはプールに追加され、通常のアニメーションと同様にランダム再生

「Edit Animation」をクリックするとファイルピッカーが表示されます：
- 初回：ファイルピッカーをキャンセルするとデフォルトアニメーションが開く
- 2回目以降：既存のJSONファイルを選択して読み込み・編集


💬 吹き出しメッセージ

Messagesボタンをクリックして、アバターが反応したときに吹き出しに表示するメッセージを編集できます。
メッセージは | （パイプ）で区切って入力します。例：頑張って！ | いいね！ | 完璧！
メッセージは保存され、セッションをまたいで維持されます。


🗺️ ロードマップ

✅ v1
- VS CodeサイドバーにVRMキャラクター表示
- Claude Code活動へのライブ反応
- 視線追跡、リップシンク、オービットコントロール
- アバター変更、吹き出しメッセージ

✅ v2
- 3段階Animationボタン（オフ / デフォルト / カスタム）
- カスタムポーズエディタ（JSON保存・読み込み）
- Jokesボタン
- GitHub Copilotウォッチャー対応

✅ v3
- 🌐 Chrome拡張機能（この拡張機能）
- 各種修正・調整

✅ v4
- ポーズエディタをフルアニメーションエディタにアップグレード
- In / Hold / Outタイミング付き複数キーフレームタイムライン
- 各種修正・調整

✅ v5
- アニメーションエディタに全30本の指ボーンを追加
- エディタの値を度数で表示・保存（既存ファイルとの後方互換性あり）
- BGトグルボタン追加 — グレー背景に切り替えて暗色アバターを見やすく
- UIの各種改善：ボタンスタイル、フォーカス枠、エディタの配色
- リロードが最後に保存したポーズを正しく復元するよう修正

✅ v6
- 新サンプルキャラクター：女の子3体・男の子2体（GitHubリリースから無料ダウンロード）
- 新ポーズパック：かわいい・クール・おもしろ（GitHubリリースから無料ダウンロード）
- https://github.com/webdeveloperhyper/ai-avatar/releases

v7 — 開発中！
- 🎉 お楽しみに

AI Avatar — Chrome Extension
(日本語の説明は下部をご覧ください / Japanese version below)

A VRM 3D character in your browser side panel that reacts to AI activity on ChatGPT and Claude. Animations and speech bubbles all run without AI too.

💻 Also available as a VS Code Extension — reacts to Claude Code / GitHub Copilot activity directly in your editor.
🎉 Thank you for 100+ installs on VS Code!
https://marketplace.visualstudio.com/items?itemName=web-developer-hyper.ai-avatar

📖 Read the story behind this project on DEV.to:
v1 → https://dev.to/webdeveloperhyper/ai-avatar-meet-your-ideal-girlfriendboyfriend-for-free-21n5
v2 → https://dev.to/webdeveloperhyper/ai-avatar-v2-with-pose-editor-vs-code-extension-38n2
v4 → https://dev.to/webdeveloperhyper/how-to-get-cheered-up-247-ai-avatar-v4-with-animation-editor-chrome-extension-vs-code-2f07
v6 → https://dev.to/webdeveloperhyper/let-superheroes-cheer-you-up-ai-avatar-v6-chrome-extension-vs-code-extension-2ak7
v7 → coming soon!

✨ FEATURES

🎭 Live reactions — character automatically reacts when you send a message to AI
🔄 Change Avatar — swap your VRM character anytime with the button at the top
💃 Animations — play .vrma motion clips or custom JSON poses; 4-state button: off / Default / Random / Custom
🎬 Animation Editor — create multi-keyframe animations with in / hold / out timing (v4)
🎥 OrbitControls — drag to rotate, scroll to zoom, right-click to pan
👀 Eye tracking — eyes and head follow your mouse cursor when idle
💬 Lipsync — mouth animates while AI is replying
😊 Click or press Enter to interact — triggers a smile, nod, and animation (if ON)
💬 Custom speech messages — edit the speech bubble messages via the Messages button
😂 Jokes — avatar tells jokes via the Jokes button
📸 Pose Capture — capture a real body pose with webcam and export it as a VRM animation JSON (v7)
❤️ Positive word reactions (VS Code only) — heart counter and animations on positive/negative words (v7)
🔍 Prompt Checker [Beta] (VS Code only) — instant rule-based feedback on your AI prompt clarity (v7)
🦁 Giant Mode (Chrome only) — float the avatar as a draggable, resizable overlay over any web page (v7)


🤖 SUPPORTED SITES

The avatar automatically reacts on:
- 🤖 ChatGPT (chatgpt.com)
- 🤖 Claude (claude.ai)

Enter key reaction works on all websites.


🚀 GETTING STARTED

No setup needed — comes with a built-in sample character.

1. Install the extension from the Chrome Web Store
2. Pin it to the toolbar
3. Click the AI Avatar icon and open the Side Panel
4. Chat with any supported AI site — your avatar reacts automatically


🎨 USE YOUR OWN VRM CHARACTER

You can create your own 3D avatar for free using VRoid (https://vroid.com/en) — no 3D modeling skills needed. Design your character and export it as a .vrm file.

Click the Change Avatar button at the top of the panel to pick a .vrm file.

v6 adds new sample characters — three girls and two boys — plus cute, cool, and funny pose packs. Download the zip free from GitHub Releases:
https://github.com/webdeveloperhyper/ai-avatar/releases


💃 ANIMATIONS

The Animation button cycles through four states:
- Off: no motion clips play
- Animation: Default — plays the built-in sample poses included with the extension
- Animation: Random — generates random poses from built-in zone patterns (v7)
- Animation: Custom — opens a file picker, plays .vrma and .json pose files from your chosen files

👉 VRMA Animation files are not included in the extension because they cannot be redistributed under their license terms. Download them for free from the official VRoid Project:
https://booth.pm/en/items/5512385

The pack includes 7 animations: Show full body, Greeting, Peace sign, Shoot, Spin, Model pose, and Squat.

1. Download and unzip the pack
2. Click Animation until it shows Animation: Custom
3. Pick the .vrma files
4. A random clip plays each time the AI responds


🎬 ANIMATION EDITOR (v4+)

Click Edit Animation to open the animation editor overlay:
- Select a body part from the dropdown — including all 30 finger bones (v5)
- Use the axis button to switch between X / Y / Z rotation
- Drag the slider (or type a value in degrees) to rotate the bone — values shown in degrees (v5)
- Add multiple keyframes with the + button to build a full animation sequence (v4)
- Each keyframe has In (fade in), Hold, and Out (fade out, last keyframe only) timing (v4)
- Navigate keyframes with the < > buttons (v4)
- Press Play to preview the full animation (in → hold → out) exactly as it plays normally (v4)
- Click Save to save the animation as a JSON file (saved in degrees for easy editing)
- Click Reload to restore the last saved values
- The saved animation is added to the pool and plays randomly like any other animation

A file picker appears when you click Edit Animation (v4):
- First time: Cancel the file picker to open a default animation
- Next time: Pick an existing JSON file to load and edit


💬 SPEECH BUBBLE MESSAGES

Click the Messages button to edit the messages shown in the speech bubble when the avatar reacts.
Enter messages separated by | (pipe), e.g. You can do it! | Nice work! | Love that fix!
Messages are saved and persist across sessions.


🗺️ ROADMAP

✅ v1
- VRM character in VS Code sidebar
- Live reactions to Claude Code activity
- Eye tracking, lipsync, OrbitControls
- Change Avatar, speech bubble messages

✅ v2
- 3-state Animation button (off / Default / Custom)
- Custom pose editor with JSON save/load
- Jokes button
- GitHub Copilot watcher support

✅ v3
- 🌐 Chrome extension (this extension)
- Various fixes and adjustments

✅ v4
- Pose Editor upgraded to full Animation Editor
- Multi-keyframe timeline with in / hold / out timing
- Various fixes and adjustments

✅ v5
- All 30 finger bones added to the animation editor
- Animation editor values now shown and saved in degrees (backward compatible with existing files)
- BG toggle button — switch to gray background to see dark-colored avatars
- Various UI polish: button styling, focus outlines, editor colors
- Fixed reload to always restore the latest saved pose

✅ v6
- New sample characters: 3 girls and 2 boys (free download from GitHub Releases)
- New pose packs: cute, cool, and funny poses (free download from GitHub Releases)
- https://github.com/webdeveloperhyper/ai-avatar/releases

✅ v7
- 📸 Pose Capture — capture a real body pose with webcam and export it as a VRM animation JSON
- ❤️ Positive word reactions (VS Code only) — heart counter, smile, and heart overlay animation when positive words are detected; broken heart and head shake on negative words
- 🦁 Giant Mode (Chrome only) — float the avatar as a draggable, resizable overlay over any web page
- 🎲 Animation: Random mode — new 4th state generates random poses from zone patterns (expression, body + arm, fingers, legs)
- 😊 Expression editor — add Happy or Wink expressions to animation keyframes directly in the editor
- 🖱️ Click anywhere on page to react (Chrome only) — clicking any web page triggers an animation on the avatar
- 🔍 Prompt Checker [Beta] (VS Code only) — paste any AI prompt and get instant rule-based feedback: too vague, missing action verb, vague references, unnecessary filler, too many tasks, and missing file context

v8 — Now creating!
- 🎉 More fun updates


---


AI Avatar — Chrome拡張機能

ブラウザのサイドパネルに表示されるVRM 3Dキャラクターが、ChatGPTやClaudeへのメッセージ送信に反応します。AIなしでもアニメーションや吹き出しが動作します。

💻 VS Code拡張機能としても利用可能 — エディタ上でClaude Code / GitHub Copilotの動作に反応します。
🎉 VS Code版100インストール達成！ありがとうございます！
https://marketplace.visualstudio.com/items?itemName=web-developer-hyper.ai-avatar

📖 開発ストーリーはDEV.toで読めます：
v1 → https://dev.to/webdeveloperhyper/ai-avatar-meet-your-ideal-girlfriendboyfriend-for-free-21n5
v2 → https://dev.to/webdeveloperhyper/ai-avatar-v2-with-pose-editor-vs-code-extension-38n2
v4 → https://dev.to/webdeveloperhyper/how-to-get-cheered-up-247-ai-avatar-v4-with-animation-editor-chrome-extension-vs-code-2f07
v6 → https://dev.to/webdeveloperhyper/let-superheroes-cheer-you-up-ai-avatar-v6-chrome-extension-vs-code-extension-2ak7
v7 → coming soon!


✨ 機能一覧

🎭 リアクション — AIにメッセージを送ると自動でキャラクターが反応
🔄 アバター変更 — 上部のボタンでVRMキャラクターをいつでも変更可能
💃 アニメーション — .vrmaモーションクリップやカスタムJSONポーズを再生；4段階ボタン：オフ / デフォルト / ランダム / カスタム
🎬 アニメーションエディタ — 複数キーフレームのアニメーションをIn / Hold / Outタイミングで作成 (v4)
🎥 オービットコントロール — ドラッグで回転、スクロールでズーム、右クリックでパン
👀 視線追跡 — アイドル時に目と頭がマウスカーソルを追う
💬 リップシンク — AIの返答中に口が動く
😊 クリックまたはEnterキーで反応 — スマイル、うなずき、アニメーションが発動
💬 カスタム吹き出しメッセージ — Messagesボタンから吹き出しのメッセージを編集
😂 ジョーク — Jokesボタンでアバターがジョークを言う
📸 ポーズキャプチャ — ウェブカメラで体のポーズを撮影し、VRMアニメーションJSONとして書き出し (v7)
❤️ ポジティブワード反応（VS Code限定）— ポジティブ/ネガティブワード検出時にハートカウンターとアニメーション (v7)
🔍 プロンプトチェッカー [Beta]（VS Code限定）— AIプロンプトの明確さをルールベースで即チェック (v7)
🦁 ジャイアントモード（Chrome限定）— ドラッグ・リサイズ可能なオーバーレイとしてアバターをどのページにも表示 (v7)


🤖 対応サイト

以下のサイトで自動反応します：
- 🤖 ChatGPT (chatgpt.com)
- 🤖 Claude (claude.ai)

Enterキーの反応はすべてのウェブサイトで動作します。


🚀 はじめ方

セットアップ不要 — サンプルキャラクターが最初から入っています。

1. Chrome ウェブストアから拡張機能をインストール
2. ツールバーにピン留め
3. AI Avatarアイコンをクリックしてサイドパネルを開く
4. 対応AIサイトでチャットすると自動でアバターが反応


🎨 自分のVRMキャラクターを使う

VRoid (https://vroid.com/ja) を使えば3Dモデリングの知識なしに無料でオリジナルアバターを作れます。キャラクターをデザインして.vrmファイルとしてエクスポートしてください。

パネル上部の「Change Avatar」ボタンから.vrmファイルを選択できます。

v6では新しいサンプルキャラクター（女の子3体・男の子2体）とポーズパック（かわいい・クール・おもしろ）を追加しました。GitHubリリースページからzipを無料でダウンロードできます：
https://github.com/webdeveloperhyper/ai-avatar/releases


💃 アニメーション

Animationボタンで4つの状態を切り替えます：
- オフ：モーションクリップを再生しない
- Animation: Default — 拡張機能に含まれるサンプルポーズを再生
- Animation: Random — 内蔵のゾーンパターンからランダムにポーズを生成 (v7)
- Animation: Custom — ファイルを選択し、.vrmaや.jsonポーズファイルを再生

👉 VRMAアニメーションファイルはライセンスの都合上、拡張機能に含まれていません。公式VRoidプロジェクトから無料でダウンロードできます：
https://booth.pm/ja/items/5512385

パックには7つのアニメーションが含まれます：全身表示、挨拶、ピースサイン、シュート、スピン、モデルポーズ、スクワット。

1. パックをダウンロードして解凍
2. AnimationボタンをAnimation: Customになるまでクリック
3. .vrmaファイルを選択
4. AIが返答するたびにランダムなクリップが再生


🎬 アニメーションエディタ (v4+)

「Edit Animation」をクリックしてエディタを開きます：
- ドロップダウンから体のパーツを選択 — 全30本の指ボーンに対応 (v5)
- 軸ボタンでX / Y / Z回転を切り替え
- スライダーを動かす（または度数で値を入力）してボーンを回転 — 値は度数表示 (v5)
- +ボタンで複数キーフレームを追加してアニメーションシーケンスを作成 (v4)
- 各キーフレームにIn（フェードイン）、Hold、Out（フェードアウト、最終KFのみ）のタイミング設定 (v4)
- < > ボタンでキーフレームを移動 (v4)
- Playボタンでアニメーション全体をプレビュー (v4)
- SaveでアニメーションをJSONファイルとして保存（度数で保存されるため直接編集も簡単）
- ReloadでSaveした最新の状態に戻す
- 保存したアニメーションはプールに追加され、通常のアニメーションと同様にランダム再生

「Edit Animation」をクリックするとファイルピッカーが表示されます：
- 初回：ファイルピッカーをキャンセルするとデフォルトアニメーションが開く
- 2回目以降：既存のJSONファイルを選択して読み込み・編集


💬 吹き出しメッセージ

Messagesボタンをクリックして、アバターが反応したときに吹き出しに表示するメッセージを編集できます。
メッセージは | （パイプ）で区切って入力します。例：頑張って！ | いいね！ | 完璧！
メッセージは保存され、セッションをまたいで維持されます。


🗺️ ロードマップ

✅ v1
- VS CodeサイドバーにVRMキャラクター表示
- Claude Code活動へのライブ反応
- 視線追跡、リップシンク、オービットコントロール
- アバター変更、吹き出しメッセージ

✅ v2
- 3段階Animationボタン（オフ / デフォルト / カスタム）
- カスタムポーズエディタ（JSON保存・読み込み）
- Jokesボタン
- GitHub Copilotウォッチャー対応

✅ v3
- 🌐 Chrome拡張機能（この拡張機能）
- 各種修正・調整

✅ v4
- ポーズエディタをフルアニメーションエディタにアップグレード
- In / Hold / Outタイミング付き複数キーフレームタイムライン
- 各種修正・調整

✅ v5
- アニメーションエディタに全30本の指ボーンを追加
- エディタの値を度数で表示・保存（既存ファイルとの後方互換性あり）
- BGトグルボタン追加 — グレー背景に切り替えて暗色アバターを見やすく
- UIの各種改善：ボタンスタイル、フォーカス枠、エディタの配色
- リロードが最後に保存したポーズを正しく復元するよう修正

✅ v6
- 新サンプルキャラクター：女の子3体・男の子2体（GitHubリリースから無料ダウンロード）
- 新ポーズパック：かわいい・クール・おもしろ（GitHubリリースから無料ダウンロード）
- https://github.com/webdeveloperhyper/ai-avatar/releases

✅ v7
- 📸 ポーズキャプチャツール — ウェブカメラで体のポーズを撮影し、VRMアニメーションJSONとして書き出し
- ❤️ ポジティブワード反応 — ポジティブワード検出時にハートカウンター・スマイル・ハートオーバーレイアニメーション；ネガティブワードには割れたハートと首振り
- 🦁 ジャイアントモード（Chrome限定）— ドラッグ・リサイズ可能なオーバーレイとしてアバターをどのページにも表示
- 🎲 Animation: Randomモード — 内蔵のゾーンパターン（表情・体と腕・指・脚）からランダムにかわいいポーズを生成する新しい第4状態 (v7)
- 😊 表情エディタ — アニメーションエディタのキーフレームにHappyまたはWink表情を追加可能
- 🖱️ ページのどこかをクリックで反応（Chrome限定）— ウェブページをクリックするとアバターがアニメーションで反応
- 🔍 プロンプトチェッカー [Beta]（VS Code限定）— AIプロンプトを貼り付けるだけで、曖昧すぎる・アクション動詞なし・代名詞で指示・余分な前置き・タスク過多・ファイル情報なし などをルールベースで即チェック

v8 — 開発中！
- 🎉 お楽しみに

May 10, 2026
host_permissions
```
(empty)
```
```
<all_urls>
```

Apr 27, 2026

description

AI Avatar — Chrome Extension
(日本語の説明は下部をご覧ください / Japanese version below)

A VRM 3D character in your browser side panel that reacts to AI activity on ChatGPT and Claude. Animations and speech bubbles all run without AI too.

💻 Also available as a VS Code Extension — reacts to Claude Code / GitHub Copilot activity directly in your editor.
https://marketplace.visualstudio.com/items?itemName=web-developer-hyper.ai-avatar

📖 Read the story behind this project on DEV.to:
v1 → https://dev.to/webdeveloperhyper/ai-avatar-meet-your-ideal-girlfriendboyfriend-for-free-21n5
v2 → https://dev.to/webdeveloperhyper/ai-avatar-v2-with-pose-editor-vs-code-extension-38n2
v4 → https://dev.to/webdeveloperhyper/how-to-get-cheered-up-247-ai-avatar-v4-with-animation-editor-chrome-extension-vs-code-2f07
v6 → (coming soon)

✨ FEATURES

🎭 Live reactions — character automatically reacts when you send a message to AI
🔄 Change Avatar — swap your VRM character anytime with the button at the top
💃 Animations — play .vrma motion clips or custom JSON poses; 3-state button: off / Default / Custom
🎬 Animation Editor — create multi-keyframe animations with in / hold / out timing (v4)
🎥 OrbitControls — drag to rotate, scroll to zoom, right-click to pan
👀 Eye tracking — eyes and head follow your mouse cursor when idle
💬 Lipsync — mouth animates while AI is replying
😊 Click or press Enter to interact — triggers a smile, nod, and animation (if ON)
💬 Custom speech messages — edit the speech bubble messages via the Messages button
😂 Jokes — avatar tells jokes via the Jokes button


🤖 SUPPORTED SITES

The avatar automatically reacts on:
- 🤖 ChatGPT (chatgpt.com)
- 🤖 Claude (claude.ai)

Enter key reaction works on all websites.


🚀 GETTING STARTED

No setup needed — comes with a built-in sample character.

1. Install the extension from the Chrome Web Store
2. Pin it to the toolbar
3. Click the AI Avatar icon and open the Side Panel
4. Chat with any supported AI site — your avatar reacts automatically


🎨 USE YOUR OWN VRM CHARACTER

You can create your own 3D avatar for free using VRoid (https://vroid.com/en) — no 3D modeling skills needed. Design your character and export it as a .vrm file.

Click the Change Avatar button at the top of the panel to pick a .vrm file.

v6 adds new sample characters — three girls and two boys — plus cute, cool, and funny pose packs. Download the zip free from GitHub Releases:
https://github.com/webdeveloperhyper/ai-avatar/releases


💃 ANIMATIONS

The Animation button cycles through three states:
- Off: no motion clips play
- Animation: Default — plays the built-in sample poses included with the extension
- Animation: Custom — opens a file picker, plays .vrma and .json pose files from your chosen files

👉 VRMA Animation files are not included in the extension because they cannot be redistributed under their license terms. Download them for free from the official VRoid Project:
https://booth.pm/en/items/5512385

The pack includes 7 animations: Show full body, Greeting, Peace sign, Shoot, Spin, Model pose, and Squat.

1. Download and unzip the pack
2. Click Animation until it shows Animation: Custom
3. Pick the .vrma files
4. A random clip plays each time the AI responds


🎬 ANIMATION EDITOR (v4+)

Click Edit Animation to open the animation editor overlay:
- Select a body part from the dropdown — including all 30 finger bones (v5)
- Use the axis button to switch between X / Y / Z rotation
- Drag the slider (or type a value in degrees) to rotate the bone — values shown in degrees (v5)
- Add multiple keyframes with the + button to build a full animation sequence (v4)
- Each keyframe has In (fade in), Hold, and Out (fade out, last keyframe only) timing (v4)
- Navigate keyframes with the < > buttons (v4)
- Press Play to preview the full animation (in → hold → out) exactly as it plays normally (v4)
- Click Save to save the animation as a JSON file (saved in degrees for easy editing)
- Click Reload to restore the last saved values
- The saved animation is added to the pool and plays randomly like any other animation

A file picker appears when you click Edit Animation (v4):
- First time: Cancel the file picker to open a default animation
- Next time: Pick an existing JSON file to load and edit


💬 SPEECH BUBBLE MESSAGES

Click the Messages button to edit the messages shown in the speech bubble when the avatar reacts.
Enter messages separated by | (pipe), e.g. You can do it! | Nice work! | Love that fix!
Messages are saved and persist across sessions.


🗺️ ROADMAP

✅ v1
- VRM character in VS Code sidebar
- Live reactions to Claude Code activity
- Eye tracking, lipsync, OrbitControls
- Change Avatar, speech bubble messages

✅ v2
- 3-state Animation button (off / Default / Custom)
- Custom pose editor with JSON save/load
- Jokes button
- GitHub Copilot watcher support

✅ v3
- 🌐 Chrome extension (this extension)
- Various fixes and adjustments

✅ v4
- Pose Editor upgraded to full Animation Editor
- Multi-keyframe timeline with in / hold / out timing
- Various fixes and adjustments

✅ v5
- All 30 finger bones added to the animation editor
- Animation editor values now shown and saved in degrees (backward compatible with existing files)
- BG toggle button — switch to gray background to see dark-colored avatars
- Various UI polish: button styling, focus outlines, editor colors
- Fixed reload to always restore the latest saved pose

✅ v6
- New sample characters: 3 girls and 2 boys (free download from GitHub Releases)
- New pose packs: cute, cool, and funny poses (free download from GitHub Releases)
- https://github.com/webdeveloperhyper/ai-avatar/releases

v7 — Now creating!
- 🎉 More fun updates


---


AI Avatar — Chrome拡張機能

ブラウザのサイドパネルに表示されるVRM 3Dキャラクターが、ChatGPTやClaudeへのメッセージ送信に反応します。AIなしでもアニメーションや吹き出しが動作します。

💻 VS Code拡張機能としても利用可能 — エディタ上でClaude Code / GitHub Copilotの動作に反応します。
https://marketplace.visualstudio.com/items?itemName=web-developer-hyper.ai-avatar

📖 開発ストーリーはDEV.toで読めます：
v1 → https://dev.to/webdeveloperhyper/ai-avatar-meet-your-ideal-girlfriendboyfriend-for-free-21n5
v2 → https://dev.to/webdeveloperhyper/ai-avatar-v2-with-pose-editor-vs-code-extension-38n2
v4 → https://dev.to/webdeveloperhyper/how-to-get-cheered-up-247-ai-avatar-v4-with-animation-editor-chrome-extension-vs-code-2f07
v6 → (近日公開)


✨ 機能一覧

🎭 リアクション — AIにメッセージを送ると自動でキャラクターが反応
🔄 アバター変更 — 上部のボタンでVRMキャラクターをいつでも変更可能
💃 アニメーション — .vrmaモーションクリップやカスタムJSONポーズを再生；3段階ボタン：オフ / デフォルト / カスタム
🎬 アニメーションエディタ — 複数キーフレームのアニメーションをIn / Hold / Outタイミングで作成 (v4)
🎥 オービットコントロール — ドラッグで回転、スクロールでズーム、右クリックでパン
👀 視線追跡 — アイドル時に目と頭がマウスカーソルを追う
💬 リップシンク — AIの返答中に口が動く
😊 クリックまたはEnterキーで反応 — スマイル、うなずき、アニメーションが発動
💬 カスタム吹き出しメッセージ — Messagesボタンから吹き出しのメッセージを編集
😂 ジョーク — Jokesボタンでアバターがジョークを言う


🤖 対応サイト

以下のサイトで自動反応します：
- 🤖 ChatGPT (chatgpt.com)
- 🤖 Claude (claude.ai)

Enterキーの反応はすべてのウェブサイトで動作します。


🚀 はじめ方

セットアップ不要 — サンプルキャラクターが最初から入っています。

1. Chrome ウェブストアから拡張機能をインストール
2. ツールバーにピン留め
3. AI Avatarアイコンをクリックしてサイドパネルを開く
4. 対応AIサイトでチャットすると自動でアバターが反応


🎨 自分のVRMキャラクターを使う

VRoid (https://vroid.com/ja) を使えば3Dモデリングの知識なしに無料でオリジナルアバターを作れます。キャラクターをデザインして.vrmファイルとしてエクスポートしてください。

パネル上部の「Change Avatar」ボタンから.vrmファイルを選択できます。

v6では新しいサンプルキャラクター（女の子3体・男の子2体）とポーズパック（かわいい・クール・おもしろ）を追加しました。GitHubリリースページからzipを無料でダウンロードできます：
https://github.com/webdeveloperhyper/ai-avatar/releases


💃 アニメーション

Animationボタンで3つの状態を切り替えます：
- オフ：モーションクリップを再生しない
- Animation: Default — 拡張機能に含まれるサンプルポーズを再生
- Animation: Custom — ファイルを選択し、.vrmaや.jsonポーズファイルを再生

👉 VRMAアニメーションファイルはライセンスの都合上、拡張機能に含まれていません。公式VRoidプロジェクトから無料でダウンロードできます：
https://booth.pm/ja/items/5512385

パックには7つのアニメーションが含まれます：全身表示、挨拶、ピースサイン、シュート、スピン、モデルポーズ、スクワット。

1. パックをダウンロードして解凍
2. AnimationボタンをAnimation: Customになるまでクリック
3. .vrmaファイルを選択
4. AIが返答するたびにランダムなクリップが再生


🎬 アニメーションエディタ (v4+)

「Edit Animation」をクリックしてエディタを開きます：
- ドロップダウンから体のパーツを選択 — 全30本の指ボーンに対応 (v5)
- 軸ボタンでX / Y / Z回転を切り替え
- スライダーを動かす（または度数で値を入力）してボーンを回転 — 値は度数表示 (v5)
- +ボタンで複数キーフレームを追加してアニメーションシーケンスを作成 (v4)
- 各キーフレームにIn（フェードイン）、Hold、Out（フェードアウト、最終KFのみ）のタイミング設定 (v4)
- < > ボタンでキーフレームを移動 (v4)
- Playボタンでアニメーション全体をプレビュー (v4)
- SaveでアニメーションをJSONファイルとして保存（度数で保存されるため直接編集も簡単）
- ReloadでSaveした最新の状態に戻す
- 保存したアニメーションはプールに追加され、通常のアニメーションと同様にランダム再生

「Edit Animation」をクリックするとファイルピッカーが表示されます：
- 初回：ファイルピッカーをキャンセルするとデフォルトアニメーションが開く
- 2回目以降：既存のJSONファイルを選択して読み込み・編集


💬 吹き出しメッセージ

Messagesボタンをクリックして、アバターが反応したときに吹き出しに表示するメッセージを編集できます。
メッセージは | （パイプ）で区切って入力します。例：頑張って！ | いいね！ | 完璧！
メッセージは保存され、セッションをまたいで維持されます。


🗺️ ロードマップ

✅ v1
- VS CodeサイドバーにVRMキャラクター表示
- Claude Code活動へのライブ反応
- 視線追跡、リップシンク、オービットコントロール
- アバター変更、吹き出しメッセージ

✅ v2
- 3段階Animationボタン（オフ / デフォルト / カスタム）
- カスタムポーズエディタ（JSON保存・読み込み）
- Jokesボタン
- GitHub Copilotウォッチャー対応

✅ v3
- 🌐 Chrome拡張機能（この拡張機能）
- 各種修正・調整

✅ v4
- ポーズエディタをフルアニメーションエディタにアップグレード
- In / Hold / Outタイミング付き複数キーフレームタイムライン
- 各種修正・調整

✅ v5
- アニメーションエディタに全30本の指ボーンを追加
- エディタの値を度数で表示・保存（既存ファイルとの後方互換性あり）
- BGトグルボタン追加 — グレー背景に切り替えて暗色アバターを見やすく
- UIの各種改善：ボタンスタイル、フォーカス枠、エディタの配色
- リロードが最後に保存したポーズを正しく復元するよう修正

✅ v6
- 新サンプルキャラクター：女の子3体・男の子2体（GitHubリリースから無料ダウンロード）
- 新ポーズパック：かわいい・クール・おもしろ（GitHubリリースから無料ダウンロード）
- https://github.com/webdeveloperhyper/ai-avatar/releases

v7 — 開発中！
- 🎉 お楽しみに

AI Avatar — Chrome Extension
(日本語の説明は下部をご覧ください / Japanese version below)

A VRM 3D character in your browser side panel that reacts to AI activity on ChatGPT and Claude. Animations and speech bubbles all run without AI too.

💻 Also available as a VS Code Extension — reacts to Claude Code / GitHub Copilot activity directly in your editor.
https://marketplace.visualstudio.com/items?itemName=web-developer-hyper.ai-avatar

📖 Read the story behind this project on DEV.to:
v1 → https://dev.to/webdeveloperhyper/ai-avatar-meet-your-ideal-girlfriendboyfriend-for-free-21n5
v2 → https://dev.to/webdeveloperhyper/ai-avatar-v2-with-pose-editor-vs-code-extension-38n2
v4 → https://dev.to/webdeveloperhyper/how-to-get-cheered-up-247-ai-avatar-v4-with-animation-editor-chrome-extension-vs-code-2f07
v6 → https://dev.to/webdeveloperhyper/let-superheroes-cheer-you-up-ai-avatar-v6-chrome-extension-vs-code-extension-2ak7

✨ FEATURES

🎭 Live reactions — character automatically reacts when you send a message to AI
🔄 Change Avatar — swap your VRM character anytime with the button at the top
💃 Animations — play .vrma motion clips or custom JSON poses; 3-state button: off / Default / Custom
🎬 Animation Editor — create multi-keyframe animations with in / hold / out timing (v4)
🎥 OrbitControls — drag to rotate, scroll to zoom, right-click to pan
👀 Eye tracking — eyes and head follow your mouse cursor when idle
💬 Lipsync — mouth animates while AI is replying
😊 Click or press Enter to interact — triggers a smile, nod, and animation (if ON)
💬 Custom speech messages — edit the speech bubble messages via the Messages button
😂 Jokes — avatar tells jokes via the Jokes button


🤖 SUPPORTED SITES

The avatar automatically reacts on:
- 🤖 ChatGPT (chatgpt.com)
- 🤖 Claude (claude.ai)

Enter key reaction works on all websites.


🚀 GETTING STARTED

No setup needed — comes with a built-in sample character.

1. Install the extension from the Chrome Web Store
2. Pin it to the toolbar
3. Click the AI Avatar icon and open the Side Panel
4. Chat with any supported AI site — your avatar reacts automatically


🎨 USE YOUR OWN VRM CHARACTER

You can create your own 3D avatar for free using VRoid (https://vroid.com/en) — no 3D modeling skills needed. Design your character and export it as a .vrm file.

Click the Change Avatar button at the top of the panel to pick a .vrm file.

v6 adds new sample characters — three girls and two boys — plus cute, cool, and funny pose packs. Download the zip free from GitHub Releases:
https://github.com/webdeveloperhyper/ai-avatar/releases


💃 ANIMATIONS

The Animation button cycles through three states:
- Off: no motion clips play
- Animation: Default — plays the built-in sample poses included with the extension
- Animation: Custom — opens a file picker, plays .vrma and .json pose files from your chosen files

👉 VRMA Animation files are not included in the extension because they cannot be redistributed under their license terms. Download them for free from the official VRoid Project:
https://booth.pm/en/items/5512385

The pack includes 7 animations: Show full body, Greeting, Peace sign, Shoot, Spin, Model pose, and Squat.

1. Download and unzip the pack
2. Click Animation until it shows Animation: Custom
3. Pick the .vrma files
4. A random clip plays each time the AI responds


🎬 ANIMATION EDITOR (v4+)

Click Edit Animation to open the animation editor overlay:
- Select a body part from the dropdown — including all 30 finger bones (v5)
- Use the axis button to switch between X / Y / Z rotation
- Drag the slider (or type a value in degrees) to rotate the bone — values shown in degrees (v5)
- Add multiple keyframes with the + button to build a full animation sequence (v4)
- Each keyframe has In (fade in), Hold, and Out (fade out, last keyframe only) timing (v4)
- Navigate keyframes with the < > buttons (v4)
- Press Play to preview the full animation (in → hold → out) exactly as it plays normally (v4)
- Click Save to save the animation as a JSON file (saved in degrees for easy editing)
- Click Reload to restore the last saved values
- The saved animation is added to the pool and plays randomly like any other animation

A file picker appears when you click Edit Animation (v4):
- First time: Cancel the file picker to open a default animation
- Next time: Pick an existing JSON file to load and edit


💬 SPEECH BUBBLE MESSAGES

Click the Messages button to edit the messages shown in the speech bubble when the avatar reacts.
Enter messages separated by | (pipe), e.g. You can do it! | Nice work! | Love that fix!
Messages are saved and persist across sessions.


🗺️ ROADMAP

✅ v1
- VRM character in VS Code sidebar
- Live reactions to Claude Code activity
- Eye tracking, lipsync, OrbitControls
- Change Avatar, speech bubble messages

✅ v2
- 3-state Animation button (off / Default / Custom)
- Custom pose editor with JSON save/load
- Jokes button
- GitHub Copilot watcher support

✅ v3
- 🌐 Chrome extension (this extension)
- Various fixes and adjustments

✅ v4
- Pose Editor upgraded to full Animation Editor
- Multi-keyframe timeline with in / hold / out timing
- Various fixes and adjustments

✅ v5
- All 30 finger bones added to the animation editor
- Animation editor values now shown and saved in degrees (backward compatible with existing files)
- BG toggle button — switch to gray background to see dark-colored avatars
- Various UI polish: button styling, focus outlines, editor colors
- Fixed reload to always restore the latest saved pose

✅ v6
- New sample characters: 3 girls and 2 boys (free download from GitHub Releases)
- New pose packs: cute, cool, and funny poses (free download from GitHub Releases)
- https://github.com/webdeveloperhyper/ai-avatar/releases

v7 — Now creating!
- 🎉 More fun updates


---


AI Avatar — Chrome拡張機能

ブラウザのサイドパネルに表示されるVRM 3Dキャラクターが、ChatGPTやClaudeへのメッセージ送信に反応します。AIなしでもアニメーションや吹き出しが動作します。

💻 VS Code拡張機能としても利用可能 — エディタ上でClaude Code / GitHub Copilotの動作に反応します。
https://marketplace.visualstudio.com/items?itemName=web-developer-hyper.ai-avatar

📖 開発ストーリーはDEV.toで読めます：
v1 → https://dev.to/webdeveloperhyper/ai-avatar-meet-your-ideal-girlfriendboyfriend-for-free-21n5
v2 → https://dev.to/webdeveloperhyper/ai-avatar-v2-with-pose-editor-vs-code-extension-38n2
v4 → https://dev.to/webdeveloperhyper/how-to-get-cheered-up-247-ai-avatar-v4-with-animation-editor-chrome-extension-vs-code-2f07
v6 → https://dev.to/webdeveloperhyper/let-superheroes-cheer-you-up-ai-avatar-v6-chrome-extension-vs-code-extension-2ak7


✨ 機能一覧

🎭 リアクション — AIにメッセージを送ると自動でキャラクターが反応
🔄 アバター変更 — 上部のボタンでVRMキャラクターをいつでも変更可能
💃 アニメーション — .vrmaモーションクリップやカスタムJSONポーズを再生；3段階ボタン：オフ / デフォルト / カスタム
🎬 アニメーションエディタ — 複数キーフレームのアニメーションをIn / Hold / Outタイミングで作成 (v4)
🎥 オービットコントロール — ドラッグで回転、スクロールでズーム、右クリックでパン
👀 視線追跡 — アイドル時に目と頭がマウスカーソルを追う
💬 リップシンク — AIの返答中に口が動く
😊 クリックまたはEnterキーで反応 — スマイル、うなずき、アニメーションが発動
💬 カスタム吹き出しメッセージ — Messagesボタンから吹き出しのメッセージを編集
😂 ジョーク — Jokesボタンでアバターがジョークを言う


🤖 対応サイト

以下のサイトで自動反応します：
- 🤖 ChatGPT (chatgpt.com)
- 🤖 Claude (claude.ai)

Enterキーの反応はすべてのウェブサイトで動作します。


🚀 はじめ方

セットアップ不要 — サンプルキャラクターが最初から入っています。

1. Chrome ウェブストアから拡張機能をインストール
2. ツールバーにピン留め
3. AI Avatarアイコンをクリックしてサイドパネルを開く
4. 対応AIサイトでチャットすると自動でアバターが反応


🎨 自分のVRMキャラクターを使う

VRoid (https://vroid.com/ja) を使えば3Dモデリングの知識なしに無料でオリジナルアバターを作れます。キャラクターをデザインして.vrmファイルとしてエクスポートしてください。

パネル上部の「Change Avatar」ボタンから.vrmファイルを選択できます。

v6では新しいサンプルキャラクター（女の子3体・男の子2体）とポーズパック（かわいい・クール・おもしろ）を追加しました。GitHubリリースページからzipを無料でダウンロードできます：
https://github.com/webdeveloperhyper/ai-avatar/releases


💃 アニメーション

Animationボタンで3つの状態を切り替えます：
- オフ：モーションクリップを再生しない
- Animation: Default — 拡張機能に含まれるサンプルポーズを再生
- Animation: Custom — ファイルを選択し、.vrmaや.jsonポーズファイルを再生

👉 VRMAアニメーションファイルはライセンスの都合上、拡張機能に含まれていません。公式VRoidプロジェクトから無料でダウンロードできます：
https://booth.pm/ja/items/5512385

パックには7つのアニメーションが含まれます：全身表示、挨拶、ピースサイン、シュート、スピン、モデルポーズ、スクワット。

1. パックをダウンロードして解凍
2. AnimationボタンをAnimation: Customになるまでクリック
3. .vrmaファイルを選択
4. AIが返答するたびにランダムなクリップが再生


🎬 アニメーションエディタ (v4+)

「Edit Animation」をクリックしてエディタを開きます：
- ドロップダウンから体のパーツを選択 — 全30本の指ボーンに対応 (v5)
- 軸ボタンでX / Y / Z回転を切り替え
- スライダーを動かす（または度数で値を入力）してボーンを回転 — 値は度数表示 (v5)
- +ボタンで複数キーフレームを追加してアニメーションシーケンスを作成 (v4)
- 各キーフレームにIn（フェードイン）、Hold、Out（フェードアウト、最終KFのみ）のタイミング設定 (v4)
- < > ボタンでキーフレームを移動 (v4)
- Playボタンでアニメーション全体をプレビュー (v4)
- SaveでアニメーションをJSONファイルとして保存（度数で保存されるため直接編集も簡単）
- ReloadでSaveした最新の状態に戻す
- 保存したアニメーションはプールに追加され、通常のアニメーションと同様にランダム再生

「Edit Animation」をクリックするとファイルピッカーが表示されます：
- 初回：ファイルピッカーをキャンセルするとデフォルトアニメーションが開く
- 2回目以降：既存のJSONファイルを選択して読み込み・編集


💬 吹き出しメッセージ

Messagesボタンをクリックして、アバターが反応したときに吹き出しに表示するメッセージを編集できます。
メッセージは | （パイプ）で区切って入力します。例：頑張って！ | いいね！ | 完璧！
メッセージは保存され、セッションをまたいで維持されます。


🗺️ ロードマップ

✅ v1
- VS CodeサイドバーにVRMキャラクター表示
- Claude Code活動へのライブ反応
- 視線追跡、リップシンク、オービットコントロール
- アバター変更、吹き出しメッセージ

✅ v2
- 3段階Animationボタン（オフ / デフォルト / カスタム）
- カスタムポーズエディタ（JSON保存・読み込み）
- Jokesボタン
- GitHub Copilotウォッチャー対応

✅ v3
- 🌐 Chrome拡張機能（この拡張機能）
- 各種修正・調整

✅ v4
- ポーズエディタをフルアニメーションエディタにアップグレード
- In / Hold / Outタイミング付き複数キーフレームタイムライン
- 各種修正・調整

✅ v5
- アニメーションエディタに全30本の指ボーンを追加
- エディタの値を度数で表示・保存（既存ファイルとの後方互換性あり）
- BGトグルボタン追加 — グレー背景に切り替えて暗色アバターを見やすく
- UIの各種改善：ボタンスタイル、フォーカス枠、エディタの配色
- リロードが最後に保存したポーズを正しく復元するよう修正

✅ v6
- 新サンプルキャラクター：女の子3体・男の子2体（GitHubリリースから無料ダウンロード）
- 新ポーズパック：かわいい・クール・おもしろ（GitHubリリースから無料ダウンロード）
- https://github.com/webdeveloperhyper/ai-avatar/releases

v7 — 開発中！
- 🎉 お楽しみに

Apr 22, 2026

description

AI Avatar — Chrome Extension
(日本語の説明は下部をご覧ください / Japanese version below)

A VRM 3D character in your browser side panel that reacts to AI activity on ChatGPT and Claude. Animations and speech bubbles all run without AI too.

💻 Also available as a VS Code Extension — reacts to Claude Code / GitHub Copilot activity directly in your editor.
https://marketplace.visualstudio.com/items?itemName=web-developer-hyper.ai-avatar

📖 Read the story behind this project on DEV.to:
v1 → https://dev.to/webdeveloperhyper/ai-avatar-meet-your-ideal-girlfriendboyfriend-for-free-21n5
v2 → https://dev.to/webdeveloperhyper/ai-avatar-v2-with-pose-editor-vs-code-extension-38n2
v4 → https://dev.to/webdeveloperhyper/how-to-get-cheered-up-247-ai-avatar-v4-with-animation-editor-chrome-extension-vs-code-2f07

✨ FEATURES

🎭 Live reactions — character automatically reacts when you send a message to AI
🔄 Change Avatar — swap your VRM character anytime with the button at the top
💃 Animations — play .vrma motion clips or custom JSON poses; 3-state button: off / Default / Custom
🎬 Animation Editor — create multi-keyframe animations with in / hold / out timing (v4)
🎥 OrbitControls — drag to rotate, scroll to zoom, right-click to pan
👀 Eye tracking — eyes and head follow your mouse cursor when idle
💬 Lipsync — mouth animates while AI is replying
😊 Click or press Enter to interact — triggers a smile, nod, and animation (if ON)
💬 Custom speech messages — edit the speech bubble messages via the Messages button
😂 Jokes — avatar tells jokes via the Jokes button


🤖 SUPPORTED SITES

The avatar automatically reacts on:
- 🤖 ChatGPT (chatgpt.com)
- 🤖 Claude (claude.ai)

Enter key reaction works on all websites.


🚀 GETTING STARTED

No setup needed — comes with a built-in sample character.

1. Install the extension from the Chrome Web Store
2. Pin it to the toolbar
3. Click the AI Avatar icon and open the Side Panel
4. Chat with any supported AI site — your avatar reacts automatically


🎨 USE YOUR OWN VRM CHARACTER

You can create your own 3D avatar for free using VRoid (https://vroid.com/en) — no 3D modeling skills needed. Design your character and export it as a .vrm file.

Click the Change Avatar button at the top of the panel to pick a .vrm file.


💃 ANIMATIONS

The Animation button cycles through three states:
- Off: no motion clips play
- Animation: Default — plays the built-in sample poses included with the extension
- Animation: Custom — opens a file picker, plays .vrma and .json pose files from your chosen files

👉 VRMA Animation files are not included in the extension because they cannot be redistributed under their license terms. Download them for free from the official VRoid Project:
https://booth.pm/en/items/5512385

The pack includes 7 animations: Show full body, Greeting, Peace sign, Shoot, Spin, Model pose, and Squat.

1. Download and unzip the pack
2. Click Animation until it shows Animation: Custom
3. Pick the .vrma files
4. A random clip plays each time the AI responds


🎬 ANIMATION EDITOR (v4)

Click Edit Animation to open the animation editor overlay:
- Select a body part from the dropdown
- Use the axis button to switch between X / Y / Z rotation
- Drag the slider (or type a value) to rotate the bone
- Add multiple keyframes with the + button to build a full animation sequence (v4)
- Each keyframe has In (fade in), Hold, and Out (fade out, last keyframe only) timing (v4)
- Navigate keyframes with the < > buttons (v4)
- Press Play to preview the full animation (in → hold → out) exactly as it plays normally (v4)
- Click Save to save the animation as a JSON file
- Click Reload to restore the last saved values
- The saved animation is added to the pool and plays randomly like any other animation

A file picker appears when you click Edit Animation (v4):
- First time: Cancel the file picker to open a default animation
- Next time: Pick an existing JSON file to load and edit


💬 SPEECH BUBBLE MESSAGES

Click the Messages button to edit the messages shown in the speech bubble when the avatar reacts.
Enter messages separated by | (pipe), e.g. You can do it! | Nice work! | Love that fix!
Messages are saved and persist across sessions.


🗺️ ROADMAP

✅ v1
- VRM character in VS Code sidebar
- Live reactions to Claude Code activity
- Eye tracking, lipsync, OrbitControls
- Change Avatar, speech bubble messages

✅ v2
- 3-state Animation button (off / Default / Custom)
- Custom pose editor with JSON save/load
- Jokes button
- GitHub Copilot watcher support

✅ v3
- 🌐 Chrome extension (this extension)
- Various fixes and adjustments

✅ v4
- Pose Editor upgraded to full Animation Editor
- Multi-keyframe timeline with in / hold / out timing
- Various fixes and adjustments

v5 — Now creating!
- Fixed reload to restore latest saved pose
- 🎉 More fun updates


---


AI Avatar — Chrome拡張機能

ブラウザのサイドパネルに表示されるVRM 3Dキャラクターが、ChatGPTやClaudeへのメッセージ送信に反応します。AIなしでもアニメーションや吹き出しが動作します。

💻 VS Code拡張機能としても利用可能 — エディタ上でClaude Code / GitHub Copilotの動作に反応します。
https://marketplace.visualstudio.com/items?itemName=web-developer-hyper.ai-avatar

📖 開発ストーリーはDEV.toで読めます：
v1 → https://dev.to/webdeveloperhyper/ai-avatar-meet-your-ideal-girlfriendboyfriend-for-free-21n5
v2 → https://dev.to/webdeveloperhyper/ai-avatar-v2-with-pose-editor-vs-code-extension-38n2
v4 → https://dev.to/webdeveloperhyper/how-to-get-cheered-up-247-ai-avatar-v4-with-animation-editor-chrome-extension-vs-code-2f07


✨ 機能一覧

🎭 リアクション — AIにメッセージを送ると自動でキャラクターが反応
🔄 アバター変更 — 上部のボタンでVRMキャラクターをいつでも変更可能
💃 アニメーション — .vrmaモーションクリップやカスタムJSONポーズを再生；3段階ボタン：オフ / デフォルト / カスタム
🎬 アニメーションエディタ — 複数キーフレームのアニメーションをIn / Hold / Outタイミングで作成 (v4)
🎥 オービットコントロール — ドラッグで回転、スクロールでズーム、右クリックでパン
👀 視線追跡 — アイドル時に目と頭がマウスカーソルを追う
💬 リップシンク — AIの返答中に口が動く
😊 クリックまたはEnterキーで反応 — スマイル、うなずき、アニメーションが発動
💬 カスタム吹き出しメッセージ — Messagesボタンから吹き出しのメッセージを編集
😂 ジョーク — Jokesボタンでアバターがジョークを言う


🤖 対応サイト

以下のサイトで自動反応します：
- 🤖 ChatGPT (chatgpt.com)
- 🤖 Claude (claude.ai)

Enterキーの反応はすべてのウェブサイトで動作します。


🚀 はじめ方

セットアップ不要 — サンプルキャラクターが最初から入っています。

1. Chrome ウェブストアから拡張機能をインストール
2. ツールバーにピン留め
3. AI Avatarアイコンをクリックしてサイドパネルを開く
4. 対応AIサイトでチャットすると自動でアバターが反応


🎨 自分のVRMキャラクターを使う

VRoid (https://vroid.com/ja) を使えば3Dモデリングの知識なしに無料でオリジナルアバターを作れます。キャラクターをデザインして.vrmファイルとしてエクスポートしてください。

パネル上部の「Change Avatar」ボタンから.vrmファイルを選択できます。


💃 アニメーション

Animationボタンで3つの状態を切り替えます：
- オフ：モーションクリップを再生しない
- Animation: Default — 拡張機能に含まれるサンプルポーズを再生
- Animation: Custom — ファイルを選択し、.vrmaや.jsonポーズファイルを再生

👉 VRMAアニメーションファイルはライセンスの都合上、拡張機能に含まれていません。公式VRoidプロジェクトから無料でダウンロードできます：
https://booth.pm/ja/items/5512385

パックには7つのアニメーションが含まれます：全身表示、挨拶、ピースサイン、シュート、スピン、モデルポーズ、スクワット。

1. パックをダウンロードして解凍
2. AnimationボタンをAnimation: Customになるまでクリック
3. .vrmaファイルを選択
4. AIが返答するたびにランダムなクリップが再生


🎬 アニメーションエディタ (v4)

「Edit Animation」をクリックしてエディタを開きます：
- ドロップダウンから体のパーツを選択
- 軸ボタンでX / Y / Z回転を切り替え
- スライダーを動かす（または値を入力）してボーンを回転
- +ボタンで複数キーフレームを追加してアニメーションシーケンスを作成 (v4)
- 各キーフレームにIn（フェードイン）、Hold、Out（フェードアウト、最終KFのみ）のタイミング設定 (v4)
- < > ボタンでキーフレームを移動 (v4)
- Playボタンでアニメーション全体をプレビュー (v4)
- SaveでアニメーションをJSONファイルとして保存
- ReloadでSaveした最新の状態に戻す
- 保存したアニメーションはプールに追加され、通常のアニメーションと同様にランダム再生

「Edit Animation」をクリックするとファイルピッカーが表示されます：
- 初回：ファイルピッカーをキャンセルするとデフォルトアニメーションが開く
- 2回目以降：既存のJSONファイルを選択して読み込み・編集


💬 吹き出しメッセージ

Messagesボタンをクリックして、アバターが反応したときに吹き出しに表示するメッセージを編集できます。
メッセージは | （パイプ）で区切って入力します。例：頑張って！ | いいね！ | 完璧！
メッセージは保存され、セッションをまたいで維持されます。


🗺️ ロードマップ

✅ v1
- VS CodeサイドバーにVRMキャラクター表示
- Claude Code活動へのライブ反応
- 視線追跡、リップシンク、オービットコントロール
- アバター変更、吹き出しメッセージ

✅ v2
- 3段階Animationボタン（オフ / デフォルト / カスタム）
- カスタムポーズエディタ（JSON保存・読み込み）
- Jokesボタン
- GitHub Copilotウォッチャー対応

✅ v3
- 🌐 Chrome拡張機能（この拡張機能）
- 各種修正・調整

✅ v4
- ポーズエディタをフルアニメーションエディタにアップグレード
- In / Hold / Outタイミング付き複数キーフレームタイムライン
- 各種修正・調整

v5 — 開発中！
- リロードが最後に保存したポーズを正しく復元するよう修正
- 🎉 お楽しみに

AI Avatar — Chrome Extension
(日本語の説明は下部をご覧ください / Japanese version below)

A VRM 3D character in your browser side panel that reacts to AI activity on ChatGPT and Claude. Animations and speech bubbles all run without AI too.

💻 Also available as a VS Code Extension — reacts to Claude Code / GitHub Copilot activity directly in your editor.
https://marketplace.visualstudio.com/items?itemName=web-developer-hyper.ai-avatar

📖 Read the story behind this project on DEV.to:
v1 → https://dev.to/webdeveloperhyper/ai-avatar-meet-your-ideal-girlfriendboyfriend-for-free-21n5
v2 → https://dev.to/webdeveloperhyper/ai-avatar-v2-with-pose-editor-vs-code-extension-38n2
v4 → https://dev.to/webdeveloperhyper/how-to-get-cheered-up-247-ai-avatar-v4-with-animation-editor-chrome-extension-vs-code-2f07
v6 → (coming soon)

✨ FEATURES

🎭 Live reactions — character automatically reacts when you send a message to AI
🔄 Change Avatar — swap your VRM character anytime with the button at the top
💃 Animations — play .vrma motion clips or custom JSON poses; 3-state button: off / Default / Custom
🎬 Animation Editor — create multi-keyframe animations with in / hold / out timing (v4)
🎥 OrbitControls — drag to rotate, scroll to zoom, right-click to pan
👀 Eye tracking — eyes and head follow your mouse cursor when idle
💬 Lipsync — mouth animates while AI is replying
😊 Click or press Enter to interact — triggers a smile, nod, and animation (if ON)
💬 Custom speech messages — edit the speech bubble messages via the Messages button
😂 Jokes — avatar tells jokes via the Jokes button


🤖 SUPPORTED SITES

The avatar automatically reacts on:
- 🤖 ChatGPT (chatgpt.com)
- 🤖 Claude (claude.ai)

Enter key reaction works on all websites.


🚀 GETTING STARTED

No setup needed — comes with a built-in sample character.

1. Install the extension from the Chrome Web Store
2. Pin it to the toolbar
3. Click the AI Avatar icon and open the Side Panel
4. Chat with any supported AI site — your avatar reacts automatically


🎨 USE YOUR OWN VRM CHARACTER

You can create your own 3D avatar for free using VRoid (https://vroid.com/en) — no 3D modeling skills needed. Design your character and export it as a .vrm file.

Click the Change Avatar button at the top of the panel to pick a .vrm file.

v6 adds new sample characters — three girls and two boys — plus cute, cool, and funny pose packs. Download the zip free from GitHub Releases:
https://github.com/webdeveloperhyper/ai-avatar/releases


💃 ANIMATIONS

The Animation button cycles through three states:
- Off: no motion clips play
- Animation: Default — plays the built-in sample poses included with the extension
- Animation: Custom — opens a file picker, plays .vrma and .json pose files from your chosen files

👉 VRMA Animation files are not included in the extension because they cannot be redistributed under their license terms. Download them for free from the official VRoid Project:
https://booth.pm/en/items/5512385

The pack includes 7 animations: Show full body, Greeting, Peace sign, Shoot, Spin, Model pose, and Squat.

1. Download and unzip the pack
2. Click Animation until it shows Animation: Custom
3. Pick the .vrma files
4. A random clip plays each time the AI responds


🎬 ANIMATION EDITOR (v4+)

Click Edit Animation to open the animation editor overlay:
- Select a body part from the dropdown — including all 30 finger bones (v5)
- Use the axis button to switch between X / Y / Z rotation
- Drag the slider (or type a value in degrees) to rotate the bone — values shown in degrees (v5)
- Add multiple keyframes with the + button to build a full animation sequence (v4)
- Each keyframe has In (fade in), Hold, and Out (fade out, last keyframe only) timing (v4)
- Navigate keyframes with the < > buttons (v4)
- Press Play to preview the full animation (in → hold → out) exactly as it plays normally (v4)
- Click Save to save the animation as a JSON file (saved in degrees for easy editing)
- Click Reload to restore the last saved values
- The saved animation is added to the pool and plays randomly like any other animation

A file picker appears when you click Edit Animation (v4):
- First time: Cancel the file picker to open a default animation
- Next time: Pick an existing JSON file to load and edit


💬 SPEECH BUBBLE MESSAGES

Click the Messages button to edit the messages shown in the speech bubble when the avatar reacts.
Enter messages separated by | (pipe), e.g. You can do it! | Nice work! | Love that fix!
Messages are saved and persist across sessions.


🗺️ ROADMAP

✅ v1
- VRM character in VS Code sidebar
- Live reactions to Claude Code activity
- Eye tracking, lipsync, OrbitControls
- Change Avatar, speech bubble messages

✅ v2
- 3-state Animation button (off / Default / Custom)
- Custom pose editor with JSON save/load
- Jokes button
- GitHub Copilot watcher support

✅ v3
- 🌐 Chrome extension (this extension)
- Various fixes and adjustments

✅ v4
- Pose Editor upgraded to full Animation Editor
- Multi-keyframe timeline with in / hold / out timing
- Various fixes and adjustments

✅ v5
- All 30 finger bones added to the animation editor
- Animation editor values now shown and saved in degrees (backward compatible with existing files)
- BG toggle button — switch to gray background to see dark-colored avatars
- Various UI polish: button styling, focus outlines, editor colors
- Fixed reload to always restore the latest saved pose

✅ v6
- New sample characters: 3 girls and 2 boys (free download from GitHub Releases)
- New pose packs: cute, cool, and funny poses (free download from GitHub Releases)
- https://github.com/webdeveloperhyper/ai-avatar/releases

v7 — Now creating!
- 🎉 More fun updates


---


AI Avatar — Chrome拡張機能

ブラウザのサイドパネルに表示されるVRM 3Dキャラクターが、ChatGPTやClaudeへのメッセージ送信に反応します。AIなしでもアニメーションや吹き出しが動作します。

💻 VS Code拡張機能としても利用可能 — エディタ上でClaude Code / GitHub Copilotの動作に反応します。
https://marketplace.visualstudio.com/items?itemName=web-developer-hyper.ai-avatar

📖 開発ストーリーはDEV.toで読めます：
v1 → https://dev.to/webdeveloperhyper/ai-avatar-meet-your-ideal-girlfriendboyfriend-for-free-21n5
v2 → https://dev.to/webdeveloperhyper/ai-avatar-v2-with-pose-editor-vs-code-extension-38n2
v4 → https://dev.to/webdeveloperhyper/how-to-get-cheered-up-247-ai-avatar-v4-with-animation-editor-chrome-extension-vs-code-2f07
v6 → (近日公開)


✨ 機能一覧

🎭 リアクション — AIにメッセージを送ると自動でキャラクターが反応
🔄 アバター変更 — 上部のボタンでVRMキャラクターをいつでも変更可能
💃 アニメーション — .vrmaモーションクリップやカスタムJSONポーズを再生；3段階ボタン：オフ / デフォルト / カスタム
🎬 アニメーションエディタ — 複数キーフレームのアニメーションをIn / Hold / Outタイミングで作成 (v4)
🎥 オービットコントロール — ドラッグで回転、スクロールでズーム、右クリックでパン
👀 視線追跡 — アイドル時に目と頭がマウスカーソルを追う
💬 リップシンク — AIの返答中に口が動く
😊 クリックまたはEnterキーで反応 — スマイル、うなずき、アニメーションが発動
💬 カスタム吹き出しメッセージ — Messagesボタンから吹き出しのメッセージを編集
😂 ジョーク — Jokesボタンでアバターがジョークを言う


🤖 対応サイト

以下のサイトで自動反応します：
- 🤖 ChatGPT (chatgpt.com)
- 🤖 Claude (claude.ai)

Enterキーの反応はすべてのウェブサイトで動作します。


🚀 はじめ方

セットアップ不要 — サンプルキャラクターが最初から入っています。

1. Chrome ウェブストアから拡張機能をインストール
2. ツールバーにピン留め
3. AI Avatarアイコンをクリックしてサイドパネルを開く
4. 対応AIサイトでチャットすると自動でアバターが反応


🎨 自分のVRMキャラクターを使う

VRoid (https://vroid.com/ja) を使えば3Dモデリングの知識なしに無料でオリジナルアバターを作れます。キャラクターをデザインして.vrmファイルとしてエクスポートしてください。

パネル上部の「Change Avatar」ボタンから.vrmファイルを選択できます。

v6では新しいサンプルキャラクター（女の子3体・男の子2体）とポーズパック（かわいい・クール・おもしろ）を追加しました。GitHubリリースページからzipを無料でダウンロードできます：
https://github.com/webdeveloperhyper/ai-avatar/releases


💃 アニメーション

Animationボタンで3つの状態を切り替えます：
- オフ：モーションクリップを再生しない
- Animation: Default — 拡張機能に含まれるサンプルポーズを再生
- Animation: Custom — ファイルを選択し、.vrmaや.jsonポーズファイルを再生

👉 VRMAアニメーションファイルはライセンスの都合上、拡張機能に含まれていません。公式VRoidプロジェクトから無料でダウンロードできます：
https://booth.pm/ja/items/5512385

パックには7つのアニメーションが含まれます：全身表示、挨拶、ピースサイン、シュート、スピン、モデルポーズ、スクワット。

1. パックをダウンロードして解凍
2. AnimationボタンをAnimation: Customになるまでクリック
3. .vrmaファイルを選択
4. AIが返答するたびにランダムなクリップが再生


🎬 アニメーションエディタ (v4+)

「Edit Animation」をクリックしてエディタを開きます：
- ドロップダウンから体のパーツを選択 — 全30本の指ボーンに対応 (v5)
- 軸ボタンでX / Y / Z回転を切り替え
- スライダーを動かす（または度数で値を入力）してボーンを回転 — 値は度数表示 (v5)
- +ボタンで複数キーフレームを追加してアニメーションシーケンスを作成 (v4)
- 各キーフレームにIn（フェードイン）、Hold、Out（フェードアウト、最終KFのみ）のタイミング設定 (v4)
- < > ボタンでキーフレームを移動 (v4)
- Playボタンでアニメーション全体をプレビュー (v4)
- SaveでアニメーションをJSONファイルとして保存（度数で保存されるため直接編集も簡単）
- ReloadでSaveした最新の状態に戻す
- 保存したアニメーションはプールに追加され、通常のアニメーションと同様にランダム再生

「Edit Animation」をクリックするとファイルピッカーが表示されます：
- 初回：ファイルピッカーをキャンセルするとデフォルトアニメーションが開く
- 2回目以降：既存のJSONファイルを選択して読み込み・編集


💬 吹き出しメッセージ

Messagesボタンをクリックして、アバターが反応したときに吹き出しに表示するメッセージを編集できます。
メッセージは | （パイプ）で区切って入力します。例：頑張って！ | いいね！ | 完璧！
メッセージは保存され、セッションをまたいで維持されます。


🗺️ ロードマップ

✅ v1
- VS CodeサイドバーにVRMキャラクター表示
- Claude Code活動へのライブ反応
- 視線追跡、リップシンク、オービットコントロール
- アバター変更、吹き出しメッセージ

✅ v2
- 3段階Animationボタン（オフ / デフォルト / カスタム）
- カスタムポーズエディタ（JSON保存・読み込み）
- Jokesボタン
- GitHub Copilotウォッチャー対応

✅ v3
- 🌐 Chrome拡張機能（この拡張機能）
- 各種修正・調整

✅ v4
- ポーズエディタをフルアニメーションエディタにアップグレード
- In / Hold / Outタイミング付き複数キーフレームタイムライン
- 各種修正・調整

✅ v5
- アニメーションエディタに全30本の指ボーンを追加
- エディタの値を度数で表示・保存（既存ファイルとの後方互換性あり）
- BGトグルボタン追加 — グレー背景に切り替えて暗色アバターを見やすく
- UIの各種改善：ボタンスタイル、フォーカス枠、エディタの配色
- リロードが最後に保存したポーズを正しく復元するよう修正

✅ v6
- 新サンプルキャラクター：女の子3体・男の子2体（GitHubリリースから無料ダウンロード）
- 新ポーズパック：かわいい・クール・おもしろ（GitHubリリースから無料ダウンロード）
- https://github.com/webdeveloperhyper/ai-avatar/releases

v7 — 開発中！
- 🎉 お楽しみに

Apr 17, 2026

description

AI Avatar — Chrome Extension

A VRM 3D character in your browser side panel that reacts to AI activity on ChatGPT and Claude. Animations and speech bubbles all run without AI too.

💻 Also available as a VS Code Extension — reacts to Claude Code / GitHub Copilot activity directly in your editor.
https://marketplace.visualstudio.com/items?itemName=web-developer-hyper.ai-avatar

📖 Read the story behind this project on DEV.to:
v1 → https://dev.to/webdeveloperhyper/ai-avatar-meet-your-ideal-girlfriendboyfriend-for-free-21n5
v2 → https://dev.to/webdeveloperhyper/ai-avatar-v2-with-pose-editor-vs-code-extension-38n2

✨ FEATURES

🎭 Live reactions — character automatically reacts when you send a message to AI
🔄 Change Avatar — swap your VRM character anytime with the button at the top
💃 Animations — play .vrma motion clips or custom JSON poses; 3-state button: off / Default / Custom
🧍 Pose Editor — create and save custom poses directly in the panel
🎥 OrbitControls — drag to rotate, scroll to zoom, right-click to pan
👀 Eye tracking — eyes and head follow your mouse cursor when idle
💬 Lipsync — mouth animates while AI is replying
😊 Click or press Enter to interact — triggers a smile, nod, and animation (if ON)
💬 Custom speech messages — edit the speech bubble messages via the Messages button
😂 Jokes — avatar tells jokes via the Jokes button

🤖 SUPPORTED SITES

The avatar automatically reacts on:
- 🤖 ChatGPT (chatgpt.com)
- 🤖 Claude (claude.ai)

Enter key reaction works on all websites.

🚀 GETTING STARTED

No setup needed — comes with a built-in sample character.

1. Install the extension from the Chrome Web Store
2. Pin it to the toolbar
3. Click the AI Avatar icon and open the Side Panel
4. Chat with any supported AI site — your avatar reacts automatically

🎨 USE YOUR OWN VRM CHARACTER

You can create your own 3D avatar for free using VRoid (https://vroid.com/en) — no 3D modeling skills needed. Design your character and export it as a .vrm file.

Click the Change Avatar button at the top of the panel to pick a .vrm file.

💃 ANIMATIONS

The Animation button cycles through three states:
- Off: no motion clips play
- Animation: Default — plays the built-in sample poses included with the extension
- Animation: Custom — opens a file picker, plays .vrma and .json pose files from your chosen files

👉 VRMA Animation files are not included in the extension because they cannot be redistributed under their license terms. Download them for free from the official VRoid Project:
https://booth.pm/en/items/5512385

The pack includes 7 animations: Show full body, Greeting, Peace sign, Shoot, Spin, Model pose, and Squat.

1. Download and unzip the pack
2. Click Animation until it shows Animation: Custom
3. Pick the .vrma files
4. A random clip plays each time the AI responds

🧍 POSE EDITOR

Click Edit Pose to open the pose editor overlay:
- Select a body part from the dropdown
- Use the axis button to switch between X / Y / Z rotation
- Drag the slider (or type a value) to rotate the bone
- Click Save to open a Save As dialog and save the pose as pose-editor.json
- Click Reload to restore the last saved values
- The edited pose is added to the animation pool and plays randomly like any other animation

💬 SPEECH BUBBLE MESSAGES

Click the Messages button to edit the messages shown in the speech bubble when the avatar reacts.
Enter messages separated by | (pipe), e.g. You can do it! | Nice work! | Love that fix!
Messages are saved and persist across sessions.

🗺️ ROADMAP

✅ v1
- VRM character in VS Code sidebar
- Live reactions to Claude Code activity
- Eye tracking, lipsync, OrbitControls
- Change Avatar, speech bubble messages

✅ v2
- 3-state Animation button (off / Default / Custom)
- Custom pose editor with JSON save/load
- Jokes button
- GitHub Copilot watcher support

✅ v3
- 🌐 Chrome extension (this extension)
- Various bug fixes and adjustments

v4 — coming soon
- 🎉 More fun updates

AI Avatar — Chrome Extension
(日本語の説明は下部をご覧ください / Japanese version below)

A VRM 3D character in your browser side panel that reacts to AI activity on ChatGPT and Claude. Animations and speech bubbles all run without AI too.

💻 Also available as a VS Code Extension — reacts to Claude Code / GitHub Copilot activity directly in your editor.
https://marketplace.visualstudio.com/items?itemName=web-developer-hyper.ai-avatar

📖 Read the story behind this project on DEV.to:
v1 → https://dev.to/webdeveloperhyper/ai-avatar-meet-your-ideal-girlfriendboyfriend-for-free-21n5
v2 → https://dev.to/webdeveloperhyper/ai-avatar-v2-with-pose-editor-vs-code-extension-38n2
v4 → https://dev.to/webdeveloperhyper/how-to-get-cheered-up-247-ai-avatar-v4-with-animation-editor-chrome-extension-vs-code-2f07

✨ FEATURES

🎭 Live reactions — character automatically reacts when you send a message to AI
🔄 Change Avatar — swap your VRM character anytime with the button at the top
💃 Animations — play .vrma motion clips or custom JSON poses; 3-state button: off / Default / Custom
🎬 Animation Editor — create multi-keyframe animations with in / hold / out timing (v4)
🎥 OrbitControls — drag to rotate, scroll to zoom, right-click to pan
👀 Eye tracking — eyes and head follow your mouse cursor when idle
💬 Lipsync — mouth animates while AI is replying
😊 Click or press Enter to interact — triggers a smile, nod, and animation (if ON)
💬 Custom speech messages — edit the speech bubble messages via the Messages button
😂 Jokes — avatar tells jokes via the Jokes button


🤖 SUPPORTED SITES

The avatar automatically reacts on:
- 🤖 ChatGPT (chatgpt.com)
- 🤖 Claude (claude.ai)

Enter key reaction works on all websites.


🚀 GETTING STARTED

No setup needed — comes with a built-in sample character.

1. Install the extension from the Chrome Web Store
2. Pin it to the toolbar
3. Click the AI Avatar icon and open the Side Panel
4. Chat with any supported AI site — your avatar reacts automatically


🎨 USE YOUR OWN VRM CHARACTER

You can create your own 3D avatar for free using VRoid (https://vroid.com/en) — no 3D modeling skills needed. Design your character and export it as a .vrm file.

Click the Change Avatar button at the top of the panel to pick a .vrm file.


💃 ANIMATIONS

The Animation button cycles through three states:
- Off: no motion clips play
- Animation: Default — plays the built-in sample poses included with the extension
- Animation: Custom — opens a file picker, plays .vrma and .json pose files from your chosen files

👉 VRMA Animation files are not included in the extension because they cannot be redistributed under their license terms. Download them for free from the official VRoid Project:
https://booth.pm/en/items/5512385

The pack includes 7 animations: Show full body, Greeting, Peace sign, Shoot, Spin, Model pose, and Squat.

1. Download and unzip the pack
2. Click Animation until it shows Animation: Custom
3. Pick the .vrma files
4. A random clip plays each time the AI responds


🎬 ANIMATION EDITOR (v4)

Click Edit Animation to open the animation editor overlay:
- Select a body part from the dropdown
- Use the axis button to switch between X / Y / Z rotation
- Drag the slider (or type a value) to rotate the bone
- Add multiple keyframes with the + button to build a full animation sequence (v4)
- Each keyframe has In (fade in), Hold, and Out (fade out, last keyframe only) timing (v4)
- Navigate keyframes with the < > buttons (v4)
- Press Play to preview the full animation (in → hold → out) exactly as it plays normally (v4)
- Click Save to save the animation as a JSON file
- Click Reload to restore the last saved values
- The saved animation is added to the pool and plays randomly like any other animation

A file picker appears when you click Edit Animation (v4):
- First time: Cancel the file picker to open a default animation
- Next time: Pick an existing JSON file to load and edit


💬 SPEECH BUBBLE MESSAGES

Click the Messages button to edit the messages shown in the speech bubble when the avatar reacts.
Enter messages separated by | (pipe), e.g. You can do it! | Nice work! | Love that fix!
Messages are saved and persist across sessions.


🗺️ ROADMAP

✅ v1
- VRM character in VS Code sidebar
- Live reactions to Claude Code activity
- Eye tracking, lipsync, OrbitControls
- Change Avatar, speech bubble messages

✅ v2
- 3-state Animation button (off / Default / Custom)
- Custom pose editor with JSON save/load
- Jokes button
- GitHub Copilot watcher support

✅ v3
- 🌐 Chrome extension (this extension)
- Various fixes and adjustments

✅ v4
- Pose Editor upgraded to full Animation Editor
- Multi-keyframe timeline with in / hold / out timing
- Various fixes and adjustments

v5 — Now creating!
- Fixed reload to restore latest saved pose
- 🎉 More fun updates


---


AI Avatar — Chrome拡張機能

ブラウザのサイドパネルに表示されるVRM 3Dキャラクターが、ChatGPTやClaudeへのメッセージ送信に反応します。AIなしでもアニメーションや吹き出しが動作します。

💻 VS Code拡張機能としても利用可能 — エディタ上でClaude Code / GitHub Copilotの動作に反応します。
https://marketplace.visualstudio.com/items?itemName=web-developer-hyper.ai-avatar

📖 開発ストーリーはDEV.toで読めます：
v1 → https://dev.to/webdeveloperhyper/ai-avatar-meet-your-ideal-girlfriendboyfriend-for-free-21n5
v2 → https://dev.to/webdeveloperhyper/ai-avatar-v2-with-pose-editor-vs-code-extension-38n2
v4 → https://dev.to/webdeveloperhyper/how-to-get-cheered-up-247-ai-avatar-v4-with-animation-editor-chrome-extension-vs-code-2f07


✨ 機能一覧

🎭 リアクション — AIにメッセージを送ると自動でキャラクターが反応
🔄 アバター変更 — 上部のボタンでVRMキャラクターをいつでも変更可能
💃 アニメーション — .vrmaモーションクリップやカスタムJSONポーズを再生；3段階ボタン：オフ / デフォルト / カスタム
🎬 アニメーションエディタ — 複数キーフレームのアニメーションをIn / Hold / Outタイミングで作成 (v4)
🎥 オービットコントロール — ドラッグで回転、スクロールでズーム、右クリックでパン
👀 視線追跡 — アイドル時に目と頭がマウスカーソルを追う
💬 リップシンク — AIの返答中に口が動く
😊 クリックまたはEnterキーで反応 — スマイル、うなずき、アニメーションが発動
💬 カスタム吹き出しメッセージ — Messagesボタンから吹き出しのメッセージを編集
😂 ジョーク — Jokesボタンでアバターがジョークを言う


🤖 対応サイト

以下のサイトで自動反応します：
- 🤖 ChatGPT (chatgpt.com)
- 🤖 Claude (claude.ai)

Enterキーの反応はすべてのウェブサイトで動作します。


🚀 はじめ方

セットアップ不要 — サンプルキャラクターが最初から入っています。

1. Chrome ウェブストアから拡張機能をインストール
2. ツールバーにピン留め
3. AI Avatarアイコンをクリックしてサイドパネルを開く
4. 対応AIサイトでチャットすると自動でアバターが反応


🎨 自分のVRMキャラクターを使う

VRoid (https://vroid.com/ja) を使えば3Dモデリングの知識なしに無料でオリジナルアバターを作れます。キャラクターをデザインして.vrmファイルとしてエクスポートしてください。

パネル上部の「Change Avatar」ボタンから.vrmファイルを選択できます。


💃 アニメーション

Animationボタンで3つの状態を切り替えます：
- オフ：モーションクリップを再生しない
- Animation: Default — 拡張機能に含まれるサンプルポーズを再生
- Animation: Custom — ファイルを選択し、.vrmaや.jsonポーズファイルを再生

👉 VRMAアニメーションファイルはライセンスの都合上、拡張機能に含まれていません。公式VRoidプロジェクトから無料でダウンロードできます：
https://booth.pm/ja/items/5512385

パックには7つのアニメーションが含まれます：全身表示、挨拶、ピースサイン、シュート、スピン、モデルポーズ、スクワット。

1. パックをダウンロードして解凍
2. AnimationボタンをAnimation: Customになるまでクリック
3. .vrmaファイルを選択
4. AIが返答するたびにランダムなクリップが再生


🎬 アニメーションエディタ (v4)

「Edit Animation」をクリックしてエディタを開きます：
- ドロップダウンから体のパーツを選択
- 軸ボタンでX / Y / Z回転を切り替え
- スライダーを動かす（または値を入力）してボーンを回転
- +ボタンで複数キーフレームを追加してアニメーションシーケンスを作成 (v4)
- 各キーフレームにIn（フェードイン）、Hold、Out（フェードアウト、最終KFのみ）のタイミング設定 (v4)
- < > ボタンでキーフレームを移動 (v4)
- Playボタンでアニメーション全体をプレビュー (v4)
- SaveでアニメーションをJSONファイルとして保存
- ReloadでSaveした最新の状態に戻す
- 保存したアニメーションはプールに追加され、通常のアニメーションと同様にランダム再生

「Edit Animation」をクリックするとファイルピッカーが表示されます：
- 初回：ファイルピッカーをキャンセルするとデフォルトアニメーションが開く
- 2回目以降：既存のJSONファイルを選択して読み込み・編集


💬 吹き出しメッセージ

Messagesボタンをクリックして、アバターが反応したときに吹き出しに表示するメッセージを編集できます。
メッセージは | （パイプ）で区切って入力します。例：頑張って！ | いいね！ | 完璧！
メッセージは保存され、セッションをまたいで維持されます。


🗺️ ロードマップ

✅ v1
- VS CodeサイドバーにVRMキャラクター表示
- Claude Code活動へのライブ反応
- 視線追跡、リップシンク、オービットコントロール
- アバター変更、吹き出しメッセージ

✅ v2
- 3段階Animationボタン（オフ / デフォルト / カスタム）
- カスタムポーズエディタ（JSON保存・読み込み）
- Jokesボタン
- GitHub Copilotウォッチャー対応

✅ v3
- 🌐 Chrome拡張機能（この拡張機能）
- 各種修正・調整

✅ v4
- ポーズエディタをフルアニメーションエディタにアップグレード
- In / Hold / Outタイミング付き複数キーフレームタイムライン
- 各種修正・調整

v5 — 開発中！
- リロードが最後に保存したポーズを正しく復元するよう修正
- 🎉 お楽しみに

Apr 17, 2026

short_description

A VRM 3D avatar companion that reacts when you send messages to AI assistants.

VRM 3D avatar companion that reacts when you send messages to AI or any website. Includes an animation editor for custom poses.

Apr 17, 2026

permissions

sidePanel, storage

sidePanel, storage, downloads

Permissions & access

Permissions: sidePanelstoragedownloads
Host access: <all_urls>

Screenshots

About

AI Avatar — Chrome Extension
(日本語の説明は下部をご覧ください / Japanese version below)

A VRM 3D character in your browser side panel that reacts to AI activity on ChatGPT and Claude. Animations and speech bubbles all run without AI too.

💻 Also available as a VS Code Extension — reacts to Claude Code / GitHub Copilot activity directly in your editor.
🎉 Thank you for 100+ installs on VS Code!
https://marketplace.visualstudio.com/items?itemName=web-developer-hyper.ai-avatar

📖 Read the story behind this project on DEV.to:
v1 → https://dev.to/webdeveloperhyper/ai-avatar-meet-your-ideal-girlfriendboyfriend-for-free-21n5
v2 → https://dev.to/webdeveloperhyper/ai-avatar-v2-with-pose-editor-vs-code-extension-38n2
v4 → https://dev.to/webdeveloperhyper/how-to-get-cheered-up-247-ai-avatar-v4-with-animation-editor-chrome-extension-vs-code-2f07
v6 → https://dev.to/webdeveloperhyper/let-superheroes-cheer-you-up-ai-avatar-v6-chrome-extension-vs-code-extension-2ak7
v7 → https://dev.to/webdeveloperhyper/well-support-you-with-all-our-might-ai-avatar-v7-pose-capture-and-more-vs-code-and-chrome-3aab
v10 → coming soon!

✨ FEATURES

🎭 Live reactions — character automatically reacts when you send a message to AI
🔄 Change Avatar — swap your VRM character anytime with the button at the top
💃 Animations — play .vrma motion clips or custom JSON poses; 5 separate toggle buttons: Off / Default / Random (v7) / Custom (v2) / Custom Random (v8) (v10)
💬 AI Speech Bubble (VS Code only) — toggle Fixed/AI mode; in AI mode the character reacts to Claude Code activity with context-aware speech (v10)
🎬 Animation Editor — create multi-keyframe animations with in / hold / out timing (v4)
🎨 Random Editor — edit zone-split pattern JSON in the Animation Editor; Body & Arms / Legs / Fingers zones (v8)
🎥 OrbitControls — drag to rotate, scroll to zoom, right-click to pan
👀 Eye tracking — eyes and head follow your mouse cursor when idle
💬 Lipsync — mouth animates while AI is replying
😊 Click or press Enter to interact — triggers a smile, nod, and animation (if ON)
💬 Custom speech messages — edit the speech bubble messages via the Messages button
😂 Jokes — avatar tells jokes via the Jokes button
📸 Pose Capture — capture a real body pose with webcam and export it as a VRM animation JSON (v7)
❤️ Positive word reactions (VS Code only) — heart counter and animations on positive/negative words (v7)
🔍 Prompt Checker [Beta] (VS Code only) — instant rule-based feedback on your AI prompt clarity (v7)
🦁 Giant Mode (Chrome only) — float the avatar as a draggable, resizable overlay over any web page (v7)
🤖 AI Chat — always-visible chat input; ask the avatar anything; replies appear as speech bubbles and trigger animations; supports Gemini API and Ollama (v9)

ROADMAP

v10 — Now Creating!
- 💬 AI Speech Bubble (VS Code only) — toggle between Fixed and AI mode; in AI mode the character reacts to Claude Code activity with context-aware speech; messages customizable
- 🎛️ Toolbar redesign — 4 fixed rows always visible; animation split into 5 separate toggle buttons (Off / Default / Random / Custom / Custom Random); Positive Words and Negative Words as direct buttons
- 🎭 Improved idle & thinking animations — random idle head micro-tilt every 6–10s; thinking state now shows a natural Z-axis pondering tilt with gentle oscillation

v11 — Coming soon!
- 🎉 More fun updates

📖 Full documentation, images, videos on GitHub:
https://github.com/webdeveloperhyper/ai-avatar

---

AI Avatar — Chrome拡張機能

ブラウザのサイドパネルに表示されるVRM 3Dキャラクターが、ChatGPTやClaudeへのメッセージ送信に反応します。AIなしでもアニメーションや吹き出しが動作します。

💻 VS Code拡張機能としても利用可能 — エディタ上でClaude Code / GitHub Copilotの動作に反応します。
🎉 VS Code版100インストール達成！ありがとうございます！
https://marketplace.visualstudio.com/items?itemName=web-developer-hyper.ai-avatar

📖 開発ストーリーはDEV.toで読めます：
v1 → https://dev.to/webdeveloperhyper/ai-avatar-meet-your-ideal-girlfriendboyfriend-for-free-21n5
v2 → https://dev.to/webdeveloperhyper/ai-avatar-v2-with-pose-editor-vs-code-extension-38n2
v4 → https://dev.to/webdeveloperhyper/how-to-get-cheered-up-247-ai-avatar-v4-with-animation-editor-chrome-extension-vs-code-2f07
v6 → https://dev.to/webdeveloperhyper/let-superheroes-cheer-you-up-ai-avatar-v6-chrome-extension-vs-code-extension-2ak7
v7 → https://dev.to/webdeveloperhyper/well-support-you-with-all-our-might-ai-avatar-v7-pose-capture-and-more-vs-code-and-chrome-3aab
v10 → coming soon!


✨ 機能一覧

🎭 リアクション — AIにメッセージを送ると自動でキャラクターが反応
🔄 アバター変更 — 上部のボタンでVRMキャラクターをいつでも変更可能
💃 アニメーション — .vrmaモーションクリップやカスタムJSONポーズを再生；5つの独立トグルボタン：Off / Default / Random (v7) / Custom (v2) / Custom Random (v8) (v10)
💬 AI吹き出し（VS Code限定）— Fixed/AIモードを切り替え；AIモードでは Claude Code の活動に反応してコンテキストに応じた発言をする (v10)
🎬 アニメーションエディタ — 複数キーフレームのアニメーションをIn / Hold / Outタイミングで作成 (v4)
🎨 ランダムエディタ — アニメーションエディタ内でゾーン分割パターンJSONを直接編集（ボディ＆アーム / 脚 / 指ゾーン）(v8)
🎥 オービットコントロール — ドラッグで回転、スクロールでズーム、右クリックでパン
👀 視線追跡 — アイドル時に目と頭がマウスカーソルを追う
💬 リップシンク — AIの返答中に口が動く
😊 クリックまたはEnterキーで反応 — スマイル、うなずき、アニメーションが発動
💬 カスタム吹き出しメッセージ — Messagesボタンから吹き出しのメッセージを編集
😂 ジョーク — Jokesボタンでアバターがジョークを言う
📸 ポーズキャプチャ — ウェブカメラで体のポーズを撮影し、VRMアニメーションJSONとして書き出し (v7)
❤️ ポジティブワード反応（VS Code限定）— ポジティブ/ネガティブワード検出時にハートカウンターとアニメーション (v7)
🔍 プロンプトチェッカー [Beta]（VS Code限定）— AIプロンプトの明確さをルールベースで即チェック (v7)
🦁 ジャイアントモード（Chrome限定）— ドラッグ・リサイズ可能なオーバーレイとしてアバターをどのページにも表示 (v7)
🤖 AIチャット — 常時表示のチャット入力；アバターに何でも質問できる；返答は吹き出しでアニメーション付き；Gemini APIとOllama対応 (v9)

ロードマップ

v10 — 開発中！
- 💬 AI吹き出し（VS Code限定）— FixedとAIモードを切り替え；AIモードではClaude Codeの活動に反応してキャラクターがコンテキストに応じた発言をする；メッセージはカスタマイズ可能
- 🎛️ ツールバーリデザイン — 4行固定表示；アニメーションを5つの独立したトグルボタンに分割（Off / Default / Random / Custom / Custom Random）；ポジティブワード・ネガティブワードをダイレクトボタンに
- 🎭 アイドル・思考アニメーション改善 — アイドル時に6〜10秒ごとランダムな頭の微傾き；思考中は自然なZ軸の首かしげポーズとゆっくりした揺れを追加

v11 — 近日公開！
- 🎉 お楽しみに

📖 詳細なドキュメント・画像・動画はGitHubで：
https://github.com/webdeveloperhyper/ai-avatar

Technical

Version: 10.0.0
Manifest: V3
Size: 50.16MiB
Min Chrome: 88
Languages: 1
Featured: No

Metadata

ID: afmcfaeaaojalninahhhjnonhmlmiidi
Developer ID: u7088b5f75cbcad725a9eabd53f20a157
Developer Email: [email protected]
Created: Mar 31, 2026
Last Updated (Store): Jun 6, 2026
Last Scraped: Jun 10, 2026
Website: —
Support URL: —
Privacy Policy: https://gist.githubusercontent.com/webdeveloperhyper/f68a3bf5e43fcff76c4364d8cfacdd32/raw/faa60605fb68baf4181763a37d0184581646686a/gistfile1.txt

Data sourced from the Chrome Web Store · last verified Jun 10, 2026.