Forem: Karthik Subramanian

Navigating AWS Neptune Graph with AI

Karthik Subramanian — Fri, 03 Oct 2025 03:08:16 +0000

Using an AI agent to work with an RDF triple store graph DB

The Problem That Started It All

Picture this: You're a developer who needs to query an Amazon Neptune graph database. You open the SPARQL documentation, see something like this:

SELECT ?subject ?predicate ?object
WHERE {
  ?subject ?predicate ?object .
  FILTER(REGEX(STR(?subject), "http://example.com/users/"))
}
LIMIT 100

And you think: "There has to be a better way."

That was me recently. I had a Neptune database full of valuable graph data, but I was spending more time wrestling with query syntax than extracting insights. So I did what any developer would do in 2025 — I built an AI agent to handle the complexity for me.

The result is Neptune Query Shell — an AI-powered interface that lets you query Neptune databases using natural language, with support for SPARQL, Gremlin, and OpenCypher.

The AI-Driven Solution Journey

Building this tool wasn't about following a master plan. It was about letting AI help solve each challenge as it emerged, iterating through problems that every graph database developer faces.

Iteration 1: Natural Language Query Interface

The Challenge: Graph query languages are complex and intimidating.

The AI Solution: Let the AI write the queries for me.

Instead of learning SPARQL syntax:

SELECT ?person ?age ?location 
WHERE {
  ?person a :Person .
  ?person :age ?age .
  ?person :location ?location .
  FILTER (?age > 30 && ?location = "London")
}

Just describe what you want:

💬 Find all people over 30 in London

The AI agent generates the appropriate query, executes it against Neptune, and provides insights about the results.

Iteration 2: Schema Discovery Agent

The Challenge: Users don't know what's in their own databases.

The AI Solution: Let AI automatically explore and map the database structure.

Traditional approach:

{
  "vertices": [
    {"label": "???", "properties": {"???": "???"}}
  ]
}

AI-powered approach:

🔍 AI discovering database structure...
✅ Schema discovery completed!
📄 Generated schema/user_schema.json with your database structure:
   - Found 3 entity types: Person, Company, Location
   - Found 5 relationship types: WORKS_FOR, LIVES_IN, KNOWS  
   - Discovered 15 properties across all entities
   - Extracted 4 RDF namespaces for SPARQL queries

The AI agent systematically explores the database using discovery queries, analyzes the structure, and generates a complete schema configuration file. No more manual database inspection.

Iteration 3: The Context Window Solution

The Challenge: What happens when your query returns 10,000 records but your AI context window can only handle 1,000?

The Naive Approach (that breaks):

Neptune Query → 10,000 records → AI Context → TOKEN OVERFLOW → 💥

The AI-Driven Solution: Dual-path architecture with intelligent CSV export.

User Experience:

💬 Your request: Find all people in London
🤖 AI: Found 1,247 people in London (showing first 50):
    [Rich table with sample results]

    I notice most work in tech industry. Would you like to explore by occupation?

💬 Export to CSV
🤖 AI: ✅ Exported all 1,247 records to london_people_20241025_223045.csv (1.2 MB)

The AI gets enough data to provide meaningful insights without crashing, while users get access to complete datasets through CSV export.

Iteration 4: Multi-Language Support

The Challenge: Neptune supports three different query languages with different syntax patterns.

The AI Solution: Template-based abstraction that lets one AI agent handle all languages.

class QueryLanguage(Enum):
    SPARQL = "sparql"
    GREMLIN = "gremlin" 
    OPENCYPHER = "opencypher"

# Language-specific AI instructions
templates/query_languages/
├── sparql_instructions.j2
├── gremlin_instructions.j2  
└── opencypher_instructions.j2

The same AI agent can now generate queries in SPARQL, Gremlin, or OpenCypher based on the database configuration, with specialized instructions for each language while sharing the same core architecture.

Why Strands Agent Framework?

The key to making this work was choosing the right AI framework. After evaluating several options, I chose the Strands Agent SDK for reliable tool calling:

from strands import tool

class AIQueryGenerator(BaseNeptuneAgent):
    @tool
    async def execute_neptune_query(self, query: str) -> Dict[str, Any]:
        """AI can execute queries like calling a native function"""
        return await self.query_service.execute_query(query, for_ai_context=True)

    @tool 
    async def export_to_csv(self, filename: Optional[str] = None) -> Dict[str, Any]:
        """AI can export results on demand"""  
        return self.query_service.export_last_results(filename)

Key Benefits:

Native @tool decorator for seamless AI-function integration
Async/await support for Neptune's HTTP API
Built-in streaming for real-time feedback
Reliable Bedrock integration

The AI agent can execute queries and export data as naturally as calling any Python function. No complex prompt engineering required — just tools that work.

The Context Window Problem & CSV Export Strategy

Here's a problem every AI developer faces: large datasets break AI context windows.

The solution isn't to limit query results — it's to be smart about what the AI sees versus what the user gets:

async def execute_query(self, query: str, for_ai_context: bool = False) -> Dict[str, Any]:
    """Dual-path query execution"""
    # Always store complete results
    complete_results = await self.neptune_client.execute_query(query)
    self.last_complete_results = complete_results

    if for_ai_context:
        # Truncate for AI - prevent token overflow
        ai_results = complete_results[:50]  # Smart limit
        return {"results": ai_results, "truncated": len(complete_results) > 50}

    return complete_results

Why This Works:

✅ AI gets enough data to understand patterns (50 records)
✅ AI provides meaningful insights without crashing
✅ Users get complete datasets via CSV export
✅ No token limits, no failures, best of both worlds

The CSV export isn't just a nice-to-have feature — it's the solution that makes AI-powered large dataset analysis practical.

Neptune Query Shell vs AWS Neptune MCP

AWS provides their own Neptune MCP server for tool-based query execution. Here's how they serve different needs:

Feature	AWS Neptune MCP	Neptune Query Shell	Best Use Case
Query Languages	✅ Gremlin, OpenCypher	✅ SPARQL, Gremlin, OpenCypher	When you need SPARQL support
Interface Style	Tool-based execution	Conversational AI	Different interaction models
Schema Access	✅ get_graph_schema tool	✅ AI auto-discovery + file generation	Both provide schema access
Result Processing	Raw JSON responses	Rich tables + AI insights	Need visualization
Data Export	❌ Not included	✅ Smart CSV export	Large datasets
Setup Complexity	Low (MCP tool config)	Low (terminal + schema config)	Both are easy to set up
Learning Curve	Low	Low	Both are beginner-friendly

Key Differentiator: Neptune Query Shell supports SPARQL queries and provides a conversational AI interface, while AWS Neptune MCP focuses on simple tool-based execution for Gremlin/OpenCypher.

AWS Neptune MCP excels at:

MCP workflow integration (call tools from AI assistants)
Simple query execution in existing AI applications
When you need basic Neptune access via MCP protocol

Neptune Query Shell excels at:

Neptune databases
Interactive exploration with AI guidance and insights
Learning graph databases through conversation
Large dataset analysis with export capabilities

Architecture Overview

Key Components:

AI Query Generator - Natural language → Query translation with result insights
Schema Discovery Agent - Automatic database exploration and schema generation
Query Execution Service - Dual-path result handling with context window management
Neptune Client - Multi-language query support with connection management

Why This Approach Still Matters

You might wonder: "Why not just use AWS's Neptune MCP server or write queries manually?" Here's why the conversational AI approach adds value:

Philosophy Differences:

Manual Querying: "Learn the syntax, write the query"
AWS Neptune MCP: "Here are tools to execute Gremlin/OpenCypher queries"
Neptune Query Shell: "Let's have a conversation about your data"

Real-World Benefits:

For Developers: Query databases without learning complex syntax
For Data Scientists: Get insights and complete datasets for analysis
For Learning: Understand graph databases by seeing AI-generated queries
For Teams: Mixed skill levels can all access graph data effectively

Plus, being open source means full customization, community improvements, no vendor lock-in, and learning opportunities.

Key Features in Action

1. Intelligent Result Display

Raw Neptune output:

{"results": {"bindings": [{"person": {"type": "uri", "value": "http://..."}}]}}

Neptune Query Shell output:

┌─────────────────┬─────┬──────────┬──────────────┐
│ Name            │ Age │ Location │ Company      │
├─────────────────┼─────┼──────────┼──────────────┤
│ Alice Johnson   │ 34  │ London   │ TechCorp     │
│ Bob Smith       │ 28  │ London   │ DataCorp     │
└─────────────────┴─────┴──────────┴──────────────┘

🤖 AI Insights: Most people in London work in tech (87%). 
   Average age is 31. Would you like to explore by industry?

2. Streaming AI Process

Watch the AI work through your request in real-time:

💬 Your request: Find the most connected users in our network

🤖 AI Thinking Process:
─────────────────────────
I need to find users with the most connections. Let me generate a query to count relationships per user...

🔍 Executing Neptune query...

Based on the results, I can see the connection patterns. Let me analyze this data...
─────────────────────────
🤖 Processing complete!

Real-World Impact

Since launching Neptune Query Shell, I've seen it solve real problems:

For Developers:

"I can finally explore our graph database without spending hours on SPARQL docs"
"The schema discovery saved me days of manual database inspection"
"My team can now query the graph database without learning query languages"

For Data Scientists:

"The CSV export lets me analyze large datasets in familiar tools"
"AI insights help me discover patterns I wouldn't have thought to look for"

For Learning:

"I'm actually learning SPARQL by seeing what the AI generates"
"The conversational interface makes graph databases approachable"

Try It Yourself

Ready to experience AI-powered graph querying?

🚀 Get Started: github.com/karthiks3000/neptune-query-shell

⭐ Star the repo if you find it useful

💬 Join the discussion: Share your Neptune challenges and see how the community can help

🤝 Contribute: Check out the issues tab for ways to improve the project

The README contains complete setup instructions and examples to get you querying in minutes.

The Bigger Picture

Graph databases are incredibly powerful but historically hard to use. The future isn't about replacing traditional querying — it's about giving developers multiple ways to interact with their data:

Manual queries for precise control
MCP tools for application integration
AI assistance for exploration and learning
Natural language for business users

Tools like Neptune Query Shell make graph data accessible to teams with mixed technical skills, while still providing the power and flexibility that experienced developers need.

The iterative, AI-driven development approach I used here — letting AI help solve each challenge as it emerged — is becoming a powerful pattern for building developer tools. Sometimes the best solutions come from asking "How can AI help?" at each step of the journey.

Chat with My Digital Twin: How I Built a Personal Website With a Local AI Chatbot!

Karthik Subramanian — Fri, 03 Oct 2025 01:06:30 +0000

AWS Builder Challenge #2 submission showcasing what's possible when you push beyond the requirements

The Strategic Skip: Why I Started from Day 4

As an experienced software engineer, I'll be honest—I almost skipped the AWS Builder Challenge entirely. "Build a personal website" seemed like another "Hello World" tutorial. But then I read the fine print: 7 days, Free Tier only, make it your own.

That's when it clicked. This wasn't about following instructions—it was about taking constraints and building something remarkable within them. You can check it out here before diving into the article.

The Complete 7-Day Journey
The full challenge provides a comprehensive introduction to cloud development:

Day 1: Secure Foundation - AWS Free Tier setup, MFA, IAM users, budget alerts
Day 2: Private Cloud Storage - S3 bucket creation with security best practices
Day 3: Web Content - HTML/CSS development, customizing templates, secure uploads
Day 4: Global Distribution - CloudFront CDN, solving the distance problem
Day 5: Professional Deployment - GitHub integration, Amplify deployment automation
Day 6: Secure Contact Form - Serverless contact forms with Lambda + SES
Day 7: Share your success - Writing and sharing your experience

I strategically skipped Days 1-4 since I already had AWS experience with these services. Days 1-3 covered account setup, S3, and static HTML - all foundational but familiar territory. Day 4's CloudFront was also something I'd implemented many times through CDK for other projects.

Instead, I jumped straight to Day 5 where things got interesting: modern deployment pipelines with Amplify.

For beginners, the first four days provide excellent foundations in AWS security, storage, web development, and global distribution. Don't skip them unless you're already comfortable with these concepts.

The Real Challenge: From Static to Interactive

Day 5: CI/CD with GitHub and Amplify - The New Territory
This is where the challenge got practical. Setting up GitHub integration with AWS Amplify through the console taught me something valuable: modern deployment pipelines should be boring.

The magic happens when you push code and everything just... works:

GitHub repository integration through the Amplify console
Automatic deployments triggered by every commit to main branch
Zero configuration - Amplify auto-detected my static HTML site
Built-in CDN - Same CloudFront performance, but managed automatically
HTTPS by default - No certificate management needed

The setup process was surprisingly straightforward:

"Deploy an app" in Amplify console
Connect GitHub repository with OAuth authorization
Auto-detect build settings (no amplify.yml needed for static sites)
Deploy and get instant HTTPS URL

Within minutes, I had the same global performance as my manual CloudFront setup, but with automatic deployments and a cleaner workflow.

Day 6: Interactive Contact Form - The Reality Check
Building a serverless contact form sounds simple until you consider:

Input validation and sanitization
Rate limiting and spam protection
Email delivery reliability
Error handling and user feedback
Accessibility compliance

I used AWS Lambda + SNS with the exact code provided in the challenge. Rather than reinventing the wheel, I followed the tutorial's implementation:

// Exact Lambda function code from Day 6 challenge
import json
import boto3

def lambda_handler(event, context):
    try:
        # Parse the form data from the request
        body = json.loads(event['body'])
        name = body.get('name', '')
        email = body.get('email', '')
        message = body.get('message', '')

        # Validate that all required fields are present
        if not all([name, email, message]):
            return {
                'statusCode': 400,
                'body': json.dumps({'error': 'Missing required fields'})
            }

        # Format the notification message
        notification_message = f"""Contact Form Submission

Name: {name}
Email: {email}

Message:
{message}"""

        # Send notification via SNS
        sns = boto3.client('sns')
        sns.publish(
            TopicArn='arn:aws:sns:us-east-1:123456789012:contact-form-notifications',
            Subject=f'Contact Form: {name}',
            Message=notification_message
        )

        # Return success response
        return {
            'statusCode': 200,
            'body': json.dumps({'message': 'Message sent successfully!'})
        }

    except Exception as e:
        # Return error response if anything goes wrong
        return {
            'statusCode': 500,
            'body': json.dumps({'error': 'Failed to send message'})
        }

