SIDE PROJECT • 2026
Building a personal AI voice chat widget with a voice clone
The idea was to create a portfolio that you can talk to.
We're in text all day already. Slack, iMessage, email threads. There's a fatigue to typing that I think most people don't even notice anymore. When I pictured someone on my site actually trying to get to know my work, another chat box didn't feel like the right invite. I kept coming back to voice because it feels warmer. More human. And I wanted it to sound like me, not a generic assistant. I wanted the experience to read like someone's on the other end.
DESIGN & BUILD
I designed the widget in Figma, built the front end in Framer, and wired it to a backend that does the actual work.
The widget lives on my portfolio as a Framer code component. Idle state is a simple pill. Active state is the call: photo, handset, timer, end call, the orange glow when you're talking or when it's responding. Figma is where I figured out how it should look and feel. Framer is where it ships. Behind that sits a Next.js backend on Vercel that handles the loop: transcribe what you said, find an answer, speak it back in my cloned voice. I built that side with Cursor. The Framer piece just needs the API URL and the rest runs server-side.
How I like to visually prompt my agent along with sharing MCP links.
I set up a knowledge base and guardrails so the answers sound like me and keep the system secure.
I wrote markdown files for my resume, bio, projects, and how I actually talk, plus a guardrails file for what the voice should and shouldn't say. Those files get ingested so when someone asks about my work, the reply pulls from my words instead of making things up. The personality file keeps the tone first person. Guardrails keep it bounded and harder to poke at.