# dwisusanto29/llm-chat-app-template architecture

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

- Interactive diagram: https://gitdiagram.com/dwisusanto29/llm-chat-app-template
- Repository: https://github.com/dwisusanto29/llm-chat-app-template

## Overview

This is a Cloudflare Workers AI chat template. A user enters a message in the browser UI; the client adds it to local conversation history and POSTs that history to the Worker. The Worker routes the request, adds a system prompt when needed, invokes Workers AI, and returns its streaming response for the client to render and retain. The README also documents optional AI Gateway integration and observability; Gateway wiring is commented out in the sampled handler. The graph reflects the available source excerpts and documented capabilities.

Main entry points: [`src/index.ts`](https://github.com/dwisusanto29/llm-chat-app-template/blob/main/src/index.ts) (Chat handler), [`public/chat.js`](https://github.com/dwisusanto29/llm-chat-app-template/blob/main/public/chat.js) (Chat client), [`public/index.html`](https://github.com/dwisusanto29/llm-chat-app-template/blob/main/public/index.html) (Chat page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["Browser chat"]
  node_ui["Chat page<br/>[index.html]"]
  node_client["Chat client<br/>[chat.js]"]
end

subgraph group_worker["Worker API"]
  node_worker_entry["Request router<br/>[index.ts]"]
  node_chat_handler["Chat handler<br/>[index.ts]"]
  node_message_types["Message types<br/>[types.ts]"]
  node_assets["Static assets"]
  node_observability["Worker logs"]
end

subgraph group_ai["AI services"]
  node_workers_ai["Workers AI"]
  node_ai_gateway["AI Gateway"]
end

node_user(("Chat user"))

node_user -->|"uses"| node_ui
node_ui -->|"loads script"| node_client
node_client -->|"renders replies"| node_user
node_worker_entry -->|"fetches assets"| node_assets
node_client -->|"POSTs chat"| node_worker_entry
node_worker_entry -->|"dispatches"| node_chat_handler
node_chat_handler -->|"runs model"| node_workers_ai
node_chat_handler -.->|"can route via"| node_ai_gateway
node_workers_ai -->|"streams response"| node_chat_handler
node_chat_handler -->|"returns stream"| node_client
node_client -->|"updates history"| node_client
node_chat_handler -->|"logs errors"| node_observability

click node_ui "https://github.com/dwisusanto29/llm-chat-app-template/blob/main/public/index.html"
click node_client "https://github.com/dwisusanto29/llm-chat-app-template/blob/main/public/chat.js"
click node_worker_entry "https://github.com/dwisusanto29/llm-chat-app-template/blob/main/src/index.ts"
click node_chat_handler "https://github.com/dwisusanto29/llm-chat-app-template/blob/main/src/index.ts"
click node_message_types "https://github.com/dwisusanto29/llm-chat-app-template/blob/main/src/types.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_ui,node_client,node_user toneBlue
class node_worker_entry,node_chat_handler,node_message_types,node_assets,node_observability toneAmber
class node_workers_ai,node_ai_gateway toneMint
```

## Components

### Browser chat

- [Chat page](https://github.com/dwisusanto29/llm-chat-app-template/blob/main/public/index.html): `public/index.html`
- [Chat client](https://github.com/dwisusanto29/llm-chat-app-template/blob/main/public/chat.js): `public/chat.js`

### Worker API

- [Request router](https://github.com/dwisusanto29/llm-chat-app-template/blob/main/src/index.ts): `src/index.ts`
- [Chat handler](https://github.com/dwisusanto29/llm-chat-app-template/blob/main/src/index.ts): `src/index.ts`
- [Message types](https://github.com/dwisusanto29/llm-chat-app-template/blob/main/src/types.ts): `src/types.ts`
- **Static assets**
- **Worker logs**

### AI services

- **Workers AI**
- **AI Gateway**

### Other components

- **Chat user**

## Connections

- Chat user → Chat page: uses
- Chat page → Chat client: loads script
- Chat client → Chat user: renders replies
- Request router → Static assets: fetches assets
- Chat client → Request router: POSTs chat
- Request router → Chat handler: dispatches
- Chat handler → Workers AI: runs model
- Chat handler → AI Gateway: can route via
- Workers AI → Chat handler: streams response
- Chat handler → Chat client: returns stream
- Chat client → Chat client: updates history
- Chat handler → Worker logs: logs errors