Building AI Protégé: A Month of Spec-Driven Development with Kiro

Source: Dev.to

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.
• You teach each one—draw diagrams on a canvas, write explanations.
• When you’re done, the AI asks questions, 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 lets the AI challenge both clarity and accuracy.

Tech stack: Next.js 15, Convex, Excalidraw, OpenAI, Clerk, Vercel.

The Development Journey

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.
• Two separate input boxes.
• The chat panel dominated the screen.
• Hints appeared as regular messages, so you couldn’t tell them apart.

The Excalidraw Migration

I love Excalidraw, so I decided to migrate (tldraw’s license is paid for commercial use). The migration was harder than expected; Excalidraw’s documentation doesn’t cover everything, so I dug through their GitHub repo to find the right TypeScript interfaces.

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 three days before submission on it, staying up until 2 AM.

Goal: stream the AI’s response in real‑time while using RAG to fact‑check against the source material.

I initially gave Kiro the wrong documentation—the Convex Agents streaming docs. Those docs are for building AI agents that execute code and need to stream deltas to the database and to the client. AI Protégé isn’t an agent; it doesn’t execute code. Moreover, our model (GPT‑4.1‑nano) finishes responses so quickly that by the time the client tried to subscribe, the stream was already marked “finished.”

Kiro kept generating code based on the agent docs, and streaming failed silently. The suggested workaround—using a Vercel AI action for streaming and a separate Convex call for RAG—would have introduced two API calls, higher latency, and missing RAG context at generation start. I refused.

After reading Convex blog posts, I found this article about persistent text streaming. The solution was simpler: use a Convex HTTP action with the AI SDK’s streamText directly. The HTTP action fetches RAG chunks, builds the prompt with source context, and streams the response back to the client. No agent framework needed.

Working with Kiro: What Actually Helped

I created five 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 practices made the specs work better:

1. Discuss architecture first, then write specs.
   Start with a vibe session to explore ideas, talk through approaches, consider edge cases, and only then generate the spec. This yields thorough specs you actually understand.

2. Wireframes before UI.
   Claude isn’t great at design, so I made wireframes in Excalidraw and referenced them in specs, giving Kiro a visual target.

   

3. Include relevant documentation.
   Provide only the specific pages you need. Supplying the wrong Convex docs wasted hours; the correct blog post solved the streaming issue.

4. Screenshot broken UI.
   When the interface looked wrong, I screenshot it and included it in the chat. Kiro debugs visual issues much better with actual images.

5. Manual testing instructions.
   Every task in my specs had explicit steps to verify it worked. AI tends to write automated tests that pass its own code; manual checks keep you honest.

What I’d Do Differently

Plan more thoroughly upfront: design detailed wireframes and user flows before writing code, and set up steering docs for code‑quality standards early. 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 the process manageable.

What’s Next

I built this for my own use case, so I’ll keep using it. Future improvements include bug fixes, voice input/output, and maybe turning the AI student into a brainstorming partner for different use cases.

• Try it:
• YouTube demo:
• Built with: Next.js, Convex, Excalidraw, OpenAI, Clerk, Kiro

This project was built for the Kiroween hackathon.