Eidetic

AI Persona Selector

AI
Settings
Tuner

AI personality selection with pre-configured personas (Assistant, Analyst, Creative, Developer, Teacher, Executive) or custom personas. Each has unique tone, expertise, and communication style.

Preview - Cards Variant

Grid layout with detailed persona cards

Example prompt style

"Help me organize my thoughts about..."

Dropdown Variant

Compact dropdown selector

Pills Variant

Horizontal scrollable pills

Imaginative, inspiring, artistic

Creative writingBrainstormingDesign ideasStorytelling

Without Custom Option

Hide the create custom persona button

Example prompt style

"Analyze this data and identify key trends..."

2 Column Layout

Wider cards in 2-column grid

Example prompt style

"Explain to me step-by-step how..."

Props

AIPersonaSelector component API reference

PropTypeDefaultDescription
personasAIPersona[]—Array of available personas (uses defaults if not provided)
valuestring—Currently selected persona ID
onChange(personaId: string) => void—Callback when persona changes
allowCustombooleantrueAllow creating custom personas
onCreateCustom() => void—Callback when user wants to create custom persona
onEditPersona(personaId: string) => void—Callback when user wants to edit a persona
showDetailsbooleantrueShow persona details on selection
variant'cards' | 'dropdown' | 'pills''cards'Display variant
columns2 | 3 | 43Number of columns for cards variant
classNamestring—Additional CSS classes

AIPersona Type

PropTypeDefaultDescription
id*string—Unique identifier
name*string—Display name
description*string—Short description
icon*LucideIcon—Icon for this persona
color*string—Color classes
bgColor*string—Background/gradient classes
tonestring—Tone of communication
expertisestring[]—Expertise areas
examplePromptstring—Example prompt style
isCustomboolean—Is this a custom/user-created persona
avatarUrlstring—Preview avatar or image URL

Usage

Import and implementation example

import { AIPersonaSelector } from '@/blocks/ai-transparency/ai-persona-selector'
import { useState } from 'react'


export default function Example() {
 const [persona, setPersona] = useState('assistant')


 return (
 <AIPersonaSelector
 value={persona}
 onChange={(id) => {
 setPersona(id)
 // Update AI behavior based on selected persona
 console.log('Selected persona:', id)
 }}
 variant="cards"
 columns={3}
 showDetails={true}
 allowCustom={true}
 onCreateCustom={() => {
 console.log('Create custom persona')
 }}
 />
 )
}

Built With

1 component

This block uses the following UI components from the design system:

Button

Features

Built-in functionality

  • Six default personas: Assistant, Analyst, Creative, Developer, Teacher, Executive
  • Three display variants: Cards, dropdown, or horizontal pills
  • Flexible columns: 2, 3, or 4 column grid for cards variant
  • Custom personas: Allow users to create and edit custom personas
  • Expertise tags: Show expertise areas for each persona
  • Example prompts: Display example prompt style for selected persona
  • Tone indicators: Each persona has defined communication tone
  • Visual selection: Clear selected state with checkmarks
  • Dark mode support: Full dark mode with proper contrast

Default Personas

Built-in persona configurations

General Assistant

Helpful, balanced, and adaptable

Tone: Friendly and professional

General knowledgeTask assistanceResearch
Data Analyst

Precise, analytical, data-focused

Tone: Analytical and thorough

Data analysisStatisticsInsights
Creative Partner

Imaginative, inspiring, artistic

Tone: Enthusiastic and imaginative

Creative writingBrainstormingStorytelling
Code Expert

Technical, precise, solution-oriented

Tone: Technical and concise

ProgrammingDebuggingBest practices
Patient Teacher

Educational, clear, encouraging

Tone: Patient and encouraging

ExplanationsTutorialsExamples
Business Advisor

Strategic, efficient, results-driven

Tone: Professional and strategic

StrategyDecision-makingLeadership

Accessibility

ARIA support and keyboard navigation

ARIA Attributes

Persona cards are interactive buttonsSelected state indicated with checkmark iconDropdown has proper ARIA controls

Keyboard Navigation

KeyAction
TabNavigate between personas
Enter / SpaceSelect persona
Arrow Up/DownNavigate dropdown options
EscapeClose dropdown

Notes

  • Selected persona should be announced to screen readers
  • Expertise tags provide additional context
  • Icons help with visual recognition
  • Example prompts demonstrate persona style

Related Components

SelectRadio GroupAI Model SelectorButton Group