Prompt Enhancer

Relevant source files

The following files were used as context for generating this wiki page:

• app/lib/hooks/usePromptEnhancer.ts
• app/components/chat/BaseChat.tsx
• app/components/chat/Chat.client.tsx
• app/components/ui/IconButton.tsx (Derived from implementation in BaseChat)
• app/lib/persistence/fileSystem.ts
• app/root.tsx

The Prompt Enhancer is a specialized utility within the Bolt application designed to refine and expand user-provided text inputs before they are sent to the primary Large Language Model (LLM). Its primary purpose is to take brief or vague user instructions and transform them into more detailed, technical, and actionable prompts, thereby improving the quality of the AI's generated code and responses.

This feature is integrated directly into the chat interface, allowing users to trigger an "enhancement" phase via a dedicated UI button. The system utilizes a streaming API endpoint to provide real-time updates to the text area as the enhanced prompt is being generated.

Architecture and Data Flow

The Prompt Enhancer operates through a client-server interaction involving a custom React hook, a specialized API route, and the main chat component.

Component Interaction

1. UI Trigger: The user clicks the "Enhance prompt" button located in the BaseChat component.
2. Hook Logic: The usePromptEnhancer hook manages the state (loading, completion) and executes the fetch request.
3. API Request: A POST request is sent to /api/enhancer containing the current input string.
4. Streaming Response: The server streams the refined prompt back to the client.
5. UI Update: The text area in BaseChat is updated in real-time as chunks of the enhanced prompt arrive.

Sequence Diagram

The following diagram illustrates the lifecycle of a prompt enhancement request:

Core Components

usePromptEnhancer Hook

This hook serves as the primary controller for the enhancement logic. It encapsulates the state of the enhancement process and provides methods to trigger and reset the state.

State/Method	Type	Description
enhancingPrompt	boolean	Indicates if an enhancement request is currently in progress.
promptEnhanced	boolean	Indicates if the current prompt in the textarea has been successfully enhanced.
enhancePrompt	Function	Async function that takes the current input and a setInput callback to perform the enhancement.
resetEnhancer	Function	Resets the enhancement states to false.

Sources: app/lib/hooks/usePromptEnhancer.ts:6-16

UI Integration in BaseChat

The enhancement feature is exposed to the user through a specific button in the prompt input area. This button changes state visually based on the progress of the enhancement.

• Active State: Displays a spinner icon with the text "Enhancing prompt...".
• Success State: Displays a star icon with the text "Prompt enhanced" and changes the button color to an accent variant.
• Disabled State: The button is disabled if the input is empty or if an enhancement is already running.

Sources: app/components/chat/BaseChat.tsx:142-168, app/components/chat/Chat.client.tsx:210-216

Implementation Details

Streaming Logic

The enhancement process uses a ReadableStream to provide a responsive user experience. The usePromptEnhancer hook utilizes a TextDecoder to process stream chunks and immediately updates the UI's input state.

const reader = response.body?.getReader();
if (reader) {
  const decoder = new TextDecoder();
  let _input = '';
  try {
    setInput(''); // Clear current input for new content
    while (true) {
      const { value, done } = await reader.read();
      if (done) break;
      _input += decoder.decode(value);
      setInput(_input); // Real-time update
    }
  } catch (error) {
    setInput(originalInput); // Revert on failure
  }
}

Sources: app/lib/hooks/usePromptEnhancer.ts:31-54

State Management and Persistence

While the enhancement itself is transient, it interacts with the broader application state:

• Chat Implementation: The ChatImpl component uses resetEnhancer whenever a message is sent to ensure the next prompt starts fresh.
• Scroll Management: During enhancement, the scrollTextArea function is called to ensure the user sees the latest text being appended to the textarea.

Sources: app/components/chat/Chat.client.tsx:189, app/components/chat/Chat.client.tsx:211-214

Summary

The Prompt Enhancer is a critical UX feature that bridges the gap between simple user requests and the detailed instructions required for high-quality AI code generation. By leveraging a streaming architecture, it provides immediate visual feedback and allows for iterative refinement of developer prompts within the Bolt environment.