The beauty was in its simplicity - the challenge provided a working solution that I could deploy immediately.

Beyond the Challenge: Building a Production Portfolio

Before diving into the AI innovation, let me showcase what I actually built as the foundation. While the challenge provided basic HTML templates, I went completely custom to create a production-ready portfolio that demonstrates serious frontend skills.
The Kiro Advantage: Spec-Driven Development
Here's where I have to give credit where it's due - Kiro IDE's spec-driven workflow was instrumental in transforming the basic AWS challenge template into something production-ready.

Instead of just "customizing" the provided HTML template, I used Kiro to architect a complete system.

What Kiro Generated:

7 detailed user stories with acceptance criteria (from "understand who Karthik is" to "chat with AI version")
Complete design system including dark theme color palettes, typography scales, and component specifications
17-step implementation plan systematically transforming basic template to production portfolio
Data architecture with structured models for experience, projects, skills, and certifications

From the actual Kiro requirements spec:

"This project involves creating an elegant, minimalist personal website for Karthik Subramanian, a Principal-level Software Engineer who excels in backend development but can also build beautiful frontend web applications. The website should be streamlined, to-the-point, and use a dark theme with scroll-based discovery instead of traditional navigation."

The Spec-Driven Transformation:
Rather than ad-hoc customization, Kiro mapped out systematic requirements like:

Requirement 3: "I want the website to demonstrate Karthik's frontend development skills through elegant design and smooth interactions"
Requirement 7: "I want to chat with an AI version of Karthik, so that I can have interactive conversations about his experience"
Each requirement came with detailed acceptance criteria and was mapped to specific implementation tasks. This meant every design decision was intentional and measurable.

The Result: What could have been a simple template customization became a comprehensive design system with proper color schemes, responsive breakpoints, accessibility standards, and even AI integration specifications.

This is the power of specification-driven development - instead of "making it look nice," I had a clear architectural plan that transformed a basic challenge template into a sophisticated portfolio platform.

Ofcourse it wasn't all AI generated, like my spanky new profile says -

"Master of AI diplomatic relations - can negotiate with AI to produce clean, deployable code with strategic prompt engineering."

Professional Design Architecture
Instead of using the basic template, I built a fully custom dark-theme portfolio with sophisticated visual design:

Cohesive dark color scheme using CSS custom properties for maintainability
Professional typography with Inter and JetBrains Mono fonts
Gradient backgrounds and subtle patterns throughout
Comprehensive hover animations and micro-interactions
Custom scrollbar styling for consistent branding

Accessibility-First Implementation
This wasn't just about making it "look good" - I implemented WCAG AA compliance from the ground up:

// Real accessibility features from my accessibility-enhancements.js
class AccessibilityEnhancer {
    setupKeyboardDetection() {
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Tab') {
                this.isKeyboardUser = true;
                document.body.classList.add('keyboard-navigation-active');
            }
        });
    }

    updateCurrentSection(section) {
        if (this.currentSection) {
            this.currentSection.removeAttribute('aria-current');
        }
        this.currentSection = section;
        section.setAttribute('aria-current', 'location');

        const sectionName = this.getSectionName(section);
        if (sectionName && this.isKeyboardUser) {
            this.announce(`Now viewing ${sectionName} section`);
        }
    }
}

Features implemented:

Skip navigation links with proper focus management
Screen reader announcements via ARIA live regions
Keyboard navigation detection and enhanced focus styles
Section tracking with aria-current for screen readers
Keyboard shortcuts (Alt + 1-6 for sections, Alt + H for home)
High contrast mode support for Windows accessibility
Reduced motion preferences respected throughout

Mobile-First Responsive Design
Built with mobile-first methodology and comprehensive breakpoint strategy:

/* Mobile-first responsive implementation from main.css */
@media (max-width: 640px) {
    .text-5xl { font-size: 2.25rem !important; }
    .py-20 { padding-top: 3rem !important; padding-bottom: 3rem !important; }

    /* Touch-friendly targets */
    a, button, [role="button"] {
        min-height: 48px;
        min-width: 48px;
        padding: 0.75rem;
    }
}

@media (min-width: 1025px) {
    .text-5xl { font-size: 3.5rem; }
    .hero-content { max-width: 1024px; }
}

Responsive features implemented:

Dynamic responsive classes - JavaScript adds mobile/tablet/desktop/large-desktop classes
Touch device detection with appropriate UI adjustments
Progressive typography scaling across all breakpoints
Content layout optimization for different screen sizes
Touch-friendly interface elements (minimum 44px targets)

Performance Optimizations
Every optimization implemented for Free Tier efficiency:

/* Performance optimizations from main.css */
.animate-on-scroll {
    will-change: transform, opacity;
    backface-visibility: hidden;
    perspective: 1000px;
}

.animation-complete {
    will-change: auto; /* Remove after animation for performance */
}

img {
    max-width: 100%;
    height: auto;
    aspect-ratio: attr(width) / attr(height); /* Prevent layout shift */
}

Performance features:

Image lazy loading with Intersection Observer
Animation performance optimizations using will-change and backface-visibility
Reduced animations on mobile to preserve battery life
CSS containment for better rendering performance
Font loading optimization with preconnect hints
Smooth scrolling with proper scroll-padding

Advanced UX Features
Interactive elements that enhance the user experience:

// Real scroll progress indicator from animations.js
function initScrollProgressIndicator() {
    const progressBar = document.createElement('div');
    progressBar.className = 'fixed top-0 left-0 h-1 bg-blue-400 z-50';
    progressBar.setAttribute('role', 'progressbar');
    progressBar.setAttribute('aria-label', 'Page scroll progress');

    function updateScrollProgress() {
        const scrollTop = window.scrollY;
        const scrollHeight = document.documentElement.scrollHeight - window.innerHeight;
        const scrollPercent = Math.min(100, Math.max(0, (scrollTop / scrollHeight) * 100));

        progressBar.style.width = `${scrollPercent}%`;
        progressBar.setAttribute('aria-valuenow', Math.round(scrollPercent));
    }

    window.addEventListener('scroll', requestAnimationFrame(updateScrollProgress));
}

Features implemented:

Scroll progress indicator with ARIA progressbar role for accessibility
Word rotation animation in hero tagline with layout shift prevention
Intersection Observer animations with staggered delays and performance cleanup
Interactive skills switching with keyboard navigation and ARIA states
Timeline animations for experience section with hover effects
Email template functionality - right-click on email links for quick templates
Touch device optimization with appropriate target sizes and feedback
Loading states and visual feedback for all interactive elements

Don't believe me? You can open devtools on the site and head over to the Lighthouse tab and kick off a new analysis. Here is the result from the last one I ran -

The Unique Twist: Local AI Chat Integration

Here's where I went completely off-script. The challenge wanted a personal website, but I thought: What if visitors could actually chat with an AI version of me?

Why Chrome's Built-in AI?

Most AI implementations require:
External API calls (costs money)
Server-side processing (not Free Tier friendly)
Complex authentication (user friction) Chrome's Gemini Nano runs entirely in the browser. Zero cost. Zero servers. Maximum privacy.

// Real AI detection code from my ai-manager.js
async detectAICapabilities() {
    this.log('🔍 Detecting AI capabilities...');

    try {
        if (typeof LanguageModel === 'undefined') {
            this.log('❌ LanguageModel API not available');
            this.logSetupInstructions();
            return false;
        }

        this.log('✅ LanguageModel API found');

        // Check availability
        const availability = await LanguageModel.availability();
        this.log('📊 AI availability:', availability);

        // Store capabilities
        this.capabilities = { available: availability };

        // Set appropriate state
        switch (availability) {
            case 'available':
                this.setState('available');
                return true;
            case 'downloadable':
                this.setState('downloadable');
                return true;
            case 'downloading':
                this.setState('downloading');
                this.startAvailabilityPolling();
                return true;
            case 'unavailable':
                this.setState('unavailable');
                return false;
            default:
                this.log('❌ Unknown availability status:', availability);
                this.setState('unavailable');
                return false;
        }

    } catch (error) {
        this.log('❌ Error detecting AI capabilities:', error);
        return false;
    }
}

The Technical Implementation Challenge
The real challenge was managing different AI states and providing appropriate UI feedback:

// Real state management from ai-manager.js
updateTeaserUI() {
    const teaserText = document.getElementById('ai-teaser-inline-text');
    const detectionLoading = document.getElementById('ai-detection-loading');
    const downloadingIndicator = document.getElementById('ai-downloading-indicator');
    const downloadBtn = document.getElementById('ai-download-btn');
    const chatReadyBtn = document.getElementById('ai-chat-ready-btn');

    if (!teaserText) return;

    // Update text message
    teaserText.textContent = this.getStateMessage();

    // Update indicators based on state
    this.hideElement(detectionLoading);
    this.hideElement(downloadingIndicator);
    this.hideElement(downloadBtn);
    this.hideElement(chatReadyBtn);

    switch (this.state) {
        case 'checking':
            this.showElement(detectionLoading);
            break;
        case 'downloadable':
            this.showElement(downloadBtn);
            break;
        case 'downloading':
            this.showElement(downloadingIndicator);
            break;
        case 'available':
            this.showElement(chatReadyBtn);
            break;
    }
}

The hardest part was getting the prompt to be both accurate and comprehensive. My solution: dynamic prompts built from real profile data:

// Real dynamic prompt system from ai-chat-interface.js
buildSystemPrompt() {
    const now = new Date();
    const currentDateTime = now.toLocaleString('en-US', {
        weekday: 'long', year: 'numeric', month: 'long', day: 'numeric',
        hour: '2-digit', minute: '2-digit', timeZoneName: 'short'
    });

    // Get data from global data.js variables - this is the key insight
    const personalData = typeof personalInfo !== 'undefined' ? personalInfo : {};
    const experienceData = typeof experience !== 'undefined' ? experience : [];
    const projectsData = typeof projects !== 'undefined' ? projects : [];
    const skillsData = typeof skills !== 'undefined' ? skills : {};

    return `You are Karthik Subramanian, responding in first person as yourself.

CURRENT CONTEXT:
- Current date and time: ${currentDateTime}
- You are responding to someone visiting your personal portfolio website

PERSONAL INFORMATION:
- Name: ${personalData.name || 'Karthik Subramanian'}
- Title: ${personalData.title || 'Senior Software Engineering Manager'}
- Current Company: Scholastic Inc.
- Bio: ${personalData.bio || ''}

PROFESSIONAL EXPERIENCE:
${experienceData.map(job => 
    `- ${job.position} at ${job.company} (${job.duration})
  ${job.description}
  Key achievements: ${job.achievements?.join(', ') || ''}
  Technologies: ${job.technologies?.join(', ') || ''}`
).join('\n\n')}

FEATURED PROJECTS:
${projectsData.filter(p => p.featured).map(project => 
    `- ${project.title}: ${project.description}
  Technologies: ${project.technologies?.join(', ') || ''}
  ${project.liveUrl ? `Live: ${project.liveUrl}` : ''}
  ${project.githubUrl ? `GitHub: ${project.githubUrl}` : ''}`
).join('\n\n')}

IMPORTANT GUIDELINES:
- Always respond in first person as Karthik
- Be conversational and personable, but professional
- Only provide information that is included in this profile
- If asked about something not in your profile, politely redirect
- Remember: You are Karthik having a conversation about your professional experience`;
}

Instead of hardcoded text, the AI gets live data from my profile - experience, projects, skills, even the current date for context. This means when I update my portfolio data, the AI automatically gets the latest information. Does it work well? You tell me ;)

Graceful Degradation Strategy
The AI chat is an enhancement, not a requirement.

Site works perfectly without AI (traditional contact form and static content)
AI features only activate when supported browser is detected
Graceful fallback to keyword-based responses when AI session creation fails
Clear messaging about browser requirements without breaking the experience

Production Polish: The Details That Matter

Accessibility First
The challenge didn't mention accessibility, but it should be table stakes:

<!-- Semantic HTML structure -->
<main id="main-content" tabindex="-1">
  <section aria-labelledby="hero-heading" role="banner">
    <h1 id="hero-heading">Karthik Subramanian</h1>
    <p id="hero-description">Backend systems architect...</p>
  </section>
</main>

<!-- Skip navigation for keyboard users -->
<nav aria-label="Skip navigation links" class="sr-only focus-within:not-sr-only">
  <a href="#main-content" class="skip-link">Skip to main content</a>
</nav>

<!-- Live regions for dynamic content -->
<div id="live-region" aria-live="polite" aria-atomic="true" class="sr-only"></div>

Performance Optimizations

Free Tier means every byte counts:
Image optimization with proper formats and sizes
Font subsetting to load only used characters
CSS purging with Tailwind's production build
JavaScript lazy loading for non-critical features
Resource hints for better loading performance

<!-- Preconnect to external domains -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<!-- Optimized font loading -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

<!-- Critical CSS inlined, non-critical deferred -->
<style>/* Critical CSS here */</style>
<link rel="preload" href="styles/main.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

Responsive Design Philosophy
Mobile-first, but desktop-optimized:

/* Base mobile styles */
.hero-content {
  padding: 2rem 1rem;
  text-align: center;
}

/* Progressive enhancement for larger screens */
@media (min-width: 768px) {
  .hero-content {
    padding: 4rem 2rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    text-align: left;
  }
}

@media (min-width: 1024px) {
  .hero-content {
    padding: 6rem 3rem;
    max-width: 1200px;
    margin: 0 auto;
  }
}

Key Takeaways

