Building with vly

The day-to-day workflow — agent mode, plan mode, code mode, iteration, version history, and collaboration.

The first build of a project is exciting. The 99 builds after that are where the real work happens. This section is the manual for the daily workflow — the modes you’ll switch between, how to iterate cleanly, when to branch, and how to collaborate.

The three modes

Every change in vly happens in one of three modes. Each is optimized for a different kind of edit:

Agent mode

The default. You describe what you want; the agent decides what to change, plans, and writes code. Best for most edits.

Plan mode

Agent mode with a deliberate review step. The agent shows you a plan before writing code. Best for schema changes, big features, and risky edits.

Code mode

Hand-edit code directly in the editor. Best for tiny tweaks — a typo, a one-line fix, a CSS adjustment.

You can switch modes per-prompt. Most users settle on Plan mode as default and drop into Code mode for small fixes.

A typical iteration loop

Each completed change becomes a revision in version history. Roll back, compare diffs, or branch from any revision.

What you’ll do most often

1. Add a feature

   Describe what you want. Use Plan mode for anything that changes the schema or adds a page. See Iterating effectively.

2. Fix a bug

   Describe what’s broken. Be specific: “When I delete a task, the page refreshes the entire list instead of removing one row.” Debugging prompts goes deeper.

3. Tweak the design

   Use Code mode for one-off changes (button colors, spacing). Use Agent mode for systematic ones (“rebuild the dashboard with a sidebar layout”).

4. Add an integration

   Mention the service by name in the prompt. vly will recognize it and walk you through credential setup. See Integrations overview.

5. Roll back if something breaks

   Version history lives one click away. Every revision is recoverable. No git knowledge required.

Collaboration

vly projects support real-time multi-user editing. Multiple people can be in the same project, see each other’s cursors, and watch each other’s prompts execute. Conflicts on hand-edits use last-write-wins with a soft-lock indicator.

For more structured workflows:

Comments and reviews

Inline comments on code or pages. Useful for design review and async feedback.

Branching

Create a branch to experiment without affecting the main project. Merge or discard.

Personalizing the agent

Two features let you steer the agent’s defaults across all your prompts:

Custom instructions

Always-on guidance. “Use named functions, not arrow functions, for top-level components.” “All currency is USD.” “Never use any in TypeScript.”

Knowledge base

Project-specific reference material the agent can read. Drop in your design system docs, brand voice, or schema notes.

Templates and starting points

Don’t always start from a blank prompt:

Templates

Pre-built starting points — SaaS, marketplace, dashboard, chat. Fork and customize.

Cross-project referencing

Pull a component or pattern from one project into another by reference.

What’s in this section

Describing your app

The structure of a good first prompt. The five-layer method, applied to project initialization.

Visual edits

Click directly on UI elements to edit them. Skips a round-trip when you can point at the thing you want to change.

Iterating effectively

The mindset and patterns for making 50 small changes a day without losing momentum.

Version history

Every change is a revision. Inspect, compare, and roll back at will.

Branching

Experiment without breaking the main project.

Sharing projects

Public previews, password-protected links, embed codes.

Components panel

Browse, drag-and-drop, or search the shadcn/ui component library.

Templates

Curated starting points for common app shapes.