# rithish288/cf_ai_cloudflare_support_agent architecture

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

- Interactive diagram: https://gitdiagram.com/rithish288/cf_ai_cloudflare_support_agent
- Repository: https://github.com/rithish288/cf_ai_cloudflare_support_agent

## Overview

This is a Cloudflare Workers AI support-chat application. Customers chat through a React UI; the agent streams model responses, identifies customers, classifies and escalates issues, manages tickets, and retrieves Cloudflare documentation. An admin dashboard polls ticket and statistics APIs. The excerpts show the ticket, cache, and model integrations; some routing and frontend-to-agent details are supported by the README, while implementation details not sampled are omitted.

Main entry points: [`src/server.ts`](https://github.com/rithish288/cf_ai_cloudflare_support_agent/blob/main/src/server.ts) (Chat Agent), [`src/app.tsx`](https://github.com/rithish288/cf_ai_cloudflare_support_agent/blob/main/src/app.tsx) (App Shell), [`src/chat.tsx`](https://github.com/rithish288/cf_ai_cloudflare_support_agent/blob/main/src/chat.tsx) (Chat UI), [`src/ticketModule.ts`](https://github.com/rithish288/cf_ai_cloudflare_support_agent/blob/main/src/ticketModule.ts) (Ticket Operations)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["Customer and Admin UI"]
  node_app["App Shell<br/>[app.tsx]"]
  node_chat["Chat UI<br/>[chat.tsx]"]
  node_theme["Theme Toggle<br/>[themeToggle.tsx]"]
  node_admin["Admin Dashboard<br/>[admin.tsx]"]
  node_client["React Entry<br/>[client.tsx]"]
end

subgraph group_runtime["Agent Runtime"]
  node_worker["Worker Router<br/>[server.ts]"]
  node_agent["Chat Agent<br/>[server.ts]"]
end

subgraph group_support["Support Data"]
  node_tickettools["Ticket Tools<br/>[server.ts]"]
  node_ticketmodule["Ticket Operations<br/>[ticketModule.ts]"]
  node_d1[("D1 Tickets")]
end

subgraph group_knowledge["Documentation Retrieval"]
  node_doclookup["Docs Lookup<br/>[server.ts]"]
  node_docroutes["Docs Routes<br/>[docs-routes.ts]"]
  node_cache[("Docs Cache")]
end

node_user(("Customer"))
node_model["Workers AI"]
node_docs["Cloudflare Docs"]

node_user -->|"sends message"| node_chat
node_app -->|"renders"| node_chat
node_app -->|"renders"| node_admin
node_app -->|"renders"| node_theme
node_client -->|"mounts"| node_app
node_chat -->|"WebSocket chat"| node_agent
node_admin -->|"fetches APIs"| node_worker
node_worker -->|"routes requests"| node_agent
node_agent -->|"streams generation"| node_model
node_agent -->|"registers tools"| node_tickettools
node_tickettools -->|"calls operations"| node_ticketmodule
node_ticketmodule -->|"reads and writes"| node_d1
node_worker -->|"queries tickets"| node_ticketmodule
node_worker -.->|"queries tickets"| node_d1
node_agent -->|"fetches docs"| node_doclookup
node_doclookup -->|"resolves routes"| node_docroutes
node_doclookup -->|"reads and writes"| node_cache
node_doclookup -->|"fetches on miss"| node_docs

click node_app "https://github.com/rithish288/cf_ai_cloudflare_support_agent/blob/main/src/app.tsx"
click node_chat "https://github.com/rithish288/cf_ai_cloudflare_support_agent/blob/main/src/chat.tsx"
click node_theme "https://github.com/rithish288/cf_ai_cloudflare_support_agent/blob/main/src/themeToggle.tsx"
click node_admin "https://github.com/rithish288/cf_ai_cloudflare_support_agent/blob/main/src/admin.tsx"
click node_client "https://github.com/rithish288/cf_ai_cloudflare_support_agent/blob/main/src/client.tsx"
click node_worker "https://github.com/rithish288/cf_ai_cloudflare_support_agent/blob/main/src/server.ts"
click node_agent "https://github.com/rithish288/cf_ai_cloudflare_support_agent/blob/main/src/server.ts"
click node_tickettools "https://github.com/rithish288/cf_ai_cloudflare_support_agent/blob/main/src/server.ts"
click node_ticketmodule "https://github.com/rithish288/cf_ai_cloudflare_support_agent/blob/main/src/ticketModule.ts"
click node_doclookup "https://github.com/rithish288/cf_ai_cloudflare_support_agent/blob/main/src/server.ts"
click node_docroutes "https://github.com/rithish288/cf_ai_cloudflare_support_agent/blob/main/src/docs-routes.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_theme,node_admin,node_client toneBlue
class node_worker,node_agent toneAmber
class node_tickettools,node_ticketmodule,node_d1 toneMint
class node_doclookup,node_docroutes,node_cache,node_model toneRose
class node_user,node_docs toneIndigo
```

## Components

### Customer and Admin UI

- [App Shell](https://github.com/rithish288/cf_ai_cloudflare_support_agent/blob/main/src/app.tsx): `src/app.tsx`
- [Chat UI](https://github.com/rithish288/cf_ai_cloudflare_support_agent/blob/main/src/chat.tsx): `src/chat.tsx`
- [Theme Toggle](https://github.com/rithish288/cf_ai_cloudflare_support_agent/blob/main/src/themeToggle.tsx): `src/themeToggle.tsx`
- [Admin Dashboard](https://github.com/rithish288/cf_ai_cloudflare_support_agent/blob/main/src/admin.tsx): `src/admin.tsx`
- [React Entry](https://github.com/rithish288/cf_ai_cloudflare_support_agent/blob/main/src/client.tsx): `src/client.tsx`

### Agent Runtime

- [Worker Router](https://github.com/rithish288/cf_ai_cloudflare_support_agent/blob/main/src/server.ts): `src/server.ts`
- [Chat Agent](https://github.com/rithish288/cf_ai_cloudflare_support_agent/blob/main/src/server.ts): `src/server.ts`

### Support Data

- [Ticket Tools](https://github.com/rithish288/cf_ai_cloudflare_support_agent/blob/main/src/server.ts): `src/server.ts`
- [Ticket Operations](https://github.com/rithish288/cf_ai_cloudflare_support_agent/blob/main/src/ticketModule.ts): `src/ticketModule.ts`
- **D1 Tickets**

### Documentation Retrieval

- [Docs Lookup](https://github.com/rithish288/cf_ai_cloudflare_support_agent/blob/main/src/server.ts): `src/server.ts`
- [Docs Routes](https://github.com/rithish288/cf_ai_cloudflare_support_agent/blob/main/src/docs-routes.ts): `src/docs-routes.ts`
- **Docs Cache**

### Other components

- **Customer**
- **Workers AI**
- **Cloudflare Docs**

## Connections

- Customer → Chat UI: sends message (evidence: `README.md`)
- App Shell → Chat UI: renders (evidence: `src/app.tsx`)
- App Shell → Admin Dashboard: renders (evidence: `src/app.tsx`)
- App Shell → Theme Toggle: renders (evidence: `src/app.tsx`)
- React Entry → App Shell: mounts (evidence: `src/client.tsx`)
- Chat UI → Chat Agent: WebSocket chat (evidence: `README.md`)
- Admin Dashboard → Worker Router: fetches APIs (evidence: `src/admin.tsx`)
- Worker Router → Chat Agent: routes requests (evidence: `src/server.ts`)
- Chat Agent → Workers AI: streams generation (evidence: `src/server.ts`)
- Chat Agent → Ticket Tools: registers tools (evidence: `src/server.ts`)
- Ticket Tools → Ticket Operations: calls operations (evidence: `src/server.ts`)
- Ticket Operations → D1 Tickets: reads and writes (evidence: `src/ticketModule.ts`)
- Worker Router → Ticket Operations: queries tickets (evidence: `src/server.ts`)
- Worker Router → D1 Tickets: queries tickets (evidence: `README.md`)
- Chat Agent → Docs Lookup: fetches docs (evidence: `README.md`)
- Docs Lookup → Docs Routes: resolves routes (evidence: `src/server.ts`)
- Docs Lookup → Docs Cache: reads and writes (evidence: `src/server.ts`)
- Docs Lookup → Cloudflare Docs: fetches on miss (evidence: `README.md`)