DEV Community

Cover image for Building a Full-Stack AI Memory System in 2 Weeks with Kiro AI IDE
Vinod W
Vinod W

Posted on

Building a Full-Stack AI Memory System in 2 Weeks with Kiro AI IDE

#kiro #ai #hackathon #fullstack

Building a Full-Stack AI Memory System in 2 Weeks with Kiro AI IDE

I built Memory Layer, a Chrome extension + Next.js dashboard + FastAPI backend in 2 weeks using the Kiro AI IDE. Kiro’s spec-driven development, hooks, and steering docs cut development time by almost 70% and helped me ship a complex multi-language system quickly.

The Challenge: Building a Frankenstein AI System

Hackathons push you to build way more than you should in way less time.

My goal for Kiroween 2025:
Build a universal AI memory system that captures a user's conversations across LLMs and enhances future prompts with relevant context.

The problem?
The stack was a 3-headed monster:

  • FastAPI + FAISS + Embeddings (Python)
  • Next.js 14 + shadcn/ui (TypeScript)
  • Chrome Extension MV3 (JavaScript)

Everything needed to integrate flawlessly.

Normally, this setup causes weeks of API mismatches, inconsistent models, and debugging hell.

Kiro changed that story.

What is Kiro?

Kiro is an AI-powered IDE that blends:

  • Vibe Coding (conversational code generation)
  • Spec-Driven Development
  • Agent Hooks (tests, security scans, workflows)
  • Steering Docs (teach the AI your coding style)

Instead of being “autocomplete on steroids”, Kiro acts like a junior engineer who follows your rules, reads your architecture, and writes aligned code.

Part 1 -> Specs: The Secret Weapon for Multi-Language Projects

Why vibe coding alone wasn’t enough

I started by asking Kiro:

“Build a FastAPI endpoint to save prompts.”

It generated something usable, but…
the frontend expected different fields, the extension sent different names, and the backend validated something else.

Example mismatch:

  • Backend expected: { user_id: string, prompt: string }
  • Extension sent: { userId: string, text: string, platform: string }
  • Result: Hours lost debugging 400 errors.

Fix: a 3-file spec system

I introduced a simple, repeatable spec structure:

requirements.md -> What to build 

### FR-1: Save Prompt Endpoint
**Priority:** High  
The backend must accept and store user prompts.

**Acceptance Criteria:**
- AC-1.1: Accepts user_id, prompt text, platform
- AC-1.2: Responds within 200ms
- AC-1.3: Stores vector embedding in FAISS
- AC-1.4: Returns prompt_id
Enter fullscreen mode Exit fullscreen mode

design.md -> How to build it 

### Save Prompt Endpoint Design

**Route:** POST /save-prompt  
**Validation:** Pydantic SavePromptRequest  
**Storage:** FAISS IndexFlatL2  
**Response:** { success: bool, prompt_id: int }
Enter fullscreen mode Exit fullscreen mode

tasks.md -> Step-by-step implementation 

### TASK-6: Implement Save Prompt Endpoint
**Status:** TODO  
**Acceptance Criteria:** AC-1.1 → AC-1.4

1. Create Pydantic model
2. Implement POST route
3. Add FAISS embedding + metadata
4. Return { success, prompt_id }
Enter fullscreen mode Exit fullscreen mode

Impact

Once specs existed, Kiro:

  • Generated consistent backend code
  • Generated frontend API functions that matched the contract
  • Generated Chrome extension network calls using the same model
  • Prevented drift completely

Estimated time saved: ~15 hours

Part 2 -> Agent Hooks: Automated Testing & Security

Kiro’s hooks became my personal QA team.

Hook 1 -> Test on Save (Python) 

{
  "name": "Run Tests on Save",
  "trigger": { "type": "onSave", "filePattern": "**/*.py" },
  "actions": [{ "type": "executeCommand", "command": "pytest -v --tb=short" }]
}
Enter fullscreen mode Exit fullscreen mode

This caught:

  • Incorrect return types
  • Missing type hints
  • FAISS dimension mismatch
  • A similarity threshold bug

Hook 2 -> AI Security Scanner 

{
  "name": "Security Scan",
  "trigger": { "type": "onSave", "filePattern": "**/{auth,api,main}.py" },
  "actions": [{
    "type": "agent",
    "prompt": "Scan ${file} for security issues: injections, secrets, weak validation."
  }]
}
Enter fullscreen mode Exit fullscreen mode

It flagged:

  • Improper JWT handling
  • Missing input validation
  • Overly verbose error messages
  • Potential rate-limit bypass

These weren’t theoretical -> they were real vulnerabilities caught early.

Hook 3 -> Lint on Save (Disabled)

Too noisy during fast prototyping.
Lesson learned: match tooling to development phase.

Part 3 -> Steering Docs: Teaching Kiro to Code Like Me

