# realtime setup

Start with the parts you need. The service connects those parts to a provider; its configuration belongs to your app.

## 1. Initialize an app

Run this once in your app folder. An existing initialized Next.js app can skip it.

```
npx slices.sh install
```

## 2. Install the service registry

Add services/index.ts, the file `import "@/services"` loads: it registers every services/<service>/<config>.config.ts with @slices.sh/core. A provider setup writes the same file, so this step is for an app that has none yet. https://slices.sh/r/services.json

```
npx slices.sh add services
```

## 3. Install the headless library

Add the React parts with npm. Their styling and composition belong to your app.

```
npm install @slices.sh/realtime@^0.1.6 @slices.sh/composer@^0.1.4
```

## 4. Install the service

Use the interactive installer below to choose a provider and its options. The command installs the packages, services/<service>/default.config.ts, services/index.ts and the API route. No hand-written fetch or provider wrapper is needed.

```
npx slices.sh add realtime.p2p-mesh
```

## Realtime: a peer-to-peer mesh

WebRTC between browsers, with a long-poll route in this app to introduce them. The route carries offers and answers and never a payload. No key: the room table is this process's memory and there is no relay, until the config names Redis and a TURN relay. URL options: signalling (string), relay (string).

```
npx slices.sh add realtime.p2p-mesh
```

## 5. Load your configuration

In the client component using the headless parts, load the service registry before rendering a required Root. Keep the client directive first.

```
"use client"

// services/index.ts comes from https://slices.sh/r/services.json (or any provider setup)
import "@/services"
```

## 6. Provisioning is included

The slices.sh installation command provisions the required resources automatically.

## 7. Run your component

Required roots throw a setup error when no service is configured. A required capability can be named with enabled. Use enabled="optional" only when the feature is intentionally optional. Parts hide controls the configured provider cannot support.

```
npm run dev
```