Custom system prompts from the UI

Different users want different cleanup rules. A meeting notes user wants bullet points. A technical interviewer wants verbatim transcripts with filler removed. Instead of hardcoding one prompt, the UI exposes the prompt as an editable textarea and the request carries whatever the user typed.

Custom prompt flow

The editable textarea in the settings panel drives each request.

frontend/src/App.tsx
typescript
useEffect(() => {
  const loadSystemPrompt = async () => {
    try {
      const response = await fetch('/api/system-prompt');
      const data = (await response.json()) as SystemPromptResponse;
      setSystemPrompt(data.default_prompt);
    } catch (err) {
      console.error('Failed to load system prompt:', err);
      setError('Failed to load system prompt');
    } finally {
      setIsLoadingPrompt(false);
    }
  };
  void loadSystemPrompt();
}, []);

The UI loads the default prompt from the server so changes to system_prompt.txt show up in the textarea automatically. Users can edit, and the edited value travels with each cleanup request.

frontend/src/components/SettingsPanel.tsx
typescript
<TextBox
  mode='input'
  variant='default'
  value={systemPrompt}
  onChange={onPromptChange}
  placeholder='Enter system prompt for LLM...'
  isLoading={isLoadingPrompt}
  rows={6}
  id='systemPrompt'
/>

The collapsible textarea lives inside a Settings panel. Default collapsed to keep the main UI clean, expanded for power users who want to tune cleanup rules.

For a local tool, no. The user is editing their own prompt on their own machine. For a hosted app, yes. Cap the length, strip control characters, and consider a moderation check. Your threat model changes once strangers can inject prompt text into your LLM calls.

Quiz: Quiz

Loading practice…