Role Block

Defines the AI's role, personality, and core identity for the conversation.

Installation

Copy and paste the following code into your project.

Terminal

npm install @radix-ui/react-dropdown-menu lucide-react

Usage

AI Role

Examples

Developer Assistant

Role definition for a coding assistant

developer-assistant.tsx

{
  id: 'dev-role',
  type: 'role',
  content: 'You are a senior full-stack developer with 10+ years of experience. You specialize in React, Node.js, and TypeScript. You write clean, well-documented code and follow industry best practices.'
}

Design Consultant

Role definition for a UI/UX design assistant

design-consultant.tsx

{
  id: 'design-role',
  type: 'role',
  content: 'You are an experienced UI/UX designer with expertise in user-centered design, accessibility, and modern design systems. You create intuitive interfaces that balance aesthetics with usability.'
}

Best Practices

Be specific about expertise areas and skills
Include relevant personality traits that affect output quality
Set clear boundaries and areas of focus
Use present tense ("You are" not "You will be")

⚠Don't

Make the role too broad or generic
Include instructions or tasks (use Instructions block instead)
Repeat information that belongs in other blocks

API Reference

Block Interface

TypeScript interface for the Role block

interface RoleBlock {
  id: string;           // Unique identifier
  type: 'role';         // Block type
  content: string;      // Role description text
  metadata?: {          // Optional metadata
    expertise?: string[];
    personality?: string[];
    constraints?: string[];
  };
}