openhuman/gitbooks/developing/frontend/README.md

description, icon

description	icon
Index for the React + Vite frontend (app/src/) — architecture, state, services, components, hooks.	browsers

Source code documentation (app/src/)

This section describes the OpenHuman desktop app frontend: the Vite + React tree under app/src/ in the monorepo (Yarn workspace openhuman-app).

Quick reference

Document	Description
Architecture overview	Entry points, provider chain, module relationships
State management	Redux Toolkit, persistence, selectors
Services layer	API client, Socket.io, core RPC client
MCP utilities	Transport and types (no bundled Telegram tool pack)
Pages & routing	HashRouter, guards, main routes
Components	UI and settings patterns
Providers	User, Socket, AI, Skill providers
Hooks & utils	Shared hooks and helpers

Scale (approximate)

Metric	Value
TypeScript / TSX files under app/src/	~285 (run find app/src -name '*.ts' -o -name '*.tsx' | wc -l to refresh)
Test runner	Vitest (app/test/vitest.config.ts)

Directory layout (high level)

app/src/
├── App.tsx                 # Provider chain + HashRouter shell
├── AppRoutes.tsx           # Route table + guards
├── main.tsx                # Entry (Sentry, store, styles)
├── store/                  # Redux slices and selectors
├── providers/              # UserProvider, SocketProvider, AIProvider, SkillProvider
├── services/               # apiClient, socketService, coreRpcClient, api/*
├── lib/                    # AI loaders, MCP helpers, skills sync, etc.
├── pages/                  # Route-level screens
├── components/             # Shared UI
├── hooks/                  # App hooks
├── utils/                  # Config, Tauri helpers, routing utilities
└── assets/                 # Icons and static assets

Architectural decisions

1. HashRouter — Fits Tauri and deep-link flows better than browser history in many desktop setups.
2. Redux Toolkit + persist — Centralized state; selective persistence for auth and related slices.
3. Core RPC client — Business logic and skills run in the openhuman Rust sidecar; the UI calls it via HTTP (core_rpc_relay / coreRpcClient), not only REST.
4. No MTProto provider — The current tree does not ship a TelegramProvider or mtprotoService; any Telegram mentions may be legacy UI or future channels work.

Getting started

1. Read Architecture overview.
2. Skim State management and Services.
3. Use Pages & routing when changing navigation.

---

Documentation for the app/src/ tree; paths are relative to the repository root.