1. Constraints Spark Creativity
The Free Tier limitation forced innovative solutions. Local AI processing, optimized images, efficient caching—creativity born from constraints.
2. Skip Smart, Not Blindly
I skipped the basics I knew but thoroughly explored areas that were new. Day 4's CloudFront configuration taught me more than expected.
3. User Experience > Technical Prowess
The AI chat is cool, but the site works perfectly without it. Progressive enhancement should be our default approach.
4. Modern Web Standards Matter
Accessibility, performance, and responsive design aren't optional anymore. Build them in from day one.
5. Ship Fast, Iterate Faster
The 7-day constraint prevented perfectionism. Sometimes "good enough to ship" is exactly what you need.

The Results
The final website features:

⚡ Sub-2-second load times globally via CloudFront
🤖 Local AI chat with personality-matched responses
♿ WCAG AA compliance with full keyboard navigation
📱 Responsive design that works on any device
🔒 Security headers and proper HTTPS enforcement
📈 Performance scores of 90 on all Lighthouse metrics

Final Thoughts

The AWS Builder Challenge succeeded in ways the organizers probably didn't expect. It wasn't about learning AWS basics—it was about rediscovering the joy of building within constraints.

For experienced developers considering similar challenges: don't skip them entirely. Instead, use them as opportunities to explore adjacent technologies, implement best practices you've been meaning to try, or push the boundaries of what's possible within the given constraints.

The best part? Everything runs on AWS Free Tier. Zero ongoing costs for a production-ready personal site with AI capabilities.

Source Code: Available on GitHub
Live Site

Building a multiplayer TriviaSnake game with Amazon Q Developer!

Karthik Subramanian — Fri, 03 Oct 2025 00:13:48 +0000

Chat with My Digital Twin: How I Built an AI Version of Myself You Can Interview

AWS Builder Challenge #2 submission showcasing what's possible when you push beyond the requirements

The Strategic Skip: Why I Started from Day 4

That's when it clicked. This wasn't about following instructions—it was about taking constraints and building something remarkable within them.

The Complete 7-Day Journey

The full challenge provides a comprehensive introduction to cloud development:

Day 1: Secure Foundation - AWS Free Tier setup, MFA, IAM users, budget alerts
Day 2: Private Cloud Storage - S3 bucket creation with security best practices
Day 3: Web Content - HTML/CSS development, customizing templates, secure uploads
Day 4: Global Distribution - CloudFront CDN, solving the distance problem
Day 5: CI/CD Pipeline - GitHub integration, Amplify deployment automation
Day 6: Interactive Features - Serverless contact forms with Lambda + SES
Day 7: Community Showcase - Writing and sharing your experience

Instead, I jumped straight to Day 5 where things got interesting: modern deployment pipelines with Amplify.

The Real Challenge: From Static to Interactive

Day 5: CI/CD with GitHub and Amplify - The New Territory

This is where the challenge got practical. Setting up GitHub integration with AWS Amplify through the console taught me something valuable: modern deployment pipelines should be boring.

The magic happens when you push code and everything just... works:

GitHub repository integration through the Amplify console
Automatic deployments triggered by every commit to main branch
Zero configuration - Amplify auto-detected my static HTML site
Built-in CDN - Same CloudFront performance, but managed automatically
HTTPS by default - No certificate management needed

The setup process was surprisingly straightforward:

"Deploy an app" in Amplify console
Connect GitHub repository with OAuth authorization
Auto-detect build settings (no amplify.yml needed for static sites)
Deploy and get instant HTTPS URL

Within minutes, I had the same global performance as my manual CloudFront setup, but with automatic deployments and a cleaner workflow.

Day 6: Interactive Contact Form - The Reality Check

Building a serverless contact form sounds simple until you consider:

Input validation and sanitization
Rate limiting and spam protection
Email delivery reliability
Error handling and user feedback
Accessibility compliance

I used AWS Lambda + SES with the exact code provided in the challenge. Rather than reinventing the wheel, I followed the tutorial's implementation:

// Exact Lambda function code from Day 6 challenge
import json
import boto3

def lambda_handler(event, context):
    try:
        # Parse the form data from the request
        body = json.loads(event['body'])
        name = body.get('name', '')
        email = body.get('email', '')
        message = body.get('message', '')

        # Validate that all required fields are present
        if not all([name, email, message]):
            return {
                'statusCode': 400,
                'body': json.dumps({'error': 'Missing required fields'})
            }

        # Format the notification message
        notification_message = f"""Contact Form Submission

Name: {name}
Email: {email}

Message:
{message}"""

        # Send notification via SNS
        sns = boto3.client('sns')
        sns.publish(
            TopicArn='arn:aws:sns:us-east-1:123456789012:contact-form-notifications',
            Subject=f'Contact Form: {name}',
            Message=notification_message
        )

        # Return success response
        return {
            'statusCode': 200,
            'body': json.dumps({'message': 'Message sent successfully!'})
        }

    except Exception as e:
        # Return error response if anything goes wrong
        return {
            'statusCode': 500,
            'body': json.dumps({'error': 'Failed to send message'})
        }

The beauty was in its simplicity - the challenge provided a working solution that I could deploy immediately.

Beyond the Challenge: Building a Production Portfolio

The Kiro Advantage: Spec-Driven Development

Here's where I have to give credit where it's due - Kiro IDE's spec-driven workflow was instrumental in transforming the basic AWS challenge template into something production-ready.

Instead of just "customizing" the provided HTML template, I used Kiro to architect a complete system:

What Kiro Generated:

7 detailed user stories with acceptance criteria (from "understand who Karthik is" to "chat with AI version")
Complete design system including dark theme color palettes, typography scales, and component specifications
17-step implementation plan systematically transforming basic template to production portfolio
Data architecture with structured models for experience, projects, skills, and certifications

From the actual Kiro requirements spec:

"This project involves creating an elegant, minimalist personal website for Karthik Subramanian, a Principal-level Software Engineer who excels in backend development but can also build beautiful frontend web applications. The website should be streamlined, to-the-point, and use a dark theme with scroll-based discovery instead of traditional navigation."

The Spec-Driven Transformation:

Rather than ad-hoc customization, Kiro mapped out systematic requirements like:

Requirement 3: "I want the website to demonstrate Karthik's frontend development skills through elegant design and smooth interactions"
Requirement 7: "I want to chat with an AI version of Karthik, so that I can have interactive conversations about his experience"

Each requirement came with detailed acceptance criteria and was mapped to specific implementation tasks. This meant every design decision was intentional and measurable.

The Result: What could have been a simple template customization became a comprehensive design system with proper color schemes, responsive breakpoints, accessibility standards, and even AI integration specifications.

This is the power of specification-driven development - instead of "making it look nice," I had a clear architectural plan that transformed a basic challenge template into a sophisticated portfolio platform.

Professional Design Architecture

Instead of using the basic template, I built a fully custom dark-theme portfolio with sophisticated visual design:

Cohesive dark color scheme using CSS custom properties for maintainability
Professional typography with Inter and JetBrains Mono fonts
Gradient backgrounds and subtle patterns throughout
Comprehensive hover animations and micro-interactions
Custom scrollbar styling for consistent branding

Accessibility-First Implementation

This wasn't just about making it "look good" - I implemented WCAG AA compliance from the ground up:

// Real accessibility features from my accessibility-enhancements.js
class AccessibilityEnhancer {
    setupKeyboardDetection() {
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Tab') {
                this.isKeyboardUser = true;
                document.body.classList.add('keyboard-navigation-active');
            }
        });
    }

    updateCurrentSection(section) {
        if (this.currentSection) {
            this.currentSection.removeAttribute('aria-current');
        }
        this.currentSection = section;
        section.setAttribute('aria-current', 'location');

        const sectionName = this.getSectionName(section);
        if (sectionName && this.isKeyboardUser) {
            this.announce(`Now viewing ${sectionName} section`);
        }
    }
}

Features implemented:

Skip navigation links with proper focus management
Screen reader announcements via ARIA live regions
Keyboard navigation detection and enhanced focus styles
Section tracking with aria-current for screen readers
Keyboard shortcuts (Alt + 1-6 for sections, Alt + H for home)
High contrast mode support for Windows accessibility
Reduced motion preferences respected throughout

Mobile-First Responsive Design

Built with mobile-first methodology and comprehensive breakpoint strategy:

/* Mobile-first responsive implementation from main.css */
@media (max-width: 640px) {
    .text-5xl { font-size: 2.25rem !important; }
    .py-20 { padding-top: 3rem !important; padding-bottom: 3rem !important; }

    /* Touch-friendly targets */
    a, button, [role="button"] {
        min-height: 48px;
        min-width: 48px;
        padding: 0.75rem;
    }
}

@media (min-width: 1025px) {
    .text-5xl { font-size: 3.5rem; }
    .hero-content { max-width: 1024px; }
}

Responsive features implemented:

Dynamic responsive classes - JavaScript adds mobile/tablet/desktop/large-desktop classes
Touch device detection with appropriate UI adjustments
Progressive typography scaling across all breakpoints
Content layout optimization for different screen sizes
Touch-friendly interface elements (minimum 44px targets)

Performance Optimizations

Every optimization implemented for Free Tier efficiency:

/* Performance optimizations from main.css */
.animate-on-scroll {
    will-change: transform, opacity;
    backface-visibility: hidden;
    perspective: 1000px;
}

.animation-complete {
    will-change: auto; /* Remove after animation for performance */
}

img {
    max-width: 100%;
    height: auto;
    aspect-ratio: attr(width) / attr(height); /* Prevent layout shift */
}

Performance features:

Image lazy loading with Intersection Observer
Animation performance optimizations using will-change and backface-visibility
Reduced animations on mobile to preserve battery life
CSS containment for better rendering performance
Font loading optimization with preconnect hints
Smooth scrolling with proper scroll-padding

Advanced UX Features

Interactive elements that enhance the user experience:

// Real scroll progress indicator from animations.js
function initScrollProgressIndicator() {
    const progressBar = document.createElement('div');
    progressBar.className = 'fixed top-0 left-0 h-1 bg-blue-400 z-50';
    progressBar.setAttribute('role', 'progressbar');
    progressBar.setAttribute('aria-label', 'Page scroll progress');

    function updateScrollProgress() {
        const scrollTop = window.scrollY;
        const scrollHeight = document.documentElement.scrollHeight - window.innerHeight;
        const scrollPercent = Math.min(100, Math.max(0, (scrollTop / scrollHeight) * 100));

        progressBar.style.width = `${scrollPercent}%`;
        progressBar.setAttribute('aria-valuenow', Math.round(scrollPercent));
    }

    window.addEventListener('scroll', requestAnimationFrame(updateScrollProgress));
}

Features implemented:

Scroll progress indicator with ARIA progressbar role for accessibility
Word rotation animation in hero tagline with layout shift prevention
Intersection Observer animations with staggered delays and performance cleanup
Interactive skills switching with keyboard navigation and ARIA states
Timeline animations for experience section with hover effects
Email template functionality - right-click on email links for quick templates
Touch device optimization with appropriate target sizes and feedback
Loading states and visual feedback for all interactive elements

The Unique Twist: Local AI Chat Integration

Here's where I went completely off-script. The challenge wanted a personal website, but I thought: What if visitors could actually chat with an AI version of me?

Why Chrome's Built-in AI?

Most AI implementations require:

External API calls (costs money)
Server-side processing (not Free Tier friendly)
Complex authentication (user friction)

Chrome's Gemini Nano runs entirely in the browser. Zero cost. Zero servers. Maximum privacy.

// Real AI detection code from my ai-manager.js
async detectAICapabilities() {
    this.log('🔍 Detecting AI capabilities...');

    try {
        if (typeof LanguageModel === 'undefined') {
            this.log('❌ LanguageModel API not available');
            this.logSetupInstructions();
            return false;
        }

        this.log('✅ LanguageModel API found');

        // Check availability
        const availability = await LanguageModel.availability();
        this.log('📊 AI availability:', availability);

        // Store capabilities
        this.capabilities = { available: availability };

        // Set appropriate state
        switch (availability) {
            case 'available':
                this.setState('available');
                return true;
            case 'downloadable':
                this.setState('downloadable');
                return true;
            case 'downloading':
                this.setState('downloading');
                this.startAvailabilityPolling();
                return true;
            case 'unavailable':
                this.setState('unavailable');
                return false;
            default:
                this.log('❌ Unknown availability status:', availability);
                this.setState('unavailable');
                return false;
        }

    } catch (error) {
        this.log('❌ Error detecting AI capabilities:', error);
        return false;
    }
}

The Technical Implementation Challenge

The real challenge was managing different AI states and providing appropriate UI feedback:

// Real state management from ai-manager.js
updateTeaserUI() {
    const teaserText = document.getElementById('ai-teaser-inline-text');
    const detectionLoading = document.getElementById('ai-detection-loading');
    const downloadingIndicator = document.getElementById('ai-downloading-indicator');
    const downloadBtn = document.getElementById('ai-download-btn');
    const chatReadyBtn = document.getElementById('ai-chat-ready-btn');

    if (!teaserText) return;

    // Update text message
    teaserText.textContent = this.getStateMessage();

    // Update indicators based on state
    this.hideElement(detectionLoading);
    this.hideElement(downloadingIndicator);
    this.hideElement(downloadBtn);
    this.hideElement(chatReadyBtn);

    switch (this.state) {
        case 'checking':
            this.showElement(detectionLoading);
            break;
        case 'downloadable':
            this.showElement(downloadBtn);
            break;
        case 'downloading':
            this.showElement(downloadingIndicator);
            break;
        case 'available':
            this.showElement(chatReadyBtn);
            break;
    }
}

The hardest part was getting the prompt to be both accurate and comprehensive. My solution: dynamic prompts built from real profile data:

