Architecture

This page gives you a developer’s overview of how Touch Me fits together.

Project Structure

touchme/
├── docs/         # Starlight documentation (you're here)
├── web/          # SvelteKit app (main game)
│   ├── src/
│   │   ├── lib/         # Shared code and components
│   │   │   ├── components/  # Svelte components
│   │   │   ├── server/      # Server-side services
│   │   ├── routes/      # SvelteKit routes
│   │   │   ├── api/        # API endpoints
└── content/     # Backup data storage

Data Flow

Touch Me handles data through client-side storage to preserve user privacy.

flowchart TD
    Browser["Browser Storage"] <--> Memory["Memory System"]
    Memory <--> Components["UI Components"]
    Components -- "API Calls" --> Endpoints["API Endpoints"]
    Endpoints <--> ExternalServices["External Services\n(Claude, ElevenLabs, etc.)"]
    ExternalServices --> Endpoints
    Endpoints --> Components

Key Components

• Memory System - Central state management
• API Endpoints - Server-side functionality
• Level Structure - Game narrative flow
• Chat Interface - Primary user interaction

Technology Stack

• Frontend: SvelteKit, TypeScript
• AI Services: Claude (Anthropic), ElevenLabs, Deepgram
• Documentation: Astro with Starlight

The game uses Svelte’s reactivity system for a responsive experience combined with AI services for generating dynamic content.