OtterDr
shipped
OtterDr is a playful yet powerful AI-assisted VS Code extension that notices compiler errors in your code and provides plain English explanations as well as suggested next steps. Your expressive otter companion reacts in real-time to the health of your code.
Tech Stack
Debugging is often a lonely, frustrating experience. Error messages are terse, visually harsh, and rarely explain why something went wrong or what to do next. They just tell you something is broken. For newer developers especially, this creates a cycle of confusion and decreased motivation that slows everything down. Extended debugging sessions compound the problem: isolated, repetitive work erodes focus and morale in ways that affect the quality of everything that follows.
OtterDr was designed to break that cycle. An intelligent error auditor built as a VS Code extension, it transforms compile-time errors into plain-language explanations with concrete next steps, and gives you a companion to keep you company while you work.
How It Works
When a user selects an error they want help with, OtterDr doesn't just send the highlighted code to the AI. That approach was an early consideration, but we realized it creates real problems: a user might not select enough context, or might select the wrong lines entirely, leading to hallucinations and inaccurate suggestions. Instead, OtterDr matches the user's selection against VS Code's diagnostics API, which contains the actual error object including its type, message, and precise location in the file. We then send the AI a carefully constructed prompt containing both the diagnostic information and a slightly larger code range for context. The result is a response that addresses the user's actual error with the precision it deserves.
Security
Because OtterDr renders AI-generated content in a VS Code webview, and because VS Code extensions have access to a user's entire file system, security wasn't optional. I implemented a Content Security Policy in the webview's HTML meta tag along with a randomly generated nonce attached to each script. This whitelists our own scripts while blocking anything without a matching nonce from running, protecting users from malicious code injection and cross-site scripting attacks.
The Otter
The otter companion lives in a dedicated webview panel and listens continuously for diagnostic updates from the extension host. In its base state it's just a friendly otter. The moment a compiler error appears in the active file, it shifts to a confused expression, providing a subtle, non-intrusive signal that something needs attention. Resolve the errors and it returns to calm. There's also an easter egg: tickle its tummy and it briefly emotes love before returning to its base state. Future iterations will add more interactions, such as feeding it a fish, brushing its fur, and at least one more easter egg for users who get a little too enthusiastic with the tickling.
What I'd Do Differently
For MVP we made the pragmatic decision to support only OpenAI, since we knew we could implement it correctly within our timeline. The tradeoff is accessibility. Not every developer wants to use OpenAI or has an API key. A next step is implementing VS Code's native language model interface with BYOK (bring your own key) support, which would allow users to connect whichever AI they prefer through a standard VS Code interface.
My Role
Beyond the technical work, I served as scrum lead, running twice-daily check-ins, breaking large goals into manageable sprints, and keeping the team aligned through a tight deadline. The feedback I received from teammates was that the questions I asked helped everyone think more systemically about the choices we were making, and that the structure I provided made it possible to ship our MVP on time.