Prompt Enhancer

Relevant source files

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

• app/lib/hooks/usePromptEnhancer.ts
• app/routes/api.enhancer.ts
• app/components/chat/BaseChat.tsx
• app/components/chat/Chat.client.tsx
• app/lib/hooks/index.ts

The Prompt Enhancer is a specialized utility within the Bolt application designed to refine and optimize user input before it is sent to the primary LLM. By leveraging a dedicated API endpoint, the system transforms brief or vague user prompts into more detailed and descriptive versions, improving the quality of the AI-generated software artifacts.

Users interact with this feature through an "Enhance prompt" button located within the chat interface. The system provides real-time visual feedback during the enhancement process and updates the input field with the refined text as it streams back from the server.

Sources: app/lib/hooks/usePromptEnhancer.ts:16-18, app/components/chat/BaseChat.tsx:160-173, README.md

Architecture and Data Flow

The Prompt Enhancer follows a client-server architecture using a streaming approach to ensure responsiveness. The frontend manages UI state (loading indicators, success states), while the backend interacts with an LLM to perform the actual text transformation.

Frontend Integration

The feature is exposed through the usePromptEnhancer custom hook, which manages the lifecycle of an enhancement request. It tracks whether a prompt is currently being enhanced and whether the process has successfully completed.

The diagram shows the end-to-end flow from the user interaction in the chat interface to the real-time update of the prompt text.
Sources: app/lib/hooks/usePromptEnhancer.ts:11-54, app/components/chat/BaseChat.tsx:155-180

Backend Processing

The server-side logic resides in a Remix action that receives the original message and wraps it in a system instruction. This instruction mandates that the LLM only respond with the improved prompt content.

Component	Description
enhancerAction	The primary server-side handler for the /api/enhancer route.
streamText	Server-side utility that communicates with the LLM provider.
TransformStream	Used to decode and parse the incoming LLM stream into clean text parts.
StreamingTextResponse	Returns the processed stream back to the client.

Sources: app/routes/api.enhancer.ts:13-40

Implementation Details

Client-Side Hook: usePromptEnhancer

The usePromptEnhancer hook provides the state and logic necessary for the UI to interact with the enhancement API.

• State Management: Uses enhancingPrompt (boolean) to trigger loading spinners and promptEnhanced (boolean) to show completion icons.
• Stream Decoding: Utilizes TextDecoder and a ReadableStreamDefaultReader to process the response. It clears the input initially and appends decoded chunks as they arrive to provide a typing effect.
• Error Handling: If the stream fails, the hook reverts the input to the originalInput to prevent data loss.

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

Server-Side Route: /api/enhancer

The backend implementation uses stripIndents to format the LLM prompt. The system prompt is strictly configured:

"I want you to improve the user prompt that is wrapped in <original_prompt> tags. IMPORTANT: Only respond with the improved prompt and nothing else!"

const result = await streamText(
  [
    {
      role: 'user',
      content: stripIndents`
      I want you to improve the user prompt that is wrapped in \`<original_prompt>\` tags.
      ...
    `,
    },
  ],
  context.cloudflare.env,
);

Sources: app/routes/api.enhancer.ts:20-33

UI Components

The Prompt Enhancer is integrated into the BaseChat component, specifically within the prompt input area.

Visual Feedback

The UI changes dynamically based on the state provided by the hook:

• Idle State: Displays an icon (i-bolt:stars) and is disabled if the input is empty.
• Enhancing State: Displays a spinning loader (i-svg-spinners:90-ring-with-bg) and the text "Enhancing prompt...".
• Enhanced State: Changes the icon color to an accent color and displays "Prompt enhanced".

Element	Trigger	Icon / Style
Button	input.length === 0	Disabled
Spinner	enhancingPrompt === true	i-svg-spinners:90-ring-with-bg
Success State	promptEnhanced === true	text-bolt-elements-item-contentAccent!

Sources: app/components/chat/BaseChat.tsx:156-180

Interaction Logic

In Chat.client.tsx, the enhancePrompt function is passed to BaseChat. It includes a callback to scrollTextArea() to ensure that as the prompt grows in size during enhancement, the textarea remains focused on the new content.

Sources: app/components/chat/Chat.client.tsx:246-251

Conclusion

The Prompt Enhancer serves as a critical bridge between raw user intent and high-quality LLM execution. By providing a streaming, real-time enhancement interface, it allows users to iterate on their project requirements efficiently. The modular design, split between the usePromptEnhancer hook and the api.enhancer route, ensures that the refinement logic remains decoupled from the primary chat flow.