# azizulhakim31/ai-chatbot architecture

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

## Overview

Nova AI is a browser-based Gemini chatbot. A user enters a message or selects a suggested prompt; the React app sends it with recent conversation history to the Express chat endpoint, which validates the request, applies the configured system prompt, and calls Gemini. The reply returns to the app for display, with assistant Markdown rendering. The app also persists conversation history in browser localStorage and supports clearing and copying responses. The README documents the health endpoint and responsive chat capabilities; the graph reflects sampled runtime wiring.

Main entry points: [`client/src/App.jsx`](https://github.com/azizulhakim31/ai-chatbot/blob/main/client/src/App.jsx) (Chat UI and workflow), [`server/server.js`](https://github.com/azizulhakim31/ai-chatbot/blob/main/server/server.js) (Chat and health API), [`client/src/main.jsx`](https://github.com/azizulhakim31/ai-chatbot/blob/main/client/src/main.jsx) (React entry point), [`server/prompt.js`](https://github.com/azizulhakim31/ai-chatbot/blob/main/server/prompt.js) (System prompt)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["Chat interface"]
  node_app["Chat UI and workflow<br/>[App.jsx]"]
  node_entry["React entry point<br/>[main.jsx]"]
  node_history[("Conversation history")]
  node_markdown["Markdown renderer"]
end

subgraph group_backend["Chat service"]
  node_api["Chat and health API<br/>[server.js]"]
end

subgraph group_behavior["Assistant behavior"]
  node_prompt["System prompt<br/>[prompt.js]"]
end

node_user(("Chat user"))
node_gemini["Google Gemini API"]

node_entry -->|"mounts"| node_app
node_user -->|"sends messages"| node_app
node_app -->|"reads and writes"| node_history
node_app -->|"posts chat request"| node_api
node_api -->|"returns reply"| node_app
node_app -->|"renders responses"| node_markdown
node_api -->|"uses instructions"| node_prompt
node_api -->|"generates content"| node_gemini

click node_app "https://github.com/azizulhakim31/ai-chatbot/blob/main/client/src/App.jsx"
click node_entry "https://github.com/azizulhakim31/ai-chatbot/blob/main/client/src/main.jsx"
click node_api "https://github.com/azizulhakim31/ai-chatbot/blob/main/server/server.js"
click node_prompt "https://github.com/azizulhakim31/ai-chatbot/blob/main/server/prompt.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_app,node_entry,node_history,node_markdown,node_user toneBlue
class node_api toneAmber
class node_prompt,node_gemini toneMint
```

## Components

### Chat interface

- [Chat UI and workflow](https://github.com/azizulhakim31/ai-chatbot/blob/main/client/src/App.jsx): `client/src/App.jsx`
- [React entry point](https://github.com/azizulhakim31/ai-chatbot/blob/main/client/src/main.jsx): `client/src/main.jsx`
- **Conversation history**
- **Markdown renderer**

### Chat service

- [Chat and health API](https://github.com/azizulhakim31/ai-chatbot/blob/main/server/server.js): `server/server.js`

### Assistant behavior

- [System prompt](https://github.com/azizulhakim31/ai-chatbot/blob/main/server/prompt.js): `server/prompt.js`

### Other components

- **Chat user**
- **Google Gemini API**

## Connections

- React entry point → Chat UI and workflow: mounts
- Chat user → Chat UI and workflow: sends messages
- Chat UI and workflow → Conversation history: reads and writes
- Chat UI and workflow → Chat and health API: posts chat request
- Chat and health API → Chat UI and workflow: returns reply
- Chat UI and workflow → Markdown renderer: renders responses
- Chat and health API → System prompt: uses instructions
- Chat and health API → Google Gemini API: generates content