AgentPersonaEditor

Code

<AgentPersonaEditor  value={agent}  models={models}  onSave={async (draft) => {    const res = await api.saveAgent(draft);    if (!res.ok) return { error: res.message };  }}/>

AI Agents · beta

Live examples and controls: AgentPersonaEditor in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/agent-persona-editor.json

Define who an agent is: its identity (name, colour, icon), voice (traits, greeting) and the markdown persona instructions, with a live preview card.

When to useCopy Anchor Link

• Creating or editing an agent in an admin area.

When not to useCopy Anchor Link

• Editing generic markdown: use RichTextEditor or Markdown.
• Picking only a model: use AiModelSelect.

ImportCopy Anchor Link

import { AgentPersonaEditor } from "@fadymondy/nasaq/web";

Quick startCopy Anchor Link

<AgentPersonaEditor
  value={agent}
  models={models}
  onSave={async (draft) => {
    const res = await api.saveAgent(draft);
    if (!res.ok) return { error: res.message };
  }}
/>

AnatomyCopy Anchor Link

A form: name and tagline, colour and icon pickers, traits (TagInput, up to 8), model (AiModelSelect), greeting, then the persona in Write and Preview tabs (Textarea and Markdown) with section chips (Role, Tone, Rules and more), word and character counts and Save and Revert. AgentPersonaPreview shows the identity card.

APICopy Anchor Link

The editor keeps its own draft and resets when value changes to something different.

ExamplesCopy Anchor Link

Without the preview card

<AgentPersonaEditor value={agent} hidePreview onSave={save} />

AccessibilityCopy Anchor Link

Every field has a label. Errors are tied to their field. The Write and Preview tabs use Tabs. Save is disabled until the draft changes and is valid. The save result is announced in a status line.

RTL & i18nCopy Anchor Link

• English and Arabic strings ship and follow the Nasaq locale. Pass labels to override any string.
• Layout uses logical properties, so it mirrors in right-to-left. The persona text uses dir="auto".

Styling & tokensCopy Anchor Link

• The colour is a --nq-tag-* token, rendered with colorToCss. Cards use bg-card and border-border.

Do / Don'tCopy Anchor Link

• Do keep the persona in markdown so it can be diffed and versioned.
• Don't put secrets in the persona.

RelatedCopy Anchor Link

• AiModelSelect
• Markdown
• TagInput

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-ai-agents-agent-persona-editor--docs