Skip to main content

Prompt Editor

A specialized tool for crafting and testing AI prompts.

Overview​

The PromptEditor component provides a user-friendly interface for developers and admins to manage the system prompts used by the AI Chat Server. It includes features like syntax highlighting, variable injection, and real-time testing.

Key Features​

  • Syntax Highlighting: Makes it easier to read and write complex prompts.
  • Variable Injection: Easily insert dynamic variables (e.g., {{user_name}}, {{organization_name}}) into your prompts.
  • Version Control: Track changes to your prompts and easily revert to previous versions.
  • Real-time Testing: Test your prompts against different AI models directly within the editor.
  • Template Library: Access a library of pre-built prompt templates for common use cases.

Usage​

The PromptEditor is typically used in the admin section of LibreApps Desktop dashboard.

import { PromptEditor } from '@/components/ai/prompt-editor';

export function AdminPromptsPage() {
  const handleSave = (newPrompt) => {
    // Save the prompt to the backend
  };

  return (
    <div className="p-8">
      <h1 className="text-2xl font-bold mb-4">System Prompt Editor</h1>
      <PromptEditor 
        initialValue="You are a helpful assistant..."
        onSave={handleSave}
      />
    </div>
  );
}

Best Practices​

  • ✅ Do this: Use variables to make your prompts dynamic and context-aware.
  • ✅ Do this: Test your prompts thoroughly with different models before deploying them to production.
  • ❌ Don't do this: Include sensitive information (like API keys or passwords) directly in your prompts.