┌─────────────────────────────────────────────────────────────────┐
│ CodeFlow System │
│ (Collaborative Code Editor) │
└─────────────────────────────────────────────────────────────────┘
┌──────────────────────┐ ┌──────────────────────┐
│ │ │ │
│ Client Browser 1 │◄───────►│ Client Browser 2 │
│ │ │ │
└──────────┬───────────┘ └──────────┬───────────┘
│ │
│ Socket.IO Connections │
│ │
└────────────┬────────────────────┘
│
▼
┌────────────────────────┐
│ │
│ Express Server │
│ (Node.js + TS) │
│ │
│ ┌──────────────────┐ │
│ │ Socket Handlers │ │
│ └────────┬─────────┘ │
│ │ │
│ ▼ │
│ ┌──────────────────┐ │
│ │ AI Service │ │
│ │ (AIService.ts) │ │
│ └────────┬─────────┘ │
│ │ │
└───────────┼────────────┘
│
▼
┌────────────────────────┐
│ Google Gemini API │
│ (gemini-2.0-flash) │
└────────────────────────┘
User Input Query
│
▼
┌─────────────────────────────┐
│ AIView Component │
│ (User Interface) │
└──────────┬──────────────────┘
│
▼
┌─────────────────────────────┐
│ AIContext │
│ • Build Context │
│ - Current File │
│ - File Structure │
│ - Drawings │
│ - Chat History │
└──────────┬──────────────────┘
│
│ socket.emit(AI_QUERY)
▼
┌─────────────────────────────┐
│ Server Socket Handler │
│ • Receive Query │
│ • Extract Context │
└──────────┬──────────────────┘
│
▼
┌─────────────────────────────┐
│ AIService │
│ • Build Prompt │
│ • Call Gemini API │
│ • Parse Response │
│ • Extract Code Suggestions│
└──────────┬──────────────────┘
│
│ socket.emit(AI_RESPONSE)
▼
┌─────────────────────────────┐
│ All Clients in Room │
│ • Display Response │
│ • Show Code Suggestion │
└─────────────────────────────┘
┌──────────────────────────────────────────────────────┐
│ Context Gathering │
└──────────────────────────────────────────────────────┘
│
┌───────────────┼───────────────┬──────────────┐
│ │ │ │
▼ ▼ ▼ ▼
┌──────────────┐ ┌──────────────┐ ┌──────────┐ ┌────────────┐
│ FileContext │ │ AppContext │ │ Drawing │ │ Chat │
│ │ │ │ │ Context │ │ Context │
│ • Active File│ │ • Users │ │ │ │ │
│ • Content │ │ • Activity │ │ • Canvas │ │ • Messages │
│ • Structure │ │ • State │ │ • Shapes │ │ • History │
└──────┬───────┘ └──────┬───────┘ └────┬─────┘ └─────┬──────┘
│ │ │ │
└────────────────┼──────────────┴─────────────┘
│
▼
┌─────────────────────┐
│ Combined Context │
│ Object for AI │
└─────────────────────┘
AI Generates Suggestion
│
▼
┌─────────────────────────────┐
│ CodeSuggestion Component │
│ • Show Explanation │
│ • Display Original Code │
│ • Display Suggested Code │
│ • Accept/Reject Buttons │
└──────┬──────────────┬───────┘
│ │
Accept Reject
│ │
▼ ▼
┌─────────────┐ ┌──────────────┐
│ Apply Code │ │ Dismiss │
│ Update File │ │ Suggestion │
│ Sync Users │ │ │
└─────────────┘ └──────────────┘
CodeFlow/
├── client/
│ ├── src/
│ │ ├── components/
│ │ │ ├── ai/
│ │ │ │ └── CodeSuggestion.tsx
│ │ │ └── sidebar/
│ │ │ └── sidebar-views/
│ │ │ └── AIView.tsx
│ │ ├── context/
│ │ │ ├── AIContext.tsx ⭐ NEW
│ │ │ ├── AppProvider.tsx ✏️ Modified
│ │ │ └── ViewContext.tsx ✏️ Modified
│ │ └── types/
│ │ ├── ai.ts ⭐ NEW
│ │ ├── socket.ts ✏️ Modified
│ │ └── view.ts ✏️ Modified
│ └── package.json
│
├── server/
│ ├── src/
│ │ ├── ai-service.ts ⭐ NEW
│ │ ├── server.ts ✏️ Modified
│ │ └── types/
│ │ ├── ai.ts ⭐ NEW
│ │ └── socket.ts ✏️ Modified
│ ├── .env.example ⭐ NEW
│ └── package.json
│
└── Documentation/
├── AI_README.md ⭐ NEW
├── SETUP_GUIDE.md ⭐ NEW
├── CHANGES_SUMMARY.md ⭐ NEW
├── QUICK_REFERENCE.md ⭐ NEW
└── ARCHITECTURE.md ⭐ NEW (this file)
⭐ NEW = Newly created
✏️ Modified = Updated existing file
┌──────────────────────────────────────────────────────┐
│ React Context Tree │
└──────────────────────────────────────────────────────┘
│
▼
AppContextProvider
│
▼
SocketProvider
│
▼
SettingContextProvider
│
▼
ViewContextProvider
│
▼
FileContextProvider
│
▼
RunCodeContextProvider
│
▼
ChatContextProvider
│
▼
AIProvider ⭐ NEW
│
▼
[Application Components]
Client Events Server Events
───────────── ─────────────
AI_QUERY ────────────► Receive Query
│
▼
Process with AI
│
AI_RESPONSE ◄──────────── Send Response
│
AI_CODE_SUGGESTION ◄─────────── Send Suggestion
│
AI_TYPING ◄──────────── Typing Indicator
│
AI_CODE_ACCEPTED ────────────► Broadcast Accept
│
AI_CODE_REJECTED ────────────► Broadcast Reject
┌──────────────┐
│ User Opens │
│ AI Assistant │
└──────┬───────┘
│
▼
┌──────────────┐
│ Empty State │
│ with Tips │
└──────┬───────┘
│
▼
┌──────────────┐
│ User Types │
│ Query │
└──────┬───────┘
│
▼
┌──────────────┐
│ Click Send │
└──────┬───────┘
│
▼
┌──────────────┐
│ AI Typing │
│ Indicator │
└──────┬───────┘
│
▼
┌──────────────┐
│ AI Response │
│ Appears │
└──────┬───────┘
│
▼
Has Code
Suggestion?
│
┌───┴───┐
│ │
Yes No
│ │
▼ ▼
┌──────┐ Done
│Show │
│Diff │
└──┬───┘
│
▼
Accept or
Reject?
│
┌──┴──┐
│ │
▼ ▼
Accept Reject
│ │
▼ └──► Done
Update
Code
│
▼
Sync All
Users
│
▼
Done
┌──────────────────────────────────────────┐
│ Security Layers │
└──────────────────────────────────────────┘
1. Environment Variables
├── .env (not committed)
└── .env.example (template only)
2. Server Validation
├── API Key check on startup
├── Request validation
└── Error handling
3. Client Safety
├── User review required
├── Accept/Reject workflow
└── No automatic code execution
4. Network Security
├── CORS configuration
├── Socket.IO authentication
└── HTTPS (recommended for production)
┌──────────────────────────────────────────┐
│ Performance Considerations │
└──────────────────────────────────────────┘
Context Building
├── ⚡ < 100ms (local operations)
├── 📦 Compress large files
└── 🎯 Lazy load when possible
AI Processing
├── ⏱️ 2-5 seconds (API call)
├── 🔄 Show typing indicator
└── 📊 Stream responses (future)
Socket Communication
├── ⚡ < 50ms (local network)
├── 🔌 Persistent connections
└── 📡 Binary data support
UI Updates
├── ⚡ < 100ms (React state)
├── 🎨 Virtual scrolling
└── 💾 Memoization
┌──────────────────────────────────────────┐
│ Technology Stack │
└──────────────────────────────────────────┘
Frontend
├── React 18
├── TypeScript
├── Socket.IO Client
├── CodeMirror 6
├── Tailwind CSS
└── TLDraw
Backend
├── Node.js
├── Express
├── TypeScript
├── Socket.IO
└── Google Generative AI SDK
AI
└── Google Gemini 2.5 Flash
⭐ NEW - Newly created file/feature
✏️ Modified - Updated existing file
⚡ Fast - < 100ms
⏱️ Moderate - 1-5 seconds
🔄 Async - Non-blocking operation
📦 Data - Data transfer
🎯 Optimized - Performance enhanced
This architecture enables:
- ✅ Real-time collaboration
- ✅ Intelligent code assistance
- ✅ Context-aware AI
- ✅ Safe code modifications
- ✅ Scalable design