Architecture Overview

Staque IO is built on a modern, scalable architecture designed for reliability, security, and performance.

System Architecture

Technology Stack

Frontend

• Framework: Next.js 14 with App Router
• Language: TypeScript
• UI Library: React 18
• Styling: Tailwind CSS
• State Management: React Context API
• Fonts: Google Fonts (Playfair Display, Manrope)
• Icons: Lucide React

Backend

• Runtime: Node.js 18+
• Framework: Next.js API Routes
• Language: TypeScript
• Authentication: JWT (jsonwebtoken)
• Password Hashing: bcryptjs
• Database Client: node-postgres (pg)

Database

• DBMS: PostgreSQL 13+
• Connection Pooling: pg Pool
• Schema Management: SQL migrations

Cloud Services

• AWS Bedrock: Foundation model deployment
• AWS SageMaker: Custom model hosting
• AWS Pricing API: Real-time cost data
• NVIDIA NIM: Hosted AI models
• OpenAI: AI-powered recommendations

Core Components

1. Authentication Layer

JWT-based authentication system with role-based access control (RBAC). Supports multiple user roles including super_admin, admin, and regular users.

// JWT Token Structure
{
  userId: string,
  username: string,
  role: 'super_admin' | 'admin' | 'user',
  exp: number  // 24 hour expiration
}

2. Model Management

Centralized system for discovering, configuring, and deploying AI models across multiple platforms:

• Model Discovery: List available models from AWS Bedrock, SageMaker JumpStart, and NVIDIA NIM
• Model Configuration: Store and manage system prompts and model parameters
• Model Deployment: Deploy models with automated infrastructure provisioning

3. Conversation System

Thread-based conversation management with support for multiple AI models:

• Conversations: Top-level container for related chats
• Threads: Individual conversation threads with full message history
• Messages: User and assistant messages with metadata
• Usage Tracking: Token usage and cost tracking per thread

4. Resource Management

Comprehensive resource lifecycle management:

• Deployment: Create and configure resources
• Monitoring: Track status, health, and metrics
• Control: Start, stop, restart, and delete operations
• Cost Tracking: Real-time cost monitoring and estimates

5. AI Recommendation Engine

OpenAI-powered intelligent infrastructure recommendations:

• Analyzes use case requirements
• Recommends optimal model and instance type
• Provides cost estimates and comparisons
• Assesses compliance requirements

Data Flow

Typical Request Flow

1. User makes request through Next.js frontend
2. Request passes through authentication middleware
3. JWT token is validated and user info extracted
4. API route handler processes the request
5. Database queries executed (if needed)
6. AWS SDK calls made to cloud services
7. Response formatted and returned to client

Chat Message Flow

User sends message
    ↓
Validate authentication
    ↓
Load conversation thread
    ↓
Prepare context (history + system prompt)
    ↓
Call AI model API (Bedrock/SageMaker/NIM)
    ↓
Parse response and extract tokens
    ↓
Calculate costs
    ↓
Update thread with new messages
    ↓
Update usage statistics
    ↓
Return response to user

Security Architecture

Authentication & Authorization

• JWT tokens with 24-hour expiration
• Bcrypt password hashing with salt rounds
• Role-based access control (RBAC)
• Secure token storage in localStorage

Data Protection

• Environment variable-based configuration
• No API keys stored in database
• Masked credentials in API responses
• SQL injection protection via parameterized queries

AWS Security

• IAM role-based access
• VPC configuration for SageMaker endpoints
• Security groups and subnet isolation
• AWS Signature V4 authentication

Scalability Considerations

Database

• Connection pooling for efficient resource usage
• Indexed queries for fast lookups
• Pagination support for large datasets
• JSON columns for flexible metadata storage

API Layer

• Serverless architecture with Next.js API routes
• Stateless design for horizontal scaling
• Efficient caching strategies
• Rate limiting capabilities

Frontend

• Server-side rendering (SSR) for fast initial load
• Client-side state management for reactivity
• Code splitting and lazy loading
• Optimized asset delivery

Database Schema Design

The database is organized into several key tables:

• users: User accounts and authentication
• conversations: Top-level conversation containers
• conversation_threads: Individual chat threads with usage tracking
• chat_messages: Legacy message storage
• deployed_resources: AWS resource metadata
• model_configurations: Model settings and prompts

View detailed database schema →

Deployment Architecture

Development

• Local Next.js development server
• PostgreSQL database (local or cloud)
• Hot module replacement for fast iteration

Production

• Vercel/AWS deployment options
• Managed PostgreSQL (RDS or similar)
• CDN for static assets
• Environment-based configuration