Extract AI rules (#188)

src/ipc/handlers/chat_stream_handlers.ts

@@ -3,7 +3,10 @@ import { CoreMessage, TextPart, ImagePart } from "ai";
 import { db } from "../../db";
 import { chats, messages } from "../../db/schema";
 import { and, eq, isNull } from "drizzle-orm";
-import { SYSTEM_PROMPT } from "../../prompts/system_prompt";
+import {
+  constructSystemPrompt,
+  readAiRules,
+} from "../../prompts/system_prompt";
 import {
   SUPABASE_AVAILABLE_SYSTEM_PROMPT,
   SUPABASE_NOT_AVAILABLE_SYSTEM_PROMPT,
@@ -283,7 +286,9 @@ export function registerChatStreamHandlers() {
           );
         }
 
-        let systemPrompt = SYSTEM_PROMPT;
+        let systemPrompt = constructSystemPrompt({
+          aiRules: await readAiRules(getDyadAppPath(updatedChat.app.path)),
+        });
         if (
           updatedChat.app?.supabaseProjectId &&
           settings.supabase?.accessToken?.value

src/ipc/handlers/token_count_handlers.ts

@@ -1,7 +1,10 @@
 import { db } from "../../db";
 import { chats } from "../../db/schema";
 import { eq } from "drizzle-orm";
-import { SYSTEM_PROMPT } from "../../prompts/system_prompt";
+import {
+  constructSystemPrompt,
+  readAiRules,
+} from "../../prompts/system_prompt";
 import {
   SUPABASE_AVAILABLE_SYSTEM_PROMPT,
   SUPABASE_NOT_AVAILABLE_SYSTEM_PROMPT,
@@ -48,7 +51,9 @@ export function registerTokenCountHandlers() {
       const inputTokens = estimateTokens(req.input);
 
       // Count system prompt tokens
-      let systemPrompt = SYSTEM_PROMPT;
+      let systemPrompt = constructSystemPrompt({
+        aiRules: await readAiRules(getDyadAppPath(chat.app.path)),
+      });
       let supabaseContext = "";
 
       if (chat.app?.supabaseProjectId) {

src/prompts/system_prompt.ts

@@ -1,3 +1,9 @@
+import path from "node:path";
+import fs from "node:fs";
+import log from "electron-log";
+
+const logger = log.scope("system_prompt");
+
 export const THINKING_PROMPT = `
 # Thinking Process
 
@@ -50,9 +56,9 @@ This structured thinking ensures you:
 4. Maintain a consistent approach to problem-solving
 `;
 
-export const SYSTEM_PROMPT = `
+const SYSTEM_PROMPT = `
 <role> You are Dyad, an AI editor that creates and modifies web applications. You assist users by chatting with them and making changes to their code in real-time. You understand that users can see a live preview of their application in an iframe on the right side of the screen while you make code changes.
-Not every interaction requires code changes - you're happy to discuss, explain concepts, or provide guidance without modifying the codebase. When code changes are needed, you make efficient and effective updates to React codebases while following best practices for maintainability and readability. You take pride in keeping things simple and elegant. You are friendly and helpful, always aiming to provide clear explanations. </role>
+Not every interaction requires code changes - you're happy to discuss, explain concepts, or provide guidance without modifying the codebase. When code changes are needed, you make efficient and effective updates to codebases while following best practices for maintainability and readability. You take pride in keeping things simple and elegant. You are friendly and helpful, always aiming to provide clear explanations. </role>
 
 # App Preview / Commands
 
@@ -323,27 +329,10 @@ Do not hesitate to extensively use console logs to follow the flow of the code.
 DO NOT OVERENGINEER THE CODE. You take great pride in keeping things simple and elegant. You don't start by writing very complex error handling, fallback mechanisms, etc. You focus on the user's request and make the minimum amount of changes needed.
 DON'T DO MORE THAN WHAT THE USER ASKS FOR.
 
-# Tech Stack
-- You are building a React application.
-- Use TypeScript.
-- Use React Router. KEEP the routes in src/App.tsx
-- Always put source code in the src folder.
-- Put pages into src/pages/
-- Put components into src/components/
-- The main page (default page) is src/pages/Index.tsx
-- UPDATE the main page to include the new components. OTHERWISE, the user can NOT see any components!
-- ALWAYS try to use the shadcn/ui library.
-- Tailwind CSS: always use Tailwind CSS for styling components. Utilize Tailwind classes extensively for layout, spacing, colors, and other design aspects.
-
-
-Available packages and libraries:
-- The lucide-react package is installed for icons.
-- You ALREADY have ALL the shadcn/ui components and their dependenciesinstalled. So you don't need to install them again.
-- You have ALL the necessary Radix UI components installed.
-- Use prebuilt components from the shadcn/ui library after importing them. Note that these files shouldn't't be edited, so make new components if you need to change them.
-
 ${THINKING_PROMPT}
 
+[[AI_RULES]]
+
 # REMEMBER
 
 > **CODE FORMATTING IS NON-NEGOTIABLE:**
@@ -355,3 +344,43 @@ ${THINKING_PROMPT}
 > **REPEAT: NO MARKDOWN CODE BLOCKS. USE <dyad-write> EXCLUSIVELY FOR CODE.**
 > Do NOT use <dyad-file> tags in the output. ALWAYS use <dyad-write> to generate code.
 `;
+
+const DEFAULT_AI_RULES = `# Tech Stack
+- You are building a React application.
+- Use TypeScript.
+- Use React Router. KEEP the routes in src/App.tsx
+- Always put source code in the src folder.
+- Put pages into src/pages/
+- Put components into src/components/
+- The main page (default page) is src/pages/Index.tsx
+- UPDATE the main page to include the new components. OTHERWISE, the user can NOT see any components!
+- ALWAYS try to use the shadcn/ui library.
+- Tailwind CSS: always use Tailwind CSS for styling components. Utilize Tailwind classes extensively for layout, spacing, colors, and other design aspects.
+
+Available packages and libraries:
+- The lucide-react package is installed for icons.
+- You ALREADY have ALL the shadcn/ui components and their dependencies installed. So you don't need to install them again.
+- You have ALL the necessary Radix UI components installed.
+- Use prebuilt components from the shadcn/ui library after importing them. Note that these files shouldn't be edited, so make new components if you need to change them.
+`;
+
+export const constructSystemPrompt = ({
+  aiRules,
+}: {
+  aiRules: string | undefined;
+}) => {
+  return SYSTEM_PROMPT.replace("[[AI_RULES]]", aiRules ?? DEFAULT_AI_RULES);
+};
+
+export const readAiRules = async (dyadAppPath: string) => {
+  const aiRulesPath = path.join(dyadAppPath, "AI_RULES.md");
+  try {
+    const aiRules = await fs.promises.readFile(aiRulesPath, "utf8");
+    return aiRules;
+  } catch (error) {
+    logger.info(
+      `Error reading AI_RULES.md, fallback to default AI rules: ${error}`,
+    );
+    return DEFAULT_AI_RULES;
+  }
+};