Prompt Quality & Suggestions
The agent evaluates your prompt as you type and offers AI-generated alternatives to improve it.
Prompt Quality Bar
The quality bar is a 2px gradient strip at the top of the composer. It fills proportionally to a 1–100 score:
- Red (0–40): Vague, missing file paths or constraints
- Amber (40–70): Decent, could be more specific
- Lime (70–100): Well-scoped with clear inputs, behavior, and constraints
Hover the bar to see the score and detailed feedback.
85/100·Prompt specifies the component name, props, behavior, technical constraints, and file location. Well-scoped.
85/100Well-scoped
22/100·Prompt is vague — no file path, no technical constraints, no expected behavior.
22/100Too vague
The quality evaluation uses the current prompt text, the last assistant response, and the project's AGENTS.md (if present) as context.
Suggestions
The Suggestions button (bulb icon above the composer, next to Loop) fetches AI-generated alternative prompts from the backend.
When you click it:
- A dropdown opens above the button with refined alternatives
- Each alternative is a rephrased, more precise version of your prompt
- Click an alternative to replace your current prompt text
Suggestions are generated server-side using the project/session context.
Prompt Principles
Based on what the agent uses for evaluation, good prompts are:
| Principle | Example |
|---|---|
| Specific file paths | src/components/Header.tsx not header component |
| Clear inputs | "Takes user: User prop with id, email, name" |
| Defined behavior | "Displays avatar, name, email. Emits onEdit callback on button click" |
| Technical constraints | "Use TypeScript, Tailwind CSS, follow existing pattern in src/components/UserCard.tsx" |
| Concrete outcomes | "Create the file at src/components/UserProfile.tsx" |