TrinaxAI as a Progressive Web App: Install on Any Device

TrinaxAI’s frontend is a Progressive Web App built with React 19, TypeScript, Vite 6, and Tailwind CSS. It’s served over HTTPS on port 3334 and is installable as a native-feeling app on iOS, Android, and desktop browsers — no app store required.

Tech Stack

Layer	Technology
Framework	React 19 + TypeScript
Build tool	Vite 6 with `vite-plugin-pwa`
Styling	Tailwind CSS + framer-motion
Markdown	react-markdown
PWA manifest	Auto-generated by `vite-plugin-pwa`
HTTPS	Self-signed certificate (localhost and LAN IP)

Installing the PWA

iOS (Safari)
Android (Chrome)
Desktop Chrome / Edge

Open in Safari

Navigate to https://[YOUR-LAN-IP]:3334 on Safari. You must use Safari — Chrome on iOS does not support PWA installation.

Trust the Certificate

Tap Show Details → Visit This Website → Visit Website when Safari warns about the self-signed certificate. This grants a per-site trust exception.

Add to Home Screen

Tap the Share button (box with arrow) at the bottom of Safari, then tap Add to Home Screen. Give it a name and tap Add.

Launch

Tap the new TrinaxAI icon on your Home Screen. It opens in full-screen mode without the Safari browser chrome.

Open in Chrome

Navigate to https://[YOUR-LAN-IP]:3334 in Chrome.

Trust the Certificate

Tap Advanced → Proceed to [IP] (unsafe) to bypass the self-signed certificate warning.

Install the App

Chrome automatically shows an Add to Home Screen banner, or tap the three-dot menu → Add to Home Screen / Install App.

Launch

The app icon appears on your home screen and opens in standalone mode.

Open in Browser

Navigate to https://localhost:3334. The browser will show a certificate warning — click Advanced → Proceed to localhost.

Install

Click the install icon (⊕) in the address bar, or open the browser menu → Install TrinaxAI. On Edge, this may appear as Apps → Install this site as an app.

Launch

TrinaxAI opens in its own window without browser chrome, like a native desktop app. A shortcut is added to your Applications / Start Menu.

Accessing from Your Phone on the Same WiFi

Your TrinaxAI backend and PWA are reachable from any device on the same network.

Find Your LAN IP

On the machine running TrinaxAI, run:

# Linux / macOS
ip addr show | grep "inet " | grep -v 127
# or
hostname -I

# macOS
ipconfig getifaddr en0

# Windows
ipconfig | findstr "IPv4"

You’re looking for an address like 192.168.1.42 or 10.0.0.5.

Open on Your Phone

On your phone (same WiFi), open: https://192.168.1.42:3334(Replace with your actual LAN IP.)

Trust the Certificate

The browser will warn about the self-signed certificate. Follow the platform-specific steps in the installation tabs above to trust it.

Install as PWA

Follow the iOS or Android installation steps above to pin TrinaxAI to your home screen.

The RAG API (port 3333) and PWA (port 3334) both bind to 0.0.0.0 by default so LAN devices can reach them. Set TRINAXAI_HOST=127.0.0.1 in .env if you want to restrict access to localhost only.

Trusting the Self-Signed Certificate

TrinaxAI generates a local certificate during installation for HTTPS support. Browsers and iOS require explicit trust before proceeding.

The generated certificate is valid only for localhost and your LAN IP. It is not trusted by default by browsers or mobile OSes — each device needs a one-time trust confirmation. Do not expose these ports to the public internet.

For a trusted certificate on a public domain, place TrinaxAI behind nginx or Caddy with a Let’s Encrypt certificate, or use a VPN like Tailscale to access it remotely without exposing ports.

PWA Features

Installable

Full PWA manifest with icons, theme colour, and display: standalone. Installs on iOS, Android, and desktop browsers.

Offline Fallback

A cached offline fallback page is served when the network or backend is unreachable, so the app never shows a raw browser error.

App Shortcuts

The PWA manifest includes app shortcuts for quick actions directly from the installed app icon (long-press on Android).

Update Notifications

The PwaUpdater component detects when a new version of the frontend has been deployed and shows a notification banner prompting a reload.

