Add configurable system prompt with on/off toggle

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: jonasneves

app/chat/frontend/src/Playground.tsx

@@ -91,6 +91,8 @@ function PlaygroundInner() {
   }, [setGithubAuth]);
 
   const [uiBuilderEnabled, setUiBuilderEnabled] = useState(false);
+  const [customSystemPrompt, setCustomSystemPrompt] = useState('');
+  const [customSystemPromptEnabled, setCustomSystemPromptEnabled] = useState(false);
   const [executionTimes, setExecutionTimes] = useState<Record<string, ExecutionTimeData>>({});
   const dockRef = useRef<HTMLDivElement>(null);
 
@@ -826,7 +828,7 @@ function PlaygroundInner() {
     selectedCardIds,
     githubToken: githubAuth?.token,
     isGenerating,
-    systemPrompt: uiBuilderEnabled ? UI_BUILDER_PROMPT : undefined,
+    systemPrompt: uiBuilderEnabled ? UI_BUILDER_PROMPT : (customSystemPromptEnabled && customSystemPrompt ? customSystemPrompt : undefined),
     summarizeSessionResponses,
     setLastQuery,
     setHoveredCard,
@@ -1228,6 +1230,7 @@ function PlaygroundInner() {
                     getModelEndpoints={getModelEndpoints}
                     modelKeyMap={modelKeyMap}
                     onlineModelIds={onlineModelIds}
+                    systemPrompt={customSystemPromptEnabled && customSystemPrompt ? customSystemPrompt : undefined}
                   />
                 </Suspense>
               </ErrorBoundary>
@@ -1385,6 +1388,10 @@ function PlaygroundInner() {
           setGithubAuth={setGithubAuth}
           bgStyle={bgStyle}
           setBgStyle={setBgStyle}
+          systemPrompt={customSystemPrompt}
+          setSystemPrompt={setCustomSystemPrompt}
+          systemPromptEnabled={customSystemPromptEnabled}
+          setSystemPromptEnabled={setCustomSystemPromptEnabled}
         />
       </Suspense>
 

app/chat/frontend/src/components/ChatView.tsx

@@ -52,6 +52,7 @@ interface ChatViewProps {
     getModelEndpoints: (models: Model[]) => Record<string, string>;
     modelKeyMap: Record<string, string>;
     onlineModelIds?: Set<string>;
+    systemPrompt?: string;
 }
 
 const CATEGORY_STYLE: Record<string, { border: string; bg: string; text: string; label: string }> = {
@@ -177,6 +178,7 @@ const ChatView = forwardRef<ChatViewHandle, ChatViewProps>(({
     getModelEndpoints,
     modelKeyMap,
     onlineModelIds,
+    systemPrompt,
 }, ref) => {
     const [inputFocused, setInputFocused] = useState(false);
     const [copiedMessageId, setCopiedMessageId] = useState<number | null>(null);
@@ -295,6 +297,10 @@ const ChatView = forwardRef<ChatViewHandle, ChatViewProps>(({
 
         const systemPrompts: Array<{ role: 'system'; content: string }> = [];
 
+        if (systemPrompt) {
+            systemPrompts.push({ role: 'system', content: systemPrompt });
+        }
+
         if (uiBuilderEnabled) {
             systemPrompts.push({ role: 'system', content: UI_BUILDER_PROMPT });
         }
@@ -404,7 +410,7 @@ const ChatView = forwardRef<ChatViewHandle, ChatViewProps>(({
         });
 
         await Promise.allSettled(streamPromises);
-    }, [isGenerating, selectedModels, modelMap, githubToken, uiBuilderEnabled, setMessages, setIsGenerating, syncStreamingState, getModelEndpoints, models, modelKeyMap]);
+    }, [isGenerating, selectedModels, modelMap, githubToken, uiBuilderEnabled, systemPrompt, setMessages, setIsGenerating, syncStreamingState, getModelEndpoints, models, modelKeyMap]);
 
     const stopGeneration = useCallback(() => {
         abortRefs.current.forEach(c => c.abort());

app/chat/frontend/src/components/SettingsModal.tsx

@@ -12,6 +12,10 @@ interface SettingsModalProps {
   setGithubAuth: (auth: GitHubAuth | null) => void;
   bgStyle: BackgroundStyle;
   setBgStyle: (style: BackgroundStyle) => void;
+  systemPrompt: string;
+  setSystemPrompt: (prompt: string) => void;
+  systemPromptEnabled: boolean;
+  setSystemPromptEnabled: (enabled: boolean) => void;
 }
 
 // Display labels for background styles
@@ -54,6 +58,10 @@ export default function SettingsModal({
   setGithubAuth,
   bgStyle,
   setBgStyle,
+  systemPrompt,
+  setSystemPrompt,
+  systemPromptEnabled,
+  setSystemPromptEnabled,
 }: SettingsModalProps) {
   const [activeTab, setActiveTab] = useState<SettingsTab>('general');
   const [isConnecting, setIsConnecting] = useState(false);
@@ -174,6 +182,36 @@ export default function SettingsModal({
           {/* General Tab */}
           {activeTab === 'general' && (
             <>
+              {/* System Prompt Section */}
+              <div className="rounded-xl border border-slate-800/60 bg-slate-900/60 p-4">
+                <div className="flex items-center justify-between mb-1">
+                  <h3 className="text-sm font-semibold text-slate-200">System Prompt</h3>
+                  <button
+                    onClick={() => setSystemPromptEnabled(!systemPromptEnabled)}
+                    className={`relative inline-flex h-5 w-9 items-center rounded-full transition-colors focus:outline-none ${systemPromptEnabled ? 'bg-blue-500' : 'bg-slate-700'}`}
+                    aria-checked={systemPromptEnabled}
+                    role="switch"
+                    aria-label="Enable system prompt"
+                  >
+                    <span className={`inline-block h-3.5 w-3.5 transform rounded-full bg-white shadow transition-transform ${systemPromptEnabled ? 'translate-x-4.5' : 'translate-x-0.5'}`} />
+                  </button>
+                </div>
+                <p className="text-xs text-slate-400 leading-relaxed mb-3">
+                  Injected as the first message in every request. Disable for unmodified model behavior.
+                </p>
+                <textarea
+                  value={systemPrompt}
+                  onChange={e => setSystemPrompt(e.target.value)}
+                  disabled={!systemPromptEnabled}
+                  placeholder="You are a helpful assistant..."
+                  rows={5}
+                  className={`w-full rounded-lg border px-3 py-2 text-sm font-mono resize-y transition-colors focus:outline-none focus:ring-1 focus:ring-blue-500/50 ${systemPromptEnabled
+                    ? 'bg-slate-800/60 border-slate-700/60 text-slate-200 placeholder-slate-500'
+                    : 'bg-slate-800/30 border-slate-800/40 text-slate-500 placeholder-slate-600 cursor-not-allowed'
+                  }`}
+                />
+              </div>
+
               {/* GitHub Connection Section */}
               <div className="rounded-xl border border-slate-800/60 bg-slate-900/60 p-4">
                 <h3 className="text-sm font-semibold text-slate-200 mb-1">GitHub Connection</h3>