# Overview

Source: https://docs.gryt.chat/docs/client

React + TypeScript client — UI, audio processing, and WebRTC

The Gryt client is a React/TypeScript application (packaged with Electron for desktop) that handles the user interface, audio processing pipeline, and WebRTC connections to the SFU.

## Features

- **Audio pipeline**: RNNoise noise reduction, auto gain, compressor, noise gate, volume control, mute, real-time visualization
- **Voice controls**: Mute/unmute, deafen, device hot-swapping
- **Chat**: Text messaging with attachments, replies, editing, message retry with nonce deduplication
- **Multi-server**: Seamless server switching with room isolation
- **UI**: `@gryt/ui` components, light and dark themes plus imported ones, Motion for animation

## Project structure

```
client/src/
├── packages/
│   ├── addons/     # The plugin API and addon loading
│   ├── audio/      # Sound assets, the visualizer, global hotkeys
│   ├── common/     # Auth, keypairs, shared hooks
│   ├── dialogues/  # Dialogs and modals
│   ├── mobile/     # Touch gestures, responsive helpers
│   ├── settings/   # useSettings, useTheme, persistent storage
│   ├── socket/     # useSockets, server views, user components
│   └── webRTC/     # @gryt/voice adapters, call controls, encoded transform
├── components/     # Top-level components: titlebar, overlays, banners
├── hooks/          # Global React hooks
└── types/          # TypeScript definitions
```

## Getting started

```bash
cd packages/client
yarn install
yarn dev
```

Open [http://localhost:3666](http://localhost:3666).

## Key hooks

### `useMicrophone` and `useSFU`

```typescript

```

The voice engine is [`@gryt/voice`](https://docs.gryt.chat/docs/voice), an npm package. `packages/webRTC` holds the adapters that wire it into this client: the settings store mapped into a `VoiceConfig`, the socket behind a `RoomCoordinator`, and the Electron bridge behind a `VoiceHost`.

### `useSockets`

```typescript
const {
  sockets, clients,
  serverDetailsList, memberLists
} = useSockets();
```

Multi-server WebSocket management with real-time user state synchronization.

## Configuration

Optional `packages/client/.env`. These point the client at an identity stack and default to
Gryt's own:

```bash
VITE_GRYT_OIDC_ISSUER=https://auth.gryt.chat/realms/gryt
VITE_GRYT_OIDC_CLIENT_ID=gryt-web
VITE_GRYT_AUTH_API=https://auth.gryt.chat
VITE_GRYT_IDENTITY_URL=https://id.gryt.chat
```

See [Configuration](https://docs.gryt.chat/docs/guide/configuration) for the full list.

Audio settings (volume, noise gate, device) are configured through the UI, not through the
environment.

## Build

```bash
yarn build       # production bundle
yarn preview     # preview locally
yarn typecheck
yarn lint
```