AI Copilot

An AI assistant panel for natural-language interaction with the Primus platform.

Preview · AI Copilot

Code

HTML · @primus/ui-core

<div class="card" style="max-width:360px;padding:0">
  <div style="padding:0.875rem 1rem;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:0.5rem">
    <div style="width:24px;height:24px;border-radius:50%;background:var(--primary);display:flex;align-items:center;justify-content:center;color:white;font-size:0.7rem;font-weight:700">AI</div>
    <span style="font-weight:600;font-size:0.875rem">AI Copilot</span>
    <span class="badge success" style="margin-inline-start:auto;font-size:0.65rem">Online</span>
  </div>
  <div style="padding:1rem;min-height:100px;display:flex;flex-direction:column;gap:0.75rem">
    <div style="background:var(--muted);border-radius:8px;padding:0.625rem 0.875rem;font-size:0.8rem;max-width:75%">How can I help you today?</div>
    <div style="background:color-mix(in srgb,var(--primary) 12%,transparent);border-radius:8px;padding:0.625rem 0.875rem;font-size:0.8rem;max-width:75%;align-self:flex-end">Show me tenant usage stats</div>
  </div>
  <div style="padding:0.75rem;border-top:1px solid var(--border)">
    <fieldset class="group">
      <input type="text" placeholder="Ask me anything..." style="flex:1" />
      <button class="small">Send</button>
    </fieldset>
  </div>
</div>

React

import { AICopilot } from 'primus-react-ui';

<AICopilot apiUrl="https://api.yourdomain.com" title="AI Copilot"
  placeholder="Ask me anything..."
  onResponded={(response) => console.log(response)} />

Angular

<primus-ai-copilot title="AI Copilot" placeholder="Ask me anything..."
  mode="complete" [apiUrl]="'https://api.yourdomain.com'"
  (responded)="onAiResponse($event)">
</primus-ai-copilot>

Props

Prop	Type	Default	Description
apiUrl	string	—	AI API base URL
title	string	'AI Copilot'	Panel title
placeholder	string	—	Input placeholder

Version history

See the Changelog for version history and breaking changes.