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
• README.md
• app/lib/stores/workbench.ts
• app/components/ui/IconButton.tsx (Derived from component usage in BaseChat)

The Prompt Enhancer is a core feature of the Bolt platform designed to help users refine and expand their initial queries before submission to the primary AI model. By leveraging a specialized API endpoint, it transforms brief or vague user instructions into detailed, high-quality prompts that improve the resulting code generation and project scaffolding.

Within the application, this feature is presented as a "stars" icon in the chat interface. It acts as an intermediary step, allowing the AI to assist in the prompt engineering process itself, ensuring that the instructions provided to the underlying LLM (such as Claude 3.5 Sonnet) are specific and context-rich.

Sources: README.md:105-107, app/lib/hooks/usePromptEnhancer.ts:1-55, app/components/chat/BaseChat.tsx:162-185

Architecture and Data Flow

The Prompt Enhancer operates through a client-server interaction involving a custom React hook and a streaming API endpoint. When a user triggers the enhancement, the current input string is sent to the backend, and the enhanced version is streamed back to the UI in real-time.

Enhancement Process Flow

The following diagram illustrates the sequence of events from user interaction to the final prompt update:

The flow ensures that the user sees the prompt being "written" in real-time, providing immediate feedback that the AI is processing the request.

Sources: app/lib/hooks/usePromptEnhancer.ts:15-53, app/components/chat/BaseChat.tsx:162-185

Component Integration

The usePromptEnhancer Hook

This hook manages the state and logic for the enhancement process. It handles the network request to the /api/enhancer endpoint and manages the streaming reader to update the chat input.

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

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

UI Implementation (BaseChat.tsx)

The feature is integrated into the BaseChat component via an IconButton. The button's appearance and behavior change based on the state of the enhancer:

• Initial State: Shows a "stars" icon (i-bolt:stars). Disabled if input is empty.
• Enhancing State: Displays a spinner (i-svg-spinners:90-ring-with-bg) and the text "Enhancing prompt...".
• Enhanced State: Highlights the button and displays "Prompt enhanced" to notify the user of the successful transformation.

Sources: app/components/chat/BaseChat.tsx:160-185, app/lib/hooks/usePromptEnhancer.ts:31-50

Implementation Details

Streaming Logic

The enhancement logic utilizes the ReadableStream API. It captures the response from the server and uses a TextDecoder to convert binary chunks into strings, which are then appended to the local state through the setInput callback.

// app/lib/hooks/usePromptEnhancer.ts:31-48
const reader = response.body?.getReader();
if (reader) {
  const decoder = new TextDecoder();
  let _input = '';
  try {
    setInput('');
    while (true) {
      const { value, done } = await reader.read();
      if (done) break;
      _input += decoder.decode(value);
      setInput(_input);
    }
  } catch (error) {
    setInput(originalInput); // Fallback on error
  }
}

Sources: app/lib/hooks/usePromptEnhancer.ts:25-50

State Resetting

The enhancement state is sensitive to new messages. When a user sends a message, the sendMessage function in Chat.client.tsx calls resetEnhancer(). This ensures that for the next message, the UI returns to its original state and the user can start the enhancement process over for a new prompt.

Sources: app/components/chat/Chat.client.tsx:174

Technical Summary

The Prompt Enhancer serves as a UX bridge between raw user intent and the highly structured prompts required for effective AI-driven full-stack development. By utilizing streaming responses and specific UI state management, it provides a responsive experience that encourages users to provide the AI with better instructions, leading to higher quality project generation in the Bolt environment.

Sources: README.md:105-107, app/lib/hooks/usePromptEnhancer.ts