# batouldev/knowledgeflow-ai architecture

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

- Interactive diagram: https://gitdiagram.com/batouldev/knowledgeflow-ai
- Repository: https://github.com/batouldev/knowledgeflow-ai

## Overview

KnowledgeFlow AI is a React document assistant backed by n8n workflows. Users upload documents through the frontend, which validates them and sends them for ingestion; users can then ask questions and receive answers with sources. The chat context sends requests through a service and webhook to an agent workflow, which can retrieve document chunks and use conversation memory. Workflow internals and external integrations are represented from README descriptions, not inspected workflow source; frontend relationships are based on the sampled source index and excerpts.

Main entry points: [`Agentic Personal Assistant – Chat.json`](https://github.com/batouldev/knowledgeflow-ai/blob/main/Agentic%20Personal%20Assistant%20%E2%80%93%20Chat.json) (AI agent), [`src/components/layout/AppShell.jsx`](https://github.com/batouldev/knowledgeflow-ai/blob/main/src/components/layout/AppShell.jsx) (App shell), [`src/components/chat/ChatArea.jsx`](https://github.com/batouldev/knowledgeflow-ai/blob/main/src/components/chat/ChatArea.jsx) (Chat interface), [`src/context/DocumentsContext.jsx`](https://github.com/batouldev/knowledgeflow-ai/blob/main/src/context/DocumentsContext.jsx) (Document state)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["React interface"]
  node_app["App providers<br/>[App.jsx]"]
  node_shell["App shell<br/>[AppShell.jsx]"]
  node_upload["Upload controls<br/>[UploadDropzone.jsx]"]
  node_documentview["Document list<br/>[DocumentList.jsx]"]
  node_chatview["Chat interface<br/>[ChatArea.jsx]"]
  node_messageview["Messages and sources<br/>[MessageBubble.jsx]"]
end

subgraph group_state["Frontend state and services"]
  node_documentsstate["Document state"]
  node_chatstate["Chat state<br/>[ChatContext.jsx]"]
  node_identity["User and session IDs<br/>[identity.js]"]
  node_documentservice["Document service<br/>[documentService.js]"]
  node_chatservice["Chat service<br/>[chatService.js]"]
  node_apiclient["Webhook client<br/>[apiClient.js]"]
end

subgraph group_ingestion["Document ingestion"]
  node_ingestworkflow["Ingestion workflow"]
  node_validation["File validation"]
  node_chunking["Text chunking"]
  node_embeddings["Embedding generation"]
  node_vectorstore[("Pinecone index")]
end

subgraph group_chat["Agentic chat"]
  node_chatworkflow["Chat workflow"]
  node_agent["AI agent"]
  node_retrieval["Document retrieval"]
  node_memory[("Conversation memory")]
end

node_user(("User"))
node_openai{{"OpenAI"}}

node_user -->|"selects files"| node_upload
node_user -->|"asks questions"| node_chatview
node_app -->|"renders"| node_shell
node_shell -->|"shows"| node_upload
node_shell -->|"shows"| node_documentview
node_shell -->|"shows"| node_chatview
node_chatview -->|"renders"| node_messageview
node_upload -->|"adds files"| node_documentsstate
node_documentview -->|"reads state"| node_documentsstate
node_chatview -->|"uses"| node_chatstate
node_documentsstate -->|"uploads via"| node_documentservice
node_documentsstate -->|"creates document IDs"| node_identity
node_chatstate -->|"sends requests"| node_chatservice
node_chatstate -->|"gets user and session IDs"| node_identity
node_documentservice -->|"posts multipart"| node_apiclient
node_chatservice -->|"posts JSON"| node_apiclient
node_documentservice -->|"uploads to webhook"| node_ingestworkflow
node_ingestworkflow -.->|"validates"| node_validation
node_validation -.->|"splits text"| node_chunking
node_chunking -.->|"generates embeddings"| node_embeddings
node_embeddings -.->|"uses"| node_openai
node_embeddings -.->|"stores vectors"| node_vectorstore
node_chatservice -->|"sends to webhook"| node_chatworkflow
node_chatworkflow -.->|"dispatches to"| node_agent
node_agent -.->|"decides retrieval"| node_retrieval
node_retrieval -.->|"searches vectors"| node_vectorstore
node_agent -.->|"uses conversation memory"| node_memory
node_agent -.->|"uses AI"| node_openai
node_agent -.->|"returns grounded answer"| node_chatworkflow

click node_app "https://github.com/batouldev/knowledgeflow-ai/blob/main/src/App.jsx"
click node_shell "https://github.com/batouldev/knowledgeflow-ai/blob/main/src/components/layout/AppShell.jsx"
click node_upload "https://github.com/batouldev/knowledgeflow-ai/blob/main/src/components/documents/UploadDropzone.jsx"
click node_documentview "https://github.com/batouldev/knowledgeflow-ai/blob/main/src/components/documents/DocumentList.jsx"
click node_chatview "https://github.com/batouldev/knowledgeflow-ai/blob/main/src/components/chat/ChatArea.jsx"
click node_messageview "https://github.com/batouldev/knowledgeflow-ai/blob/main/src/components/chat/MessageBubble.jsx"
click node_documentsstate "https://github.com/batouldev/knowledgeflow-ai/blob/main/src/context/DocumentsContext.jsx"
click node_chatstate "https://github.com/batouldev/knowledgeflow-ai/blob/main/src/context/ChatContext.jsx"
click node_identity "https://github.com/batouldev/knowledgeflow-ai/blob/main/src/utils/identity.js"
click node_documentservice "https://github.com/batouldev/knowledgeflow-ai/blob/main/src/services/documentService.js"
click node_chatservice "https://github.com/batouldev/knowledgeflow-ai/blob/main/src/services/chatService.js"
click node_apiclient "https://github.com/batouldev/knowledgeflow-ai/blob/main/src/services/apiClient.js"
click node_ingestworkflow "https://github.com/batouldev/knowledgeflow-ai/blob/main/Personal%20Assistant%20%E2%80%93%20Document%20Ingestion.json"
click node_validation "https://github.com/batouldev/knowledgeflow-ai/blob/main/Personal%20Assistant%20%E2%80%93%20Document%20Ingestion.json"
click node_chunking "https://github.com/batouldev/knowledgeflow-ai/blob/main/Personal%20Assistant%20%E2%80%93%20Document%20Ingestion.json"
click node_embeddings "https://github.com/batouldev/knowledgeflow-ai/blob/main/Personal%20Assistant%20%E2%80%93%20Document%20Ingestion.json"
click node_chatworkflow "https://github.com/batouldev/knowledgeflow-ai/blob/main/Agentic%20Personal%20Assistant%20%E2%80%93%20Chat.json"
click node_agent "https://github.com/batouldev/knowledgeflow-ai/blob/main/Agentic%20Personal%20Assistant%20%E2%80%93%20Chat.json"
click node_retrieval "https://github.com/batouldev/knowledgeflow-ai/blob/main/Agentic%20Personal%20Assistant%20%E2%80%93%20Chat.json"
click node_memory "https://github.com/batouldev/knowledgeflow-ai/blob/main/Agentic%20Personal%20Assistant%20%E2%80%93%20Chat.json"

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_shell,node_upload,node_documentview,node_chatview,node_messageview,node_user toneBlue
class node_documentsstate,node_chatstate,node_identity,node_documentservice,node_chatservice,node_apiclient toneAmber
class node_ingestworkflow,node_validation,node_chunking,node_embeddings,node_vectorstore toneMint
class node_chatworkflow,node_agent,node_retrieval,node_memory toneRose
class node_openai toneIndigo
```

## Components

### React interface

- [App providers](https://github.com/batouldev/knowledgeflow-ai/blob/main/src/App.jsx): `src/App.jsx`
- [App shell](https://github.com/batouldev/knowledgeflow-ai/blob/main/src/components/layout/AppShell.jsx): `src/components/layout/AppShell.jsx`
- [Upload controls](https://github.com/batouldev/knowledgeflow-ai/blob/main/src/components/documents/UploadDropzone.jsx): `src/components/documents/UploadDropzone.jsx`
- [Document list](https://github.com/batouldev/knowledgeflow-ai/blob/main/src/components/documents/DocumentList.jsx): `src/components/documents/DocumentList.jsx`
- [Chat interface](https://github.com/batouldev/knowledgeflow-ai/blob/main/src/components/chat/ChatArea.jsx): `src/components/chat/ChatArea.jsx`
- [Messages and sources](https://github.com/batouldev/knowledgeflow-ai/blob/main/src/components/chat/MessageBubble.jsx): `src/components/chat/MessageBubble.jsx`

### Frontend state and services

- [Document state](https://github.com/batouldev/knowledgeflow-ai/blob/main/src/context/DocumentsContext.jsx): `src/context/DocumentsContext.jsx`
- [Chat state](https://github.com/batouldev/knowledgeflow-ai/blob/main/src/context/ChatContext.jsx): `src/context/ChatContext.jsx`
- [User and session IDs](https://github.com/batouldev/knowledgeflow-ai/blob/main/src/utils/identity.js): `src/utils/identity.js`
- [Document service](https://github.com/batouldev/knowledgeflow-ai/blob/main/src/services/documentService.js): `src/services/documentService.js`
- [Chat service](https://github.com/batouldev/knowledgeflow-ai/blob/main/src/services/chatService.js): `src/services/chatService.js`
- [Webhook client](https://github.com/batouldev/knowledgeflow-ai/blob/main/src/services/apiClient.js): `src/services/apiClient.js`

### Document ingestion

- [Ingestion workflow](https://github.com/batouldev/knowledgeflow-ai/blob/main/Personal%20Assistant%20%E2%80%93%20Document%20Ingestion.json): `Personal Assistant – Document Ingestion.json`
- [File validation](https://github.com/batouldev/knowledgeflow-ai/blob/main/Personal%20Assistant%20%E2%80%93%20Document%20Ingestion.json): `Personal Assistant – Document Ingestion.json`
- [Text chunking](https://github.com/batouldev/knowledgeflow-ai/blob/main/Personal%20Assistant%20%E2%80%93%20Document%20Ingestion.json): `Personal Assistant – Document Ingestion.json`
- [Embedding generation](https://github.com/batouldev/knowledgeflow-ai/blob/main/Personal%20Assistant%20%E2%80%93%20Document%20Ingestion.json): `Personal Assistant – Document Ingestion.json`
- **Pinecone index**

### Agentic chat

- [Chat workflow](https://github.com/batouldev/knowledgeflow-ai/blob/main/Agentic%20Personal%20Assistant%20%E2%80%93%20Chat.json): `Agentic Personal Assistant – Chat.json`
- [AI agent](https://github.com/batouldev/knowledgeflow-ai/blob/main/Agentic%20Personal%20Assistant%20%E2%80%93%20Chat.json): `Agentic Personal Assistant – Chat.json`
- [Document retrieval](https://github.com/batouldev/knowledgeflow-ai/blob/main/Agentic%20Personal%20Assistant%20%E2%80%93%20Chat.json): `Agentic Personal Assistant – Chat.json`
- [Conversation memory](https://github.com/batouldev/knowledgeflow-ai/blob/main/Agentic%20Personal%20Assistant%20%E2%80%93%20Chat.json): `Agentic Personal Assistant – Chat.json`

### Other components

- **User**
- **OpenAI**

## Connections

- User → Upload controls: selects files (evidence: `README.md`)
- User → Chat interface: asks questions (evidence: `README.md`)
- App providers → App shell: renders (evidence: `src/App.jsx`)
- App shell → Upload controls: shows (evidence: `src/components/layout/AppShell.jsx`)
- App shell → Document list: shows (evidence: `src/components/layout/AppShell.jsx`)
- App shell → Chat interface: shows (evidence: `src/components/layout/AppShell.jsx`)
- Chat interface → Messages and sources: renders (evidence: `src/components/chat/ChatArea.jsx`)
- Upload controls → Document state: adds files (evidence: `src/components/documents/UploadDropzone.jsx`)
- Document list → Document state: reads state (evidence: `src/components/documents/DocumentList.jsx`)
- Chat interface → Chat state: uses (evidence: `src/components/chat/ChatArea.jsx`)
- Document state → Document service: uploads via (evidence: `src/context/DocumentsContext.jsx`)
- Document state → User and session IDs: creates document IDs (evidence: `src/context/DocumentsContext.jsx`)
- Chat state → Chat service: sends requests (evidence: `src/context/ChatContext.jsx`)
- Chat state → User and session IDs: gets user and session IDs (evidence: `src/context/ChatContext.jsx`)
- Document service → Webhook client: posts multipart (evidence: `src/services/documentService.js`)
- Chat service → Webhook client: posts JSON (evidence: `src/services/chatService.js`)
- Document service → Ingestion workflow: uploads to webhook (evidence: `src/services/documentService.js`)
- Ingestion workflow → File validation: validates (evidence: `README.md`)
- File validation → Text chunking: splits text (evidence: `README.md`)
- Text chunking → Embedding generation: generates embeddings (evidence: `README.md`)
- Embedding generation → OpenAI: uses (evidence: `README.md`)
- Embedding generation → Pinecone index: stores vectors (evidence: `README.md`)
- Chat service → Chat workflow: sends to webhook (evidence: `src/services/chatService.js`)
- Chat workflow → AI agent: dispatches to (evidence: `README.md`)
- AI agent → Document retrieval: decides retrieval (evidence: `README.md`)
- Document retrieval → Pinecone index: searches vectors (evidence: `README.md`)
- AI agent → Conversation memory: uses conversation memory (evidence: `README.md`)
- AI agent → OpenAI: uses AI (evidence: `README.md`)
- AI agent → Chat workflow: returns grounded answer (evidence: `README.md`)