Framework compatibility
Restormel Keys is built to fit the stacks you already use. This page helps you choose the right package and get started quickly.
Compatibility at a glance
| Framework | Package | Status |
|---|---|---|
| Next.js (App Router) | @restormel/keys + @restormel/keys-react + @restormel/keys-elements | Supported |
| React (generic) | @restormel/keys + @restormel/keys-react + @restormel/keys-elements | Supported |
| SvelteKit | @restormel/keys + @restormel/keys-svelte | Supported |
| Web Components / Astro / vanilla | @restormel/keys + @restormel/keys-elements | Supported |
| Vue / Nuxt | — | 🔵 Planned — use headless core or Web Components for now |
All UI paths depend on the headless core (@restormel/keys) for resolution, cost, and storage. The React wrapper uses the Web Components under the hood; Svelte uses native Svelte 5 components. Headless only works today without the UI packages.
Install paths
Headless only (no UI) — works today:
pnpm add @restormel/keysNext.js or React (KeyManager, ModelSelector, CostEstimator): install the core, React wrapper, and elements package.
pnpm add @restormel/keys @restormel/keys-react @restormel/keys-elementsSvelteKit (native Svelte components): install the core plus Svelte wrapper.
pnpm add @restormel/keys @restormel/keys-svelteWeb Components (Astro, vanilla HTML, or any framework): install the core plus elements package.
pnpm add @restormel/keys @restormel/keys-elementsCLI (init, add keys, validate, doctor):
pnpm add -D @restormel/keys-cliWhen to use which
- Headless core (
@restormel/keysonly) — You want resolution, cost, and server middleware without any UI. - React wrapper (
@restormel/keys-react) — You're in a React or Next.js app and want drop-in KeyManager, ModelSelector, CostEstimator plus hooks. Recommended for Next.js App Router. - Web Components (
@restormel/keys-elements) — One integration that works in Astro, vanilla HTML, or any framework. - Svelte components (
@restormel/keys-svelte) — You're on SvelteKit or Svelte and want native KeyManager, ModelSelector, CostEstimator as Svelte 5 components.
Start with Next.js
- Install:
pnpm add @restormel/keys @restormel/keys-react @restormel/keys-elements - Add a settings (or similar) page with KeyManager and your key storage.
- Use the core on the server for resolution and cost; use the React components on the client for UI.