Feature: Custom AI System Prompt

src/App.jsx

@@ -11,6 +11,7 @@ import 'reactflow/dist/style.css';
 import axios from 'axios';
 import html2canvas from 'html2canvas';
 import { saveAs } from 'file-saver';
+import SettingsModal from './SettingsModal';
 
 // 🧠 Initial State & Helpers
 const initialNodes = [];
@@ -27,7 +28,7 @@ const getColor = (type) => {
 };
 
 // 🤖 AI Logic with Domino Effect Thinking (Updated: Using Puter AI API)
-const createAIChildren = async (text, parentId, setNodes, setEdges, stopGenerationRef) => {
+const createAIChildren = async (text, parentId, setNodes, setEdges, stopGenerationRef, systemPrompt) => {
   try {
     if (stopGenerationRef.current) return;
     const res = await axios.post(
@@ -37,17 +38,7 @@ const createAIChildren = async (text, parentId, setNodes, setEdges, stopGenerati
         messages: [
           {
             role: 'system',
-            content: `You are an expert in cause-and-effect analysis.
-
-Given a news headline or event, break it down into a chain of consequences, like a domino effect.
-
-Each node must:
-- Be short (max 15 words)
-- Represent one specific consequence
-- Be categorized as either: 'positive', 'neutral', or 'negative'
-- Be logically linked to the prompt
-
-Return only 3 outputs: one of each type.`
+            content: systemPrompt,
           },
           { role: 'user', content: text }
         ]
@@ -96,7 +87,7 @@ Return only 3 outputs: one of each type.`
     // Recursively expand each child one level deep
     for (const n of newNodes) {
       if (stopGenerationRef.current) break;
-      await createAIChildren(n.data.label, n.id, setNodes, setEdges, stopGenerationRef);
+      await createAIChildren(n.data.label, n.id, setNodes, setEdges, stopGenerationRef, systemPrompt);
     }
 
   } catch (err) {
@@ -115,6 +106,23 @@ export default function App() {
   const [loading, setLoading] = useState(false);
   const stopGenerationRef = useRef(false);
   const reactFlowWrapper = useRef(null);
+  const [isSettingsModalOpen, setIsSettingsModalOpen] = useState(false);
+  const [systemPrompt, setSystemPrompt] = useState(localStorage.getItem('systemPrompt') || `You are an expert in cause-and-effect analysis.
+
+Given a news headline or event, break it down into a chain of consequences, like a domino effect.
+
+Each node must:
+- Be short (max 15 words)
+- Represent one specific consequence
+- Be categorized as either: 'positive', 'neutral', or 'negative'
+- Be logically linked to the prompt
+
+Return only 3 outputs: one of each type.`);
+
+  const handleSaveSystemPrompt = (newPrompt) => {
+    localStorage.setItem('systemPrompt', newPrompt);
+    setSystemPrompt(newPrompt);
+  };
 
   const handleExport = () => {
     if (reactFlowWrapper.current) {
@@ -150,7 +158,7 @@ export default function App() {
     setNodes([rootNode]);
     setEdges([]);
 
-    await createAIChildren(prompt, rootId, setNodes, setEdges, stopGenerationRef);
+    await createAIChildren(prompt, rootId, setNodes, setEdges, stopGenerationRef, systemPrompt);
 
     setPrompt('');
     setLoading(false);
@@ -164,7 +172,7 @@ export default function App() {
   const onNodeClick = async (_event, node) => {
     stopGenerationRef.current = false;
     setLoading(true);
-    await createAIChildren(node.data.label, node.id, setNodes, setEdges, stopGenerationRef);
+    await createAIChildren(node.data.label, node.id, setNodes, setEdges, stopGenerationRef, systemPrompt);
     setLoading(false);
   };
 
@@ -246,9 +254,30 @@ export default function App() {
           >
             Export as PNG
           </button>
+          <button
+            onClick={() => setIsSettingsModalOpen(true)}
+            style={{
+              padding: '10px',
+              backgroundColor: '#777',
+              color: '#fff',
+              border: '1px solid #ccc',
+              borderRadius: '8px',
+              cursor: 'pointer',
+            }}
+          >
+            ⚙️
+          </button>
         </div>
       </div>
 
+      {/* ⚙️ Settings Modal */}
+      <SettingsModal
+        isOpen={isSettingsModalOpen}
+        onClose={() => setIsSettingsModalOpen(false)}
+        onSave={handleSaveSystemPrompt}
+        currentSystemPrompt={systemPrompt}
+      />
+
       {/* 🧠 ReactFlow Canvas */}
       <div style={{ flexGrow: 1 }} ref={reactFlowWrapper}>
         <ReactFlow

src/SettingsModal.jsx

@@ -0,0 +1,87 @@
+// ⚙️ SettingsModal Component
+import React, { useState } from 'react';
+
+export default function SettingsModal({ isOpen, onClose, onSave, currentSystemPrompt }) {
+  const [prompt, setPrompt] = useState(currentSystemPrompt);
+
+  if (!isOpen) return null;
+
+  const handleSave = () => {
+    onSave(prompt);
+    onClose();
+  };
+
+  return (
+    <div style={{
+      position: 'fixed',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      backgroundColor: 'rgba(0, 0, 0, 0.7)',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      zIndex: 1000,
+    }}>
+      <div style={{
+        backgroundColor: '#333',
+        padding: '2rem',
+        borderRadius: '12px',
+        width: '500px',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '1rem',
+      }}>
+        <h2 style={{ color: '#fff', margin: 0 }}>⚙️ AI Settings</h2>
+        <p style={{ color: '#ccc', margin: 0, fontSize: '0.9rem' }}>
+          Customize the AI's instructions. This will change how it generates ideas.
+        </p>
+        <textarea
+          value={prompt}
+          onChange={(e) => setPrompt(e.target.value)}
+          style={{
+            height: '200px',
+            borderRadius: '8px',
+            border: '1px solid #555',
+            color: '#fff',
+            backgroundColor: '#222',
+            padding: '10px',
+            fontSize: '1rem',
+            fontFamily: 'monospace',
+          }}
+        />
+        <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '0.75rem' }}>
+          <button
+            onClick={onClose}
+            style={{
+              padding: '10px 20px',
+              backgroundColor: '#555',
+              color: 'white',
+              border: 'none',
+              borderRadius: '8px',
+              fontWeight: 'bold',
+              cursor: 'pointer',
+            }}
+          >
+            Cancel
+          </button>
+          <button
+            onClick={handleSave}
+            style={{
+              padding: '10px 20px',
+              backgroundColor: '#00bcd4',
+              color: 'white',
+              border: 'none',
+              borderRadius: '8px',
+              fontWeight: 'bold',
+              cursor: 'pointer',
+            }}
+          >
+            Save
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

test.py

@@ -0,0 +1,18 @@
+
+import time
+from playwright.sync_api import sync_playwright
+
+with sync_playwright() as p:
+    browser = p.chromium.launch()
+    page = browser.new_page()
+    time.sleep(5) # Wait for the dev server to start
+    page.goto("http://localhost:5173")
+    page.click('button:has-text("⚙️")')
+    page.wait_for_selector('h2:has-text("⚙️ AI Settings")')
+    page.fill('textarea', 'You are a pirate who rhymes.')
+    page.click('button:has-text("Save")')
+    page.fill('input[placeholder="Enter a news/event prompt..."]', 'Why is the sky blue?')
+    page.click('button:has-text("Generate Node")')
+    time.sleep(10) # Wait for AI to start and some nodes to appear
+    page.screenshot(path="screenshot.png")
+    browser.close()