> ## Documentation Index
> Fetch the complete documentation index at: https://vlyai-1c28d863.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# 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:
The default. You describe what you want; the agent decides what to change, plans, and writes code. Best for **most edits**.
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**.
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
```mermaid theme={null}
flowchart LR
A[Write a prompt] --> B{Mode?}
B -->|Agent / Plan| C[Agent generates code]
B -->|Code| D[You edit by hand]
C --> E[Auto build + type-check]
D --> E
E -->|fails| F[Agent self-corrects]
F --> E
E -->|passes| G[Live preview updates]
G --> H{Looks right?}
H -->|Yes| I[Commit revision]
H -->|No| A
I --> J[Move on]
style A fill:#EDE9FE,stroke:#6D28D9
style I fill:#CFFAFE,stroke:#06B6D4
style J fill:#CFFAFE,stroke:#06B6D4
```
Each completed change becomes a **revision** in [version history](/building/version-history). Roll back, compare diffs, or branch from any revision.
## What you'll do most often
Describe what you want. Use Plan mode for anything that changes the schema or adds a page. See [Iterating effectively](/building/iterating).
Describe what's broken. Be specific: "When I delete a task, the page refreshes the entire list instead of removing one row." [Debugging prompts](/prompting/debugging-prompts) goes deeper.
Use Code mode for one-off changes (button colors, spacing). Use Agent mode for systematic ones ("rebuild the dashboard with a sidebar layout").
Mention the service by name in the prompt. vly will recognize it and walk you through credential setup. See [Integrations overview](/integrations/overview).
[Version history](/building/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:
Inline comments on code or pages. Useful for design review and async feedback.
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:
Always-on guidance. "Use named functions, not arrow functions, for top-level components." "All currency is USD." "Never use `any` in TypeScript."
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:
Pre-built starting points — SaaS, marketplace, dashboard, chat. Fork and customize.
Pull a component or pattern from one project into another by reference.
## What's in this section
The structure of a good first prompt. The five-layer method, applied to project initialization.
Click directly on UI elements to edit them. Skips a round-trip when you can point at the thing you want to change.
The mindset and patterns for making 50 small changes a day without losing momentum.
Every change is a revision. Inspect, compare, and roll back at will.
Experiment without breaking the main project.
Public previews, password-protected links, embed codes.
Browse, drag-and-drop, or search the shadcn/ui component library.
Curated starting points for common app shapes.
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.