# haiere/kirana architecture

> Architecture diagram of the GitHub repository haiere/kirana, 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/kirana
- Repository: https://github.com/haiere/kirana

## Overview

Kirana is a browser-based streaming chatbot. A user submits a message, the app adds it to in-memory conversation history, requests a Groq completion either directly or through a server-side proxy, and renders streamed text back into the chat. Settings and theme preferences are also held in memory. The tree and sampled source support these runtime paths; deployment configuration and the HTML/CSS details are not mapped as separate subsystems.

Main entry points: [`app.js`](https://github.com/haiere/kirana/blob/main/app.js) (Chat controller), [`functions/api/chat.js`](https://github.com/haiere/kirana/blob/main/functions/api/chat.js) (Chat proxy), [`index.html`](https://github.com/haiere/kirana/blob/main/index.html) (Chat interface)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_chat["Chat experience"]
  node_ui["Chat interface<br/>[index.html]"]
  node_app["Chat controller<br/>[app.js]"]
  node_history["Conversation history<br/>[app.js]"]
  node_renderer["Message renderer<br/>[app.js]"]
end

subgraph group_requests["Model requests"]
  node_stream["Streaming client<br/>[app.js]"]
  node_proxy["Chat proxy<br/>[chat.js]"]
  node_secret[("API key secret")]
end

subgraph group_settings["Preferences"]
  node_prefs[("In-memory preferences<br/>[app.js]")]
end

node_user(("User"))
node_groq["Groq API"]

node_user -->|"enters messages"| node_ui
node_app -->|"handles events"| node_ui
node_app -->|"updates history"| node_history
node_app -->|"renders messages"| node_renderer
node_app -->|"requests completion"| node_stream
node_stream -.->|"calls directly"| node_groq
node_stream -->|"posts messages"| node_proxy
node_proxy -->|"reads key"| node_secret
node_proxy -->|"forwards request"| node_groq
node_groq -->|"streams response"| node_stream
node_app -->|"reads and writes"| node_prefs

click node_ui "https://github.com/haiere/kirana/blob/main/index.html"
click node_app "https://github.com/haiere/kirana/blob/main/app.js"
click node_history "https://github.com/haiere/kirana/blob/main/app.js"
click node_renderer "https://github.com/haiere/kirana/blob/main/app.js"
click node_stream "https://github.com/haiere/kirana/blob/main/app.js"
click node_proxy "https://github.com/haiere/kirana/blob/main/functions/api/chat.js"
click node_prefs "https://github.com/haiere/kirana/blob/main/app.js"

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_ui,node_app,node_history,node_renderer,node_user toneBlue
class node_stream,node_proxy,node_secret toneAmber
class node_prefs,node_groq toneMint
```

## Components

### Chat experience

- [Chat interface](https://github.com/haiere/kirana/blob/main/index.html): `index.html`
- [Chat controller](https://github.com/haiere/kirana/blob/main/app.js): `app.js`
- [Conversation history](https://github.com/haiere/kirana/blob/main/app.js): `app.js`
- [Message renderer](https://github.com/haiere/kirana/blob/main/app.js): `app.js`

### Model requests

- [Streaming client](https://github.com/haiere/kirana/blob/main/app.js): `app.js`
- [Chat proxy](https://github.com/haiere/kirana/blob/main/functions/api/chat.js): `functions/api/chat.js`
- **API key secret**

### Preferences

- [In-memory preferences](https://github.com/haiere/kirana/blob/main/app.js): `app.js`

### Other components

- **User**
- **Groq API**

## Connections

- User → Chat interface: enters messages
- Chat controller → Chat interface: handles events
- Chat controller → Conversation history: updates history
- Chat controller → Message renderer: renders messages
- Chat controller → Streaming client: requests completion
- Streaming client → Groq API: calls directly
- Streaming client → Chat proxy: posts messages
- Chat proxy → API key secret: reads key
- Chat proxy → Groq API: forwards request
- Groq API → Streaming client: streams response
- Chat controller → In-memory preferences: reads and writes