StructuredInstructions Component

The StructuredInstructions component provides a structured interface for defining AI assistant behavior through categorized instruction fields.

Overview

This component breaks down assistant instructions into five distinct categories: Goal, Tone, Persona, Constraints, and Output Format. It provides helper functions to combine these structured inputs into formatted instructions and parse existing instructions back into structured format.

Location

src/components/StructuredInstructions.tsx

Features

Structured Input Fields

• Goal: Main purpose and problems the assistant solves
• Tone: Communication style (formal, friendly, professional)
• Persona: Role, expertise, and background to simulate
• Constraints: Limitations and things to avoid
• Output Format: Response structure and formatting requirements

Bidirectional Conversion

• Combine Function: Converts structured inputs to formatted markdown
• Parse Function: Extracts structure from existing instruction text
• Backward Compatibility: Handles unstructured instructions gracefully

User Experience

• Resizable Text Areas: Users can adjust field height as needed
• Placeholder Text: Helpful prompts for each instruction category
• Real-time Updates: Immediate callback on field changes
• Serif Font: Enhanced readability for instruction text

Props Interface

export interface StructuredInstructionsType {
  goal: string;
  tone: string;
  persona: string;
  constraints: string;
  outputFormat: string;
}

interface StructuredInstructionsProps {
  instructions: StructuredInstructionsType;
  onChange: (field: keyof StructuredInstructionsType, value: string) => void;
}

Usage Example

import { StructuredInstructions } from '@/components/StructuredInstructions';

function AssistantEditor() {
  const [instructions, setInstructions] = useState({
    goal: '',
    tone: '',
    persona: '',
    constraints: '',
    outputFormat: ''
  });

  const handleInstructionChange = (field, value) => {
    setInstructions(prev => ({
      ...prev,
      [field]: value
    }));
  };

  return (
    <StructuredInstructions
      instructions={instructions}
      onChange={handleInstructionChange}
    />
  );
}

Helper Functions

combineInstructions

Converts structured instructions into formatted markdown:

export const combineInstructions = (structured: StructuredInstructionsType): string => {
  return `# Goal
${structured.goal || 'Not specified'}

# Tone
${structured.tone || 'Not specified'}

# Persona
${structured.persona || 'Not specified'}

# Constraints
${structured.constraints || 'Not specified'}

# Output Format
${structured.outputFormat || 'Not specified'}`;
};

parseInstructions

Extracts structured data from formatted instruction text:

export const parseInstructions = (instructions: string = ''): StructuredInstructionsType => {
  // Uses regex patterns to extract each section
  // Falls back to putting entire text in 'goal' if no structure found
};

Implementation Details

Field Structure

Each instruction category has:

• Descriptive Label: Clear field identification
• Helpful Placeholder: Guidance on what to include
• 3-row Textarea: Adequate space for detailed instructions
• Serif Typography: Enhanced readability for longer text

Regex Patterns for Parsing

const sections = {
  goal: /# Goal\s*\n([\s\S]*?)(?=# Tone|# Persona|# Constraints|# Output Format|$)/i,
  tone: /# Tone\s*\n([\s\S]*?)(?=# Goal|# Persona|# Constraints|# Output Format|$)/i,
  persona: /# Persona\s*\n([\s\S]*?)(?=# Goal|# Tone|# Constraints|# Output Format|$)/i,
  constraints: /# Constraints\s*\n([\s\S]*?)(?=# Goal|# Tone|# Persona|# Output Format|$)/i,
  outputFormat: /# Output Format\s*\n([\s\S]*?)(?=# Goal|# Tone|# Persona|# Constraints|$)/i
};

Dependencies

• @/components/ui/label - Field labels
• @/components/ui/textarea - Input fields
• React hooks for state management

Best Practices

Goal Field

• Define specific problems the assistant solves
• Be clear about intended use cases
• Include measurable outcomes when possible

Tone Field

• Specify communication style preferences
• Include examples of desired tone
• Consider audience and context

Persona Field

• Define the assistant’s role or character
• Specify relevant expertise areas
• Include background context when helpful

Constraints Field

• List things the assistant should avoid
• Specify boundaries and limitations
• Include compliance requirements

Output Format Field

• Describe desired response structure
• Specify formatting requirements
• Include examples of preferred formats

Migration Support

Converting from Unstructured Instructions

const structured = parseInstructions(existingInstructions);
// Automatically extracts sections or places content in 'goal'

Converting to Formatted Instructions

const formatted = combineInstructions(structuredData);
// Creates markdown-formatted instruction text

Related Components

• Assistant creation and editing interfaces
• Prompt management systems
• AI model configuration components

Accessibility

• Proper Labels: Each field has associated label for screen readers
• Tab Navigation: Logical tab order through instruction fields
• Resize Functionality: Users can adjust textarea heights as needed
• Clear Structure: Visual hierarchy helps users understand organization