# 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. Source: https://docs.nasaqui.com/components/agent-persona-editor ## Install ```bash 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 use - Creating or editing an agent in an admin area. ## When not to use - Editing generic markdown: use `RichTextEditor` or [`Markdown`](https://docs.nasaqui.com/components/markdown). - Picking only a model: use `AiModelSelect`. ## Import ```tsx import { AgentPersonaEditor } from "@fadymondy/nasaq/web"; ``` ## Quick start ```tsx { const res = await api.saveAgent(draft); if (!res.ok) return { error: res.message }; }} /> ``` ## Anatomy 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. ## API | Prop | Type | Description | | --- | --- | --- | | `value` | `AgentPersona` | `{ name, tagline?, color, icon, persona, traits, model?, greeting? }`. The saved baseline. | | `onChange` | `(draft) => void` | Called on every edit. | | `onSave` | `(draft) => void \| { error? } \| Promise` | Required. | | `models` | `AgentPersonaModel[]` | Model options. Hides the picker when empty. | | `traitSuggestions` | `string[]` | Suggestions for the traits input. | | `maxLength` | `number` | Persona limit. Default 4000; 0 turns it off. | | `hidePreview`, `disabled`, `labels` | | | The editor keeps its own draft and resets when `value` changes to something different. ## Examples **Without the preview card** ```tsx ``` ## Accessibility 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 & i18n - 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 & tokens - The colour is a `--nq-tag-*` token, rendered with `colorToCss`. Cards use `bg-card` and `border-border`. ## Do / Don't - Do keep the persona in markdown so it can be diffed and versioned. - Don't put secrets in the persona. ## Related - [`AiModelSelect`](https://docs.nasaqui.com/components/ai-model-picker) - [`Markdown`](https://docs.nasaqui.com/components/markdown) - [`TagInput`](https://docs.nasaqui.com/components/tag-input) ## Lab https://docs.nasaqui.com/?path=/docs/components-ai-agents-agent-persona-editor--docs ## Code ### React ```tsx { const res = await api.saveAgent(draft); if (!res.ok) return { error: res.message }; }} /> ``` ### shadcn ```tsx { const res = await api.saveAgent(draft); if (!res.ok) return { error: res.message }; }} /> ``` ### Vue ```vue ``` ### Blade ```blade @php $agent = [ 'name' => 'Support agent', 'tagline' => 'Answers billing questions', 'color' => '--nq-tag-blue', 'icon' => 'headphones', 'persona' => "## Role\n\nYou help customers with **invoices** and refunds.", 'traits' => ['calm', 'precise'], 'model' => 'fast', 'greeting' => 'Hi, how can I help?', ]; $models = [['id' => 'fast', 'label' => 'Fast'], ['id' => 'smart', 'label' => 'Smart']]; @endphp
``` ### HTML + Alpine ```html
Colour
Icon
Model

Short words for how the agent comes across. Press Enter to add one.

The first thing the agent says.

Persona

Who the agent is and how it behaves, in Markdown. This is added to its instructions.

9 words 58 of 4,000

```