LibreChat Desktop Development Guide

Expert guidance for building and maintaining LibreChat Desktop - a native cross-platform desktop application that wraps the LibreChat web UI using Tauri v2.

Project Overview

LibreChat Desktop is a cross-platform native desktop wrapper for LibreChat web UI built with Tauri v2. It provides native desktop features like global hotkeys, system tray integration, drag & drop support, offline caching, and quick capture overlay for seamless AI-powered desktop workflow integration.

**Architecture:**

Instructions for AI Agent

When working with this codebase, follow these guidelines:

1. Project Structure Understanding

**Directory Layout:**

```

src/ # Frontend source (TypeScript/React)

src-tauri/ # Rust backend source

├── src/ # Rust source files

├── Cargo.toml # Rust dependencies

└── tauri.conf.json # Tauri configuration

tests/ # Test files

├── contract/ # API contract tests

├── integration/ # Integration tests

└── unit/ # Unit tests

package.json # Frontend dependencies

```

Before making changes:

2. Key Dependencies to Use

**Rust Backend:**

**Frontend:**

3. Development Workflow

Follow this sequence when implementing features:

**Step 1: Write Tests First (TDD Approach)**

**Step 2: Implement Feature**

**Step 3: Validate and Refine**

**Step 4: Build and Verify**

4. Core Feature Implementation Priorities

When adding features, prioritize in this order:

**Phase 1: Foundation**

1. LibreChat API integration (auth, conversations, messages)

2. Basic UI with tabbed interface

3. Encrypted local storage with SQLite

**Phase 2: Native Features**

4. System tray integration with quick access menu

5. Global hotkeys for app summoning

6. Drag & drop for files, screenshots, and text

**Phase 3: Advanced Features**

7. Quick capture floating mini-window

8. Split view for conversation comparison

9. Multi-window support (docking, floating modes)

5. API Integration Requirements

Integrate these LibreChat REST API endpoints:

**Important Constraints:**

6. Security Best Practices

Always implement:

7. Performance Requirements

Ensure all implementations meet:

Use profiling tools to validate performance before finalizing features.

8. Cross-Platform Considerations

9. Testing Strategy

Implement tests in this order:

**Contract Tests** (`tests/contract/`):

**Unit Tests** (`tests/unit/`):

**Integration Tests** (`tests/integration/`):

10. Configuration Management

Key configuration files to update when making changes:

11. Common Development Commands

```bash

Start development with hot reload

npm run tauri dev

Build production bundle

npm run tauri build

Run all tests

cargo test && npm run test

Code quality checks

cargo fmt && cargo clippy

npm run format && npm run lint

Install dependencies

npm install

cd src-tauri && cargo build

```

12. Troubleshooting Guide

**Build Failures:**

**Development Server Issues:**

**Performance Problems:**

13. Code Quality Standards

Before submitting any changes:

Examples

Example 1: Adding a New Global Hotkey

```rust

// src-tauri/src/shortcuts.rs

use tauri_plugin_global_shortcut::{GlobalShortcutExt, Shortcut};

pub fn register_quick_capture(app: &tauri::App) -> Result<()> {

let shortcut = Shortcut::new(Some(Modifiers::SUPER), Code::KeySpace)?;

app.global_shortcut().on_shortcut(shortcut, |app, _event| {

// Show quick capture window

if let Some(window) = app.get_webview_window("quick-capture") {

window.show().unwrap();

window.set_focus().unwrap();

}

})?;

Ok(())

}

```

Example 2: Implementing Encrypted Storage

```rust

// src-tauri/src/storage.rs

use sqlx::SqlitePool;

use tauri_plugin_store::StoreExt;

pub async fn save_conversation(

pool: &SqlitePool,

conv_id: &str,

encrypted_data: Vec<u8>

) -> Result<()> {

sqlx::query!(

"INSERT INTO conversations (id, data) VALUES (?, ?)",

conv_id,

encrypted_data

)

.execute(pool)

.await?;

Ok(())

}

```

Example 3: React Component with Tauri Invoke

```typescript

// src/components/QuickCapture.tsx

import { invoke } from '@tauri-apps/api/core';

import { useState } from 'react';

export function QuickCapture() {

const [query, setQuery] = useState('');

const handleSubmit = async () => {

const response = await invoke('send_quick_query', {

message: query

});

console.log('AI Response:', response);

};

return (

<div className="quick-capture">

<input

value={query}

onChange={(e) => setQuery(e.target.value)}

placeholder="Ask AI anything..."

/>

<button onClick={handleSubmit}>Send</button>

</div>

);

}

```

Constraints

Notes