Enhancer API Endpoint

Relevant source files

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

• app/routes/api.enhancer.ts
• app/lib/hooks/usePromptEnhancer.ts
• app/components/chat/BaseChat.tsx
• app/components/chat/Chat.client.tsx
• app/lib/.server/llm/stream-text.ts (referenced via import in api.enhancer.ts)

The Enhancer API Endpoint is a specialized server-side route designed to optimize and refine user-provided prompts before they are submitted to the primary AI model. By leveraging a dedicated Large Language Model (LLM) stream, the system transforms brief or vague user instructions into detailed, high-quality prompts to improve the accuracy and relevance of the subsequent code generation process.

This feature is accessible via a UI "Enhance" icon in the chat interface, allowing users to iteratively improve their requests. The implementation utilizes a streaming architecture to provide real-time feedback as the refined prompt is being generated.
Sources: app/routes/api.enhancer.ts, app/components/chat/BaseChat.tsx:162-184, README.md

Architecture and Data Flow

The enhancement process follows a client-server-LLM loop. It begins in the UI when a user triggers the enhancement, which calls a custom hook that manages the network request and local state transitions.

The diagram shows the lifecycle of a prompt enhancement request, from the user interaction in the UI to the streaming response from the LLM.
Sources: app/lib/hooks/usePromptEnhancer.ts:18-62, app/routes/api.enhancer.ts:13-54

Server-Side Implementation

The endpoint is implemented as a Remix Action Function within app/routes/api.enhancer.ts. It processes incoming JSON payloads and communicates with the LLM provider.

Prompt Engineering

The server wraps the user's original input in a specific XML-like structure (<original_prompt>) and provides clear instructions to the model to strictly return only the improved version of the prompt without any preamble or conversational filler.
Sources: app/routes/api.enhancer.ts:21-32

Stream Transformation

Because the underlying AI SDK may return structured stream parts, the endpoint utilizes a TransformStream to clean the output.

1. Decoding: Converts raw chunks to text.
2. Parsing: Uses parseStreamPart to extract the actual text values.
3. Filtering: Removes empty lines and concatenates fragments.
4. Re-encoding: Sends a clean text stream back to the client.
   Sources: app/routes/api.enhancer.ts:38-51

Client-Side Integration

The enhancement logic is encapsulated in the usePromptEnhancer hook and integrated into the chat UI.

State Management

The system tracks the progression of the enhancement through several states:

State	Type	Description
enhancingPrompt	boolean	Indicates if a request is currently in flight.
promptEnhanced	boolean	Indicates if the current input has been successfully processed.
input	string	The live text content being updated by the stream.

Sources: app/lib/hooks/usePromptEnhancer.ts:7-11

UI Components

The enhancement feature is exposed via the BaseChat component's prompt area.

• Icon Button: Triggers the enhancePrompt function. It is disabled if the input is empty or if an enhancement is already in progress.
• Visual Feedback: Displays a spinner and "Enhancing prompt..." text during the request.
• Success State: Changes the icon color and shows a "Prompt enhanced" confirmation upon completion.
  Sources: app/components/chat/BaseChat.tsx:162-186

API Specifications

POST /api/enhancer

Request Body

{
  "message": "string"
}

Response

• Type: StreamingTextResponse
• Status: 200 OK on success, 500 Internal Server Error on failure.
• Content-Type: text/plain; charset=utf-8 (Streaming)

Sources: app/routes/api.enhancer.ts:14-16, app/lib/hooks/usePromptEnhancer.ts:22-27

Summary

The Enhancer API Endpoint provides a critical utility for refining user intent. By abstracting the prompt engineering logic to the server and utilizing streaming for the UI, it ensures that users can generate complex, full-stack applications with minimal initial effort, significantly lowering the barrier to entry for the Bolt development environment.
Sources: CONTRIBUTING.md, app/routes/api.enhancer.ts