🤖 Claudy V2 — Holographic AI Companion

Claudy is an open-source holographic AI companion powered by Claude (Anthropic).
She has a face, a voice, moods, eye animations, and a Jarvis-style HUD — running entirely in your browser.

---

✨ Features

Feature	Description
🎭 Holographic Avatar	Gemini-generated AI face with game-style HUD
😊 Mood System	4 moods — Idle, Happy, Thinking, Angry
👁️ Eye Animation	Pixel-accurate pupil movement, blinking, eye shine via RAF
🌬️ Natural Movement	Breathing, head sway, all smooth via requestAnimationFrame
🎙️ Voice Input	Web Speech API mic (en-IN — Indian English)
🔊 Voice Output	Browser TTS — speaks every response aloud
📷 Camera Feed	Live webcam alongside Claudy — video call style
🧠 Claude Powered	Full Claude API integration (claude-sonnet-4-20250514)
🖥️ HUD Diagnostics	CPU, Memory, Latency, Signal — mood-driven data
🕐 Live Clock	IST · Bengaluru system time

---

🚀 Quick Start

Prerequisites

• Python 3.x (for local server)
• Google Chrome
• Anthropic API Key

Option 1 — Windows (Recommended)

1. Download or clone this repo
2. Open build/claudy_v8.html in a text editor
3. Replace YOUR_API_KEY_HERE with your Anthropic API key
4. Put the HTML file in the same folder as launcher/start_claudy.bat
5. Double-click start_claudy.bat
6. Claudy launches in Chrome! ✅

Option 2 — Manual (Any OS)

# Clone the repo
git clone https://github.com/naveenmanwani/claudy.git
cd claudy

# Start local server
python -m http.server 8080

# Open in Chrome
# http://localhost:8080/build/claudy_v8.html

⚠️ Always run via localhost, not by opening the file directly.
Chrome only grants mic/camera trust to localhost — not local file:// paths.

---

🔑 API Key Setup

Open the HTML file in any text editor and find:

const API_KEY = "YOUR_API_KEY_HERE";

Replace with your key from console.anthropic.com:

const API_KEY = "sk-ant-api03-...";

🔒 Security note: Never commit your API key to GitHub.
The .gitignore excludes any file named claudy_v8_with_key.html or similar.
Set a spend limit on your Anthropic account for safety.

---

📁 Repo Structure

claudy/
├── build/                          # Ready-to-use HTML files
│   └── claudy_v8.html              # Stable release
│
├── src/                            # React JSX source files
│   ├── claudy_v8.jsx               # V8 component source
│   └── claudy_eye_calibrator.jsx   # Interactive eye position tool
│
├── assets/                         # Static assets
│   └── claudy_avatar.png           # Claudy's face image
│
├── launcher/
│   └── start_claudy.bat            # Windows one-click launcher
│
├── docs/
│   ├── ARCHITECTURE.md             # Technical deep dive
│   ├── EYE_CALIBRATION.md          # How eye positions were measured
│   ├── BUILD_LOG.md                # Full development journey
│   └── DEMO_PROMPTS.md             # Curated prompts to showcase Claudy
│
├── .gitignore
├── LICENSE
└── README.md

---

🎭 Versions

Claudy V8 — Stable ✅ (Current Public Release)

• Holographic avatar with pixel-accurate eye animations
• 4 mood states with HUD diagnostics
• Voice input (mic) + voice output (TTS)
• Camera feed — video call style
• All animations via requestAnimationFrame
• Tested and reliable for demos

---

🎤 Demo Prompts

Not sure what to say to Claudy? We've got you covered.

Check out docs/DEMO_PROMPTS.md for:

• Prompts that trigger each mood state
• A suggested 3-minute demo flow for audiences
• Voice input examples
• India-focused conversation starters

---

🛠️ Tech Stack

Layer	Technology
UI	React 18 (via CDN + Babel standalone)
Animation	requestAnimationFrame
Voice Input	Web Speech Recognition API (en-IN)
Voice Output	Web Speech Synthesis API
Camera	WebRTC getUserMedia
AI Brain	Claude API (claude-sonnet-4-20250514)
Styling	Inline CSS + SVG overlays
Server	Python http.server

---

🎯 How Eye Positions Were Calibrated

Claudy's eye animations are pixel-accurate — not guessed.

We used Python + Pillow to:

1. Load the avatar image (2394×1760px)
2. Calculate objectFit: cover display math
3. Mark eye centers with colored ellipses
4. Convert to fractions of the display circle diameter
5. Iterate 3 rounds until markers landed perfectly on her pupils

Final calibrated values (set by Naveen using the calibrator tool):

const EYE = { lx:0.4025, ly:0.4058, rx:0.5948, ry:0.4058, ir:0.058 };

See docs/EYE_CALIBRATION.md for full details.

---

---

🤝 Contributing

Contributions welcome! Especially:

• Mobile optimization
• New mood states
• Voice input improvements for Indian accents

Please open an issue before submitting a PR.

---

👤 Author

Naveen Manwani
Product Operations Engineer | AI Builder | Bengaluru 🇮🇳

---

📄 License

Apache License 2.0 — see LICENSE for details.

⚠️ Avatar Image Notice: The avatar image (assets/claudy_avatar.png) was generated using Google Gemini. Commercial use of this image may be subject to Google's terms of service.

---

Built with ❤️ by Naveen Manwani × Claude (Anthropic) — April 2026