Luxuria ships with a complete, bring-your-own-key AI layer built on top of the template's mock-data architecture. There is no bundled backend and no Luxuria-owned AI service — instead, each admin connects their own OpenAI, Anthropic (Claude), Google Gemini, or Custom / local (Ollama, LM Studio, vLLM) API key from a dedicated settings page, and that key powers AI actions across the app.

When no key is configured, every AI surface automatically falls back to Demo Mode and shows realistic canned responses instead of an error. This means the template is fully explorable and demo-ready out of the box, while still being a real, working starting point for wiring in your own provider.

What's included

Only one provider is active at a time (chosen with a select on the Settings page), but credentials for all four are stored independently so you can switch providers without re-entering keys.

Route: /ai-settings · Menu icon: smart_toy · Access: Admin only (API keys are sensitive/billable, so this page is gated the same way as Security and Hotel Settings).

How to configure a provider

1. Open AI & LLM Configuration from the sidebar (under Hotel Settings / Security).
2. Click a provider card (Gemini, OpenAI, Anthropic, or Custom) — the card grid shows a "Key Saved" or "Active" badge once configured.
3. Paste the API key into the masked input (toggle the eye icon to reveal it) and pick a model from the quick-preset chips, or type a custom model name.
4. Optionally click Test Connection — this pings the provider without saving anything, and reports latency and the resolved model on success.
5. Click Save AI Configuration. The key is encrypted and the provider becomes active immediately — the status pill in the panel header switches from "Demo Mode" to "Live AI Active".
6. Clear Key removes the stored credentials for the current provider and drops the app back into Demo Mode.

Because Luxuria has no backend, an API key has to live somewhere in the browser. The template takes the strongest practical approach available client-side:

Every AI action checks whether an active key is configured before doing anything. If it isn't, no network request is made at all — the action resolves instantly using a canned fixture from src/assets/data/ai-demo/ and the result is visually tagged with a "Demo" badge/pill (never a colored left-border, per the template's card styling convention).

This makes Demo Mode the default, safe experience: reviewers, clients, or anyone previewing the template see fully working AI features immediately, with zero setup, zero cost, and zero risk of a stray API call.

The AI Assistant lets any signed-in user (Admin or Employee) ask free-form questions and get an answer in a chat interface, in two places that share the exact same conversation:

Because both surfaces read from one shared, in-memory conversation service, a question asked in the popover is still visible if the user then opens the full Assistant page.

Beyond the Assistant, three existing admin pages have a real, working AI action wired directly into their UI. These double as the reference pattern for adding AI to any other page — see the developer guide further down.

Two shared components make it a small amount of glue code to add a similar AI action to any other page:

• <app-ai-insight-card> — a full result card (loading / success with bullets & a Demo/AI badge / inline error with a link back to Settings). Good for a summary block above a table or dashboard.
• <app-ai-explain-button> — a small icon button you drop next to an existing card/chart header; you own where the result is rendered.

                         	
// 1. Inject the provider service in your component
private aiProvider = inject(AiProviderService);
private aiSettings = inject(AiSettingsService);
private cdr = inject(ChangeDetectorRef);

aiLoading = false;
aiResult: AiInsightResponse | null = null;
aiError: AiErrorKind | null = null;

async loadAiInsights(): Promise<void> {
  this.aiLoading = true;
  this.cdr.markForCheck(); // zoneless -- required after any async state change

  const res = await this.aiProvider.insight({
    kind: 'summary',       // or 'anomaly' | 'sentiment' | 'triage' | 'explain-chart'
    prompt: 'Summarize this data for a hotel manager',
    data: this.dataSource.data,
  });

  if (res.ok) {
    this.aiResult = res.data;   // res.data.demo tells you if it was a canned response
  } else {
    this.aiError = res.error.kind; // 'no-key' | 'network' | 'auth' | 'rate-limit' | ...
  }

  this.aiLoading = false;
  this.cdr.markForCheck();
}
                                    
                        		

                         	
<app-ai-insight-card
  title="My Section Insights"
  [loading]="aiLoading"
  [result]="aiResult"
  [error]="aiError"
  (refresh)="loadAiInsights()">
</app-ai-insight-card>
                                    
                        		

Both entries are defined in src/assets/data/menu.json and their routes in src/app/modules/app.routes.ts, following the exact same AuthGuard + data: { role: [...] } pattern used by every other route in the app — see the Role Configurations page for how that works.