Skip to main content

Software Design Document (SDD)

AZ1.AI llm IDE - Browser-Based Development Environment​

Version: 0.1.0 Date: 2025-10-06 Author: AZ1.AI Development Team Status: Active Development

Table of Contents​

  1. Introduction
  2. System Overview
  3. Architecture Design
  4. Component Design
  5. Data Flow
  6. User Interface Design
  7. Security Design
  8. Performance Considerations
  9. Deployment Architecture

1. Introduction​

1.1 Purpose​

This document provides a comprehensive software design specification for the AZ1.AI llm IDE, a browser-based integrated development environment with dual-llm support, Monaco editor, terminal emulation, and file management capabilities.

1.2 Scope​

The system enables users to:

  • Edit code using Monaco editor (VS Code engine)
  • Interact with multiple llm providers (LM Studio, Claude Code)
  • Execute terminal commands
  • Manage files in browser storage
  • Work with 4 distinct llm workflow modes

1.3 Goals​

  • Privacy: All processing occurs locally (no cloud dependencies)
  • Performance: Near-native IDE experience in browser
  • Flexibility: Support multiple llm providers and workflow modes
  • Usability: Familiar VS Code-like interface

2. System Overview​

2.1 High-Level Architecture​

2.2 System Context​

2.3 Key Components​

ComponentTechnologyPurpose
Frontend UIReact 18 + TypeScriptUser interface layer
editorMonaco editorCode editing engine
terminalxterm.jsterminal emulation
State ManagementZustandApplication state
UI FrameworkChakra UIComponent library
llm ClientCustom MCP Clientllm communication
File SystemOPFSBrowser-based storage

3. Architecture Design​

3.1 Component Architecture​

3.2 Data Flow Architecture​

4. Component Design​

4.1 Core Components​

4.1.1 IDE layout Component​

interface IDElayoutProps {
  header: ReactNode;
  fileExplorer: ReactNode;
  editor: ReactNode;
  terminal: ReactNode;
  chatPanel: ReactNode;
  footer: ReactNode;
}

Responsibilities:

  • Manage layout structure
  • Handle panel resizing
  • Coordinate component communication

4.1.2 Monaco editor Integration​

interface editorPanelProps {
  tabs: editorTab[];
  activeTabId: string;
  onTabChange: (id: string) => void;
  onContentChange: (id: string, content: string) => void;
}

interface editorTab {
  id: string;
  path: string;
  name: string;
  content: string;
  language: string;
  isDirty: boolean;
}

Features:

  • Multi-tab editing
  • Syntax highlighting
  • Auto-save indicators
  • Language detection

4.1.3 llm Chat Panel​

interface ChatPanelProps {
  messages: Message[];
  models: llmModel[];
  mode: WorkflowMode;
  onSend: (prompt: string) => void;
}

type WorkflowMode = 'single' | 'parallel' | 'sequential' | 'consensus';

Workflow Modes:

  1. Single Mode: One llm at a time
  2. Parallel Mode: Side-by-side comparison
  3. Sequential Mode: Chained responses
  4. Consensus Mode: Synthesized output

4.2 State Management​

5. Data Flow​

5.1 llm Request Flow​

5.2 File Operation Flow​

6. User Interface Design​

6.1 layout Structure​

┌─────────────────────────────────────────────────────┐
│ ☰ [LOGO] AZ1.AI                        🌙/☀️      │  40px Header
├────────┬──────────────────────┬────────────────────┤
│        │                      │                    │
│  File  │   Monaco editor      │   llm Chat Panel   │
│  Tree  │   ┌─────┬─────┐      │   ┌──────────────┐ │
│        │   │Tab1 │Tab2 │      │   │Model Select  │ │
│  📁    │   └─────┴─────┘      │   ├──────────────┤ │
│  📄    │                      │   │Messages      │ │
│  📄    │   [Code editor]      │   │              │ │
│        │                      │   │              │ │
│        │                      │   │[Input]       │ │
├────────┴──────────────────────┴────────────────────┤
│  💻 terminal (xterm.js)                            │  150px
│  $ _                                               │
├─────────────────────────────────────────────────────┤
│  © 2025 AZ1.AI • 📧 1@az1.ai                       │  24px Footer
└─────────────────────────────────────────────────────┘

6.2 Responsive Design​

  • Minimum Width: 1024px
  • Recommended: 1920px
  • Panels: Resizable with drag handles
  • Mobile: Not supported (complex IDE features)

6.3 Theme Support​

Dark Theme (Default):

  • Background: #1e1e1e
  • Sidebar: #252526
  • Border: #3e3e42
  • Text: #cccccc

Light Theme:

  • Background: #ffffff
  • Sidebar: #f5f5f5
  • Border: #e0e0e0
  • Text: #333333

7. Security Design​

7.1 Security Architecture​

7.2 Security Measures​

LayerMeasureImplementation
NetworkHTTPS OnlyVite dev server + prod
APILocalhost restrictionLM Studio, Claude Code
StorageBrowser sandboxOPFS isolation
InputSanitizationDOMPurify for markdown
AuthenticationAPI keysEnvironment variables

8. Performance Considerations​

8.1 Performance Targets​

MetricTargetMeasurement
Initial Load< 2sTime to interactive
editor Open< 100msFile to editor
llm Response (streaming)< 50ms TTFBFirst token
terminal Response< 10msCommand to output
Panel Resize60 FPSSmooth animation

8.2 Optimization Strategies​

9. Deployment Architecture​

9.1 Development Environment​

9.2 Production Deployment​

9.3 Deployment Options​

  1. Static Hosting: Vercel, Netlify, GitHub Pages
  2. Self-Hosted: nginx, Apache
  3. Desktop App: Electron wrapper (future)

Appendix A: Technology Stack​

Frontend​

  • React 18.2.0
  • TypeScript 5.3.3
  • Chakra UI 2.8.2
  • Monaco editor 0.45.0
  • xterm.js 5.3.0
  • Zustand 4.4.7

Build Tools​

  • Vite 5.0.8
  • TypeScript Compiler
  • ESLint
  • Prettier

llm Integration​

  • LM Studio API (OpenAI-compatible)
  • MCP Protocol
  • Custom MCP Server

Appendix B: Glossary​

  • OPFS: Origin Private File System (browser storage API)
  • MCP: Model Context Protocol
  • llm: Large Language Model
  • IDE: Integrated Development Environment
  • TTFB: Time To First Byte

Document Version: 1.0 Last Updated: 2025-10-06 Next Review: 2025-11-06