# ai-chat 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/ai-chat@^0.1.4 @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 ai-chat.echo
```

## AI chat: echo

A chat backend with no key and no model, answering through the app's own route in the AI SDK's UI message stream: a thought, a tool call that really ran and an echo, a word at a time. The backend to build a chat screen against. URL options: none.

```
npx slices.sh add ai-chat.echo
```

## AI chat: a model

A real model through the AI SDK: streamText over the conversation the transport sent, answered with the SDK's own UI message stream, so streaming, stopping, reasoning, tool calls, citations and every refusal reach the screen exactly as the keyless backend's did. URL options: provider (string), web (list).

```
npx slices.sh add ai-chat.vercel
```

## 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.

## AI chat: echo: setup note 1

Echo needs nothing. When you want a model: npx slices.sh add ai-chat.vercel, then switch provider in services/ai-chat/default.config.ts.

## AI chat: a model: setup note 1

Set the key of the provider the config names: npx extraorbital provision openai, or ANTHROPIC_API_KEY in .env.local. It is read on the first turn, never when the config loads.

## AI chat: a model: setup note 2

With web search or fetch on, a turn may take several model calls: keep maxSteps above one.

## 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
```