Browser-Based llm IDE Architecture

Overview

A VS Code-like web IDE with integrated dual-llm support (LM Studio + Claude Code), built with WASM/Rust, React/TypeScript, Chakra UI, Monaco editor, and xterm.js terminal.

System Architecture

┌────────────────────────────────────────────────────────────────┐
│                    Browser IDE (React + Chakra UI)              │
│  ┌──────────────┐ ┌──────────────┐ ┌─────────────────────────┐ │
│  │ File Explorer│ │Monaco editor │ │  llm Chat Panel         │ │
│  │ (OPFS)       │ │ (Code/Text)  │ │  - LM Studio            │ │
│  │              │ │              │ │  - Claude Code          │ │
│  ├──────────────┤ ├──────────────┤ │  - Parallel/Consensus   │ │
│  │ terminal     │ │ File Tabs    │ │  - Model Selector       │ │
│  │ (xterm.js)   │ │              │ │                         │ │
│  └──────────────┘ └──────────────┘ └─────────────────────────┘ │
└────────────────────────────────────────────────────────────────┘
                            ▲
                            │ (WASM Bridge)
                            ▼
┌────────────────────────────────────────────────────────────────┐
│                  WASM Core (Rust + wasm-bindgen)                │
│  ┌──────────────────┐  ┌──────────────────────────────────────┐│
│  │  LM Studio API   │  │   File System Manager (OPFS)         ││
│  │  Client (async)  │  │   - CRUD operations                  ││
│  └──────────────────┘  │   - Directory tree                   ││
│  ┌──────────────────┐  │   - Persistence                      ││
│  │  Claude Code     │  └──────────────────────────────────────┘│
│  │  Integration     │                                           │
│  └──────────────────┘                                           │
└────────────────────────────────────────────────────────────────┘
           │                              │
           ▼                              ▼
┌──────────────────┐          ┌─────────────────────────┐
│   LM Studio      │          │    Claude Code          │
│  (Windows Host)  │          │   (Docker/WSL)          │
│  :1234/v1        │          │   (subprocess/MCP)      │
└──────────────────┘          └─────────────────────────┘

Core Components

1. WASM/Rust Core (`wasm/`)

Purpose: High-performance API client, file system operations, computation

// Exposed to JavaScript via wasm-bindgen
#[wasm_bindgen]
pub struct LMStudioClient {
    // Async HTTP client for LM Studio API
}

#[wasm_bindgen]
pub struct FileSystemManager {
    // OPFS wrapper for file/folder operations
}

#[wasm_bindgen]
pub async fn chat_completion(prompt: String, model: String) -> Result<String, JsValue>

#[wasm_bindgen]
pub async fn stream_completion(prompt: String) -> Result<JsValue, JsValue>

Key Features:

Async HTTP requests to LM Studio API
OPFS (Origin Private File System) integration
JSON parsing and serialization
Streaming response handling
Zero-copy data transfer to JS

2. React Frontend (`src/`)

Tech Stack:

React 18 (TypeScript strict mode)
Chakra UI (components, theming, responsiveness)
Monaco editor (code editing)
xterm.js + xterm-addon-fit (terminal)
Zustand (state management)
React Query (async state)

layout (Split Pane):

┌─────────────┬───────────────────────┬──────────────────┐
│             │                       │                  │
│   File      │   Monaco editor       │   llm Chat       │
│   Tree      │   (Tabs)              │   Panel          │
│   (OPFS)    │                       │                  │
│             │                       │  ┌─────────────┐ │
├─────────────┤                       │  │Model Select │ │
│             │                       │  ├─────────────┤ │
│  terminal   │                       │  │Chat History │ │
│  (xterm.js) │                       │  │             │ │
│             │                       │  │[User input] │ │
└─────────────┴───────────────────────┴──────────────────┘

3. File System (OPFS)

Browser-based file storage:

Create/Read/Update/Delete files and folders
Persist across sessions
Navigate directory tree
Open files in Monaco editor
Export/Import projects

4. Monaco editor Integration

Features:

Syntax highlighting (multi-language)
IntelliSense (basic)
Multi-tab support
File type detection
Keyboard shortcuts (VS Code-like)

5. terminal (xterm.js)

Capabilities:

Shell-like interface
Execute commands via WASM or backend
Display llm responses
File operations (ls, cat, mkdir, etc.)
Integration with Claude Code

6. llm Integration

Modes:

Single Mode: Use one llm

Parallel Mode: Side-by-side responses

Prompt → ┌→ LM Studio  → Response A ─┐
         │                           ├→ Display
         └→ Claude Code → Response B ─┘

Sequential Mode: Chain responses

Prompt → LM Studio → Context → Claude Code → Final

Consensus Mode: Synthesize answers

Prompt → Both llms → Synthesizer → Final Answer

llm Panel Features:

Model selector (16+ LM Studio models)
Temperature/max_tokens controls
Streaming responses
Copy/export responses
Insert response into editor

Technology Stack

Frontend

Framework: React 18 + TypeScript (strict)
UI Library: Chakra UI
editor: Monaco editor (@monaco-editor/react)
terminal: xterm.js + addons
State: Zustand + React Query
Build: Vite + vite-plugin-wasm
Icons: React Icons

WASM/Rust

Runtime: wasm-bindgen + wasm-pack
HTTP: reqwest-wasm or gloo-net
Async: wasm-bindgen-futures
Serialization: serde + serde-wasm-bindgen
File System: web-sys (File System Access API)

