# haiere/raia-ai architecture

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

- Interactive diagram: https://gitdiagram.com/haiere/raia-ai
- Repository: https://github.com/haiere/raia-ai

## Overview

RAIA is a browser-only, multi-provider AI chat application. Users configure a provider, model, and generation settings, then submit prompts; the client sends requests directly to provider APIs (optionally through a configured CORS proxy), renders replies, and saves conversations locally. The architecture also includes history management, message actions, keyboard shortcuts, and theme handling. The README documents additional interface capabilities; the supplied JavaScript excerpts are partial, so uncertain internal call wiring is omitted.

Main entry points: [`script.js`](https://github.com/haiere/raia-ai/blob/main/script.js) (Browser App Controller), [`index.html`](https://github.com/haiere/raia-ai/blob/main/index.html) (Chat and Settings UI), [`style.css`](https://github.com/haiere/raia-ai/blob/main/style.css) (Responsive Themes)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_interface["Chat Interface"]
  node_page["Chat and Settings UI<br/>[index.html]"]
  node_styles["Responsive Themes<br/>[style.css]"]
  node_shortcuts["Keyboard Shortcuts<br/>[script.js]"]
  node_theme["Theme Preference<br/>[script.js]"]
  node_suggestions["Suggestion Prompts<br/>[index.html]"]
end

subgraph group_runtime["Chat Runtime"]
  node_app["Browser App Controller<br/>[script.js]"]
  node_settings["Provider and Model Settings<br/>[script.js]"]
  node_composer["Prompt Submission<br/>[script.js]"]
  node_messages["Message Rendering<br/>[script.js]"]
  node_markdown["Markdown Rendering<br/>[script.js]"]
  node_message_actions["Copy and Regenerate<br/>[script.js]"]
end

subgraph group_state["Local State"]
  node_history["Chat History Management<br/>[script.js]"]
  node_storage[("Browser localStorage")]
  node_preferences["Settings Persistence<br/>[script.js]"]
end

subgraph group_integrations["Provider Integrations"]
  node_request["Provider Request Handling<br/>[script.js]"]
  node_proxy["Optional CORS Proxy<br/>[script.js]"]
end

node_user(("User"))
node_providers{{"AI Provider APIs"}}

node_user -->|"uses"| node_page
node_page -->|"dispatches events"| node_app
node_app -->|"manages"| node_settings
node_app -->|"handles submit"| node_composer
node_settings -->|"saves settings"| node_preferences
node_preferences -->|"reads and writes"| node_storage
node_composer -->|"sends prompt"| node_request
node_request -.->|"wraps when configured"| node_proxy
node_request -->|"sends API request"| node_providers
node_providers -->|"returns response"| node_request
node_request -->|"supplies reply"| node_messages
node_messages -->|"renders content"| node_markdown
node_app -->|"updates chat view"| node_messages
node_app -->|"manages sessions"| node_history
node_history -->|"reads and writes chats"| node_storage
node_app -->|"handles message actions"| node_message_actions
node_page -->|"provides controls"| node_shortcuts
node_shortcuts -->|"dispatches actions"| node_app
node_page -->|"offers prompts"| node_suggestions
node_suggestions -->|"starts prompt"| node_composer
node_app -->|"applies preference"| node_theme
node_theme -->|"selects presentation"| node_styles
node_page -->|"uses"| node_styles

click node_page "https://github.com/haiere/raia-ai/blob/main/index.html"
click node_styles "https://github.com/haiere/raia-ai/blob/main/style.css"
click node_app "https://github.com/haiere/raia-ai/blob/main/script.js"
click node_settings "https://github.com/haiere/raia-ai/blob/main/script.js"
click node_composer "https://github.com/haiere/raia-ai/blob/main/script.js"
click node_request "https://github.com/haiere/raia-ai/blob/main/script.js"
click node_proxy "https://github.com/haiere/raia-ai/blob/main/script.js"
click node_messages "https://github.com/haiere/raia-ai/blob/main/script.js"
click node_markdown "https://github.com/haiere/raia-ai/blob/main/script.js"
click node_message_actions "https://github.com/haiere/raia-ai/blob/main/script.js"
click node_history "https://github.com/haiere/raia-ai/blob/main/script.js"
click node_preferences "https://github.com/haiere/raia-ai/blob/main/script.js"
click node_shortcuts "https://github.com/haiere/raia-ai/blob/main/script.js"
click node_theme "https://github.com/haiere/raia-ai/blob/main/script.js"
click node_suggestions "https://github.com/haiere/raia-ai/blob/main/index.html"

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_page,node_styles,node_shortcuts,node_theme,node_suggestions,node_user toneBlue
class node_app,node_settings,node_composer,node_messages,node_markdown,node_message_actions toneAmber
class node_history,node_storage,node_preferences,node_providers toneMint
class node_request,node_proxy toneRose
```

## Components

### Chat Interface

- [Chat and Settings UI](https://github.com/haiere/raia-ai/blob/main/index.html): `index.html`
- [Responsive Themes](https://github.com/haiere/raia-ai/blob/main/style.css): `style.css`
- [Keyboard Shortcuts](https://github.com/haiere/raia-ai/blob/main/script.js): `script.js`
- [Theme Preference](https://github.com/haiere/raia-ai/blob/main/script.js): `script.js`
- [Suggestion Prompts](https://github.com/haiere/raia-ai/blob/main/index.html): `index.html`

### Chat Runtime

- [Browser App Controller](https://github.com/haiere/raia-ai/blob/main/script.js): `script.js`
- [Provider and Model Settings](https://github.com/haiere/raia-ai/blob/main/script.js): `script.js`
- [Prompt Submission](https://github.com/haiere/raia-ai/blob/main/script.js): `script.js`
- [Message Rendering](https://github.com/haiere/raia-ai/blob/main/script.js): `script.js`
- [Markdown Rendering](https://github.com/haiere/raia-ai/blob/main/script.js): `script.js`
- [Copy and Regenerate](https://github.com/haiere/raia-ai/blob/main/script.js): `script.js`

### Local State

- [Chat History Management](https://github.com/haiere/raia-ai/blob/main/script.js): `script.js`
- **Browser localStorage**
- [Settings Persistence](https://github.com/haiere/raia-ai/blob/main/script.js): `script.js`

### Provider Integrations

- [Provider Request Handling](https://github.com/haiere/raia-ai/blob/main/script.js): `script.js`
- [Optional CORS Proxy](https://github.com/haiere/raia-ai/blob/main/script.js): `script.js`

### Other components

- **User**
- **AI Provider APIs**

## Connections

- User → Chat and Settings UI: uses
- Chat and Settings UI → Browser App Controller: dispatches events
- Browser App Controller → Provider and Model Settings: manages
- Browser App Controller → Prompt Submission: handles submit
- Provider and Model Settings → Settings Persistence: saves settings
- Settings Persistence → Browser localStorage: reads and writes
- Prompt Submission → Provider Request Handling: sends prompt
- Provider Request Handling → Optional CORS Proxy: wraps when configured
- Provider Request Handling → AI Provider APIs: sends API request
- AI Provider APIs → Provider Request Handling: returns response
- Provider Request Handling → Message Rendering: supplies reply
- Message Rendering → Markdown Rendering: renders content
- Browser App Controller → Message Rendering: updates chat view
- Browser App Controller → Chat History Management: manages sessions
- Chat History Management → Browser localStorage: reads and writes chats
- Browser App Controller → Copy and Regenerate: handles message actions
- Chat and Settings UI → Keyboard Shortcuts: provides controls
- Keyboard Shortcuts → Browser App Controller: dispatches actions
- Chat and Settings UI → Suggestion Prompts: offers prompts
- Suggestion Prompts → Prompt Submission: starts prompt
- Browser App Controller → Theme Preference: applies preference
- Theme Preference → Responsive Themes: selects presentation
- Chat and Settings UI → Responsive Themes: uses