Without steering docs, Kiro generated inconsistent styles.

With them, it produced code like a trained team member.

Example steering doc: 

# FastAPI Patterns
- Use async def for all routes
- Use Pydantic models for validation
- Use Depends() for auth
- Add type hints everywhere
Enter fullscreen mode Exit fullscreen mode

Example output after steering:

async def save_prompt(
    request: SavePromptRequest,
    user: dict = Depends(get_current_user)
) -> SavePromptResponse:
    """Save user prompt to memory layer."""
    try:
        prompt_id = await store.add_memory(
            user_id=user["id"], text=request.prompt
        )
        return SavePromptResponse(success=True, prompt_id=prompt_id)
    except Exception as e:
        raise HTTPException(status_code=500, detail=str(e))
Enter fullscreen mode Exit fullscreen mode

Clean. Typed. Validated. Secure.
Generated automatically.

Part 4 -> Hybrid Workflow: Specs + Vibe Coding = Best of Both

My final workflow:

Use Specs for:

  • API contracts
  • Multi-service features
  • Authentication
  • Data models
  • Vector search workflows

Use Vibe Coding for:

  • UI components
  • Animations
  • Utility functions
  • Chrome extension DOM logic

This hybrid approach hit the perfect balance.

Case Study -> Building the Chrome Extension

Step 1: Spec the flow 

### Prompt Enhancement Flow
- Capture typed prompt
- Save to backend
- Fetch relevant context (<2s)
- Inject enhanced prompt
- Auto-click send
Enter fullscreen mode Exit fullscreen mode

Step 2: Design it 

1. Listen to textarea
2. POST prompt to backend
3. GET memory/context
4. Build enhanced prompt
5. Insert + send
6. Capture response
Enter fullscreen mode Exit fullscreen mode

Step 3: Generate the extension using vibes

My prompt to Kiro:

“Generate a content script that implements the 7-step enhancement flow, observes responses, and injects a Memory Layer button.”

Result:
~300 lines of working code with DOM listeners, MutationObserver, UI injection, error handling.

Step 4: Hooks catch early issues

  • Wrong selector
  • Missing null-check
  • Response observer timing bug

Total dev time: 3 hours (vs ~12 hours manually)

Advanced Techniques I Used

1. DRY Specs with Cross-References 

# API Contract (Backend)
interface SavePromptRequest {
  user_id: string;
  prompt: string;
  platform: string;
}
Enter fullscreen mode Exit fullscreen mode

Frontend just references it:

See backend/specs for SavePromptRequest shape
Enter fullscreen mode Exit fullscreen mode

Kiro keeps them synced.

2. Conditional Steering 

---
inclusion: fileMatch
fileMatchPattern: "**/*.tsx"
---

# React Patterns...
Enter fullscreen mode Exit fullscreen mode

Steering applies only where relevant.

3. Hook Chaining 

Save file
 → Run tests
   → Security scan
     → Type-check
       → Commit allowed
Enter fullscreen mode Exit fullscreen mode

4. Steering Inheritance

Base style + language-specific style = perfect consistency.

Results

Development Speed

  • 15,000+ lines generated
  • 6+ weeks → 2 weeks
  • ~70% faster overall

Code Quality

  • 100% typed
  • 85% test coverage
  • 12 bugs caught pre-commit
  • 7 real security issues fixed early

Component Breakdown

  • Backend: 2.5k LOC → 8 hours (would be 30+)
  • Web app: 1.2k LOC → 6 hours
  • Extension: 1.5k LOC → 10 hours

What I’d Do Differently

  1. Avoid over-specifying UI
  2. Start with fewer hooks
  3. Make steering docs more specific earlier
  4. Depend on tasks.md sooner
  5. Never ignore hook warnings

Final Architecture Overview 

Chrome Extension → FastAPI → FAISS → OpenAI Embeddings
        ↑                 ↓
        └── Next.js Dashboard + Supabase Auth
Enter fullscreen mode Exit fullscreen mode

All glued together by specs + hooks + steering.

Try It Yourself

1. Install Kiro

https://kiro.dev

2. Create your first spec

3. Add a steering doc

4. Add a test hook

5. Vibe code your first feature

6. Watch everything integrate on the first try

Starter template:

git clone https://github.com/vinodwaghmare/webapp-memgenx-kiro
Enter fullscreen mode Exit fullscreen mode

Conclusion

Building Memory Layer proved one thing clearly:

AI-assisted development doesn’t replace engineers -> it amplifies them.

With specs, hooks, and steering docs, Kiro let me build a multi-language, multi-repo, fully integrated AI product in 2 weeks.

If you’re building anything full-stack + AI, try this workflow once. You’ll never go back.

Never lose context again. Built with Kiro. 🎃

Resources

Top comments (0)