Backend (Optional/Minimal)

Node.js + Express (proxy for Claude Code)
Or: Direct subprocess from WASM (if possible)

File Structure

/workspace/PROJECTS/t2/
├── README.md
├── architecture.md
├── package.json
├── tsconfig.json
├── vite.config.ts
├── wasm/                       # Rust WASM project
│   ├── cargo.toml
│   ├── src/
│   │   ├── lib.rs             # Main WASM exports
│   │   ├── lmstudio.rs        # LM Studio API client
│   │   ├── filesystem.rs      # OPFS operations
│   │   └── claude.rs          # Claude Code integration
│   └── pkg/                   # Built WASM output
├── src/                       # React frontend
│   ├── main.tsx
│   ├── app.tsx
│   ├── components/
│   │   ├── layout/
│   │   │   ├── IDElayout.tsx
│   │   │   ├── SplitPane.tsx
│   │   │   └── ResizablePanels.tsx
│   │   ├── file-explorer/
│   │   │   ├── file-tree.tsx
│   │   │   ├── FileNode.tsx
│   │   │   └── ContextMenu.tsx
│   │   ├── editor/
│   │   │   ├── Monacoeditor.tsx
│   │   │   ├── editorTabs.tsx
│   │   │   └── editorToolbar.tsx
│   │   ├── terminal/
│   │   │   ├── Xterminal.tsx
│   │   │   └── terminalControls.tsx
│   │   └── llm/
│   │       ├── chat-panel.tsx
│   │       ├── model-selector.tsx
│   │       ├── mode-selector.tsx
│   │       ├── message-list.tsx
│   │       └── InputBar.tsx
│   ├── hooks/
│   │   ├── useWasm.ts         # WASM initialization
│   │   ├── useFileSystem.ts   # OPFS operations
│   │   ├── usellm.ts          # llm interactions
│   │   └── useterminal.ts     # terminal state
│   ├── store/
│   │   ├── editor-store.ts
│   │   ├── fileStore.ts
│   │   ├── llm-store.ts
│   │   └── terminal-store.ts
│   ├── services/
│   │   ├── wasm-bridge.ts     # JS ↔ WASM interface
│   │   └── api.ts
│   ├── types/
│   │   ├── wasm.d.ts
│   │   └── index.ts
│   └── theme/
│       └── chakra-theme.ts
└── public/

WASM Integration Flow

Initialization:

import init, { LMStudioClient } from '../wasm/pkg';

await init();
const client = new LMStudioClient('host.docker.internal:1234');

File Operations (WASM ↔ OPFS):

const fs = new FileSystemManager();
await fs.create_file('/project/main.rs', content);
const files = await fs.list_directory('/project');

llm Chat (WASM ↔ LM Studio):

const response = await client.chat_completion(
  'Explain Rust ownership',
  'qwen/qwq-32b'
);

Streaming:

const stream = await client.stream_completion(prompt);
for await (const chunk of stream) {
  console.log(chunk);
}

Environment Configuration

# .env
VITE_LM_STUDIO_HOST=host.docker.internal
VITE_LM_STUDIO_PORT=1234
VITE_WASM_PATH=/wasm/pkg

Development Workflow

Setup

# Install Rust and wasm-pack
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
cargo install wasm-pack

# Install Node dependencies
npm install

# Build WASM module
cd wasm && wasm-pack build --target web && cd ..

# Start dev server
npm run dev

Development

# Watch WASM changes
npm run wasm:watch

# Watch React changes
npm run dev

# Run both concurrently
npm run dev:all

Key Features

File Management

✅ Create/edit/delete files and folders
✅ File tree navigation
✅ Context menu (right-click)
✅ Drag-and-drop
✅ Import/export projects

editor

✅ Monaco editor (VS Code engine)
✅ Multi-language syntax highlighting
✅ Multi-tab support
✅ IntelliSense (basic)
✅ Keyboard shortcuts

terminal

✅ xterm.js with shell emulation
✅ Command execution
✅ File operations
✅ llm command integration

llm Integration

✅ Dual llm support (LM Studio + Claude Code)
✅ 4 modes (Single, Parallel, Sequential, Consensus)
✅ Model selection (16+ models)
✅ Streaming responses
✅ Insert into editor
✅ Export conversations

Performance

🚀 WASM for compute-heavy operations
🚀 Zero-copy data transfer
🚀 Web Workers for background tasks
🚀 OPFS for fast file access
🚀 Lazy loading components

Benefits

Privacy: All computation local (Windows + Docker + Browser)
Performance: WASM near-native speed
Offline: Works without internet (after initial load)
Familiar UX: VS Code-like interface
Powerful: Dual llm + code editing + terminal
Extensible: Plugin architecture (future)

Roadmap

Phase 1: WASM setup + basic LM Studio integration
Phase 2: File system + Monaco editor
Phase 3: terminal + Claude Code
Phase 4: Dual llm modes
Phase 5: Polish + advanced features

Overview​

System Architecture​

Core Components​

1. WASM/Rust Core (wasm/)​

2. React Frontend (src/)​

3. File System (OPFS)​

4. Monaco editor Integration​

5. terminal (xterm.js)​

6. llm Integration​

Technology Stack​

Frontend​

WASM/Rust​

Backend (Optional/Minimal)​

File Structure​

WASM Integration Flow​

Environment Configuration​

Development Workflow​

Setup​

Development​

Key Features​

File Management​

editor​

terminal​

llm Integration​

Performance​

Benefits​

Roadmap​