OtterDr
Your Friendly AI Debugging Companion
OtterDr is a playful yet powerful VS Code extension that helps you understand and fix code errors using AI, guided by an expressive otter that reacts to the health of your code.
📌 Introduction
OtterDr (pronounced "otter-der" -- kind of like "auditor"!) is a VS Code extension that notices errors in your code and explains them using AI. When an error appears, your otter looks confused. Just select the code causing the problem, ask OtterDr for help, and see an easy to understand explanation right inside VS Code.
OtterDr is designed to make debugging:
Less intimidating, by simplifying complex error messages
More educational, by explaining the “why” behind the fix
And a little more fun 🦦
🧠 About the OtterDr extension
OtterDr helps you understand and fix workspace coding errors. You select the code that's causing a problem and OtterDr sends it to AI. The AI error explanation is clearly displayed in a panel inside VS Code, offering additional suggestions for next steps.
Why do you need OtterDr?
Error messages and stack traces are often cryptic or poorly documented, leading to wasted time. OtterDr streamlines the debugging process by providing immediate clarity when:
- Learning new stacks: Quickly deciphers unfamiliar errors when working with a new language, framework, or library
- Context switching: Saves mental energy by translating technical jargon into actionable insights without leaving your editor
- Beyond a “quick fix”: Encourages a deeper understanding of why an error occurred, helping you write more resilient code
Features
Otter Mascot
🦦 Real-time interaction: OtterDr reacts to your coding environment as you work
😕 Visual Diagnostics: OtterDr shows confusion when VS Code detects compiler errors or issues
😊 Interactivity: Scratch OtterDr's belly to brighten your dev session!
AI-Powered Assistance
🎯 Targeted Analysis: Select specific code snippets to receive focused, context-aware explanations
📊 One-Click Insights: Use the OtterDr Status Bar button to instantly trigger the AI response panel with insight into your highlighted code
🤖 Integrated UI: Access clear, AI-generated explanations and solutions directly within a dedicated VS Code panel
📥 Installation
From VS Code Marketplace
Open Visual Studio Code
Go to the Extensions panel (Ctrl+Shift+X)
Search for OtterDr
Click Install
From Source (for contributors)
Open your terminal and clone the repo:
git clone https://github.com/OtterDr/OtterDr.git
cd OtterDr
Install dependencies:
npm install
Build the extension:
npm run compile
Open VS Code and run the extension in Development Mode (press F5)
🔑 Initial Setup – OpenAI API Key
OtterDr requires an OpenAI API Key to generate explanations and suggestions
First Use: The first time you click the OtterDr button in the Status Bar, you will be prompted to enter your key
Secure Storage: Once entered, your key is stored securely in VS Code's SecretStorage
Manage Your API Key
If you need to change or remove your key later, use the Command Palette (Cmd/Ctrl + Shift + P):
🧪 Usage Guide
1️⃣ Detect Errors
- When VS Code detects errors in the current file, 🦦 your OtterDr displays confusion
2️⃣ Select the Error Code
- Highlight only the relevant code snippet (you can include surrounding lines for context)
⚠️ Tip: Avoid selecting the entire file — keep it focused on the specific error for the most accurate AI response
3️⃣ Trigger OtterDr AI
- Click the OtterDr button in the Status Bar. The panel will open and send your code for analysis
4️⃣ View AI Explanation
- Read the explanation and fix suggestions. Once the error is resolved, 🦦 your OtterDr becomes happy again 🎉
🎥 Demo
Otter Moods
OtterDr is very expressive, and will be happy at belly scratches and confused at errors.
See your OtterDr's mood change depending on the health of your code!
Selecting an Error & Getting AI Help
Highlight lines with relevant code for context (including the error), and see OtterDr work its magic!
🛠️ Development & Contributing
We ❤️ contributions!
Contribution Guidelines
Fork the repository and create a feature branch:
git checkout -b feature/your-feature
Commit your changes with clear, descriptive messages
Open a Pull Request for the team to review
Run in Dev Mode
npm install
npm run watch (Compiles code and listens for changes)
Press F5 in VS Code to launch the Extension Development Host
🗺️ Contributions Roadmap
| Feature |
Status |
| Otter mood reactions |
✅ |
| Inline error selection |
✅ |
| AI explanation panel |
✅ |
| Multiple error selection |
⏳ |
| Additional interaction choices with otter (Play, Feed etc) |
🙏🏻 |
| Gamification features (Level up) |
🙏🏻 |
| Unlocking skins or designs for otter based on level |
🙏🏻 |
| Comprehensive Test Suite |
🙏🏻 |
| Support for additional LLMs |
🙏🏻 |
| Create user settings |
🙏🏻 |
✅ Ready | ⏳ In Progress | 🙏🏻 Looking for Contributors
📝 Changelog
V1.0.0 - February 24, 2026
📄 License
This project is licensed under the MIT License. See LICENSE.md for details.
👩💻 Contributors
❓ FAQ
Does OtterDr AI fix my code automatically?
No — it explains errors so you learn how to fix them.
Is my code stored anywhere?
No. Code snippets are only sent to OpenAI for analysis and are not saved by the extension.
⭐ Support the Project
If you enjoy OtterDr AI:
⭐ Star the repo
🦦 Share it with friends
🛠️ Contribute a feature
Happy debugging! 🦦✨
