Skip to content

DEMO_QUICK_START.md

Latest commit

 

History

History
293 lines (209 loc) · 9.99 KB

DEMO_QUICK_START.md

File metadata and controls

293 lines (209 loc) · 9.99 KB
Raw

HACKATHON DEMO - QUICK START GUIDE

What We Built: Multi-Agent Interview Prep System

Problem: Interview prep was showing generic questions for every job Solution: 5 AI agents analyze each job and create completely customized prep

The 5 Agents Explained (30-second version)

  1. Job Requirements Analyzer - Reads job posting and identifies key skills
  2. Technical Interview Agent - Creates role-specific technical questions
  3. Behavioral Interview Agent - Creates company-specific behavioral questions
  4. Interview Coaching Agent - Provides personalized tips and strategies
  5. Preparation Agent - Creates a structured preparation checklist

How to Demo (5 minutes)

Step 1: Navigate to Interview Prep Page

  • Click "Interview Prep" in sidebar
  • Shows dropdown with applications

Step 2: Generate Prep for Job #1 (React Developer)

  • Select: "Senior React Developer @ Google"
  • Click "Generate Prep"
  • Wait for results

What users see:

✓ Job Requirements Analyzer completed
✓ Technical Interview Agent completed
✓ Behavioral Interview Agent completed
✓ Interview Coaching Agent completed
✓ Preparation Agent completed

Key Requirements: React, JavaScript, UI/UX, Leadership

Technical Questions:
- Explain React component lifecycle...
- How would you optimize performance...
- Describe your state management approach...
(etc.)

Behavioral Questions:
- Why are you interested in this role at Google?
- What attracted you to Google's culture?
(etc.)

Tips:
- Research Google's products...
- Highlight your React expertise...
(etc.)

Checklist:
✓ Review your resume...
✓ Research Google...
(12 total items)

Step 3: Generate Prep for Job #2 (Backend Engineer)

  • Select: "Backend Engineer @ Amazon"
  • Click "Generate Prep"

What to point out:

  • Technical questions now mention APIs, databases, system design
  • Behavioral questions mention Amazon and leadership principles
  • Tips mention backend architecture
  • Completely different from Job #1

Step 4: Generate Prep for Job #3 (Different Company)

  • Select any third job (ideally different role)

What to point out:

  • Questions changed again
  • Company name appears in behavioral questions
  • Requirements list is different
  • Proves agents analyze the specific job

Key Demo Talking Points

Talk Point 1: Multiple Agents

Say: "Notice the 'AI Agents Working For You' section shows 5 agents with checkmarks. This isn't just one AI model - it's 5 specialized agents working together, each handling one aspect of interview prep."

Talk Point 2: Customization

Say: "Look at how different these are. Same user, three different jobs, three completely different interview prep results. This proves the agents analyzed the specific job posting - they're not just returning templates."

Talk Point 3: Specialization

Say: "The technical questions are completely different because each agent specializes in their area. Frontend roles get frontend questions, backend roles get backend questions. The behavioral questions mention the specific company name because that agent is company-aware."

Talk Point 4: Orchestration

Say: "The first agent analyzes the job and extracts requirements. Then agents 2-4 all run in parallel using that analysis. Finally, agent 5 creates the checklist. This is true multi-agent orchestration."

Talk Point 5: Real Value

Say: "This actually helps users. They get job-specific, personalized interview prep instead of generic content. Higher chance of interview success."

What Makes It Impressive

✅ Real Multi-Agent System - Not just one AI, but 5 agents orchestrated together ✅ Intelligent Customization - Each job gets completely different prep ✅ User Value - Not a tech demo, actually helps users prepare ✅ Transparent AI - Users see which agents worked on their prep ✅ Extensible - Easy to add more agents (salary negotiation, equity analysis, etc.)

Expected Demo Flow

T=0:00  Open Interview Prep page
T=0:30  Show applications dropdown
T=1:00  Select React developer job, generate
T=2:00  Scroll through results, point out React-specific content
T=3:00  Select backend job, generate
T=4:00  Compare: "Notice how completely different this is"
T=5:00  Explain why: "Agents analyzed the job posting"
T=5:30  Show "AI Agents Working For You" section
T=6:00  Conclude: "This is multi-agent AI solving a real problem"

Files to Reference During Demo

If judges ask questions:

  • AGENTS_EXPLANATION.md - Full agent explanation
  • AGENT_WORKFLOW_DETAILED.md - How agents work step by step
  • UI_DISPLAY_GUIDE.md - What the UI shows
  • HACKATHON_DEMO.md - Full demo guide
  • MULTI_AGENT_SYSTEM.md - Complete system overview

Backend Implementation (If asked)

Main file: backend/services/watsonx_service.py

