Remove instructional text overrides from prompts and UI

Author: CharlieHelps

notes/prompt-flow.md

@@ -37,7 +37,6 @@ export interface ComponentGenerationResult {
   metadata: {
     dependencies: string[];           // Selected library modules
     aiSelectedDependencies: string[]; // What AI chose (before overrides)
-    instructionalText: boolean;       // Include instructions in UI
     demoData: boolean;                // Include demo data button
     model: string;                    // AI model used
     timestamp: number;                // Generation timestamp
@@ -57,7 +56,6 @@ export async function generateComponentWithDependencies(
 - Call `selectLlmsAndOptions()` with user prompt and history
 - AI analyzes prompt to determine:
   - Which UI libraries to include (React Hook Form, Lucide icons, etc.)
-  - Whether to include instructional text
   - Whether to add a demo data button
 - Log decisions for debugging: `console.log('🎯 AI selected dependencies:', ...)`
 
@@ -206,7 +204,6 @@ For debugging and future database storage preparation:
    ```
    🎯 Component generation: AI selected dependencies: {
      selected: ['useFireproof', 'LucideIcons'],
-     instructionalText: true,
      demoData: false,
      prompt: "Create a todo app",
      model: "anthropic/claude-sonnet-4.5"
@@ -218,7 +215,6 @@ For debugging and future database storage preparation:
    📦 Component metadata for storage: {
      dependencies: ['useFireproof', 'LucideIcons'],
      aiSelectedDependencies: ['useFireproof', 'LucideIcons'],
-     instructionalText: true,
      demoData: false,
      model: "anthropic/claude-sonnet-4.5",
      timestamp: 1735234567890
@@ -245,4 +241,4 @@ For debugging and future database storage preparation:
 4. **Versioning**: Track changes to generated components
 5. **Sharing**: Export/import component configurations
 
-This architecture makes the prompts package the true "brain" of component generation, with both apps being thin clients that consume its orchestration capabilities.
+This architecture makes the prompts package the true "brain" of component generation, with both apps being thin clients that consume its orchestration capabilities.

prompts/pkg/chat.ts

@@ -36,12 +36,6 @@ export interface VibeDocument {
    * These are displayed in the UI when user hasn't made an override.
    */
   aiSelectedDependencies?: string[];
-  /**
-   * When true, enable instructional text in prompts regardless of LLM decision.
-   * When false, disable instructional text regardless of LLM decision.
-   * When undefined, use LLM decision.
-   */
-  instructionalTextOverride?: boolean;
   /**
    * When true, enable demo data in prompts regardless of LLM decision.
    * When false, disable demo data regardless of LLM decision.

prompts/pkg/prompts.ts

@@ -54,7 +54,6 @@ export async function getDefaultDependencies(): Promise<string[]> {
 export interface SystemPromptResult {
   systemPrompt: string;
   dependencies: string[];
-  instructionalText: boolean;
   demoData: boolean;
   model: string;
 }
@@ -113,7 +112,6 @@ async function detectModulesInHistory(
 
 interface LlmSelectionDecisions {
   selected: string[];
-  instructionalText: boolean;
   demoData: boolean;
 }
 
@@ -170,7 +168,7 @@ async function selectLlmsAndOptions(
     {
       role: "system",
       content:
-        'You select which library modules from a catalog should be included AND whether to include instructional UI text and a demo-data button. First analyze if the user prompt describes specific look & feel requirements. For instructional text and demo data: include them only when asked for. Read the JSON payload and return JSON with properties: "selected" (array of catalog "name" strings), "instructionalText" (boolean), and "demoData" (boolean). Only choose modules from the catalog. Include any libraries already used in history. Respond with JSON only.',
+        'You select which library modules from a catalog should be included AND whether to include a demo-data button. First analyze if the user prompt describes specific look & feel requirements. For demo data: include it only when asked for. Read the JSON payload and return JSON with properties: "selected" (array of catalog "name" strings) and "demoData" (boolean). Only choose modules from the catalog. Include any libraries already used in history. Respond with JSON only.',
     },
     { role: "user", content: JSON.stringify(payload) },
   ];
@@ -185,7 +183,6 @@ async function selectLlmsAndOptions(
       name: "module_and_options_selection",
       properties: {
         selected: { type: "array", items: { type: "string" } },
-        instructionalText: { type: "boolean" },
         demoData: { type: "boolean" },
       },
     },
@@ -230,24 +227,20 @@ async function selectLlmsAndOptions(
         "Module/options selection: call-ai returned undefined with schema present",
       );
       console.warn("This is a known issue in the prompts package environment");
-      return { selected: [], instructionalText: true, demoData: true };
+      return { selected: [], demoData: true };
     }
 
     const parsed = JSON.parse(raw) ?? {};
     const selected = Array.isArray(parsed?.selected)
       ? parsed.selected.filter((v: unknown) => typeof v === "string")
       : [];
-    const instructionalText =
-      typeof parsed?.instructionalText === "boolean"
-        ? parsed.instructionalText
-        : true;
     const demoData =
       typeof parsed?.demoData === "boolean" ? parsed.demoData : true;
 
-    return { selected, instructionalText, demoData };
+    return { selected, demoData };
   } catch (err) {
     console.warn("Module/options selection call failed:", err);
-    return { selected: [], instructionalText: true, demoData: true };
+    return { selected: [], demoData: true };
   }
 }
 
@@ -290,7 +283,6 @@ export async function makeBaseSystemPrompt(
   const useOverride = !!sessionDoc?.dependenciesUserOverride;
 
   let selectedNames: string[] = [];
-  let includeInstructional = true;
   let includeDemoData = true;
 
   const llmsCatalog = await getLlmCatalog(sessionDoc.fallBackUrl);
@@ -307,7 +299,6 @@ export async function makeBaseSystemPrompt(
       history,
       sessionDoc,
     );
-    includeInstructional = decisions.instructionalText;
     includeDemoData = decisions.demoData;
 
     const detected = await detectModulesInHistory(history, sessionDoc);
@@ -317,10 +308,6 @@ export async function makeBaseSystemPrompt(
     if (selectedNames.length === 0)
       selectedNames = [...(await getDefaultDependencies())];
   }
-
-  if (typeof sessionDoc?.instructionalTextOverride === "boolean") {
-    includeInstructional = sessionDoc.instructionalTextOverride;
-  }
   if (typeof sessionDoc?.demoDataOverride === "boolean") {
     includeDemoData = sessionDoc.demoDataOverride;
   }
@@ -406,7 +393,6 @@ import React, { ... } from "react"${generateImportStatements(chosenLlms)}
   return {
     systemPrompt,
     dependencies: selectedNames,
-    instructionalText: includeInstructional,
     demoData: includeDemoData,
     model,
   };

prompts/pkg/settings.ts

@@ -28,7 +28,5 @@ export interface UserSettings {
 
   dependencies?: string[];
 
-  instructionalTextOverride?: boolean;
-
   demoDataOverride?: boolean;
 }

prompts/tests/prompt-builder.test.ts

@@ -286,33 +286,6 @@ describe("prompt builder (real implementation)", () => {
     expect(result.systemPrompt).not.toMatch(/vivid description of the app's purpose/i);
   });
 
-  it("makeBaseSystemPrompt: respects instructionalTextOverride=false to disable instructional text", async () => {
-    // await preloadLlmsText();
-    const result = await makeBaseSystemPrompt("test-model", {
-      ...opts,
-      stylePrompt: undefined,
-      userPrompt: undefined,
-      history: [],
-      instructionalTextOverride: false,
-    });
-    expect(result.systemPrompt).not.toMatch(/vivid description of the app's purpose/i);
-    // Demo data should still appear (not overridden)
-    expect(result.systemPrompt).toMatch(/include a Demo Data button/i);
-  });
-
-  it("makeBaseSystemPrompt: respects instructionalTextOverride=true to force instructional text", async () => {
-    // await preloadLlmsText();
-    const result = await makeBaseSystemPrompt("test-model", {
-      ...opts,
-      stylePrompt: undefined,
-      userPrompt: undefined,
-      history: [],
-      instructionalTextOverride: true,
-    });
-    expect(result.systemPrompt).not.toMatch(/vivid description of the app's purpose/i);
-    expect(result.systemPrompt).toMatch(/include a Demo Data button/i);
-  });
-
   it("makeBaseSystemPrompt: respects demoDataOverride=false to disable demo data", async () => {
     // await preloadLlmsText();
     const result = await makeBaseSystemPrompt("test-model", {
@@ -338,18 +311,4 @@ describe("prompt builder (real implementation)", () => {
     expect(result.systemPrompt).toMatch(/include a Demo Data button/i);
     expect(result.systemPrompt).not.toMatch(/vivid description of the app's purpose/i);
   });
-
-  it("makeBaseSystemPrompt: respects both overrides simultaneously", async () => {
-    // await preloadLlmsText();
-    const result = await makeBaseSystemPrompt("test-model", {
-      ...opts,
-      stylePrompt: undefined,
-      userPrompt: undefined,
-      history: [],
-      instructionalTextOverride: false,
-      demoDataOverride: false,
-    });
-    expect(result.systemPrompt).not.toMatch(/vivid description of the app's purpose/i);
-    expect(result.systemPrompt).not.toMatch(/include a Demo Data button/i);
-  });
 });

prompts/tests/prompts.test.ts

@@ -8,7 +8,6 @@ vi.mock("@vibes.diy/prompts", async () => {
     makeBaseSystemPrompt: vi.fn().mockResolvedValue({
       systemPrompt: "mocked system prompt",
       dependencies: ["fireproof", "callai"],
-      instructionalText: true,
       demoData: true,
       model: "test-model",
     }),
@@ -17,12 +16,6 @@ vi.mock("@vibes.diy/prompts", async () => {
         format: '{dependencies: { "package-name": "version" }}',
         note: "use-fireproof is already provided, do not include it",
       },
-      structure: [
-        "Brief explanation",
-        "Component code with proper Fireproof integration",
-        "Real-time updates",
-        "Data persistence",
-      ],
     },
   };
 });

prompts/tests/settings-prompt.test.ts

@@ -79,7 +79,6 @@ import { callAI } from "call-ai"
       return {
         systemPrompt,
         dependencies: ["fireproof", "callai"],
-        instructionalText: true,
         demoData: true,
         model,
       };

use-vibes/base/hooks/vibes-gen/use-vibes.ts

@@ -125,7 +125,6 @@ export function useVibes(
 Use Fireproof for data persistence. Begin the component with the import statements.
 Return only the JSX code with a default export. Use modern React patterns with hooks if needed.`,
             dependencies: options.dependencies || ['useFireproof'],
-            instructionalText: true,
             demoData: false,
             model: options.model || 'anthropic/claude-sonnet-4.5',
           };
@@ -135,7 +134,6 @@ Return only the JSX code with a default export. Use modern React patterns with h
         const metadata = {
           dependencies: result.dependencies,
           aiSelectedDependencies: result.dependencies,
-          instructionalText: result.instructionalText,
           demoData: result.demoData,
           model: result.model,
           timestamp: Date.now(),

use-vibes/tests/useVibes-iframe.test.tsx

@@ -41,7 +41,6 @@ vi.mock('@vibes.diy/prompts', () => ({
     return {
       systemPrompt: 'You are a React component generator',
       dependencies: options?.dependencies || ['useFireproof'],
-      instructionalText: true,
       demoData: false,
       model: model || 'anthropic/claude-sonnet-4.5',
     };

use-vibes/tests/useVibes-integration.test.tsx

@@ -63,7 +63,6 @@ vi.mock('@vibes.diy/prompts', () => ({
     return {
       systemPrompt: 'You are a React component generator',
       dependencies: options?.dependencies || ['useFireproof'],
-      instructionalText: true,
       demoData: false,
       model: model || 'anthropic/claude-sonnet-4.5',
     };