I'm currently learning data structures and algorithms. The textbook is boring. I can read through chapters, watch tutorials, feel like I understand everything—and then forget it all a week later.
But whenever I explain something to someone else, it actually sticks. That's the Feynman Technique—if you can't explain something simply, you don't understand it. There's also rubber duck debugging, where you explain your code to a rubber duck to find bugs.
I wanted to combine these ideas. Instead of AI teaching me, I would teach an AI. It's a bit like Frankenstein—bringing knowledge to life by teaching it to something that doesn't know anything.
What I Built
AI Protégé is a learning app where you teach an AI student instead of the other way around.
You give it a URL or PDF of whatever you're trying to learn. It extracts 5 key concepts. Then you teach each one—draw diagrams on a canvas, write explanations. When you're done, the AI asks questions. It checks if your explanation is clear, and uses RAG to fact-check you against the source material.
At the end, the AI summarizes what it learned. If the summary is wrong, that's on your explanation.
The AI combines three inputs: your canvas drawing (vision), your text explanation, and relevant chunks from your source material (RAG). This triple-input approach means the AI can challenge both clarity and accuracy.
Tech stack: Next.js 15, Convex, Excalidraw, OpenAI, Clerk, Vercel.
The Development Journey
I built this solo over about a month using Kiro. This was my biggest project yet.
Version 1: The Prototype
Even the first version used specs. I created ai-protege-learning-app to define the initial prototype—a simple teaching interface where you could draw on a canvas and get AI feedback.
The prototype worked, but the UX was rough:
The canvas was tiny. There were two separate input boxes. The chat panel dominated the screen. Hints appeared as regular messages, so you couldn't tell them apart. Just bad UX.
The Excalidraw Migration
I love Excalidraw—I use it all the time—so I decided to migrate. Plus, tldraw's license is paid for commercial use.
The migration was harder than expected. Excalidraw's documentation doesn't cover everything, so I had to dig through their GitHub repo to find the right TypeScript interfaces.
But the result was worth it:
Full-screen canvas. Single focused input area. Collapsible dialogue panel. Clear visual hierarchy.
The Convex Streaming Problem
This was the hardest part. I spent the last 3 days before submission on this, staying up until 2 AM.
The goal: when the AI responds, the response should stream in real-time. And the AI should use RAG to fact-check against your source material.
I initially gave Kiro the wrong documentation—the Convex Agents streaming docs. That's for building AI agents that execute code and need to stream deltas to the database while also streaming to the client.
AI Protégé isn't an agent. It doesn't execute code. And our model (GPT-4.1-nano) is fast—it finishes responses so quickly that by the time the client tried to subscribe to the stream, it was already marked as "finished."
Kiro kept generating code based on the agent documentation, and it kept not working. The code looked right, but streaming would fail silently.
Kiro suggested a simpler approach: use a Vercel AI action for streaming and a separate Convex call for RAG. This would work, but it would mean two API calls, higher latency, and the RAG results wouldn't be available when the AI starts generating.
I refused. The whole point was RAG-informed responses that stream smoothly.
After reading through Convex blog posts, I found this article about persistent text streaming. The solution was simpler: just use a Convex HTTP action with the AI SDK's streamText directly. No agent framework needed.
The HTTP action fetches RAG chunks, builds the prompt with source context, and streams the response back to the client. Simple and effective.
Working with Kiro: What Actually Helped
I created 5 specs over the course of the project:
-
ai-protege-learning-app— Initial prototype -
ai-protege-v2— Full rewrite with multi-concept teaching flow -
session-dashboard— User authentication and session management -
convex-agent-streaming— RAG integration -
excalidraw-redesign— Canvas library migration
A few things made specs work better:
Discuss architecture first, then write specs. Start with a vibe session to explore ideas. Talk through different approaches. Consider edge cases. Only after you've thought through everything should you generate the spec. This way the specs are thorough and you actually understand them.
Wireframes before UI. Claude isn't great at design. I made wireframes in Excalidraw and referenced them in specs so Kiro had a visual target.
Include relevant documentation. When using external libraries, find the specific documentation pages needed and include them. Not the whole docs—just what's relevant. When I gave Kiro the wrong Convex docs, I wasted hours. When I found the right blog post and gave it that context, it worked.
Screenshot broken UI. When the interface looked wrong, I'd screenshot it and include it in the chat. Kiro debugs visual issues much better when it can see what's actually happening.
Manual testing instructions. Every task in my specs had specific steps to verify it worked. AI tends to write automated tests that pass its own code. Manual testing keeps you honest.
What I'd Do Differently
Plan more thoroughly upfront. Design more detailed wireframes and user flows before writing code. Set up steering docs for code quality standards early.
But honestly, migrations are easier with Kiro. When I needed to change direction, I'd create a new spec and work through it systematically. The specs made it manageable.
What's Next
I built this for my own use case, so I'll keep using it. Future improvements: bug fixes, voice input/output, maybe transforming the AI student into a brainstorming partner for different use cases.
Try it: ai-protege.xyz
Youtube link: ai-protege.xyz (kiroween)
Built with: Next.js, Convex, Excalidraw, OpenAI, Clerk, Kiro
This project was built for the Kiroween hackathon.
Top comments (0)