A story from the "Code with Kiro" hackathon
The Vision That Started It All
I’ve always felt frustrated with writing tools. Some are too complicated and get in the way, like Grammarly, and others are too simple and miss important things, like basic spell checkers. Because English isn’t my first language, I want something that can understand different situations, sometimes I just need help fixing spelling, but other times I want full AI help with my writing.
That's how IntelliSense AI Writing Assistant was born: a Browser Extension that provides intelligent writing help across the web, with three preset modes that match how people actually write.
The Technical Challenge
Building a Browser Extension that works seamlessly across every website while providing real-time AI assistance is no small feat. I needed to:
- Monitor text input across different element types (inputs, textareas, contenteditable divs)
- Implement smart debouncing to avoid overwhelming the AI API
- Create a sequential processing system: grammar correction → autocomplete → sentence continuations
- Handle 70+ languages with intelligent detection
- Build a non-intrusive UI that feels native to each website
- Manage complex state across background scripts, content scripts, and popup interfaces
The architecture alone was daunting. Where do you even start with something this complex?
Enter Kiro: My Development Partner
This is where Kiro changed everything. Instead of diving headfirst into code and hoping for the best, I started with Kiro's spec system.
The Spec That Saved Me
I created a spec for "improved-language-detection" - one of the most complex features. Instead of trying to figure out the entire implementation in my head, I worked with Kiro to break it down:
- [x] 1. Add language detection AI method - [ ] 2. Implement language detection caching system - [ ] 3. Add debug logging for language detection - [x] 4. Simplify grammar correction prompt - [x] 5. Integrate language detection into grammar correction flow Kiro helped me think through each task systematically. What would have been a chaotic coding session became a structured development process.
The Breakthrough Moment
The real magic happened when I was struggling with the "TextMonitor" class. I needed to track user input across thousands of different websites, each with their own quirks and element structures.
I described the problem to Kiro: "I need to monitor text input across various element types with debouncing, handle dynamic content, and avoid password fields for security."
Kiro didn't just give me code snippets. It architected the entire solution:
class TextMonitor { constructor() { this.debounceDelay = 500; this.thinkingModeDelay = 1500; this.debounceTimers = new Map(); this.activeElements = new Set(); // ... perfect structure from the start } } The generated code included security considerations (skipping password fields), performance optimizations (smart debouncing), and even the "thinking mode" feature I hadn't fully conceptualized yet.
Conversational Development
What I loved most was how Kiro helped me think through problems conversationally. When I was stuck on the sequential processing flow, I could explain: "Users want grammar correction first, then autocomplete, then sentence continuations, but with delays so it doesn't feel overwhelming."
Kiro guided me to implement a 3-second delay system that feels natural:
async startSequentialProcessing(element, text, elementId) { // Step 1: Grammar correction await this.requestAutomaticGrammarCorrection(element, text); await this.delay(3000); // Step 2: Autocomplete const lastWord = this.getLastPartialWord(updatedText); if (lastWord && lastWord.length > 2) { await this.requestAutocomplete(element, updatedText, lastWord); await this.delay(3000); } // Step 3: Sentence completion // ... } This wasn't just code generation - it was collaborative problem-solving, like a senior dev sitting right next to you.
The Architecture That Emerged
Working with Kiro, we built a sophisticated multi-layer architecture:
Background Layer: Service worker handling Groq API calls with intelligent caching and rate limiting
Content Layer: Text monitoring and UI injection that works across all websites
UI Layer: Three preset modes (Basic, Minimalistic, Full) with context-aware interfaces
API Layer: Smart language detection and sequential AI processing
Each layer emerged naturally through our conversations, not through upfront over-engineering.
The Problems We Solved Together
Technical Challenges
Cross-site compatibility: Kiro helped me create selectors that work across Gmail, Google Docs, LinkedIn, Twitter, and thousands of other sites.
Performance optimization: We implemented smart caching, debouncing, and rate limiting that keeps the extension responsive even with heavy usage.
Language detection: Instead of regex-based detection, Kiro guided me to build an AI-powered system that accurately detects 70+ languages.
Security considerations: Kiro reminded me to skip password fields and implement proper content security policies.
User Experience Challenges
Non-intrusive design: The UI feels native to each website, appearing only when needed and disappearing gracefully.
Preset modes: Three distinct experiences that match different writing contexts - from basic spelling to full AI assistance.
Keyboard navigation: Full accessibility with Tab, Escape, and arrow key support for all features.
How Kiro Changed My Development Approach
Before Kiro
- Start coding immediately when I had an idea
- Get lost in implementation details
- Struggle with architecture decisions mid-development
- Write code first, think about structure later
- Debug complex interactions between poorly planned components
After Kiro
- Begin every feature with a spec and task breakdown
- Think through the problem space before writing code
- Use Kiro as a sounding board for architectural decisions
- Generate well-structured code that fits the overall system
- Build incrementally with clear milestones
The Mindset Shift
Kiro taught me that great software isn't just about writing code - it's about thinking through problems systematically. The spec system forced me to articulate requirements clearly, which led to better solutions.
More importantly, Kiro helped me embrace iterative development. Instead of trying to build everything at once, we tackled one feature at a time, each building on the previous work.
The Results
IntelliSense AI Writing Assistant now provides:
- Real-time grammar correction that preserves your writing style
- Smart autocomplete with contextual suggestions
- Sentence continuations that help you develop ideas
- 70+ language support with automatic detection
- Three preset modes for different writing contexts
- Seamless integration across all websites
The extension processes text intelligently, applying corrections and suggestions in a natural flow that enhances rather than interrupts the writing experience.
And the most important I was able to ship faster, Intellisense MVP was build in a week (yes the current version from github submitted to the hackathon is the MVP aka can be used but expect small issues).
Personal Growth Through Partnership
Building with Kiro wasn't just about shipping a product - it was about becoming a better developer. I learned to:
- Think architecturally before diving into implementation
- Break complex problems into manageable pieces
- Collaborate effectively with an AI partner
- Build incrementally with clear milestones
- Consider edge cases and security implications upfront
The most surprising part? I enjoyed the development process more. Instead of fighting with code, I was having conversations about solutions. Instead of debugging architectural mistakes, I was building on solid foundations.
Looking Forward
This hackathon project became something bigger than I expected. IntelliSense AI Writing Assistant is now a production-ready Chrome extension that I use daily. But more importantly, it represents a new way of building software - one where AI partnership enhances human creativity rather than replacing it.
Kiro didn't write my code for me. It helped me think through problems, structure solutions, and build something better than I could have alone. That's the future of development I'm excited about.
Check out the project: Github Link
Built with ❤️ and Kiro during the "Code with Kiro" hackathon
Top comments (0)