Dark / Light Mode

Theme is auto-detected from your OS preference (via prefers-color-scheme) and can be toggled manually in Settings. The preference persists in localStorage.

Bilingual UI

The interface is available in English and Spanish, auto-detected from your browser’s language setting (navigator.language). All 18 components have full i18n coverage.

Key Components

The PWA is built from 18 TypeScript components. Here are the main ones:

ChatInterface — the main chat UI

The primary component. Handles streaming SSE responses, Markdown rendering (with code highlighting), voice input/output, slash commands (/index, /memory), image attachment, engine switching (RAG ↔ Ollama), and source citation cards. Conversation state lives in localStorage with compaction and backup.

ChatSidebar — history, search, and export

Lists all saved conversations with timestamps and titles. Supports full-text search across conversation history, editing and resending previous messages, and exporting conversations to Markdown, PDF, or Word format.

KnowledgeBrowser — explore your index

A three-column browser: Collections → Files → Chunks. Lets you visually explore what’s been indexed, search within a file’s chunks (with server-side filtering via ?q=), and copy any chunk to the clipboard. Used to verify indexing results and debug retrieval issues.

MemoryPanel — persistent facts

Manages memory entries stored in the backend (/v1/memory). Includes a free-form project notes textarea (localStorage), an LLM-generated auto-summary with a Refresh button, and a full list of stored facts with tags and delete controls.

Settings — 5-section configuration panel

Covers: General (profile, performance mode, engine), Indexing (directory, collection, upload), Prompts (custom system prompt), Memory (memory panel embed), and Stats (usage analytics from /v1/stats).

StatsPanel — local usage analytics

Displays total messages, breakdown by engine and model, estimated token usage, and top collections — all from storage/usage.jsonl on your machine. No external analytics.

OnboardingWizard — first-time setup

A 7-step guided setup that walks new users through Ollama status, model selection, indexing a first directory, and key settings. Only shown on first launch.

Chat History

All chat sessions are stored in localStorage in the browser where TrinaxAI is running.

Search — full-text search across all past conversations from the sidebar
Edit and resend — click any of your previous messages to edit and resend from that point
Export — export any conversation to Markdown, PDF, or Word from the sidebar menu
Cross-device access — the app_state.json sync endpoint keeps lightweight preferences in sync, but full conversation history lives in the browser’s localStorage on each device

Configuration Reference

Variable	Default	Description
`TRINAXAI_FRONTEND_URL`	`https://localhost:3334`	Public URL of the PWA (used in CORS and redirects)
`VITE_TRINAXAI_RAG_TARGET`	`https://127.0.0.1:3333`	RAG API base URL for the Vite dev proxy
`VITE_TRINAXAI_RAG_BASE`	`/api/rag`	Proxy path for RAG API requests
`VITE_TRINAXAI_OLLAMA_BASE`	`/api/ollama`	Proxy path for Ollama API requests
`TRINAXAI_CORS_ORIGINS`	`https://localhost:3334,...`	Allowed origins for the RAG API CORS policy

Get Started

Core Features

CLI Reference

Configuration & Security

Developer Guide

TrinaxAI as a Progressive Web App: Install on Any Device

Tech Stack

Installing the PWA

Accessing from Your Phone on the Same WiFi

Trusting the Self-Signed Certificate

PWA Features

Installable

Offline Fallback

App Shortcuts

Update Notifications

Dark / Light Mode

Bilingual UI

Key Components

Chat History

Configuration Reference

Build docs developers (and LLMs) love

Get Started

Core Features

CLI Reference

Configuration & Security

Developer Guide

Documentation Index

​Tech Stack

​Installing the PWA

​Accessing from Your Phone on the Same WiFi

​Trusting the Self-Signed Certificate

​PWA Features

Installable

Offline Fallback

App Shortcuts

Update Notifications

Dark / Light Mode

Bilingual UI

​Key Components

​Chat History

​Configuration Reference

Build docs developers (and LLMs) love

Tech Stack

Installing the PWA

Accessing from Your Phone on the Same WiFi

Trusting the Self-Signed Certificate

PWA Features

Key Components

Chat History

Configuration Reference