Technical Architecture & Integration Showcase
Under the Hood
Deep-dive into the decoupled AI chatbot architecture, C4 architectural models, runtime postMessage validation pipeline, and live telemetry monitor.
L1
C4 Level 1: System Context
High-level ecosystem interactions between users, the host platform, and external services.
┌────────────────────────┐ ┌──────────────────────────┐
│ Biochemistry Student │ │ Technical Client / Lead │
│ (Quizzing & Learning) │ │ (Architecture Reviewer) │
└───────────┬────────────┘ └────────────┬─────────────┘
│ │
│ Interacts with 3D UI / Chat │ Evaluates Under-The-Hood
▼ ▼
┌───────────────────────────────────────────────────────────┐
│ THE PEPTIDE PAL WEB PLATFORM │
│ WebGL 3D Visualization & AI Assistant Host │
└─────────────┬───────────────────────────────┬─────────────┘
│ │
│ window.postMessage() │ HTTPS / CORS REST
▼ ▼
┌───────────────────────────┐ ┌───────────────────────────┐
│ Decoupled AI Chatbot │ │ External Data Providers │
│ (Embedded Widget/Iframe) │ │ • RCSB PDB (Protein Bank)│
│ Emits viewer_commands │ │ • PubChem (SDF Chemical) │
└───────────────────────────┘ └───────────────────────────┘L2
C4 Level 2: Container Architecture
Internal subsystems, boundaries, and runtime execution layers.
┌─────────────────────────────────────────────────────────────────────────────┐ │ Next.js 14 App Router Host │ │ │ │ ┌───────────────────────┐ window.postMessage ┌──────────────────────┐ │ │ │ AI Lab Assistant │ ─────────────────────> │ useViewerMessage- │ │ │ │ (Simulator / Iframe) │ │ Bridge (Origin Guard)│ │ │ └───────────────────────┘ └──────────┬───────────┘ │ │ │ │ │ ▼ │ │ ┌───────────────────────┐ Validated Commands ┌──────────────────────┐ │ │ │ 3Dmol.js WebGL Engine │ <───────────────────── │ parseViewerCommand │ │ │ │ Canvas Container │ │ (Zod Schemas) │ │ │ └──────────┬────────────┘ └──────────┬───────────┘ │ │ │ │ │ │ │ Updates scene ▼ │ │ ▼ ┌──────────────────────┐ │ │ Hardware 60fps GPU │ Telemetry Ring-Buffer│ │ │ Rendering Loop │ (Bounded 50-log store│ │ │ └──────────────────────┘ │ └─────────────────────────────────────────────────────────────────────────────┘
L3
C4 Level 3: Sequence & Data-Flow Pipeline
End-to-end command dispatch from generation to GPU frame presentation.
Chatbot Widget Message Bridge Zod Parser 3Dmol Engine
│ │ │ │
│ 1. postMessage(payload) │ │ │
├────────────────────────────>│ │ │
│ │ 2. isOriginAllowed() │ │
│ │──┐ │ │
│ │ │ Verify allowlist │ │
│ │<─┘ │ │
│ │ │ │
│ │ 3. parseViewerCommand() │ │
│ ├────────────────────────>│ │
│ │ │ 4. Discriminated │
│ │ │ union check │
│ │<────────────────────────┤ │
│ │ │ │
│ │ 5. handleViewerCommand()│ │
│ ├──────────────────────────────────────────────>│
│ │ │ │ 6. setStyle()
│ │ │ │ addStyle()
│ │ │ │ render()
│ │ │ │──┐
│ │ 7. Telemetry: dispatched│ │ │ 60fps GPU
│ │<──────────────────────────────────────────────┤<─┘