Workspace Prompt → project → pull request → live
Versatil is an AI-assisted workspace for building web products. Describe what you want to build, get a first working version, and keep going on its files, design, preview and code — all in one place.
Files, editor, AI chat, responsive preview, review panel, Git and deploys — side by side, not scattered across five tools. This is the real layout; click around.
Done. I softened the hero background, reduced the headline weight, and created a Plans component with three tiers wired into App.tsx.
Nothing is published until you press this. Versatil never shows a URL as public before the build succeeds.
Interactive demo with mock data — every control here maps to a real panel in the product.
No hand-off between “the AI part” and “the real part”. The project you get in step 2 is the same project you deploy in step 8.
One prompt in plain language. Pick a framework and a model, or keep the defaults.
A real file tree with components, styles and config — not a screenshot, not a one-page dump.
Files, editor, chat, responsive preview and a review panel — arranged, not stacked.
“Make the hero calmer.” Versatil edits the files and tells you exactly which ones it touched.
Full manual editing with syntax highlighting, tabs, formatting and keyboard shortcuts.
Bring in a GitHub repository — private ones included — and keep working on it here.
Proper version control: named branches, reviewed commits and pull requests your team can read.
Deploy to Cloudflare Pages manually, or automatically after the pull request is merged.
Every one of them is a place to stall. Versatil collapses them into a single workspace you can actually finish in.
Describe it. Then keep going.
You start from a description and move forward to a real, editable, versioned project — without changing tools on the way.
Versatil combines AI generation, code editing, visual design, responsive preview, version control, collaboration and deployment. The AI writes the first version — you keep control of everything after that.
Streaming answers, cancel and retry, per-message feedback, file attachments and @src/App.tsx references. Every reply lists the files it touched, and you can jump straight into any of them.
Create, rename, duplicate and delete with confirmation. Modified and remote-sync markers on every row.
Blocked by design: ../ paths, absolute paths, file/folder collisions.
TS, TSX, JS, CSS, HTML, JSON and Markdown with tabs, search, formatting and a save state you can trust.
Desktop, tablet and phone widths, zoom, refresh, fullscreen and a real URL path.
Created, modified and deleted files with real diffs. Accept or reject one by one — or accept all as a single atomic operation that never silently reverts a newer edit.
OAuth plus a GitHub App that works with private repositories. Inspect the tree, import, branch, commit, open pull requests and watch the sync state — from inside the workspace.
Cloudflare Pages, Vercel or GitHub Pages, with build logs, domain status and a public URL that only appears when it is real.
AI provider and latency, GitHub installation, appearance and language, deployments, storage, export and account.
Most tools hand you a result. Versatil hands you a project: files you can read, history you can trace, and a publish button you press yourself.
| What you actually get | Typical AI page generator | Versatil |
|---|---|---|
| Source code you can read and keep | Export, sometimes | Always, file by file |
| Hand editing in the same place | Regenerate and hope | Full editor with tabs |
| Version control | Undo history | Branches, commits, pull requests |
| Existing projects | Start from zero | Import a repo, private included |
| Review before it lands | Changes applied silently | Diff, accept, reject |
| Deployment | Locked to one host | Cloudflare Pages, Vercel, GitHub Pages |
| When the model is slow or down | Spinner forever | Local starter, clearly labelled |
Versatil names every state it can be in, and never dresses one up as another. If the preview is a projection, it says projection. If the model timed out, it says so.
“Project ready ✓”
…while rendering a static projection of a project that never compiled.
Optimistic success messages are the fastest way to lose a user's trust — and the slowest bug to find.
“Versatil is using the local starter because the remote model took too long.”
Plain language, the reason, and a retry when retrying can help. No success message is shown if no file changed.
Every one of these has a designed screen: what happened, what you can do, and a retry when retrying helps.
Versatil meets you wherever your comfort with code ends — and doesn't make that the ceiling of what you can ship.
Turn a layout you can already see in your head into a real product, with the CSS still in reach.
Validate an idea this afternoon instead of booking a week of setup you may never use.
Skip the scaffolding ritual. Land in a project that already has structure, then take the wheel.
Iterate through branches and pull requests without standing up infrastructure for three people.
Describe what you want in your own words. The code is there when you're curious, not in your way.
Import a project that already exists and improve it with the same tools, on the same branch model.
A workspace lives on a laptop at 1440px and on a phone in a queue. Both have to be good.
Nine breakpoints, from a 320px phone to a 1440px desktop. On mobile, Files and Preview open as drawers that never fight each other, and the editor never steals your keyboard on arrival.
Real labels, not placeholders pretending to be labels. Dialogs trap focus, restore it on close and answer to Escape. Errors announce themselves; states report quietly.
WCAG AA contrast, complete keyboard navigation, no nested buttons or forms.
Settings, Publish, Command Palette, the model selector, the preview and the editor all load on demand. Typing a character doesn't recompute the project, redraw the preview, or rewrite local storage.
The frontend ships public identifiers only. Provider keys, client secrets and signing keys never reach the bundle — authenticated calls go out with cookies, not tokens pasted into JavaScript.
Every request lives behind a single API client, with errors translated into sentences a user can act on — and technical detail kept in the logs where it belongs.
type Project = { id: string name: string framework: 'React + Vite' | 'Next.js' | 'Vanilla HTML' status: 'ready' | 'building' | 'draft' | 'error' github?: { repository?: string branch?: string syncState: 'not-connected' | 'synced' | 'pending' } }
// every authenticated call, one place, cookies attached export async function api<T>(path: string, init?: RequestInit) { const res = await fetch(path, { ...init, credentials: 'include' }) if (!res.ok) throw await toUserError(res) return res.json() as Promise<T> }
UI components, API client, state, types and mock data stay in separate layers — so swapping mocks for the real endpoints doesn't mean rebuilding the interface.
Versatil turns a sentence into an editable, viewable, version-controlled web project — and stays useful long after the first version.
No account? Start anyway — your files stay in this browser until you connect one.