// Real dynamic prompt system from ai-chat-interface.js
buildSystemPrompt() {
    const now = new Date();
    const currentDateTime = now.toLocaleString('en-US', {
        weekday: 'long', year: 'numeric', month: 'long', day: 'numeric',
        hour: '2-digit', minute: '2-digit', timeZoneName: 'short'
    });

    // Get data from global data.js variables - this is the key insight
    const personalData = typeof personalInfo !== 'undefined' ? personalInfo : {};
    const experienceData = typeof experience !== 'undefined' ? experience : [];
    const projectsData = typeof projects !== 'undefined' ? projects : [];
    const skillsData = typeof skills !== 'undefined' ? skills : {};

    return `You are Karthik Subramanian, responding in first person as yourself.

CURRENT CONTEXT:
- Current date and time: ${currentDateTime}
- You are responding to someone visiting your personal portfolio website

PERSONAL INFORMATION:
- Name: ${personalData.name || 'Karthik Subramanian'}
- Title: ${personalData.title || 'Senior Software Engineering Manager'}
- Current Company: Scholastic Inc.
- Bio: ${personalData.bio || ''}

PROFESSIONAL EXPERIENCE:
${experienceData.map(job => 
    `- ${job.position} at ${job.company} (${job.duration})
  ${job.description}
  Key achievements: ${job.achievements?.join(', ') || ''}
  Technologies: ${job.technologies?.join(', ') || ''}`
).join('\n\n')}

FEATURED PROJECTS:
${projectsData.filter(p => p.featured).map(project => 
    `- ${project.title}: ${project.description}
  Technologies: ${project.technologies?.join(', ') || ''}
  ${project.liveUrl ? `Live: ${project.liveUrl}` : ''}
  ${project.githubUrl ? `GitHub: ${project.githubUrl}` : ''}`
).join('\n\n')}

IMPORTANT GUIDELINES:
- Always respond in first person as Karthik
- Be conversational and personable, but professional
- Only provide information that is included in this profile
- If asked about something not in your profile, politely redirect
- Remember: You are Karthik having a conversation about your professional experience`;
}

Instead of hardcoded text, the AI gets live data from my profile - experience, projects, skills, even the current date for context. This means when I update my portfolio data, the AI automatically gets the latest information. Does it work well? You tell me ;)

Graceful Degradation Strategy

The AI chat is an enhancement, not a requirement. For unsupported browsers, I implemented keyword-based responses:

// Real fallback response logic from ai-chat-interface.js
generateResponse(userMessage) {
    const message = userMessage.toLowerCase();

    if (message.includes('experience') || message.includes('work') || message.includes('job')) {
        return "I'm currently a Senior Software Engineering Manager at Scholastic Inc., where I lead technical teams and drive software architecture decisions. I have over 13 years of experience in software development, from full-stack development to technical leadership roles.";
    }

    if (message.includes('skills') || message.includes('technology') || message.includes('tech')) {
        return "My core expertise spans backend systems (Node.js, Python, Java), cloud architecture (AWS, serverless), and frontend development (JavaScript, React, CSS). I specialize in building scalable systems and leading technical teams.";
    }

    if (message.includes('projects') || message.includes('portfolio')) {
        return "I've built several interesting projects including a multiplayer TriviaSnake game using AWS and WebSockets, comprehensive AWS serverless tutorials, and this interactive portfolio website. You can check out my GitHub for more projects!";
    }

    // Default response
    return "That's a great question! I'd be happy to share more about my experience in software engineering, technical leadership, or any of my projects. Feel free to ask about my work at Scholastic, my AWS expertise, or anything else you'd like to know!";
}

The Progressive Enhancement Approach:

Site works perfectly without AI (traditional contact form and static content)
AI features only activate when supported browser is detected
Graceful fallback to keyword-based responses when AI session creation fails
Clear messaging about browser requirements without breaking the experience

Production Polish: The Details That Matter

Accessibility First

The challenge didn't mention accessibility, but it should be table stakes:

<!-- Semantic HTML structure -->
<main id="main-content" tabindex="-1">
  <section aria-labelledby="hero-heading" role="banner">
    <h1 id="hero-heading">Karthik Subramanian</h1>
    <p id="hero-description">Backend systems architect...</p>
  </section>
</main>

<!-- Skip navigation for keyboard users -->
<nav aria-label="Skip navigation links" class="sr-only focus-within:not-sr-only">
  <a href="#main-content" class="skip-link">Skip to main content</a>
</nav>

<!-- Live regions for dynamic content -->
<div id="live-region" aria-live="polite" aria-atomic="true" class="sr-only"></div>

Performance Optimizations

Free Tier means every byte counts:

Image optimization with proper formats and sizes
Font subsetting to load only used characters
CSS purging with Tailwind's production build
JavaScript lazy loading for non-critical features
Resource hints for better loading performance

<!-- Preconnect to external domains -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<!-- Optimized font loading -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

<!-- Critical CSS inlined, non-critical deferred -->
<style>/* Critical CSS here */</style>
<link rel="preload" href="styles/main.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

Responsive Design Philosophy

Mobile-first, but desktop-optimized:

/* Base mobile styles */
.hero-content {
  padding: 2rem 1rem;
  text-align: center;
}

/* Progressive enhancement for larger screens */
@media (min-width: 768px) {
  .hero-content {
    padding: 4rem 2rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    text-align: left;
  }
}

@media (min-width: 1024px) {
  .hero-content {
    padding: 6rem 3rem;
    max-width: 1200px;
    margin: 0 auto;
  }
}

Key Takeaways for Fellow Experienced Devs

1. Constraints Spark Creativity

The Free Tier limitation forced innovative solutions. Local AI processing, optimized images, efficient caching—creativity born from constraints.

2. Skip Smart, Not Blindly

I skipped the basics I knew but thoroughly explored areas that were new. Day 4's CloudFront configuration taught me more than expected.

3. User Experience > Technical Prowess

The AI chat is cool, but the site works perfectly without it. Progressive enhancement should be our default approach.

4. Modern Web Standards Matter

Accessibility, performance, and responsive design aren't optional anymore. Build them in from day one.

5. Ship Fast, Iterate Faster

The 7-day constraint prevented perfectionism. Sometimes "good enough to ship" is exactly what you need.

The Results

The final website features:

⚡ Sub-2-second load times globally via CloudFront
🤖 Local AI chat with personality-matched responses
♿ WCAG AA compliance with full keyboard navigation
📱 Responsive design that works on any device
🔒 Security headers and proper HTTPS enforcement
📈 Performance scores of 90 on all Lighthouse metrics

Live site: https://main.d10rgge0ny3m7sv.amplifyapp.com/

Screenshot needed: Full homepage view showing the hero section with profile photo, AI teaser card, and overall dark theme design

Visual Showcase

Hero Section with AI Integration

The hero section showcasing the professional dark theme design with profile photo, inspiring quote, and the innovative "Wanna know more about me?" AI teaser card that detects Chrome AI capabilities

AI Superpowers Section

The "AI Superpowers" section displaying four professionally designed cards: AI Whisperer (Cline, GitHub Copilot, Claude), Context Curator (AWS Bedrock, PostgreSQL), Local AI Pioneer (Chrome AI, Gemini Nano), and AI Workflow Orchestrator (Step Functions, Bedrock)

Technical Skills Showcase

The "Digital Toolbox" section highlighting programming languages, frameworks, and extensive AWS services expertise with color-coded skill badges demonstrating production-ready technical capabilities

Responsive Design & Accessibility
The site implements mobile-first responsive design with WCAG AA compliance, keyboard navigation support, skip links, and semantic HTML structure throughout all sections

Final Thoughts

The AWS Builder Challenge succeeded in ways the organizers probably didn't expect. It wasn't about learning AWS basics—it was about rediscovering the joy of building within constraints.

For experienced developers considering similar challenges: don't skip them entirely. Instead, use them as opportunities to explore adjacent technologies, implement best practices you've been meaning to try, or push the boundaries of what's possible within the given constraints.

The best part? Everything runs on AWS Free Tier. Zero ongoing costs for a production-ready personal site with AI capabilities.

What constraints will spark your next creative breakthrough?

About the Author: Karthik Subramanian is a Principal Software Engineer and AWS Community Builder with 10+ years of experience building scalable systems. When not writing code, he's chasing twin toddlers, perfecting his espresso technique, or exploring Waterloo with his drone.

Technical Stack: AWS (CloudFront, Amplify, Lambda, SES), Chrome AI, Tailwind CSS, Vanilla JavaScript
Source Code: Available on GitHub

cloud-launch-challenge-1 #aws #ai #webdevelopment #accessibility

[Boost]

Karthik Subramanian — Thu, 14 Aug 2025 13:46:12 +0000

Karthik Subramanian for AWS Community Builders

Jun 21 '25

Building a multiplayer TriviaSnake game with Amazon Q Developer!

#aws #ai #lambda #apigateway

Comments

5 min read

Building a multiplayer TriviaSnake game with Amazon Q Developer!

Karthik Subramanian — Sat, 21 Jun 2025 20:24:15 +0000

Hey there, coffee lovers and tech enthusiasts! Imagine sipping your favorite brew while effortlessly building a website with the help of Amazon Q Developer. Well, that's exactly what I did. In this blog, I'll take you on a casual stroll through my adventure of creating a browser game using React, S3, DynamoDB, Lambda, API Gateway, and Cognito. Along the way, I'll share how the Amazon Q Developer VS Code integration was like a virtual barista, making my development process as smooth as a latte. So, grab another cup of coffee, get comfortable, and let's dive into the world of coding with Amazon Q Developer!

Buckle up for a thrilling adventure with Trivia Snake!
Imagine a classic snake game, but with the added excitement of trivia questions. That's what you'll get with my latest creation! As you guide your snake across the screen, you'll encounter trivia questions on the left side. Eating the letter corresponding to the correct answer will cause it to shrink and take you to the next question, but don’t take too long cause it’ll grow every 3 seconds!
But here's the best part: you get to be the architect of your own adventure! With easy-to-use tools, you can create your own trivia questions and build a unique questionnaire. Whether you're a history buff, a science enthusiast, or a pop culture junkie, you can tailor the game to your interests.
And the cherry on top? It can be deployed and hosted for free on your aws account!
Check it out here!

Architecture

React: This is the game's front end.
Cloudfront: Utilized for content delivery, in this case the web page.
API Gateway: It is utilized to create a RESTful API for the game to get/create adventures, save scores and get the leaderboard. Also leveraged websockets for the multiplayer functionality
Lambda: This is the game's backend where the API logic is implemented.
DynamoDB: It is used for storing game data and multiplayer game session info
Amazon Cognito: This is used for user authentication and authorization.
S3: Used for storing the FE code & game assets.
Bedrock: Managed AI service that allows leveraging Claude Haiku 3.5 for the AI features when creating a custom adventure

Amazon Q Developer
From the moment I conceived the idea of the Trivia Snake game, Amazon Q Developer stepped in as my invaluable guide. It provided me with incredible insights on how to bring my vision to life using AWS services.
I started by describing my game concept to Amazon Q Developer. It promptly suggested a suitable architecture encompassing React for the front end, API Gateway and Lambda for the backend, DynamoDB for data storage, Amazon Cognito for user authentication, S3 for asset storage, and CloudFront for content delivery.
As I delved deeper into the development process, Amazon Q Developer continued to assist me at every turn. It generated code snippets for Lambda functions, API Gateway endpoints, and DynamoDB tables, saving me a significant amount of time and effort.
But Amazon Q Developer's contributions didn't stop there. It also guided me in setting up the infrastructure using CloudFormation. I was amazed at how effortlessly it handled the creation of resources and associated permissions.
Throughout the development journey, I constantly engaged in a back-and-forth dialogue with Amazon Q Developer. I would describe the functionality I wanted to implement, and it would suggest the most appropriate AWS services and provide code examples. This collaboration allowed me to not only develop the front-end code in React but also implement the Lambda functions and configure the entire infrastructure.
But the real showstopper was the autonomous agent you could access by typing "/Dev" into the chat before making your request. This is where the AI truly showed its power. I could literally ask it to do something, walk away to make a cup of coffee, and when I came back, it had completed 90-95% of the changes. In many cases, I could simply accept the modifications and watch them take effect in real time, without having to lift a finger. Of course, there were still a few minor errors here and there that I needed to fix, but that was to be expected. What blew my mind was that the AI could make changes to the user interface, the API layer, the lambda functions, and even the cloud formation template, all in order to implement a complex request. It was like having my very own personal coding sidekick!
Heres an example -

Here is an example where Amazon Q Developer nailed it by modifying the react code, my lambda function & the cloudformation template all at once

WOOOTTTT :O

You can checkout how accurate it was by logging in and playing the Trivia ;)
I didn't stop there with the AI sauce, give folks a free form text field and you are bound to see a few inappropriate entries, which is why I added a profanity check on the Create Adventure button that will prevent any submissions that Claude Haiku deems inappropriate for all ages -

Where it shined!

I wanted to see if I could really implement something I had absolutely no idea how to do & lean completely on its Amazon Q Developer's guidance for implementation - Multiplayer Mode!
While this was the part that took the longest to implement ( a grand total of 2 days), it would have been atleast a week of trial and error and frustrated burn outs if I didn't have my handy sidekick to implement whole feature sets from UI changes to typescript lambda code & dynamodb table structures. Despite no experience whatesover with websockets I had a functioning multiplayer game that allowed any number of players to attempt the Trivia Snake questions together one question at a time.

It ain't perfect!
There were also some instances where it just forgot to give me a file that it had created. In the example below I had asked it to move the Adventure creation logic into its own component, and while it did implement it correctly, it forgot to actually give me the file. I had to prompt it again to get it.

There were a few instances were it said it did something but when I looked at the code it had implemented that piece of logic was missing. Although this seemed to only happen when I asked it to do a lot of things at once & just like an overburdened assistant it dropped the ball on one of the things.

Conclusion
I LOVE IT! It empowered a backend dev like me to whip up a react web game with features like sign up, sign in, gameplay, leaderboard, quiz authoring, AI, multiplayer AND deploy it with infra-as-code with probably only 10 - 12 hours invested over the span of a few days!

Github link
Game link

