How batouldev/knowledgeflow-ai works
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 AI agent · AppShell.jsx App shell · ChatArea.jsx Chat interface · DocumentsContext.jsx Document state
Components 23
React interface
- App providers
src/App.jsx - App shell
src/components/layout/AppShell.jsx - Upload controls
src/components/documents/UploadDropzone.jsx - Document list
src/components/documents/DocumentList.jsx - Chat interface
src/components/chat/ChatArea.jsx - Messages and sources
src/components/chat/MessageBubble.jsx
Frontend state and services
- Document state
src/context/DocumentsContext.jsx - Chat state
src/context/ChatContext.jsx - User and session IDs
src/utils/identity.js - Document service
src/services/documentService.js - Chat service
src/services/chatService.js - Webhook client
src/services/apiClient.js
Document ingestion
- Ingestion workflow
Personal Assistant – Document Ingestion.json - File validation
Personal Assistant – Document Ingestion.json - Text chunking
Personal Assistant – Document Ingestion.json - Embedding generation
Personal Assistant – Document Ingestion.json - Pinecone index
Agentic chat
- Chat workflow
Agentic Personal Assistant – Chat.json - AI agent
Agentic Personal Assistant – Chat.json - Document retrieval
Agentic Personal Assistant – Chat.json - Conversation memory
Agentic Personal Assistant – Chat.json
Other components
- User
- OpenAI
Connections 29
- User → Upload controls: selects files
README.md - User → Chat interface: asks questions
README.md - App providers → App shell: renders
src/App.jsx - App shell → Upload controls: shows
src/components/layout/AppShell.jsx - App shell → Document list: shows
src/components/layout/AppShell.jsx - App shell → Chat interface: shows
src/components/layout/AppShell.jsx - Chat interface → Messages and sources: renders
src/components/chat/ChatArea.jsx - Upload controls → Document state: adds files
src/components/documents/UploadDropzone.jsx - Document list → Document state: reads state
src/components/documents/DocumentList.jsx - Chat interface → Chat state: uses
src/components/chat/ChatArea.jsx - Document state → Document service: uploads via
src/context/DocumentsContext.jsx - Document state → User and session IDs: creates document IDs
src/context/DocumentsContext.jsx - Chat state → Chat service: sends requests
src/context/ChatContext.jsx - Chat state → User and session IDs: gets user and session IDs
src/context/ChatContext.jsx - Document service → Webhook client: posts multipart
src/services/documentService.js - Chat service → Webhook client: posts JSON
src/services/chatService.js - Document service → Ingestion workflow: uploads to webhook
src/services/documentService.js - Ingestion workflow → File validation: validates
README.md - File validation → Text chunking: splits text
README.md - Text chunking → Embedding generation: generates embeddings
README.md - Embedding generation → OpenAI: uses
README.md - Embedding generation → Pinecone index: stores vectors
README.md - Chat service → Chat workflow: sends to webhook
src/services/chatService.js - Chat workflow → AI agent: dispatches to
README.md - AI agent → Document retrieval: decides retrieval
README.md - Document retrieval → Pinecone index: searches vectors
README.md - AI agent → Conversation memory: uses conversation memory
README.md - AI agent → OpenAI: uses AI
README.md - AI agent → Chat workflow: returns grounded answer
README.md