Describe a website.
Watch it build itself.
OpenWeb's crew of cursors plans, designs, codes and checks a real Next.js app from one sentence — live, in front of you.
01 — Demo
One sentence in. A site out.
- 01 Layout
- 02 Type
- 03 Imagery
- 04 Palette
- 05 Components
- 06 Ship
That's the whole loop: plan, lay out, write, check the preview, fix, ship. OpenWeb runs it for every message you send.
02 — How it works
From one sentence to a working app.
No templates and no drag-and-drop. You talk; the crew builds real code you can read, run and take with you.
01Describe it
Write what you want the way you'd brief a designer. Attach a screenshot or a sketch — it becomes the reference.
02Watch it build
The crew picks a direction, writes components in parallel, installs what it needs and checks the live preview after every change.
03Keep shaping
Ask for changes in plain words. Follow-ups edit only what you asked for, and every version stays one click away.
03 — Under the hood
Built like a studio, not a slot machine.
The agent behind OpenWeb is tuned for two things: apps that load on the first try, and design you'd actually ship.
Design with a point of view
Real typography, a considered palette, specific copy and layouts that vary — no generic gradients, no lorem ipsum, no emoji icons.
Real code, not a mockup
Next.js, TypeScript, Tailwind and shadcn/ui, organised into components, hooks and API routes.
It checks its own work
The agent loads the page, reads compile errors from the dev server and fixes them before handing it back.
Edits, not rewrites
Follow-ups change only what you asked for. The rest of your app — and every earlier version — stays intact.
A live sandbox per project
Every project runs in its own isolated Next.js server, so the preview is the real app, hot-reloading as it's written.
Open source, with an API
MIT licensed and self-hostable. Create projects and send messages from your own tools with an API key.
04 — The crew
40 specialists. One agent.
Every cursor on this page is a job OpenWeb's agent does on every message: layout, type, copy, routes, forms, accessibility, tests and the rest.
- LayoutLays out sections and spacing
- GridKeeps everything on a 12-col grid
- TypesetterSets the type scale and fonts
- CopyWrites real, specific copy
- PalettePicks a palette with one accent
- ImageryPlaces and crops imagery
- ComponentsBuilds reusable components
- MotionAdds purposeful motion
- A11yChecks contrast and keyboard use
- SEOWrites titles and metadata
- RouterWires up pages and links
- APIBuilds route handlers
- FormsValidates every input
- IconsChooses consistent icons
- DeployShips the preview
- TestsLoads the page and reads errors
- AuthHandles sign-in flows
- DatabaseModels your data
- CacheKeeps repeat work cheap
- FontsLoads fonts without layout shift
- SpacingTunes whitespace and rhythm
- ShadowsAdds depth, sparingly
- ResponsiveMakes it work from 360px up
- Dark modeDesigns for dark mode
- AnalyticsTracks what matters
- i18nKeeps copy translatable
- PerfKeeps bundles lean
- TypesTypes everything in TypeScript
- StateManages client state
- HooksExtracts custom hooks
- SearchAdds search and filters
- PaymentsBuilds checkout flows
- EmailWrites transactional email
- StorageHandles uploads
- ReviewRe-reads the diff
- DocsDocuments the tricky parts
- RefactorKeeps files small and tidy
- AssetsOptimizes images and icons
- ContentFills empty states
- BrandApplies your brand
Pick the model per message
- GPT-6.1 TerraFast and affordable — the default
- Claude Opus 5.5Best quality for full apps
- Claude Sonnet 5.5Fast and cheaper, great for edits
- Claude Fable 5.1Most capable, highest cost
05 — Your turn
Your next site is one sentence away.
Free and open source. Bring an idea; the crew brings everything else.