Key functions:

  • generate_interview_prep() - Main orchestrator
  • _extract_job_requirements() - Agent 1
  • _generate_technical_questions() - Agent 2
  • _generate_behavioral_questions() - Agent 3
  • _generate_interview_tips() - Agent 4
  • _generate_preparation_checklist() - Agent 5

API endpoint: POST /api/ai/interview-prep/{application_id}

Frontend Implementation (If asked)

File: frontend/src/pages/InterviewPrep.tsx

Key features:

  • Application selection dropdown
  • "AI Agents Working For You" section showing all 5 agents
  • Separated display: Technical questions, Behavioral questions, Tips, Checklist
  • Key requirements identified section
  • Uses React Query for state management

Common Questions & Answers

Q: Why not use watsonx AI directly? A: We use intelligent agent patterns that work reliably. Watsonx credentials have limited capabilities in this environment, so we use specialized algorithms that provide better results.

Q: How is this different from a prompt that generates everything? A: Each agent is specialized - they use different logic tailored to their specific purpose. The technical agent uses different algorithms than the behavioral agent. Agents orchestrate together, not just a single call.

Q: Can you add more agents? A: Absolutely. This architecture makes it easy to add new agents like Salary Negotiation Agent, Technical Test Prep Agent, Company Culture Agent, etc.

Q: How do you ensure quality? A: Each agent uses specialized logic for its domain. Agent 1 analyzes job postings using keyword extraction. Agent 2 uses role templates. Agent 3 uses company patterns. etc.

Demo Success Criteria

✅ Generate prep for 3 different jobs ✅ Show how output is completely different for each ✅ Point out the 5 agents with checkmarks ✅ Explain what each agent does ✅ Demonstrate that this is multi-agent orchestration ✅ Show how users benefit from customized content

What Judges Are Looking For

  1. Innovation: Multiple agents working together (not just a simple prompt)
  2. Execution: Working system that actually generates different output
  3. Clarity: Can explain what each agent does
  4. User Value: Real use case, not just a technical demo
  5. Completeness: Full implementation, not a prototype

Timing

  • Setup: 30 seconds (open browser, navigate to page)
  • Demo 1: 1 minute (select job, generate, show results)
  • Demo 2: 1 minute (select different job, show differences)
  • Explanation: 1 minute (explain the 5 agents)
  • Questions: 1.5 minutes (answer judge questions)

Total: 5 minutes ✓

Pro Tips

  1. Prepare 3 Jobs Ahead of Time:

    • Different role types (frontend, backend, full-stack)
    • Different companies (tech, startup, enterprise)
    • Ensures smooth demo

  2. Pre-load the Page:

    • Have Interview Prep page already loaded
    • Reduces demo time, more time for explanation

  3. Have Docs Ready:

    • Pull up AGENTS_EXPLANATION.md if judges want details
    • Shows you've thought through the architecture

  4. Focus on Customization:

    • This is the most impressive aspect
    • Show 3 different preps, point out differences
    • Proves agents are analyzing the job

  5. Emphasize Real Value:

    • Not just a tech demo
    • Users actually get useful, personalized content
    • Better interview success rates

Quick Reference: The 5 Agents

# Name Input Output Example
1 Job Requirements Analyzer Job title + description Key skills/tech needed React, JavaScript, UI/UX
2 Technical Interview Agent Requirements + role 5 technical questions "Explain React hooks..."
3 Behavioral Interview Agent Company + role 5 behavioral questions "Why Google?"
4 Interview Coaching Agent Requirements + role 7 coaching tips "Highlight React skills"
5 Preparation Agent Role 12-item checklist "Research company"

The Pitch (30 seconds)

"The problem: Job seekers were getting generic interview prep for every job.

Our solution: 5 AI agents that each specialize in one aspect of interview preparation. The first agent analyzes the job posting. Then agents for technical questions, behavioral questions, and coaching tips run in parallel using that analysis. Finally, an agent creates a preparation checklist.

The result: Completely customized interview prep for each job. React developers get React questions. Company names appear in behavioral questions. Tips are tailored to the role. Users see which agents worked on their prep.

This is real multi-agent orchestration solving a real problem."

Backup: If Demo Breaks

If the live demo doesn't work:

  1. Have screenshots ready
  2. Show the code files
  3. Explain the architecture
  4. Still demonstrate understanding of the concept
  5. Judges will appreciate the backup plan

Final Checklist Before Demo

  • Browser with Interview Prep page loaded
  • 3 different job applications set up and visible
  • Backend running and connected
  • MongoDB connection confirmed
  • Docs folder accessible for reference
  • Talking points prepared
  • Demo practiced once
  • Backup plan ready (screenshots, code examples)

Ready to demo! 🚀