# pwocclasses/myra-ai-assistant- architecture

> Architecture diagram of the GitHub repository pwocclasses/myra-ai-assistant-, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-12). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/pwocclasses/myra-ai-assistant-
- Repository: https://github.com/pwocclasses/myra-ai-assistant-

## Overview

Mayra is a voice-enabled assistant application with chat, productivity and specialist tools, Android device actions, and installable web/native app support. Users enter through the web app, select a capability, and receive a conversational or tool-specific result; chat and coding requests are sent to server API routes. The graph preserves major UI capabilities and supporting browser/device services. Source excerpts do not expose server route implementations or all component interactions, so those connections are omitted rather than inferred.

Main entry points: [`src/App.tsx`](https://github.com/pwocclasses/myra-ai-assistant-/blob/main/src/App.tsx) (App shell), [`server.ts`](https://github.com/pwocclasses/myra-ai-assistant-/blob/main/server.ts) (API server), [`src/components/ChatHistory.tsx`](https://github.com/pwocclasses/myra-ai-assistant-/blob/main/src/components/ChatHistory.tsx) (Chat history), [`src/components/VoiceControls.tsx`](https://github.com/pwocclasses/myra-ai-assistant-/blob/main/src/components/VoiceControls.tsx) (Voice controls)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_experience["Assistant experience"]
  node_app["App shell<br/>[App.tsx]"]
  node_chat["Chat history<br/>[ChatHistory.tsx]"]
  node_voice["Voice controls<br/>[VoiceControls.tsx]"]
  node_orb["Assistant orb<br/>[AiOrb.tsx]"]
  node_header["Navigation header<br/>[Header.tsx]"]
  node_actions["Action modal<br/>[ActionModal.tsx]"]
  node_settings["Preferences<br/>[SettingsModal.tsx]"]
end

subgraph group_tools["Specialist tools"]
  node_coding["Coding studio<br/>[CodingStudio.tsx]"]
  node_youtube["YouTube assistant"]
  node_screen["Screen assistant"]
  node_personal["Personal planner"]
  node_weather["Weather lookup<br/>[weather.ts]"]
end

subgraph group_platform["Device and install"]
  node_launcher["Android launcher"]
  node_android["Android integration<br/>[android.ts]"]
  node_install["Install dialog"]
  node_pwa["PWA install state<br/>[usePWAInstall.ts]"]
  node_native["Android host<br/>[MainActivity.kt]"]
end

subgraph group_services["Browser services"]
  node_speech["Speech service<br/>[speech.ts]"]
  node_synth["Sound effects<br/>[synth.ts]"]
  node_backend["API server<br/>[server.ts]"]
end

node_user(("User"))
node_gemini(("Gemini API"))

node_user -->|"uses"| node_app
node_app -->|"renders"| node_chat
node_app -->|"renders"| node_voice
node_app -->|"renders"| node_orb
node_app -->|"renders"| node_header
node_app -->|"renders"| node_actions
node_app -->|"renders"| node_settings
node_app -->|"selects view"| node_coding
node_app -->|"selects view"| node_youtube
node_app -->|"selects view"| node_screen
node_app -->|"selects view"| node_launcher
node_app -->|"posts chat"| node_backend
node_coding -->|"posts coding"| node_backend
node_personal -->|"fetches weather"| node_weather
node_launcher -->|"launches apps"| node_android
node_install -->|"checks install"| node_pwa
node_chat -->|"uses speech"| node_speech
node_voice -->|"plays effects"| node_synth
node_backend -.-> node_gemini

click node_app "https://github.com/pwocclasses/myra-ai-assistant-/blob/main/src/App.tsx"
click node_chat "https://github.com/pwocclasses/myra-ai-assistant-/blob/main/src/components/ChatHistory.tsx"
click node_voice "https://github.com/pwocclasses/myra-ai-assistant-/blob/main/src/components/VoiceControls.tsx"
click node_orb "https://github.com/pwocclasses/myra-ai-assistant-/blob/main/src/components/AiOrb.tsx"
click node_header "https://github.com/pwocclasses/myra-ai-assistant-/blob/main/src/components/Header.tsx"
click node_actions "https://github.com/pwocclasses/myra-ai-assistant-/blob/main/src/components/ActionModal.tsx"
click node_settings "https://github.com/pwocclasses/myra-ai-assistant-/blob/main/src/components/SettingsModal.tsx"
click node_coding "https://github.com/pwocclasses/myra-ai-assistant-/blob/main/src/components/CodingStudio.tsx"
click node_youtube "https://github.com/pwocclasses/myra-ai-assistant-/blob/main/src/components/YouTubeAssistant.tsx"
click node_screen "https://github.com/pwocclasses/myra-ai-assistant-/blob/main/src/components/ScreenAssistant.tsx"
click node_personal "https://github.com/pwocclasses/myra-ai-assistant-/blob/main/src/components/PersonalAssistant.tsx"
click node_weather "https://github.com/pwocclasses/myra-ai-assistant-/blob/main/src/services/weather.ts"
click node_launcher "https://github.com/pwocclasses/myra-ai-assistant-/blob/main/src/components/AndroidAppLauncher.tsx"
click node_android "https://github.com/pwocclasses/myra-ai-assistant-/blob/main/src/services/android.ts"
click node_install "https://github.com/pwocclasses/myra-ai-assistant-/blob/main/src/components/AndroidInstallModal.tsx"
click node_pwa "https://github.com/pwocclasses/myra-ai-assistant-/blob/main/src/services/usePWAInstall.ts"
click node_native "https://github.com/pwocclasses/myra-ai-assistant-/blob/main/android/app/src/main/java/ai/mayra/companion/MainActivity.kt"
click node_speech "https://github.com/pwocclasses/myra-ai-assistant-/blob/main/src/services/speech.ts"
click node_synth "https://github.com/pwocclasses/myra-ai-assistant-/blob/main/src/services/synth.ts"
click node_backend "https://github.com/pwocclasses/myra-ai-assistant-/blob/main/server.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_app,node_chat,node_voice,node_orb,node_header,node_actions,node_settings,node_user toneBlue
class node_coding,node_youtube,node_screen,node_personal,node_weather toneAmber
class node_launcher,node_android,node_install,node_pwa,node_native,node_gemini toneMint
class node_speech,node_synth,node_backend toneRose
```

## Components

### Assistant experience

- [App shell](https://github.com/pwocclasses/myra-ai-assistant-/blob/main/src/App.tsx): `src/App.tsx`
- [Chat history](https://github.com/pwocclasses/myra-ai-assistant-/blob/main/src/components/ChatHistory.tsx): `src/components/ChatHistory.tsx`
- [Voice controls](https://github.com/pwocclasses/myra-ai-assistant-/blob/main/src/components/VoiceControls.tsx): `src/components/VoiceControls.tsx`
- [Assistant orb](https://github.com/pwocclasses/myra-ai-assistant-/blob/main/src/components/AiOrb.tsx): `src/components/AiOrb.tsx`
- [Navigation header](https://github.com/pwocclasses/myra-ai-assistant-/blob/main/src/components/Header.tsx): `src/components/Header.tsx`
- [Action modal](https://github.com/pwocclasses/myra-ai-assistant-/blob/main/src/components/ActionModal.tsx): `src/components/ActionModal.tsx`
- [Preferences](https://github.com/pwocclasses/myra-ai-assistant-/blob/main/src/components/SettingsModal.tsx): `src/components/SettingsModal.tsx`

### Specialist tools

- [Coding studio](https://github.com/pwocclasses/myra-ai-assistant-/blob/main/src/components/CodingStudio.tsx): `src/components/CodingStudio.tsx`
- [YouTube assistant](https://github.com/pwocclasses/myra-ai-assistant-/blob/main/src/components/YouTubeAssistant.tsx): `src/components/YouTubeAssistant.tsx`
- [Screen assistant](https://github.com/pwocclasses/myra-ai-assistant-/blob/main/src/components/ScreenAssistant.tsx): `src/components/ScreenAssistant.tsx`
- [Personal planner](https://github.com/pwocclasses/myra-ai-assistant-/blob/main/src/components/PersonalAssistant.tsx): `src/components/PersonalAssistant.tsx`
- [Weather lookup](https://github.com/pwocclasses/myra-ai-assistant-/blob/main/src/services/weather.ts): `src/services/weather.ts`

### Device and install

- [Android launcher](https://github.com/pwocclasses/myra-ai-assistant-/blob/main/src/components/AndroidAppLauncher.tsx): `src/components/AndroidAppLauncher.tsx`
- [Android integration](https://github.com/pwocclasses/myra-ai-assistant-/blob/main/src/services/android.ts): `src/services/android.ts`
- [Install dialog](https://github.com/pwocclasses/myra-ai-assistant-/blob/main/src/components/AndroidInstallModal.tsx): `src/components/AndroidInstallModal.tsx`
- [PWA install state](https://github.com/pwocclasses/myra-ai-assistant-/blob/main/src/services/usePWAInstall.ts): `src/services/usePWAInstall.ts`
- [Android host](https://github.com/pwocclasses/myra-ai-assistant-/blob/main/android/app/src/main/java/ai/mayra/companion/MainActivity.kt): `android/app/src/main/java/ai/mayra/companion/MainActivity.kt`

### Browser services

- [Speech service](https://github.com/pwocclasses/myra-ai-assistant-/blob/main/src/services/speech.ts): `src/services/speech.ts`
- [Sound effects](https://github.com/pwocclasses/myra-ai-assistant-/blob/main/src/services/synth.ts): `src/services/synth.ts`
- [API server](https://github.com/pwocclasses/myra-ai-assistant-/blob/main/server.ts): `server.ts`

### Other components

- **User**
- **Gemini API**

## Connections

- User → App shell: uses
- App shell → Chat history: renders (evidence: `src/App.tsx`)
- App shell → Voice controls: renders (evidence: `src/App.tsx`)
- App shell → Assistant orb: renders (evidence: `src/App.tsx`)
- App shell → Navigation header: renders (evidence: `src/App.tsx`)
- App shell → Action modal: renders (evidence: `src/App.tsx`)
- App shell → Preferences: renders (evidence: `src/App.tsx`)
- App shell → Coding studio: selects view (evidence: `src/App.tsx`)
- App shell → YouTube assistant: selects view (evidence: `src/App.tsx`)
- App shell → Screen assistant: selects view (evidence: `src/App.tsx`)
- App shell → Android launcher: selects view (evidence: `src/App.tsx`)
- App shell → API server: posts chat (evidence: `src/App.tsx`)
- Coding studio → API server: posts coding (evidence: `src/components/CodingStudio.tsx`)
- Personal planner → Weather lookup: fetches weather (evidence: `src/components/PersonalAssistant.tsx`)
- Android launcher → Android integration: launches apps (evidence: `src/components/AndroidAppLauncher.tsx`)
- Install dialog → PWA install state: checks install (evidence: `src/components/AndroidInstallModal.tsx`)
- Chat history → Speech service: uses speech (evidence: `src/components/ChatHistory.tsx`)
- Voice controls → Sound effects: plays effects (evidence: `src/components/VoiceControls.tsx`)
- API server → Gemini API