Building a multiplayer TriviaSnake game with Amazon Q Developer!

Karthik Subramanian — Sat, 21 Jun 2025 20:24:15 +0000

Architecture

Here is an example where Amazon Q Developer nailed it by modifying the react code, my lambda function & the cloudformation template all at once

WOOOTTTT :O

Where it shined!

Github link
Game link

🚀Rapid Learnings from Rapid Prototyping🚀

Karthik Subramanian — Sun, 15 Jun 2025 11:11:04 +0000

A Week-Long Journey into AI Prototyping, Feedback, and Feasibility

A short while ago, we embarked on a rapid prototyping project to explore how AI could provide contextual and timely assistance to users. What started as a one-day build evolved into a week of intense learning about development, user-centric design, and the practical realities of building AI-powered features.

Here is the complete journey.

Part 1: The Power of Lean & Fast
Our first major insight was the incredible impact of a small, focused team. We assembled a nimble group: just one product owner, one developer, and one UX researcher. The mission was to go from initial idea to a functional prototype in a single day.

And we did it! Leveraging powerful AI coding assistance from Cline and Claude Sonnet 3.7, we built out a fully functioning prototype. The stack included a React frontend, API Gateway & AWS Lambda for the backend, DynamoDB for storage, and AWS Bedrock for the AI magic, all with infrastructure spun up using AWS CDK. It was an amazing demonstration of what a dedicated trio can achieve with the right tools and a tight deadline.

Part 2: When & How AI can help
We initially envisioned AI providing feedback after students completed their work. However, focusing on our users – young students – highlighted that the most impactful assistance occurs during the activity itself.
This insight led us to design an AI tutor for real-time, in-activity support. But how do you ensure such an AI truly helps a young mind learn and not just get answers? To quote my 🤖 sidekick -

𝘛𝘳𝘶𝘦 𝘸𝘪𝘴𝘥𝘰𝘮 𝘪𝘯 𝘈𝘐 𝘭𝘪𝘦𝘴 𝘯𝘰𝘵 𝘪𝘯 𝘵𝘩𝘦 𝘴𝘰𝘱𝘩𝘪𝘴𝘵𝘪𝘤𝘢𝘵𝘪𝘰𝘯 𝘰𝘧 𝘢𝘭𝘨𝘰𝘳𝘪𝘵𝘩𝘮𝘴, 𝘣𝘶𝘵 𝘪𝘯 𝘵𝘩𝘦 𝘱𝘳𝘰𝘧𝘰𝘶𝘯𝘥 𝘶𝘯𝘥𝘦𝘳𝘴𝘵𝘢𝘯𝘥𝘪𝘯𝘨 𝘰𝘧 𝘩𝘶𝘮𝘢𝘯 𝘯𝘦𝘦𝘥—𝘬𝘯𝘰𝘸𝘪𝘯𝘨 𝘱𝘳𝘦𝘤𝘪𝘴𝘦𝘭𝘺 𝘸𝘩𝘦𝘯 𝘵𝘰 𝘴𝘱𝘦𝘢𝘬 𝘢𝘯𝘥 𝘸𝘩𝘦𝘯 𝘵𝘰 𝘭𝘪𝘴𝘵𝘦𝘯, 𝘸𝘩𝘦𝘯 𝘵𝘰 𝘨𝘶𝘪𝘥𝘦 𝘢𝘯𝘥 𝘸𝘩𝘦𝘯 𝘵𝘰 𝘴𝘵𝘦𝘱 𝘣𝘢𝘤𝘬, 𝘤𝘳𝘦𝘢𝘵𝘪𝘯𝘨 𝘮𝘰𝘮𝘦𝘯𝘵𝘴 𝘰𝘧 𝘨𝘦𝘯𝘶𝘪𝘯𝘦 𝘪𝘯𝘴𝘪𝘨𝘩𝘵 𝘵𝘩𝘢𝘵 𝘵𝘳𝘢𝘯𝘴𝘧𝘰𝘳𝘮 𝘤𝘰𝘯𝘧𝘶𝘴𝘪𝘰𝘯 𝘪𝘯𝘵𝘰 𝘤𝘭𝘢𝘳𝘪𝘵𝘺.

Guided by this philosophy, our AI tutor aims to:
𝗣𝗲𝗿𝘀𝗼𝗻𝗮𝗹𝗶𝘇𝗲 𝘀𝘂𝗽𝗽𝗼𝗿𝘁: Using age-appropriate language and considering reading levels.
𝗔𝗱𝗮𝗽𝘁 𝗶𝘁𝘀 𝗴𝘂𝗶𝗱𝗮𝗻𝗰𝗲: Offering a spectrum of help – sometimes "guiding" with direct input, other times "stepping back" with subtle hints to nudge students toward their own discovery, truly aiming to turn confusion into clarity.
𝗜𝗻𝘁𝗲𝗹𝗹𝗶𝗴𝗲𝗻𝗰𝗲 𝗘𝗺𝗲𝗿𝗴𝗲𝘀 𝗳𝗿𝗼𝗺 𝗣𝗮𝘁𝘁𝗲𝗿𝗻 𝗥𝗲𝗰𝗼𝗴𝗻𝗶𝘁𝗶𝗼𝗻: The most effective AI assistants don't just respond to explicit requests for help. They observe user behavior patterns and proactively offer assistance when it's most needed. Our state detection algorithms demonstrate how to analyze user interactions and make intelligent inferences about when intervention would be helpful.

Part 3: Full Stack, Full Speed

Initially, our plan was fairly standard for rapid prototyping: start with a React UI, using mock data and simulated interactions. The idea was to get a feel for the UX quickly and iterate. But with a powerful 🤖 at our fingertips, what if going full stack wasn't the bottleneck we assumed? Our AI power-duo helped get a basic end-to-end backend system, including an evaluation endpoint, running in about 30 minutes! This speed was phenomenal, but what it unlocked was even more transformative: truly rapid, multi-faceted iteration. So, while 🤖 was laying the groundwork, our team could zero in on rapidly advancing the AI's core 'thinking'.

Live-tweaking the prompts for Claude 3.7 Sonnet, allowing us to observe immediate changes in its output and understanding.
Putting the AI through its paces by rigorously testing its responses against a wide array of real-world student scenarios and edge cases.
Focusing on clarity, contextual relevance, and achieving the right personalized & supportive tone for young learners.

We were able to quickly iterate over the UI and make significant design changes in real-time. We saw it make surprisingly intuitive design choices. With minimal detailed prompting from our side, it effectively implemented UI elements such as:

Progress bars to show task completion.
Collapsible sections for cleaner information display.
Clearly distinguished primary & secondary buttons.
Appropriate labels and helpful tooltips.

This hands-on, immediate testing loop allowed us to quickly zero in on key insights for the feature's effectiveness and overall UX:

𝗟𝗮𝗻𝗴𝘂𝗮𝗴𝗲 𝗦𝗰𝗮𝗹𝗶𝗻𝗴 𝗡𝗲𝗲𝗱𝗲𝗱: The AI's language had to adapt to the student's specific age and reading level for feedback to be truly effective.
𝗖𝗼𝗻𝘀𝗶𝘀𝘁𝗲𝗻𝗰𝘆 𝗗𝗲𝗺𝗮𝗻𝗱𝘀 𝗮 𝗥𝘂𝗯𝗿𝗶𝗰: For the AI's feedback to be consistent and fair, it needed a detailed, binary, and scored rubric (with weighted metrics) to measure responses against.
𝗢𝗻𝗯𝗼𝗮𝗿𝗱𝗶𝗻𝗴 𝗳𝗼𝗿 𝗙𝗶𝗿𝘀𝘁-𝗧𝗶𝗺𝗲 𝗨𝘀𝗲𝗿𝘀: We also quickly recognized that for students to fully benefit from the get-go, a clear and simple onboarding flow was essential to introduce the AI's capabilities and guide their initial interactions successfully.

Part 4: The AI Tightrope: Balancing Real-Time Speed & Real-World Spend
Prototyping isn't just about cool features; it's fundamentally about feasibility. An early, intense focus on delivering real-time UX AND mastering aggressive cost control is what turns innovative AI concepts into scalable, real-world solutions.

After exploring AI tutor design and rapid iteration, today we're diving into crucial "engine room" lessons from our prototype: crafting performant, real-time AI that also respects the budget.

𝗞𝗲𝗲𝗽𝗶𝗻𝗴 𝗶𝘁 𝗦𝗻𝗮𝗽𝗽𝘆: 𝗘𝗻𝗴𝗶𝗻𝗲𝗲𝗿𝗶𝗻𝗴 𝗥𝗲𝗮𝗹-𝗧𝗶𝗺𝗲 𝗔𝗜 ⚡
Users expect AI interactions to be seamless. Here’s how we tackled this:

• 𝗪𝗲𝗯𝗦𝗼𝗰𝗸𝗲𝘁𝘀: For that instant, conversational feel.
• 𝗜𝗻𝘁𝗲𝗹𝗹𝗶𝗴𝗲𝗻𝘁 𝗗𝗲𝗯𝗼𝘂𝗻𝗰𝗶𝗻𝗴: Grouping user inputs for smoother, more contextual AI exchanges and limiting the number of messages sent.
• 𝗧𝗮𝗰𝗸𝗹𝗶𝗻𝗴 𝗟𝗟𝗠 𝗟𝗮𝘁𝗲𝗻𝗰𝘆: Let's be real, even powerful models have thinking time. Our approach:

Engaging UI: A fun "thinking" animation keeps users happy during brief waits.
Streaming Responses: This is key! Users see feedback appear word-by-word as the LLM generates it, making the experience feel much faster.

