Phase 5 — Embed the UI

Not every app needs every component. Use this decision matrix:

Most apps that reached this phase want ModelSelector. KeyManager is for apps where users supply their own OpenAI/Anthropic/Google keys. CostEstimator is a nice-to-have.

Import @restormel/keys-elements, render <rk-model-selector>, set keys and providers via JavaScript properties, and listen for rk-model-selected to persist selection to your backend.

You'll see

A model selection UI grouped by provider. Users click a model to select it.

How to test

Navigate to your settings page, confirm the selector renders, click a model, and verify your backend receives the selection.

The ModelSelector shows all models from the configured providers by default. If you have policies (Phase 4) that restrict which models are allowed, filter the model list so users only see valid choices.

Server-side filtering (recommended): Add an API route (e.g. GET /api/allowed-models) that calls the Restormel evaluate endpoint for each candidate model, using your project Gateway Key from server-side environment variables. Return only the allowed model IDs to the client and configure the component with that list.

Client-side filtering: If you use local resolve (Phase 2, Step 2.6), you can use keys.entitlements.getAvailableModels(allModelIds) to filter.

You'll see

The ModelSelector shows only models that pass your policies. Blocked models are either hidden or shown as unavailable.

How to test

Add a model_allowlist policy that excludes one model. Refresh the settings page; that model should not appear (or should appear greyed out with "Not allowed").

If your app lets end-users bring their own API keys, embed the KeyManager component. It provides a settings panel for users to add, validate, list, and remove their provider credentials. KeyManager sits on top of your own storage and validation endpoints — you implement and own the key storage API (e.g. POST /api/keys, DELETE /api/keys/:id) and any server-side validation; KeyManager is the UI layer that calls them via onKeyAdded and onKeyRemoved.

You'll see

A settings panel with an empty state, a form to select a provider and add a credential, feedback, a list of saved credentials (masked), and remove buttons.

How to test

Navigate to settings, add a key (test/invalid is fine to confirm validation), confirm onKeyAdded fires and your API receives the request. With a valid key, confirm validation passes. Delete the key and confirm onKeyRemoved fires.

Restormel UI components use --rk-* CSS custom properties for theming. Override them to match your app:

rk-model-selector,
.rk-model-selector {
  --rk-bg: #1a1a1e;
  --rk-text: #e8e8ec;
  --rk-accent: #3b82f6;
  --rk-border: #2a2a2e;
  --rk-error: #ef4444;
  --rk-success: #22c55e;
}

The components ship with dark (`.rk-dark`) and light (`.rk-light`) presets.

You'll see

Components render with your app's colour scheme.

How to test

Change a token (e.g. --rk-accent) to something distinct; confirm the accent colour updates on buttons and highlights.