📖 Notion Article with Diagrams
🎨 Diagram 1: Architecture Overview
┌─────────────────────────────────────────────────────────────┐
│ SAMVADA STUDIO │
│ (React 18 + TypeScript) │
└──────────────────────┬──────────────────────────────────────┘
│
┌──────────────┴──────────────┐
│ │
┌───────▼────────┐ ┌────────▼────────┐
│ UI LAYER │ │ STATE LAYER │
│ (Components) │◄─────────►│ (Context API) │
└───────┬────────┘ └────────┬────────┘
│ │
│ ┌────────────────────────┘
│ │
│ │ ┌──────────────────────┐
│ └───────►│ BUSINESS LOGIC │
│ │ (Utils, Services) │
│ └──────────┬───────────┘
│ │
│ ┌──────────▼───────────────────────────┐
│ │ LLM PROVIDER ABSTRACTION │
│ ├──────────────────────────────────────┤
└────────────►│ OpenAI │ Anthropic │ Google │ Ollama│
│ Azure │ Custom │ ... │ ... │
└──────────────────────────────────────┘
│
┌──────────────┴──────────────┐
│ │
┌───────▼────────┐ ┌─────────▼────────┐
│ PERSISTENCE │ │ EXTERNAL APIs │
│ (localStorage)│ │ (LLM Providers)│
└────────────────┘ └──────────────────┘
KEY PRINCIPLES:
✅ Separation of Concerns (UI, State, Logic, Data)
✅ Single Responsibility (Each layer has one job)
✅ Dependency Inversion (Abstract interfaces, concrete implementations)
🎨 Diagram 2: Data Flow
USER ACTION (Click, Type, Ctrl+K)
│
▼
┌────────────────────────────────┐
│ COMPONENT (UI Layer) │
│ - Button clicked │
│ - Input changed │
│ - Shortcut pressed │
└────────────┬───────────────────┘
│
▼
┌────────────────────────────────┐
│ DISPATCH (Action) │
│ dispatch({ │
│ type: 'ADD_CHAT', │
│ payload: { ... } │
│ }) │
└────────────┬───────────────────┘
│
▼
┌────────────────────────────────┐
│ REDUCER (State Update) │
│ function chatReducer( │
│ state, action │
│ ) { ... } │
└────────────┬───────────────────┘
│
▼
┌────────────────────────────────┐
│ NEW STATE │
│ state = { ...old, ...new } │
└────────────┬───────────────────┘
│
▼
┌────────────────────────────────┐
│ SIDE EFFECTS (if needed) │
│ - Save to localStorage │
│ - Call LLM API │
│ - Update UI │
└────────────┬───────────────────┘
│
▼
┌────────────────────────────────┐
│ RE-RENDER (React) │
│ Components update based on │
│ new state │
└────────────────────────────────┘
🎨 Diagram 3: Security Model
┌──────────────────────────────────────────────────────────┐
│ USER'S BROWSER │
├──────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────────────────────────┐ │
│ │ COMPONENT STATE (In-Memory) │ │
│ │ │ │
│ │ const [apiKey, setApiKey] = useState('') │ │
│ │ │ │
│ │ ✅ API keys stored here │ │
│ │ ✅ Cleared when tab closes │ │
│ │ ✅ Never persisted │ │
│ └─────────────┬───────────────────────────────┘ │
│ │ │
│ │ Used for API calls only │
│ ▼ │
│ ┌─────────────────────────────────────────────┐ │
│ │ HTTPS REQUEST │ │
│ │ │ │
│ │ Headers: { │ │
│ │ 'Authorization': `Bearer ${apiKey}` │ │
│ │ } │ │
│ │ │ │
│ │ ✅ Encrypted in transit │ │
│ │ ✅ Never logged │ │
│ └─────────────┬───────────────────────────────┘ │
│ │ │
└────────────────┼──────────────────────────────────────────┘
│
│ HTTPS (Encrypted)
▼
┌──────────────────────────────────────────────────────────┐
│ LLM PROVIDER (OpenAI, Claude, etc.) │
│ ✅ Receives encrypted request │
│ ✅ Validates API key │
│ ✅ Returns response │
└──────────────────────────────────────────────────────────┘
❌ WHAT WE DON'T DO:
- localStorage.setItem('apiKey', ...) ← NEVER
- Send API keys in query params ← NEVER (except Google official method)
- Log API keys to console ← NEVER
- Store API keys in cookies ← NEVER
✅ WHAT WE DO:
- In-memory storage only
- HTTPS enforcement (except localhost Ollama)
- Input sanitization
- No backend = No data collection
🎨 Diagram 4: Multi-Provider Architecture
┌──────────────────────────────────────────────────────────┐
│ SAMVADA STUDIO (UI) │
│ │
│ User types prompt: "Explain TypeScript" │
└────────────────┬──────────────────────────────────────────┘
│
▼
┌──────────────────────────────────────────────────────────┐
│ PROVIDER ABSTRACTION LAYER │
│ │
│ async function callLLM( │
│ provider: LLMProvider, │
│ prompt: string │
│ ): Promise<Response> │
│ │
│ - Validates provider config │
│ - Routes to correct implementation │
│ - Handles errors uniformly │
└────────────────┬──────────────────────────────────────────┘
│
┌──────────┴──────────┐
│ switch(provider.type)│
└──────────┬───────────┘
│
┌────────────┼────────────┐
│ │ │
▼ ▼ ▼
┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐
│ OpenAI │ │Anthropic│ │ Google │ │ Ollama │ │ Azure │ │ Custom │
├────────┤ ├────────┤ ├────────┤ ├────────┤ ├────────┤ ├────────┤
│ │ │ │ │ │ │ │ │ │ │ │
│ GPT-4 │ │Claude │ │ Gemini │ │ Llama │ │ GPT-4 │ │ Any │
│ GPT-3.5│ │ 3.5 │ │ Pro │ │ Mistral│ │ (Azure)│ │ API │
│ │ │ │ │ │ │ │ │ │ │ │
└────┬───┘ └────┬───┘ └────┬───┘ └────┬───┘ └────┬───┘ └────┬───┘
│ │ │ │ │ │
│ HTTPS │ HTTPS │ HTTPS │ HTTP(*) │ HTTPS │ Config
▼ ▼ ▼ ▼ ▼ ▼
┌────────────────────────────────────────────────────────────────────┐
│ EXTERNAL LLM APIS │
└────────────────────────────────────────────────────────────────────┘
(*) Ollama: HTTP allowed for localhost only (local model)
ADDING NEW PROVIDER (20 minutes):
1. Add type to union (1 min)
2. Add case to switch (1 min)
3. Implement API call (15 min)
4. Test (3 min)
✅ Done!
🎨 Diagram 5: Feature Map
┌────────────────────────────────────────────────────────────────┐
│ SAMVADA STUDIO │
│ 35+ FEATURES │
└────────────────────────────────────────────────────────────────┘
│
┌──────────────────────┼──────────────────────┐
│ │ │
▼ ▼ ▼
┌───────────────┐ ┌────────────────┐ ┌─────────────────┐
│ CORE CHAT │ │ POWER USER │ │ ORGANIZATION │
├───────────────┤ ├────────────────┤ ├─────────────────┤
│ Inline Edit │ │ Cmd Palette │ │ Pin Chats │
│ Drafts │ │ Voice Input │ │ Archive │
│ Regenerate │ │ Text-to-Speech │ │ Star Messages │
│ Quote Text │ │ Templates │ │ Folders │
│ Markdown │ │ Token Counter │ │ Search │
└───────────────┘ └────────────────┘ └─────────────────┘
│ │ │
└──────────────────────┼──────────────────────┘
│
┌──────────────┴─────────────┐
│ │
▼ ▼
┌───────────────────┐ ┌──────────────────┐
│ MULTI-PROVIDER │ │ SECURITY │
├───────────────────┤ ├──────────────────┤
│ OpenAI │ │ In-Memory Keys │
│ Anthropic │ │ HTTPS Only │
│ Google │ │ Input Sanitize │
│ Ollama │ │ No Backend │
│ Azure │ │ Local-First │
│ Custom │ │ Privacy by Design│
└───────────────────┘ └──────────────────┘
INSPIRED BY:
• Gemini (Inline Edit, Drafts)
• ChatGPT (Archive, Quote)
• Copilot (Command Palette, Shortcuts)
• VS Code (Keyboard-first)
• Obsidian (Local-first)