ai-chat setup
Start with the parts you need. The service connects those parts to a provider; its configuration belongs to your app.
View as Markdown1. Initialize an app
Run this once in your app folder. An existing initialized Next.js app can skip it.
npx install2. 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 add services3. 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.44. 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 add ai-chat.echoAI 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 add ai-chat.echoAI 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 add ai-chat.vercel5. 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. Restart your development server after credentials change.
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 devConfigure your installation
Before you start
The steps below run in a Next.js app with shadcn set up (it has a components.json). In an existing Next.js app, such as one from create-next-app, set shadcn up first:
npx shadcn@latest init -t next -b base -p novaOr start fresh: the slices CLI creates the app and sets it up.
npx slices.sh installInstall the service registry
Adds services/index.ts, which import "@/services" loads. A provider setup writes the same file, so skip this if your app has one.
npx add servicesInstall the headless library
npmAdd the React parts to your app, then compose them with your own elements.
npm install @slices.sh/ai-chatImport from @slices.sh/ai-chat/headless.
Install the service
Connect the parts to a provider. Skip this step if this service is already configured in your app.
npx add ai-chat.echoAdds service configuration and API routes to your app, with the provider dependencies. For a headless composition, add import "@/services" after "use client".
The slices CLI installs the service and provisions its required resources in one command.
Provider setup notes
- Echo needs nothing. When you want a model: npx shadcn@latest add @slices/ai-chat.vercel, then switch provider in services/ai-chat/default.config.ts.