What Is the Purpose of the `app/` Directory in OpenHuman?

The app/ directory serves as the front-end workspace that bundles the React TypeScript UI, Tauri desktop shell, and testing infrastructure into a unified desktop application for the OpenHuman project.

The OpenHuman project separates its core intelligence engine—written in Rust—from the user-facing interface. The app/ directory contains the complete presentation layer, organized as a pnpm workspace called openhuman-app. According to the repository source code, this workspace transforms the Rust backend into a complete cross-platform desktop experience for Windows, macOS, and Linux.

Architectural Components of the app/ Directory

The directory follows a tripartite structure that isolates the user interface, native host wrapper, and quality assurance layers.

The React TypeScript UI (src/)

The app/src/ folder houses the Vite-powered React application that renders the interface. This is where the main user experience lives, including:

• App.tsx – The top-level React component that composes providers, routing logic, and the main layout tree.
• AppRoutes.tsx – Route definitions for application views such as chat, settings, and flows.
• Components, hooks, and services – Modular UI elements and state management logic.

The UI consumes static assets—icons, images, and Lottie animations—stored alongside the source code, and references build-time configurations like vite.config.ts and tsconfig.json.

The Tauri Desktop Host (src-tauri/)

The app/src-tauri/ directory contains the Rust-based Tauri host that wraps the React UI in a native desktop window. According to the source at app/src-tauri/src/lib.rs, this layer provides:

• IPC Bridge – Exposes Rust core functions to the frontend via Tauri commands such as core_rpc::relay_http_rpc, core_rpc_token, and core_process management.
• Native Window Handling – Controls platform-specific features like window state, system notifications, and menu bars.
• Core Process Management – Spawns and manages the lifecycle of the embedded Rust logic engine.

Testing Infrastructure (test/)

The app/test/ directory contains the Vitest configuration for unit testing UI components and Playwright specifications for end-to-end desktop automation. The file app/test/vitest.config.ts defines the test environment for validating React hooks and components in isolation.

Bridging Frontend and Core via Tauri Commands

The app/ directory's primary technical function is to provide the inter-process communication (IPC) bridge between the TypeScript frontend and the Rust core. While the core (located in the repository root src/) holds the authority for business logic, the frontend initiates calls through typed RPC clients.

When the UI needs to execute core logic, it invokes methods through the Tauri command layer defined in app/src-tauri/src/lib.rs:

import { coreRpcClient } from '@/services/coreRpcClient';

async function fetchHealth() {
  const health = await coreRpcClient.call('health_get', {});
  console.log('Core health:', health);
}

This call travels through the Tauri IPC bridge to the Rust core, which executes the logic and returns the result to the React component.

Development Workflows and Scripts

The app/package.json defines scripts that accommodate two distinct development modes.

Run only the UI with hot-reload for rapid iteration:

pnpm dev:app

This command starts the Vite development server at http://localhost:3000. In this mode, the UI runs without the desktop shell and can connect to a mock core or an existing core process via the OPENHUMAN_CORE_REUSE_EXISTING=1 environment variable.

Run the complete desktop application:

pnpm dev

This builds the Tauri shell, launches the embedded Rust core, and opens a native window rendering the React UI. The frontend can now invoke native platform APIs and communicate with the core through the full IPC stack.

Key Files and Entry Points

Understanding the app/ directory requires familiarity with these critical files:

• app/README.md – Workspace overview and architectural notes.
• app/src/App.tsx – React entry point that mounts the component tree inside the Tauri window.
• app/src-tauri/src/lib.rs – Rust source exposing Tauri commands that bridge to the core RPC surface.
• app/test/vitest.config.ts – Vitest configuration for UI unit testing.
• app/test/playwright.config.ts – Playwright configuration for end-to-end desktop testing.

Summary

• The app/ directory is a pnpm workspace that packages the OpenHuman frontend into a desktop application.
• It contains three distinct zones: the React UI (src/), the Tauri host (src-tauri/), and the test suite (test/).
• The Tauri layer in src-tauri/src/lib.rs exposes Rust core functionality via commands like core_rpc::relay_http_rpc.
• Developers can run the UI standalone with pnpm dev:app or the full desktop app with pnpm dev.
• The architecture strictly separates presentation concerns in the app/ directory from business logic in the repository root src/.

Frequently Asked Questions

What is the purpose of the app/ directory in OpenHuman?

The app/ directory houses the front-end workspace that combines a React TypeScript UI, a Tauri-based desktop wrapper, and testing tools. It transforms the Rust core into a complete desktop application by providing the user interface, native window management, and the IPC bridge required for frontend-to-core communication.

How does the React frontend communicate with the Rust core?

Communication occurs through Tauri's IPC bridge. The UI calls TypeScript methods that invoke Tauri commands defined in app/src-tauri/src/lib.rs, such as core_rpc::relay_http_rpc. These commands relay requests to the Rust core, execute the logic, and return results to the React components asynchronously.

Can I develop the UI without running the full desktop application?

Yes. Running pnpm dev:app from the repository root starts only the Vite development server, allowing you to develop and hot-reload the React interface in a browser at localhost:3000. This mode skips the Tauri desktop shell and can operate with a mock core or connect to an existing core process.

What testing frameworks are used in the app/ directory?

The directory uses Vitest for unit testing React components and hooks, configured in app/test/vitest.config.ts. It also uses Playwright for end-to-end testing of the complete desktop application, ensuring that the Tauri integration and UI interactions function correctly across platforms.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}