# Build an Electron app (/tutorials/electron)
## What we'll build
We'll build an LLM chat desktop application using the following stack:
* **Electron** as the desktop runtime;
* **React** for the user interface;
* **Tailwind CSS** for styling; and
* **QVAC** to run LLM inference locally.
By the end of this tutorial, we'll have built the following:
## Prerequisites
* Node.js $\geq$ v22.17
* npm $\geq$ v10.9
* Linux/macOS (Windows with small adjustments)
Some commands are Bash‑specific. On Windows, use PowerShell/WSL or adapt them.
## Step 1: set up an Electron project
We'll use [electron-vite](https://electron-vite.org) to scaffold a full Electron + React + TypeScript project in a single command.
Create a new project:
```bash
npm create @quick-start/electron@latest llm-desktop-app -- --template react-ts
```
When prompted, answer **No** to both "Add Electron updater plugin?" and "Enable Electron download mirror proxy?".
Install dependencies and configure the dev script:
```bash
cd llm-desktop-app
npm install
npm pkg set scripts.dev="electron-vite dev -- --no-sandbox"
```
The `--no-sandbox` flag disables the Chromium sandbox, which is required on Linux when the SUID helper is not configured.
Start the app:
```bash
npm run dev
```
Confirm that an Electron window opens and renders the default electron-vite page:
The scaffold gives us a working Electron app with React, TypeScript, Vite HMR, and a preload script — all pre-configured. The key files we'll modify are:
| File | Purpose |
| -------------------------- | ------------------------------------ |
| `src/main/index.ts` | Electron main process |
| `src/preload/index.ts` | IPC bridge between main and renderer |
| `src/preload/index.d.ts` | Type declarations for the bridge |
| `src/renderer/src/App.tsx` | React root component |
| `electron.vite.config.ts` | Vite config for all three processes |
## Step 2: create the chat UI
In this step, we'll add Tailwind CSS and replace the scaffold's default UI with a chat interface. The chat will use stub responses for now — we'll wire it to QVAC in the next step.
Install Tailwind CSS:
```bash
npm i tailwindcss @tailwindcss/vite
```
Add the Tailwind plugin to the renderer in `electron.vite.config.ts`:
```ts title="electron.vite.config.ts" lineNumbers
import { resolve } from 'path'
import { defineConfig } from 'electron-vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite' // [!code ++]
export default defineConfig({
main: {},
preload: {},
renderer: {
resolve: {
alias: {
'@renderer': resolve('src/renderer/src')
}
},
plugins: [react()] // [!code --]
plugins: [react(), tailwindcss()] // [!code ++]
}
})
```
This tells Vite to process Tailwind utility classes in the renderer.
Replace the entire contents of `src/renderer/src/assets/main.css` with the following code:
```css title="src/renderer/src/assets/main.css"
@import 'tailwindcss';
```
This replaces the scaffold's default styles with Tailwind's base layer.
Replace the entire contents of `src/renderer/src/main.tsx` with the following code:
```ts title="src/renderer/src/main.tsx" lineNumbers
import './assets/main.css'
import { createRoot } from 'react-dom/client'
import App from './App'
createRoot(document.getElementById('root')!).render()
```
This removes React Strict Mode, which avoids double-invoked effects in development. That matters when we load a model in `useEffect`.
Replace the entire contents of `src/renderer/src/App.tsx` with the following code:
```ts title="src/renderer/src/App.tsx" lineNumbers
import { useState } from 'react'
type Message = { role: 'user' | 'assistant'; content: string }
function App(): React.JSX.Element {
const [loading, setLoading] = useState(false)
const [messages, setMessages] = useState([])
const [input, setInput] = useState('')
const handleSend = (): void => {
if (!input.trim()) return
setMessages(prev => [
...prev,
{ role: 'user', content: input },
{ role: 'assistant', content: 'Stub response from the assistant.' }
])
setInput('')
}
return (