𝗦𝗺𝗮𝗿𝘁 𝗦𝗽𝗲𝗻𝗱𝗶𝗻𝗴: 𝗔𝗜 𝗖𝗼𝘀𝘁 𝗖𝗼𝗻𝘁𝗿𝗼𝗹 𝗳𝗿𝗼𝗺 𝗗𝗮𝘆 𝗭𝗲𝗿𝗼 💰
Evaluating AI cost wasn't just a late-stage optimization; it was a critical go/no-go metric for the feature's feasibility right from the prototype phase. To serve thousands of concurrent users effectively, the solution had to be economically viable. This early focus on cost-per-interaction drove many design choices.
The foundational "system prompt" and other bulky, unchanging context (like rubric details) are placed first and 𝗰𝗮𝗰𝗵𝗲𝗱. Then, only unique student work or current state is injected dynamically.
We projected 70-80% savings while maintaining (and even enhancing) response quality and consistency!
To truly understand our efficiency, we diligently measured costs on both a per-interaction basis (how much each student query costs) and an overall session basis (total cost for a student's entire engagement). This granular tracking helped us estimate the AI cost at scale.

Part 5: Build less, Learn more

With AI tools supercharging development, the art of prototyping shifts. It's not just about building fast, but critically, knowing when to stop. Crafting 'just enough' to test core hypotheses with users is vital for agile learning, preventing over-investment in unvalidated ideas, and ensuring user needs truly shape your product.

Welcome back! After diving into real-time architecture and cost, today let's talk about a subtle challenge in AI-accelerated prototyping: defining "done" for the prototype itself.

𝗧𝗵𝗲 𝗔𝗹𝗹𝘂𝗿𝗲 𝗼𝗳 𝘁𝗵𝗲 "𝗔𝗹𝗺𝗼𝘀𝘁 𝗙𝘂𝗹𝗹 𝗣𝗿𝗼𝗱𝘂𝗰𝘁" 🌟
Agentic Coding tools make building end-to-end features incredibly fast. But it also brings a new temptation: if you can build it all quickly, why not iron out every detail? It's easy to get sucked into polishing and adding, moving closer to a full-blown product than a learning tool.

𝗪𝗵𝘆 𝗪𝗲 𝗛𝗶𝘁 𝘁𝗵𝗲 𝗕𝗿𝗮𝗸𝗲𝘀 🛑
As a team, we had to consciously pull back. Why?

𝘿𝙚𝙛𝙚𝙖𝙩𝙨 𝙩𝙝𝙚 𝙋𝙧𝙤𝙩𝙤𝙩𝙮𝙥𝙚'𝙨 𝙋𝙪𝙧𝙥𝙤𝙨𝙚: A prototype isn't meant to be a perfect, complete product. Its primary job is to facilitate rapid learning and validate assumptions quickly. Overbuilding delays this crucial step.
𝙐𝙨𝙚𝙧 𝙏𝙚𝙨𝙩𝙞𝙣𝙜 𝙞𝙨 𝙋𝙖𝙧𝙖𝙢𝙤𝙪𝙣𝙩: We fundamentally believe in letting user feedback guide development. We needed to get something into users' hands to hear how they would actually use the feature and what they truly value – not just build what we thought was best in a vacuum.
𝘼𝙫𝙤𝙞𝙙𝙞𝙣𝙜 𝙋𝙧𝙚𝙢𝙖𝙩𝙪𝙧𝙚 𝘼𝙩𝙩𝙖𝙘𝙝𝙢𝙚𝙣𝙩: The more effort and detail you pour into a specific feature set before validation, the harder it becomes to pivot or even discard it if users don't respond well. We wanted to stay nimble and not get too emotionally invested in a solution users might reject.
𝗙𝗶𝗻𝗱𝗶𝗻𝗴 𝗢𝘂𝗿 "𝗝𝘂𝘀𝘁 𝗘𝗻𝗼𝘂𝗴𝗵" ⚖️
For us, "just enough" meant building the core functionality that would allow users to experience the primary value proposition of our AI tutor. It needed to be functional enough to elicit genuine reactions and specific feedback on key interactions, but not so polished that we'd be heartbroken if we had to change major parts (or all!) of it based on user testing.

It's a continuous balancing act, but embracing this mindset keeps the "rapid" in rapid prototyping truly effective.

Part 6: Priming the prototype for user testing
Effective user testing hinges on designing tests that challenge assumptions, elicit genuine user behaviors, and provide actionable insights – not just echo our preconceived notions. Thoughtful planning, from understanding user context deeply to strategic use of tools like feature flags, is paramount.
Welcome back to hashtag#RapidLearnings! After discussing the art of "just enough" prototyping (Part 5), today we're pulling back the curtain on how we prepare our AI-powered prototype for user experience research. The goal? To ensure we capture real insights that will guide our development.
𝗕𝗲𝘆𝗼𝗻𝗱 𝘁𝗵𝗲 𝗘𝗰𝗵𝗼 𝗖𝗵𝗮𝗺𝗯𝗲𝗿: 𝗗𝗲𝘀𝗶𝗴𝗻𝗶𝗻𝗴 𝗳𝗼𝗿 𝗛𝗼𝗻𝗲𝘀𝘁 𝗙𝗲𝗲𝗱𝗯𝗮𝗰𝗸 👂
It's human nature to seek validation. However, user testing should be about uncovering truths. Our preparation to achieve this starts before the prototype is even shown:
𝗨𝗻𝗱𝗲𝗿𝘀𝘁𝗮𝗻𝗱𝗶𝗻𝗴 𝘁𝗵𝗲 𝗨𝘀𝗲𝗿'𝘀 𝗪𝗼𝗿𝗹𝗱 𝗙𝗶𝗿𝘀𝘁: We prepare a list of key questions designed to deeply explore their current reality. We ask users to talk openly about:

𝘛𝘩𝘦𝘪𝘳 𝘗𝘢𝘪𝘯 𝘗𝘰𝘪𝘯𝘵𝘴
𝘊𝘶𝘳𝘳𝘦𝘯𝘵 𝘛𝘰𝘰𝘭𝘴 & 𝘗𝘳𝘰𝘤𝘦𝘴𝘴𝘦𝘴 𝗖𝗿𝗮𝗳𝘁𝗶𝗻𝗴 𝗨𝗻𝗯𝗶𝗮𝘀𝗲𝗱 𝗣𝗿𝗼𝗺𝗽𝘁𝘀: The way we frame tasks and questions for the prototype interaction itself is crucial. We consciously create neutral prompts that encourage users to think aloud and share their genuine experiences, rather than leading them. 𝗢𝗯𝘀𝗲𝗿𝘃𝗶𝗻𝗴 𝗕𝗲𝗵𝗮𝘃𝗶𝗼𝗿 𝗢𝘃𝗲𝗿 𝗝𝘂𝘀𝘁 𝗔𝘀𝗸𝗶𝗻𝗴: What users do often speaks louder than what they say. We pay close attention to their interactions, hesitations, and workarounds within the prototype. 𝗧𝗵𝗲 𝗣𝗼𝘄𝗲𝗿 𝗼𝗳 𝗜𝗻𝗰𝗿𝗲𝗺𝗲𝗻𝘁𝗮𝗹 𝗘𝘅𝗽𝗼𝘀𝘂𝗿𝗲: 𝗙𝗲𝗮𝘁𝘂𝗿𝗲 𝗙𝗹𝗮𝗴𝘀 𝗶𝗻 𝗔𝗰𝘁𝗶𝗼𝗻 🚩 To isolate feedback on specific functionalities, we're leveraging LaunchDarkly for feature flagging. This allows us to start with a core experience and incrementally turn on features during a single user testing session in real-time, observing how users react to each addition without prior priming. This shows us how users organically discover and integrate them into their workflow. By investing time in this upfront preparation, from understanding user pain points to setting up robust test environments, we aim to make our user testing sessions far more insightful.

𝗧𝗵𝗲 𝗙𝗶𝗻𝗮𝗹𝗲: "𝗜 𝗮𝗺 𝗮𝗻𝘁𝗶 𝗔𝗜, 𝗯𝘂𝘁 𝗜 𝗱𝗼 𝗹𝗶𝗸𝗲 𝘁𝗵𝗶𝘀 𝗮 𝗹𝗼𝘁!"

The ultimate validation of a prototype lies in user feedback. Engaging with real users, actively listening to their concerns and aspirations, and iteratively incorporating those insights is the engine of meaningful product development. Our first round of user testing provided invaluable guidance, with one user's comment – “𝘐 𝘢𝘮 𝘢𝘯𝘵𝘪 𝘈𝘐, 𝘣𝘶𝘵 𝘐 𝘥𝘰 𝘭𝘪𝘬𝘦 𝘵𝘩𝘪𝘴 𝘢 𝘭𝘰𝘵” – underscoring the potential of well-designed, user-centric AI to address real needs and even win over skeptics.

What a journey this hashtag#RapidLearnings series has been! Today, I'm sharing the exciting results and key takeaways from our initial user testing of the AI-powered prototype. It was a fantastic opportunity to see our work through fresh eyes and validate (and challenge!) our assumptions.

𝗩𝗼𝗶𝗰𝗲𝘀 𝗳𝗿𝗼𝗺 𝘁𝗵𝗲 𝗙𝗶𝗲𝗹𝗱: 𝗥𝗲𝗮𝗹 𝗨𝘀𝗲𝗿 𝗙𝗲𝗲𝗱𝗯𝗮𝗰𝗸 🗣️
Here’s a snapshot of what we heard:

𝗔𝗜 𝗛𝗲𝘀𝗶𝘁𝗮𝗻𝗰𝘆: One user, new to AI, expressed a common concern about students becoming overly reliant on it for answers. This highlighted the importance of our design focusing on learning support.
𝗟𝗲𝗮𝗿𝗻𝗶𝗻𝗴 𝗦𝘂𝗽𝗽𝗼𝗿𝘁 𝗙𝗼𝗰𝘂𝘀: Encouragingly, this same user, and others, emphasized a preference for AI to provide "𝘩𝘪𝘯𝘵𝘴 𝘢𝘴 𝘰𝘱𝘱𝘰𝘴𝘦𝘥 𝘵𝘰 𝘢𝘯𝘴𝘸𝘦𝘳𝘴" reinforcing our pivot towards an AI tutor model.
𝗔𝗰𝘁𝗶𝗼𝗻𝗮𝗯𝗹𝗲 𝗙𝗲𝗲𝗱𝗯𝗮𝗰𝗸 𝗼𝗻 𝗦𝘂𝗺𝗺𝗮𝗿𝗶𝗲𝘀: Users liked the summary feature but wanted more critical feedback – clear guidance on "𝘸𝘩𝘢𝘵 𝘪𝘴 𝘵𝘩𝘦 𝘯𝘦𝘹𝘵 𝘴𝘵𝘦𝘱?" 𝘢𝘯𝘥 "𝘸𝘩𝘢𝘵 𝘢𝘳𝘦 𝘵𝘩𝘦𝘺 𝘮𝘪𝘴𝘴𝘪𝘯𝘨?"
𝗞𝗶𝗱-𝗙𝗿𝗶𝗲𝗻𝗱𝗹𝘆 𝗟𝗮𝗻𝗴𝘂𝗮𝗴𝗲 𝗩𝗮𝗹𝗶𝗱𝗮𝘁𝗶𝗼𝗻: The positive reception to the age-appropriate language confirmed a key design decision.
𝗩𝗶𝘀𝘂𝗮𝗹 𝗖𝗹𝗮𝗿𝗶𝘁𝘆 𝗡𝗲𝗲𝗱𝗲𝗱: A valuable recommendation was to improve visual clarity by color-coding evidence and bolding key recommendations, as the current presentation felt dense.
𝗧𝗿𝗮𝗻𝘀𝗽𝗮𝗿𝗲𝗻𝗰𝘆 & 𝗣𝗿𝗼𝗴𝗿𝗲𝘀𝘀 𝗧𝗿𝗮𝗰𝗸𝗶𝗻𝗴: Users expressed a desire for more transparency around their learning journey and how mastery is being determined.
𝗨𝗻𝗱𝗲𝗿𝘀𝘁𝗮𝗻𝗱𝗶𝗻𝗴 𝗔𝗜 𝗥𝗲𝗮𝘀𝗼𝗻𝗶𝗻𝗴: There was a clear interest in understanding how the AI arrived at its recommendations, emphasizing the need for explainability.

𝗪𝗵𝗮𝘁'𝘀 𝗡𝗲𝘅𝘁? 𝗜𝘁𝗲𝗿𝗮𝘁𝗶𝗼𝗻 & 𝗙𝘂𝗿𝘁𝗵𝗲𝗿 𝗘𝘅𝗽𝗹𝗼𝗿𝗮𝘁𝗶𝗼𝗻 🚀
This iterative cycle of building, testing, and learning is at the heart of rapid prototyping, and the feedback we’ve received has given us a fantastic roadmap for the next phase of development.

Building a real-time AI tutoring assistant

Karthik Subramanian — Sun, 15 Jun 2025 10:10:17 +0000

True wisdom in AI lies not in the sophistication of algorithms, but in the profound understanding of human need—knowing precisely when to speak and when to listen, when to guide and when to step back, creating moments of genuine insight that transform confusion into clarity.

How to create an intelligent & responsive AI assistant that provides personalized guidance in real-time

Introduction
Architecture Overview
Core Components
Implementation Patterns
AI Integration & Prompt Engineering
Conclusion

Introduction

Have you ever wished your application could provide intelligent, contextual guidance to users exactly when they need it most? Real-time AI assistants are revolutionizing how we interact with digital products, offering personalized support that adapts to user behavior and provides timely interventions. In this technical deep dive, we'll explore how to build a production-ready AI tutoring assistant from the ground up.

Imagine a student working through a complex problem set. As they struggle with a particular concept, spending too much time on a single question or making repeated errors, an AI assistant gently appears—not intrusively, but precisely when help is needed. This assistant doesn't just provide generic advice; it understands the student's learning style, their current emotional state, and the specific context of their struggle. It offers personalized guidance that helps them overcome the obstacle and continue learning effectively.

This isn't science fiction—it's the power of real-time AI assistants, and by the end of this guide, you'll understand exactly how to build one.

What We'll Build

Throughout this guide, we'll use a generic "Study Buddy" application as our example. This AI-powered learning companion demonstrates all the key patterns and techniques you'll need to create your own intelligent assistant. Our Study Buddy will:

Monitor user interactions in real-time - The system continuously tracks user behavior, from how long they spend on each task to the types of mistakes they make. This isn't just passive logging; it's intelligent observation that builds a real-time picture of the user's learning journey.

Provide contextual guidance based on user state - Using sophisticated state detection algorithms, the assistant recognizes when users are struggling, progressing well, or need encouragement. It then delivers precisely targeted guidance that matches their current situation.

Adapt its communication style - The AI doesn't use a one-size-fits-all approach. It adapts its vocabulary, tone, and explanation depth based on the user's learning style and current emotional state, making interactions feel natural and supportive.

Maintain reliability through graceful fallbacks - When AI services are unavailable or encounter errors, the system seamlessly falls back to pre-defined guidance patterns, ensuring users never experience a broken experience.

The Technical Challenge

Building real-time AI assistants presents unique challenges that don't exist in traditional request-response applications. We need to solve for:

Real-time responsiveness - Users expect AI guidance to feel natural and immediate. Response times must be under a second to maintain the illusion of a helpful companion rather than a sluggish computer program.

Intelligent state management - The system must track complex user progress across sessions, understand context, and make intelligent decisions about when and how to intervene.

Cost optimization at scale - AI services can be expensive, especially when serving thousands of concurrent users. We need smart caching strategies and efficient prompt engineering to keep costs manageable.

Reliability and graceful degradation - Users depend on these systems for learning and support. Even when AI services fail, the experience must remain functional and helpful.

Personalization without complexity - Each user interaction should feel tailored to their specific needs, but the underlying system must remain maintainable and scalable.

Architecture Overview

The heart of our real-time AI assistant lies in its architecture—a carefully designed system that balances performance, scalability, and cost efficiency. We've chosen a serverless, event-driven approach that can scale from zero to thousands of concurrent users without manual intervention.

The Big Picture

Our architecture consists of several interconnected layers, each responsible for a specific aspect of the user experience:

The Frontend Layer serves as the user's window into the system. Built with React, it manages local state, handles user interactions, and maintains a persistent WebSocket connection to the backend. The WebSocket client is particularly crucial—it's responsible for sending user progress updates and receiving AI guidance in real-time.

The API Gateway Layer acts as the traffic controller for our real-time communications. AWS API Gateway's WebSocket support allows us to maintain persistent connections with thousands of users simultaneously, while the connection manager handles the complex task of routing messages to the correct backend services.

The Processing Layer is where the magic happens. When a user's behavior suggests they need assistance, the AI Assistant Lambda function springs into action. It analyzes the user's current state, generates appropriate prompts for the AI service, and coordinates the entire guidance delivery process.

The AI Services layer provides the intelligence behind our assistant. We use Claude through AWS Bedrock for natural language processing, with intelligent caching to reduce costs and improve response times.

The Storage Layer maintains the system's memory. DynamoDB stores active WebSocket connections, tracks user state across sessions, and maintains cost and usage analytics.

How It All Works Together

The beauty of this architecture lies in its simplicity and responsiveness. Here's how a typical interaction flows through the system:

User Interaction: A student working on their Study Buddy application encounters difficulty with a math problem. They spend several minutes on the same question, making multiple incorrect attempts.
State Detection: The React application's state management system recognizes this pattern. Using our intelligent state detection algorithms, it identifies that the user has transitioned from "MAKING_PROGRESS" to "STUCK."
WebSocket Communication: The frontend immediately sends a real-time message through the WebSocket connection, including the user's current progress, the specific problem they're working on, and contextual information about their learning session.
AI Processing: The AI Assistant Lambda function receives this message and analyzes the situation. It determines that the user needs encouraging guidance with a specific hint about problem-solving strategies.
Prompt Generation: The system generates a structured prompt that includes both cacheable information (like general tutoring principles) and dynamic information (like the user's specific situation).
AI Response: Claude processes the prompt and generates personalized guidance tailored to the user's learning style and current emotional state.
Real-time Delivery: The guidance is immediately sent back through the WebSocket connection to the user's browser.
UI Update: The AI character appears with appropriate animations, delivers the guidance through a speech bubble, and adjusts its visual state to match the emotional tone of the message.

This entire process typically completes in under 800 milliseconds, creating the experience of a responsive, intelligent companion rather than a slow computer system.

Core Components

Now that we understand the overall architecture, let's dive deep into the core components that make our real-time AI assistant truly intelligent and responsive.

1. Frontend State Management - The Brain of User Experience

The frontend state management system is far more than just tracking data—it's the intelligent brain that understands user behavior and makes decisions about when AI intervention is needed. This component continuously analyzes user interactions to build a real-time picture of their learning journey.

The key insight here is that effective AI assistance isn't about responding to explicit requests for help. Instead, it's about recognizing patterns in user behavior that indicate when assistance would be most valuable. Our state detection system identifies several crucial user states and triggers AI guidance at the right moments. The detailed implementation of this system is covered in the Implementation Patterns section below.

2. WebSocket Communication Layer - The Nervous System of Real-Time Interaction

WebSocket communication is the nervous system of our real-time AI assistant, enabling instantaneous bidirectional communication between the user's browser and our backend services. Unlike traditional HTTP requests, WebSocket connections remain open, allowing us to send guidance to users the moment it's needed without any delay.

The real challenge with WebSocket communication isn't establishing the connection—it's maintaining reliability over time. Users might close their laptops, switch networks, or experience temporary connectivity issues. Our WebSocket layer handles all these scenarios gracefully:

// WebSocket connection with intelligent reconnection logic
const connect = useCallback(() => {
  const ws = new WebSocket(endpoint);

  ws.onclose = (event) => {
    if (!event.wasClean && reconnectAttemptsRef.current < 5) {
      // Exponential backoff prevents overwhelming the server
      const delay = Math.pow(2, reconnectAttemptsRef.current) * 1000;
      setTimeout(() => {
        reconnectAttemptsRef.current++;
        connect();
      }, delay);
    }
  };

  ws.onmessage = (event) => {
    const message = JSON.parse(event.data);
    // Use custom events to decouple message handling
    window.dispatchEvent(new CustomEvent('aiGuidanceReceived', { 
      detail: message 
    }));
  };
}, [endpoint]);

// Sending guidance requests with context
const requestGuidance = useCallback((userProgress, context) => {
  return sendMessage({
    action: 'analyzeWork',
    studentData: userProgress,
    additionalContext: context
  });
}, [sendMessage]);

The exponential backoff strategy is crucial for production systems. When a connection fails, we don't immediately retry—that could overwhelm a server that's already experiencing issues. Instead, we wait progressively longer between each attempt, giving the system time to recover while eventually reestablishing the connection.

The message handling system uses custom events to decouple the WebSocket layer from the rest of the application. This architectural decision makes the system more maintainable and allows different components to respond to AI guidance without creating tight coupling between modules.

3. AI Character Component - The Face of Artificial Intelligence

The AI Character Component is where our technical system meets human psychology. This isn't just a visual element—it's a carefully designed interface that manages user expectations, provides emotional connection, and delivers guidance in a way that feels natural and supportive.

The character system manages multiple states that correspond to different types of interactions:

// Character state reflects the type of interaction
const [characterState, setCharacterState] = useState<CharacterState>('greeting');
const [isWaitingForResponse, setIsWaitingForResponse] = useState(false);

// Real-time response to AI guidance
useEffect(() => {
  const handleGuidanceReceived = (event: CustomEvent) => {
    const { guidance } = event.detail;
    setGuidanceSteps(guidance);
    setIsWaitingForResponse(false);

    // Character's visual state matches the guidance tone
    if (guidance.length > 0) {
      setCharacterState(guidance[0].characterState);
    }
  };

  window.addEventListener('aiGuidanceReceived', handleGuidanceReceived);
  return () => window.removeEventListener('aiGuidanceReceived', handleGuidanceReceived);
}, []);

The character's state management goes beyond simple animations. When a user is struggling, the character might display a 'concerned' state with softer colors and gentler animations. When celebrating a user's success, it switches to an 'excited' state with more energetic visual feedback. These subtle visual cues help establish an emotional connection that makes the AI assistance feel more like interaction with a helpful companion rather than a cold computer system.

The waiting state is particularly important for managing user expectations. When the system is processing a request, the character displays a 'thinking' animation, letting users know that help is on the way. This prevents the frustration that comes from wondering whether the system is working or has encountered an error.

Implementation Patterns

Building a real-time AI assistant requires several sophisticated implementation patterns that go beyond typical web application development. These patterns solve specific challenges related to real-time interaction, cost management, and reliability.

1. Debounced AI Requests - Balancing Responsiveness with Efficiency

One of the biggest challenges in real-time AI systems is preventing excessive API calls while maintaining the appearance of immediate responsiveness. Users often interact with applications in bursts—they might make several rapid changes to their work, correct multiple errors in quick succession, or experiment with different approaches to a problem.

Without proper debouncing, each of these interactions could trigger a separate AI request, leading to unnecessary costs and potentially overwhelming the AI service. Our debouncing strategy solves this by intelligently grouping related user actions:

export const useDebounce = (callback: Function, delay: number) => {
  const timeoutRef = useRef<NodeJS.Timeout>();

  const debouncedCallback = useCallback((...args: any[]) => {
    if (timeoutRef.current) clearTimeout(timeoutRef.current);
    timeoutRef.current = setTimeout(() => callback(...args), delay);
  }, [callback, delay]);

  return { debouncedCallback };
};

// Usage: Wait for user to finish their current burst of activity
const { debouncedCallback: debouncedRequestGuidance } = useDebounce(
  (progress) => requestGuidance(progress), 
  5000
);

The five-second delay strikes a careful balance. It's long enough to group related user actions together, preventing redundant AI calls when a user is rapidly experimenting with different approaches. But it's short enough that users still experience the system as immediately responsive to their needs.

This pattern is particularly important for learning applications, where users often work through problems iteratively, making multiple attempts before finding the right approach. Without debouncing, a student working through a complex math problem might trigger dozens of AI requests as they explore different solution strategies.

2. Intelligent State Detection - Understanding User Intent

The most sophisticated aspect of our AI assistant is its ability to understand user intent and emotional state without explicit communication. This requires analyzing patterns in user behavior and making intelligent inferences about what type of assistance would be most helpful.

Our state detection system uses multiple signals to build a comprehensive picture of the user's experience:

class StudentStateDetector {
  detectState(progress: UserProgress): StudentState {
    const timeSinceLastInteraction = Date.now() - progress.lastInteractionTime.getTime();

    // Multiple criteria contribute to the "stuck" state
    if (progress.timeSpentOnCurrentStep > this.config.stuckTimeThreshold ||
        progress.errorCount > this.config.errorCountThreshold ||
        timeSinceLastInteraction > this.config.inactivityThreshold) {
      return 'STUCK';
    }

    // Progress velocity indicates engagement level
    if (this.isProgressingRapidly(progress)) {
      return 'MAKING_PROGRESS';
    }

    return this.determineTaskState(progress);
  }
}

The sophistication here lies in combining multiple behavioral signals to make nuanced distinctions. A user who has spent a long time on a problem isn't necessarily stuck—they might be engaged in deep, productive thinking. But a user who has spent a long time on a problem AND made multiple errors AND hasn't interacted with the interface recently is probably frustrated and could benefit from assistance.

This multi-factor approach reduces false positives (interrupting users who are productively engaged) while increasing true positives (offering help to users who genuinely need it). The thresholds are carefully calibrated based on typical user behavior patterns, and they can be adjusted based on individual user profiles over time.

3. Error Handling & Fallback Strategies - Maintaining Reliability

In production systems, AI services occasionally fail. Networks experience issues, servers get overloaded, and APIs hit rate limits. Our error handling strategy ensures that users never experience a broken interface, even when the underlying AI services are unavailable.

The key insight is that partial functionality is better than no functionality. When AI services fail, we fall back to pre-defined guidance patterns that provide helpful, contextual advice based on the user's current state:

class AIGuidanceService {
  async getGuidance(userProgress: UserProgress): Promise<GuidanceStep[]> {
    for (let attempt = 0; attempt < this.retryConfig.maxRetries; attempt++) {
      try {
        return await this.requestAIGuidance(userProgress);
      } catch (error) {
        if (attempt < this.retryConfig.maxRetries - 1) {
          // Exponential backoff prevents overwhelming failing services
          const delay = Math.min(
            this.retryConfig.baseDelay * Math.pow(2, attempt),
            this.retryConfig.maxDelay
          );
          await this.sleep(delay);
        }
      }
    }

    // Graceful fallback to pre-defined guidance
    return this.getFallbackGuidance(userProgress);
  }
}

The fallback guidance system maintains a library of helpful responses for different user states. When a user is stuck, the fallback system provides encouraging words and general problem-solving strategies. When a user completes a task, it offers congratulations and suggestions for next steps. While these responses aren't personalized like AI-generated guidance, they're still contextually appropriate and maintain the feeling of a supportive learning environment.

The exponential backoff strategy is crucial for system stability. When an AI service is experiencing issues, we don't want to contribute to the problem by making repeated requests. Instead, we wait progressively longer between retry attempts, giving the service time to recover while still providing a reasonable chance of success.

AI Integration & Prompt Engineering

The effectiveness of our real-time AI assistant ultimately depends on how well we integrate with AI services and engineer our prompts. This isn't just about making API calls—it's about creating a system that consistently generates helpful, contextual, and cost-effective guidance.

1. Structured Prompt Design - Balancing Personalization with Efficiency

Modern AI services like Claude offer powerful caching mechanisms that can significantly reduce costs, but only if we structure our prompts intelligently. The key insight is to separate information that stays constant across many interactions from information that changes with each user session.

Our prompt architecture divides information into two categories:

interface PromptContent {
  cacheable: {
    systemInstructions: string;
    domainContext: string;
  };
  dynamic: {
    userState: string;
    personalizedContext: string;
  };
}

// System instructions remain constant and can be cached
const systemInstructions = `
You are an AI tutoring assistant that provides supportive, educational guidance. 
Always respond with a JSON array of guidance steps:
[
  {
    "text": "Your encouraging message here",
    "characterState": "greeting|thinking|suggesting|celebrating|concerned|excited"
  }
]

Adapt your communication style for ${difficultyLevel} level learners who prefer ${learningStyle} explanations.
`;

// User state changes with each interaction and cannot be cached
const userState = `
Current Task: ${userProgress.currentTask}
Steps Completed: ${userProgress.completedSteps.length}
Recent Errors: ${userProgress.errorCount}
Time on Current Step: ${Math.floor(userProgress.timeSpentOnCurrentStep / 1000)} seconds
`;

The cacheable portion includes our system instructions (how the AI should behave), general domain knowledge, and other information that doesn't change between user sessions. This portion can be cached by the AI service, significantly reducing the cost of subsequent requests.

The dynamic portion includes user-specific information that changes with each interaction: their current progress, recent errors, time spent on tasks, and emotional state indicators. This information must be included with each request to ensure personalized responses.

This architectural approach can reduce AI service costs by 70-80% in production systems while maintaining the same quality of personalized guidance. The savings come from caching the expensive-to-process system instructions while still providing fully personalized responses based on current user state.

2. Cost-Optimized AI Service Integration - Making Intelligence Affordable

AI services charge based on the number of tokens processed, which means careful token management is crucial for cost-effective operations. Beyond caching strategies, one of the most effective cost optimization techniques is using different AI models for different types of tasks - employing cheaper, faster models like Claude 3.5 Haiku for simpler operations and reserving premium models like Claude 4 Sonnet for complex reasoning tasks.

Our AI service integration includes sophisticated cost tracking and optimization features:

class AIServiceClient {
  private readonly PRICING = {
    haiku: { inputTokensPer1K: 0.00025, outputTokensPer1K: 0.00125 },
    sonnet: { inputTokensPer1K: 0.003, outputTokensPer1K: 0.015 },
    opus: { inputTokensPer1K: 0.015, outputTokensPer1K: 0.075 },
    cachedTokensPer1K: 0.0003
  };

  private selectModel(userProgress: UserProgress, taskComplexity: string): string {
    // Use Haiku for simple tasks like encouragement or basic progress updates
    if (taskComplexity === 'simple' || userProgress.stuckDuration < 60000) {
      return 'anthropic.claude-3-5-haiku-20241022-v1:0';
    }

    // Use Sonnet for moderate complexity tasks like hints or explanations
    if (taskComplexity === 'moderate' || userProgress.errorCount < 5) {
      return 'anthropic.claude-sonnet-4-20250514-v1:0';
    }

    // Reserve Opus for complex reasoning tasks or when user is very stuck
    return 'anthropic.claude-opus-4-20250514-v1:0';
  }

  async generateGuidance(promptContent: PromptContent, userProgress: UserProgress) {
    const taskComplexity = this.assessTaskComplexity(promptContent.dynamic.userState);
    const selectedModel = this.selectModel(userProgress, taskComplexity);

    const requestBody = {
      model: selectedModel,
      system: promptContent.cacheable.systemInstructions,
      messages: [{
        role: 'user',
        content: [
          {
            type: 'text',
            text: promptContent.cacheable.domainContext,
            cache_control: { type: 'ephemeral' } // Enable caching for this content
          },
          {
            type: 'text',
            text: promptContent.dynamic.userState
          }
        ]
      }]
    };

    const response = await this.callAIService(requestBody);
    const cost = this.calculateCost(response.usage, selectedModel);

    return { 
      guidance: JSON.parse(response.content), 
      usage: { cost, cached: response.usage.cache_hit, model: selectedModel } 
    };
  }
}

The cost calculation system tracks both cached and uncached token usage, allowing us to monitor the effectiveness of our caching strategy.

The system also includes real-time cost monitoring, allowing us to set alerts when costs exceed expected thresholds. This is particularly important for applications with unpredictable usage patterns, where a sudden spike in user activity could lead to unexpected AI service bills.

Conclusion

Building a real-time AI tutoring assistant is a complex undertaking that requires careful attention to architecture, user experience, and cost management. The patterns and techniques we've explored in this guide provide a solid foundation for creating intelligent, responsive AI agents that can truly enhance user experiences.

The Key Principles We've Learned

Intelligence Emerges from Pattern Recognition: The most effective AI assistants don't just respond to explicit requests for help. They observe user behavior patterns and proactively offer assistance when it's most needed. Our state detection algorithms demonstrate how to analyze user interactions and make intelligent inferences about when intervention would be helpful.

Real-Time Responsiveness Requires Thoughtful Architecture: Users expect AI assistance to feel immediate and natural. This requires WebSocket communication for real-time messaging, intelligent debouncing to group related user actions, and careful attention to response times throughout the system.

Cost Optimization is Crucial for Scalability: AI services can be expensive, especially at scale. Structured prompt engineering with intelligent caching can reduce costs by 70-80% while maintaining the same quality of personalized responses. This isn't just about saving money—it's about making AI assistance accessible to applications with thousands of concurrent users.

Graceful Degradation Maintains User Trust: AI services occasionally fail, and users will only trust systems that handle failures gracefully. Our fallback strategies ensure that users always receive helpful guidance, even when the underlying AI services are unavailable.

User Experience is About More Than Technology: The visual design of our AI character, the timing of its interventions, and the emotional tone of its responses all contribute to user experience. Technical excellence must be paired with thoughtful interaction design to create truly effective AI assistants.

🥳 with Bedrock - partyrock!

Karthik Subramanian — Thu, 16 Nov 2023 17:56:37 +0000

What is Partyrock?

AWS puts it as - "PartyRock is an educational tool for providing any builder with low-friction access to learn through experimentation in a foundation model playground built on Amazon Bedrock." Here is the AWS blog post about it.

What is it really?

It is AMAZING! After spending the last 2 days playing around with it, I can confidently say its a gamechanger! It allows anyone (and I mean anyone!) with an idea to get up and running in mins (yes mins). You simply click on "Generate an App" and provide information of what your app should do, and the AI takes care of the rest.

What is it not?

Right off the bat let me clarify what it most certainly is not:

its not a product or service, its just a playground
the underlying models aren't connected to the internet (yet), so take the information provided with a grain of salt
its not going to build you a production ready application
your limited to only text inputs and text or image outputs (as of now)

So what can you really do with it?

Well anything really, your imagination is your limit. The playground enables anyone to build a text based app within mins that is functional and publicly shareable.
Here is a step by step walkthrough of how I built the Trip Planner app

The initial prompt: Try to be as specific as possible by outlying the exact inputs you want from a user that the AI needs to factor into account. I found the below format to be effective in controlling the input labels that get generated

Customizing the layout: The app that was generated looked like this -

Not so pretty right, lets re-size the boxes and rename the app title. Click on Edit on the top to get into the edit mode. Here is the updated view -

Try it out: Fill in the inputs and watch the AI work its magic -

Neat! but whats with the 7 day itinerary when my dates are from March 1st to 4th? This brings us to the next step.

Prompt Engineering!!: Hit the edit button on the Itinerary widget to see the prompt that powers the AI response. You'll notice that it says "Suggest a detailed 7 day itinerary"! Not so smart eh AI! I modified the prompt to give it more specific instructions on how to create the itinerary -

Suggest a detailed day-by-day itinerary starting from the [From] city to [To] from [Dates], with a total budget of [Budget] USD.
Include cost of travel from [From] city to [To] city (suggesting multiple modes of transport if available), proposed attractions, activities, places to stay, and places to eat. Provide hours of operation and cost estimates where available. 
Take into consideration the number of travelers mentioned - [Travelers] 
You should recommend restaurants based on the food preferences specified - [Food Preferences].
You should recommend hotels based on stay preferences - [Stay Preferences] 
Day 1 of itineray should start with travel from [From] to [To] and the last day of itinieray should be the travel back from [To] to [From].
Consider [From] to be the home city of the user.
Do not make stuff up, if there isn't enough information to make a recommendation then say - "I'm sorry, I couldn't find enough information to make a recommendation".

And that should give you a much better result -

Publish the app: Once you are satisfied with the results, you can hit the "Make public and Share" button to share your app

The app that I ended up publishing here has more customizations and an added widget for Hotel Recommendations and a chatbot that lets you discuss your itinerary and customize it. Here are the prompts for them -

Hotel Recommendations -

Based on the itinerary defined here - [Itinerary], suggest hotels for the trip factoring in the suggested hotel costs.
Take into consideration the following -
1. traveler profile specified by the user - [Traveler Profile].
2. stay preferences - [Stay Preferences] 
3.food preferences specified - [Food Preferences].
Do not make stuff up, if there isn't enough information to make a recommendation then say - "I'm sorry, I couldn't find enough information to make a recommendation".
Your response should only be in the format - 
=> {Hotel Name} - {Price per night} - {reason for recommendation}

Trip Advisor -

Assuming the role of an experienced travel advisor, answer any questions the user may have about the trip they are planning. 
Context for the chat - 
Number of travelers - [Travelers] 
Origin City - [From] 
Destination - [To] 
Dates - [Dates] 
Budget - [Budget] 
Stay Preferences - [Stay Preferences] 
Food preferences - [Food Preferences] 
Traveler profile - [Traveler Profile] 
Current Itinerary - [Itinerary]

Have fun partying!!

The Kinesis Analytics & Apache Flink Playlist

Karthik Subramanian — Tue, 15 Aug 2023 06:44:32 +0000

I've spent a few years working with Apache Flink, more recently on Kinesis Analytics, and here is my attempt at documenting the lessons learned and example code for some of the usecases I encountered.

This post is going to be a living document or playlist of sorts that I hope to keep updating with links to all the relevant content I create for Apache Flink & Kinesis Analytics.

This Github repository is going to host the example Kinesis Analytics application (Java 11) that is discussed in the content posted below.

To kick things off, here is my first attempt at a video tutorial explaining how to build a stream processing architecture with Kinesis Data Stream, Kinesis Analytics & S3.

Batch & Stream Processing Architecture - Part 1

Batch & Stream Processing Architecture - Part 2
Coming soon..

AWS Lambda & ECR nuances

Karthik Subramanian — Tue, 11 Jul 2023 05:51:45 +0000

AWS Lambda & ECR nuances

There are a couple of nuances with aws services I encountered along the way that I wanted to highlight here.

AWS Lambda Ephemeral Storage

One of the first issues I encountered after getting everything setup was that the Process lambda would only work once. After the first execution, each subsequent invovation would fail because the chrome driver would crash at different steps. Since it wouldn’t crash at the same step each time, and it would completely succeed the very first time, I suspected something was up with whatever the invocations were sharing. That led me to the ephemeral storage.

The lambda execution environment provides a file system for your code to use at /tmp. This space has a fixed size of 512 MB. The same Lambda execution environment may be reused by multiple Lambda invocations to optimize performance. Consequently, this is intended as an ephemeral storage area. While functions may cache data here between invocations, it should be used only for data needed by code in a single invocation.

Aha! The chrome driver was using up the /tmp storage space on the first invocation and which is why it was crashing on the next invocation.

Increasing the storage size from 512MB to 3GB resolved the issue for me. All I needed to do was update the template.yaml global function properties -

But this alone isn’t enough. With enough number of executions I’m pretty sure we would exhaust that 3GB storage limit too.

What I needed was a way to make the lambda clean up after itself on each invocation. I ended up creating a wrapper class that would generate a random folder within /tmp and pass that to the chrome options to use for storing user data. It would also delete that folder once the driver exit was called -

Update process.py to leverage the new wrapper -

And don’t forget to add it to the Dockerfile -

AWS Free Tier

One of the primary goals I had when I began this architecture was ensuring it was free by leveraging the services offered as part of the AWS Free Tier.

With everything built & tested I decided to check the AWS Cost Explorer to check my costs.

$0.02!!! Whats up with that AWS!

Heading over to Budgets > Free Tier showed me who the culprit was -

Amazon ECR has a free tier limit of 500MB and I was already at 1GB.

One of the few things I had done when building my architecture was choosing the command “sam deploy — guided” whenever I added a new lambda to the template.yaml file. One of the questions asked was “Create managed ECR repositories for all functions? [Y/n]”. And I had chosen Y each time. That resulted in aws creating a new ECR repo for each of the 3 lambda functions used in this architecture. With each repo size being approx 400mb, you can see how I easily blew past the 500mb limit.

This is why when creating this series I chose the approach of manually modifying the samconfig.toml file and updating the image_repositories list whenever we created a new lambda.

Another cost factor is the number of images stored by the repository. Head over to Amazon ECR > Repositories and click on our repo -

Those images also occupy space & can be deleted. I personally choose to keep only the latest 3 images and delete the rest. You can also set a lifecycle policy that can automatically delete the older images for you.

Finally, keep an eye on the limits for all the services used. I highly recommend creating a budget in AWS with a threshold specified that notifies you.

Source Code

Here is the source code for the project created here.

Downloading a file from S3 using API Gateway & AWS Lambda

Karthik Subramanian — Tue, 11 Jul 2023 05:47:32 +0000

Downloading a file from S3 using API Gateway & AWS Lambda

In my last post I showed how we can create and store a csv file in an S3 bucket. Let us now see how we can get the status of a request & get a downloadable link to the csv for completed requests.

The Get Status lambda

Under the src directory, create a new file called “get_status.py” with the below code -

Add the new file to Dockerfile -

Update the template.yaml file and add a new resource -

Testing locally

We can test the endpoint locally, but before that we need to update the env.json and include the S3 bucket name -

Build and start the api locally -

sam build
sam local start-api --env-vars ./tests/env.json

You should see an output like -

Trigger a new request & grab the request id from the DB (since the post will fail without an SQS queue defined). Then test the get status call -

Deploying the code

Just like before, we need to specify an image repository for the new lambda function. Update the samconfig.toml file and add another item to the image_repositories list for GetStatusFunction -

image_repositories = ["CreateFunction=541434768954.dkr.ecr.us-east-2.amazonaws.com/serverlessarchexample8b9687a4/createfunction286a02c8repo",
"ProcessFunction=541434768954.dkr.ecr.us-east-2.amazonaws.com/serverlessarchexample8b9687a4/createfunction286a02c8repo",
"GetStatusFunction=541434768954.dkr.ecr.us-east-2.amazonaws.com/serverlessarchexample8b9687a4/createfunction286a02c8repo"]

Deploy the code to aws -

sam build
sam deploy

The output should look like this -

Grab the get-status endpoint url and try making a request through postman for one of the completed orders from before -

Cmd+Click on the download_link to download the csv file from S3.

And thats it! The SAM CLI has enabled us to leverage infrastructure-as-code to deploy our entire architecture to any aws account within minutes!

Source Code

Here is the source code for the project created here.

Next: Part 7: AWS Lambda & ECR nuances

Forem: Karthik Subramanian

Navigating AWS Neptune Graph with AI

The Problem That Started It All

The AI-Driven Solution Journey

Iteration 1: Natural Language Query Interface

Iteration 2: Schema Discovery Agent

Iteration 3: The Context Window Solution

Iteration 4: Multi-Language Support

Why Strands Agent Framework?

The Context Window Problem & CSV Export Strategy

Neptune Query Shell vs AWS Neptune MCP

Architecture Overview

Why This Approach Still Matters

Key Features in Action

1. Intelligent Result Display

2. Streaming AI Process

Real-World Impact

Try It Yourself

The Bigger Picture

Chat with My Digital Twin: How I Built a Personal Website With a Local AI Chatbot!

The Strategic Skip: Why I Started from Day 4

The Real Challenge: From Static to Interactive

Beyond the Challenge: Building a Production Portfolio

The Unique Twist: Local AI Chat Integration

Production Polish: The Details That Matter

Key Takeaways

Final Thoughts

Building a multiplayer TriviaSnake game with Amazon Q Developer!

Chat with My Digital Twin: How I Built an AI Version of Myself You Can Interview

The Strategic Skip: Why I Started from Day 4

The Complete 7-Day Journey

The Real Challenge: From Static to Interactive

Day 5: CI/CD with GitHub and Amplify - The New Territory

Day 6: Interactive Contact Form - The Reality Check

Beyond the Challenge: Building a Production Portfolio

The Kiro Advantage: Spec-Driven Development

Professional Design Architecture

Accessibility-First Implementation

Mobile-First Responsive Design

Performance Optimizations

Advanced UX Features

The Unique Twist: Local AI Chat Integration

Why Chrome's Built-in AI?

The Technical Implementation Challenge

Graceful Degradation Strategy

Production Polish: The Details That Matter

Accessibility First

Performance Optimizations

Responsive Design Philosophy

Key Takeaways for Fellow Experienced Devs

1. Constraints Spark Creativity

2. Skip Smart, Not Blindly

3. User Experience > Technical Prowess

4. Modern Web Standards Matter

5. Ship Fast, Iterate Faster

The Results

Visual Showcase

Final Thoughts

cloud-launch-challenge-1 #aws #ai #webdevelopment #accessibility

[Boost]

Building a multiplayer TriviaSnake game with Amazon Q Developer!

Building a multiplayer TriviaSnake game with Amazon Q Developer!

Building a multiplayer TriviaSnake game with Amazon Q Developer!

🚀Rapid Learnings from Rapid Prototyping🚀

A Week-Long Journey into AI Prototyping, Feedback, and Feasibility

Building a real-time AI tutoring assistant

Table of Contents

Introduction

What We'll Build

The Technical Challenge

Architecture Overview

The Big Picture

How It All Works Together

Core Components

1. Frontend State Management - The Brain of User Experience

2. WebSocket Communication Layer - The Nervous System of Real-Time Interaction

3. AI Character Component - The Face of Artificial Intelligence

Implementation Patterns

1. Debounced AI Requests - Balancing Responsiveness with Efficiency

2. Intelligent State Detection - Understanding User Intent