transcription 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/transcription@^0.1.114. 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 transcription.browserTranscription: the browser's own
Web Speech recognition in Chrome, Edge and Safari, with no key, no route and no bytes through your app. Live, with partials and the words you name in advance; no timestamps, no speakers and no finished file, and it says so. URL options: on-device (boolean).
npx add transcription.browserTranscription: Deepgram
Deepgram's nova-3 through your own route: tells voices apart, takes the words to expect, follows somebody who changes language mid-sentence, and streams a microphone with live on. The key never reaches the browser. URL options: live (boolean), jobs (string).
npx add transcription.deepgramTranscription: Gladia
Gladia's solaria-1 through your own route: a hundred languages, several in one recording, translation, and a pre-signed live socket with live on. The key never reaches the browser. URL options: live (boolean).
npx add transcription.gladiaTranscription: OpenAI
Recordings through your own route, on the model you choose, at OpenAI or any OpenAI-compatible gateway; a microphone over the realtime socket with live on. The key never reaches the browser. URL options: openai-model (string), live (boolean), jobs (string).
npx add transcription.openai5. 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.
Transcription: the browser's own: setup note 1
There is no route to install: this provider has no server half. The shared route app/api/transcription/[config]/[[...path]]/route.ts comes with the first provider that has one (deepgram, gladia, openai).
Transcription: the browser's own: setup note 2
Firefox has no speech recogniser: the config then grants nothing and the microphone parts do not render.
Transcription: Deepgram: setup note 1
Run: npx extraorbital provision deepgram, which sets DEEPGRAM_REFRESH_TOKEN, DEEPGRAM_TOKEN_URL and DEEPGRAM_BASE_URL
Transcription: Deepgram: setup note 2
jobs "redis" keeps job records in a table every instance can see: set REDIS_URL (npx extraorbital provision redis). Without it the records stay in this process, and a restart loses them.
Transcription: Gladia: setup note 1
Run: npx extraorbital provision gladia, which sets EXTRAORBITAL_GLADIA_KEY and GLADIA_BASE_URL, the front the virtual key is spent at.
Transcription: Gladia: setup note 2
With an account's own key from app.gladia.io, set it as EXTRAORBITAL_GLADIA_KEY and leave GLADIA_BASE_URL unset.
Transcription: OpenAI: setup note 1
Set OPENAI_API_KEY (a key from platform.openai.com), or run: npx extraorbital provision openai
Transcription: OpenAI: setup note 2
Live transcription needs OpenAI's own API: behind OpenRouter (OPENAI_BASE_URL) the live route is refused by name.
Transcription: OpenAI: setup note 3
jobs "redis" keeps job records in a table every instance can see: set REDIS_URL (npx extraorbital provision redis). Without it the records stay in this process, and a restart loses them.
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/transcriptionImport from @slices.sh/transcription/headless.
Install the service
Connect the parts to a provider. Skip this step if this service is already configured in your app.
npx add transcription.browserAdds 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
- There is no route to install: this provider has no server half. The shared route app/api/transcription/[config]/[[...path]]/route.ts comes with the first provider that has one (deepgram, gladia, openai).
- Firefox has no speech recogniser: the config then grants nothing and the microphone parts do not render.