Lovable's composer teardown

Updated June 16, 2026

Lovable is a project starter, not an open-ended chat. Build vs Plan forces intent before the agent runs, which sets scope and reduces wasted generation on vague prompts. Templates and connectors act as second front doors for users who need a nudge or an integration path before their first successful build.

Calm default

Personalized greeting, connectors pill, and empty composer with Build mode, mic, and send.

What works

Large prompt card on an otherwise calm home page. The job is obvious: describe what to build.
Personalized greeting (“Got an idea, Bestfolios?”) makes the surface feel like a workspace, not a blank chat.
Build mode, mic, and send sit inside the card. Scope and modality stay in one container.
Connectors pill above the greeting teaches integrations without opening +.
Lovable templates below offer a second path for users who do not want to invent a prompt.

What we would push on

Build dropdown, mic, and send are three affordances with no upfront explanation of Build vs Plan.
Connectors pill and + menu are parallel discovery paths for the same integrations story.

Business strategy

Lovable wants first projects, not first messages. A calm home with templates and a connectors pill lowers blank-page anxiety while keeping the composer the hero conversion surface.

Tradeoff

Decision	Benefit	Cost
Home composer as primary project starter	Clear “describe your app” job on first load	Templates and connectors pill compete as alternate front doors

Takeaway

Steal the project-starter framing. Pair a calm card with templates so users can type or browse, not stare at an empty box.

Pattern: Tool Switching in Composer

Pattern: Prompt Templates

+ menu: Attach, Design, Connectors, and Databases with search at the top.

What works

+ groups builder inputs: Attach, Design, Connectors, Databases. Intent-based, not infrastructure labels.
Search at the top of the flyout helps when the list grows.
Chevrons signal submenus without opening every path on screen one.

What we would push on

Four builder categories with equal weight. Casual users may not know when to pick Design vs Attach.
No in-card chip shows which connector or database is armed before send.

Business strategy

Lovable sells full-stack apps, not chat. Bundling attach, design refs, connectors, and databases in + keeps the bar clean while exposing the platform surface area that justifies Pro.

Tradeoff

Decision	Benefit	Cost
+ menu for attach, design, connectors, and databases	Clean composer; builder tooling in one tree	Armed state invisible until users open + or send

Takeaway

Right pattern for app builders. Add in-card feedback when connectors, design refs, or databases are active.

Pattern: Tool Switching in Composer

Build vs Plan

What works

Build and Plan are outcome labels with subtext: “Make changes directly” vs “Discuss before building.”
Mode lives in the composer bar, visible before send.
Keyboard shortcut (⌥ P) rewards power users without adding bar clutter.

What we would push on

Default is Build. New users may ship code before they understand Plan exists.
No cost or latency cue between modes. Both look equally cheap in the dropdown.

Business strategy

Plan mode protects trust for complex builds: users align on scope before Lovable edits the repo. Build mode drives the “wow” demo that converts free users to paid.

Tradeoff

Decision	Benefit	Cost
Build vs Plan as explicit pre-send modes	Clear contract before the agent touches code	Extra decision on every prompt; Plan may be undiscovered

Takeaway

Steal explicit Build/Plan modes for any agent that edits production assets. Label the default so Plan is not a hidden safety valve.

Pattern: Tool Switching in ComposerExecution mode as a pre-send contract: Build ships changes; Plan discusses first. Rare in chat composers, core to app builders.

Pattern: Persona Selector

Plan mode active

What works

Bar label switches to Plan so mode is visible before send.
Send affordance changes color when active. Subtle but scannable.
Placeholder and typed prompt stay editable. No locked template.

What we would push on

Plan vs Build difference is mostly the dropdown label. No placeholder or starter shift like image modes in chat products.

Business strategy

Visible Plan state reduces support tickets from users who did not expect immediate file changes. The bar label is the lightweight scope chip for discussion-first workflows.

Tradeoff

Decision	Benefit	Cost
Plan mode as label swap in the bar	Low UI cost; mode visible before send	Weak pre-send contract beyond the Plan label

Takeaway

Chip-level mode feedback works. Consider placeholder or copy shifts when Plan is active so the contract reads before send.

Pattern: Tool Switching in Composer

Voice dictation

Inline dictation with waveform, confirm, and cancel inside the composer card.

What works

Dictation replaces the text area with a waveform. Listening state is obvious.
Confirm and cancel sit inside the card. No auto-send on silence.
Mic stays on the same row as Build/Plan. Modality swap without leaving home.

What we would push on

Build/Plan mode is hidden while dictating. Users may not know which mode will receive the transcript.

Business strategy

Voice lowers friction for mobile and hands-busy founders describing app ideas. Keeping dictation in-card avoids a separate voice product while preserving edit-before-send.

Tradeoff

Decision	Benefit	Cost
Inline dictation with confirm in the composer card	Speak, review, then send in one surface	Build/Plan label hidden during listening

Takeaway

Steal in-card waveform plus confirm. Keep the active Build/Plan mode visible during dictation.

Pattern: Input Mode Toggle

How it fits together

The pattern

Personalized home, large prompt card, Build/Plan before send, + for attach and builder tooling.
Connectors pill and templates as parallel discovery. Voice dictation with confirm inside the card.

Where it varies

Build vs Plan contract is strong in the dropdown but light once Plan is armed.
Connectors appear in the pill, + menu, and sidebar nav.
Templates below the bar compete with free-form prompts for first project.
Dictation hides mode label while listening.

Business strategy

Lovable’s composer is a conversion surface for app generation. Build/Plan modes, builder tooling in +, and templates together move users from idea to shipped project without feeling like a generic chat box.

Tradeoffs

Decision	Benefit	Cost
Home composer as primary project starter	Clear “describe your app” job on first load	Templates and connectors pill compete as alternate front doors
+ menu for attach, design, connectors, and databases	Clean composer; builder tooling in one tree	Armed state invisible until users open + or send
Build vs Plan as explicit pre-send modes	Clear contract before the agent touches code	Extra decision on every prompt; Plan may be undiscovered
Plan mode as label swap in the bar	Low UI cost; mode visible before send	Weak pre-send contract beyond the Plan label
Inline dictation with confirm in the composer card	Speak, review, then send in one surface	Build/Plan label hidden during listening

Takeaway

One of the clearer app-builder composers. Steal Build/Plan as a pre-send contract and builder tooling in +. Tighten armed-state feedback and keep mode visible across voice.

Pattern: Tool Switching in ComposerProject starter, not chat: greeting → Build/Plan → + for builder inputs → send → templates as alternate entry.

Pattern: Prompt Templates