AI Agents components
9 AI Agents components for React, shadcn, Vue 3, Laravel Blade and HTML + Alpine.js: AgentPersonaEditor, Agent Steps and Confirm, AiModelPicker, AiUsageCost, BrainList, KnowledgeGaps, ModelRoutingEditor, ResearchRun, Section Board.
- AgentPersonaEditorEditor for an AI agent persona with name, tagline, colour, icon, traits, model, greeting and a markdown persona with write and preview tabs, section chips, counts, save and revert.
- Agent Steps and ConfirmThe tool calls an agent made and a human-in-the-loop confirm before it acts. A step list with arguments, results and retry, plus a diff review with per-change ticks, risk, and Apply or Reject.
- AiModelPickerChoose the model, its reasoning effort and a required agent or skill, as cards or one compact toolbar row, plus a PersonaPicker with prompt starters and the compact AiModelSelect that CopilotChat uses.
- AiUsageCostAI spend overview with total, token, billed, unbilled and marked-up client price tiles, a daily stacked cost chart and a by-model, product or run breakdown with token columns, plus a TokenCostMeter for one run.
- BrainListZekra-style list of AI brains as a table or cards with status, access, memory and source counts, members, tags and last activity, plus search, filters, bulk select and loading and empty states.
- KnowledgeGapsQueries a knowledge base could not answer, grouped as open, indexed or dismissed, with hit counts, first and last asked, and actions to mark indexed, dismiss or reopen.
- ModelRoutingEditorAdmin editor for AI model routing with an automatic-routing switch, a task class to model and fallback route table, an active backend switch and provider or node registration with modality chips.
- ResearchRunA research run with an ask box, live stage progress, an answer whose sentences cite numbered evidence, the evidence list, sources, confidence and failed or cancelled states with retry.
- Section BoardAn ordered set of sections, each generated by a prompt, a model and a few settings. View mode shows the content; edit mode reorders by drag or keyboard and edits each section in a dialog.
UserActionsMenu
The admin actions for one account: edit email, roles and permissions, impersonate, set a password or send a reset link, send a sign-in link, and delete. A menu or a toolbar that owns its dialogs.
AgentPersonaEditor
Editor for an AI agent persona with name, tagline, colour, icon, traits, model, greeting and a markdown persona with write and preview tabs, section chips, counts, save and revert.