A hands-on learning resource demonstrating how to build production-ready GenAI applications through three progressive demos.

📊 Based on the RVA.js Presentation: View Slides

This repository teaches you how to:

• Transform UIs with natural language interfaces
• Process documents using multimodal AI (vision + text)
• Personalize content at scale with RAG and orchestration
• Design production systems with graceful degradation
• Choose the right patterns (simple vs orchestrated approaches)

Concept: Replace complex UI with natural language

What You'll Build:

• Natural language to structured query parser
• Zod schemas for type-safe validation
• Prompt engineering for safety and clarification
• Discriminated unions for response handling

Key Pattern: Single LLM call with structured output

Time: 2-3 hours | Difficulty: Beginner

Start Learning →

Concept: Process any document format with vision AI

What You'll Build:

• Claude Vision integration for image parsing
• Format-agnostic document extraction
• Partial success handling
• Simple vs orchestrated comparison

Key Pattern: Multimodal AI with graceful degradation

Time: 2-3 hours | Difficulty: Intermediate

Start Learning →

Concept: Generate hyper-personalized content using orchestration

What You'll Build:

• Multi-step LangChain workflow
• RAG (Retrieval-Augmented Generation)
• Persona-based content generation
• Optional feature handling (meme generation)

Key Pattern: Full orchestration pipeline

Time: 4-5 hours | Difficulty: Advanced

Start Learning →

• Node.js 18+ installed
• API Access to either:
  • Azure AI Foundry (recommended - provides access to GPT-4, Claude, and more)
  • Direct APIs: OpenAI + Anthropic
  • See INFRASTRUCTURE.md for detailed setup guide
• Basic knowledge of:
  • TypeScript/JavaScript
  • Async/await patterns
  • REST APIs

1. Clone the repository:

   git clone https://github.com/ncapito/rvajs-genai-presentation.git
   cd rvajs-genai-presentation

2. Choose a demo and follow its LEARN.md:

   • Demo 1 - Start here if you're new to GenAI
   • Demo 2 - Learn vision AI
   • Demo 3 - Master orchestration

3. Set up cloud infrastructure - See INFRASTRUCTURE.md for:

   • Azure AI Foundry setup (recommended)
   • Direct API alternatives (OpenAI + Anthropic)
   • Model deployment instructions
   • Cost estimates and free tier options

4. Start building! Each demo has step-by-step exercises

For Beginners:

Demo 1 → Demo 2 → Demo 3

For Experienced Developers:

Read all LEARN.md files → Pick the demo matching your interests

Demo 1: Single LLM Call
   User Input → LLM → Structured Output

Demo 2: Simple or Orchestrated
   Image → Vision AI → Structured Data
   OR
   Image → Analyze → Extract → Structure

Demo 3: Full Orchestration
   User → Analyze → RAG Retrieve → Style → Generate → Enhance

• LangChain.js - AI application framework
• Zod - Schema validation for type safety
• Azure AI Foundry - Access to GPT-4, Claude, FLUX-1.1-pro, and more
• Anthropic Claude - Vision AI capabilities (direct API)
• Angular - Frontend framework
• Node.js + Express - Backend API with SSE for real-time progress
• TypeScript - Type-safe development

rvajs-genai-presentation/
├── README.md                    # This file
├── INFRASTRUCTURE.md            # Cloud setup, API configuration
├── CONTRIBUTING.md              # Development setup guide
├── CLAUDE.md                    # AI assistant guidance
│
├── demo1-tasks/                 # Natural language querying
│   ├── LEARN.md                 # Learning guide with exercises
│   ├── backend/                 # Node.js API
│   │   └── .env.example         # Environment template
│   ├── frontend/                # Angular UI
│   └── docs/
│       └── ARCHITECTURE.md      # Technical details
│
├── demo2-receipts/              # Receipt parsing with vision
│   ├── LEARN.md                 # Learning guide
│   ├── backend/                 # Vision AI integration
│   │   └── .env.example         # Environment template
│   ├── frontend/                # Upload UI
│   └── docs/
│       └── ARCHITECTURE-*.md    # Technical details
│
└── demo3-email-generator/       # Email personalization
    ├── LEARN.md                 # Learning guide
    ├── backend/                 # LangChain orchestration
    │   └── .env.example         # Environment template
    └── frontend/                # Email display

By completing all three demos, you'll be able to:

• ✅ Implement structured LLM outputs with Zod
• ✅ Build safe prompts with validation and error handling
• ✅ Integrate vision AI for document processing
• ✅ Create multi-step LangChain workflows
• ✅ Implement RAG for dynamic context
• ✅ Design graceful degradation strategies

• ✅ Choose between simple vs orchestrated approaches
• ✅ Evaluate when to use RAG vs fine-tuning
• ✅ Balance cost, latency, and accuracy
• ✅ Handle partial successes gracefully
• ✅ Build production-ready error handling

• ✅ Simplify complex UIs with natural language
• ✅ Process unstructured documents at scale
• ✅ Generate personalized content dynamically
• ✅ Build end-to-end GenAI applications
• ✅ Deploy with confidence using fallback strategies

Each demo contrasts traditional approaches with GenAI solutions:

1. Start Simple - Single LLM call before orchestration
2. Schema First - Define structure, constrain outputs
3. Safety Always - Validate, sanitize, limit scope
4. Degrade Gracefully - Fallbacks for optional features
5. User-Centric - Natural interfaces over complex UIs

1. Combine Patterns - Use multiple demos in one application
2. Add Observability - Integrate LangSmith tracing
3. Optimize Costs - Cache results, use cheaper models where appropriate
4. Scale Up - Add database, queueing, rate limiting
5. Deploy - Containerize and deploy to cloud

• Project 1: Build a document Q&A system (Demo 2 + RAG)
• Project 2: Create a smart dashboard (Demo 1 + Demo 3)
• Project 3: Design a multi-agent workflow (All demos combined)

• 📊 Presentation Slides - Original RVA.js presentation
• INFRASTRUCTURE.md - Cloud setup, API configuration, cost estimates
• CONTRIBUTING.md - Development setup, contribution guidelines

• LangChain.js Docs
• Azure AI Foundry
• Anthropic Claude API
• Zod Documentation

• Prompt Engineering Guide
• RAG Best Practices
• Multimodal AI Guide
• LangChain Expression Language

• LangChain Discord
• OpenAI Community Forum
• Anthropic Developer Discord

1. Check LEARN.md - Each demo has troubleshooting sections
2. Review Reference Code - Complete implementations are provided
3. Read Architecture Docs - Deep dives in docs/ folders
4. Open an Issue - Describe what you're stuck on

Contributions welcome! See CONTRIBUTING.md for:

• How to set up your development environment
• Code style guidelines
• How to submit improvements
• How to report issues

This project is provided as-is for educational purposes.

Built to teach practical GenAI application development through hands-on examples.

Key Technologies:

• LangChain.js for orchestration
• Azure AI Foundry for GPT-4, embeddings, and image generation
• Anthropic Claude for vision AI
• Zod for type-safe schemas
• SSE for real-time progress updates

1. Check Prerequisites above
2. Read CONTRIBUTING.md for setup
3. Begin with Demo 1
4. Build something amazing! 🚀

Questions? Open an issue or check the LEARN.md files in each demo folder.

Want to contribute? See CONTRIBUTING.md for guidelines.