Umso logo

How to vibe codeUmso

The Website Builder For Everyone

umso.com

Website Builder

68/ 100
Solid side project

The verdict: can you vibe code Umso?

Build a solid subset with a modern AI stack, but skip the complex drag-and-drop WYSIWYG editor if you want to finish.

Replicating Umso's prompt-to-site generator and component library is entirely viable with Next.js and LLM structured outputs. However, building a rock-solid, production-grade visual page builder that handles component nesting, inline editing, and state management without breaking is notoriously tedious and eats up weeks of debugging. Furthermore, building your own custom domain management and wildcard DNS routing pipeline introduces unexpected infrastructure friction.

Estimated effort: 2-3 weeks part-time

What you can't replicate

  • Umso's existing community and brand equity
  • Years of battle-tested edge routing for user-published subdomains

Founded

2019

Raised

Team

Micro-team

Cheapest paid tier

$0

What Umso does

Streamlined, AI-assisted website builder explicitly targeted at early-stage startups and solo founders for rapid landing pages, marketing sites, and basic content blogs.

Core features

  • Prompt-based AI site generator (layout, structure, and copy)
  • Constrained component-based block editor
  • Custom domain mapping and SSL provisioning
  • Built-in lead capture forms
  • Privacy-first analytics tracking
  • GDPR-compliant cookie consent banners
  • Multilingual translation support
  • Static site publishing engine

The business

Pricing

  • Free Plan$0
  • Basic Plan$7/mo
  • Pro Plan$20/mo

Funding

Unknown / bootstrapped

Pay vs build, cumulative

Break-even at month 2 — after that, every month is money kept.

The hard parts of vibe coding Umso

  • Building a buttery-smooth block-based visual website editor in the browser
  • Orchestrating reliable JSON-structured AI generation for multi-page layouts
  • Managing custom domain SSL provisioning and wildcard routing at scale
  • Handling localized multilingual content synchronization across static exports

How to vibecode Umso

Prerequisites

  • Node.jsfree

    Required runtime for modern JavaScript and Next.js development.

  • GitHubfree

    Source control and seamless integration with Vercel deployment pipelines.

AI coding tools

Recommended stack

FrontendNext.js
BackendNext.js API Routes
DatabaseTurso
Authbetter-auth
PaymentsNone (Personal use clone)
OtherVercel AI SDK, Tailwind CSS, Plausible

Hosting & infrastructure

VercelHosting the primary web builder application and serving published user sites via wildcard domains$0-20/mo
TursoStoring user site configurations, pages, block trees, and form submissions$0/mo

Build guide

  1. 01Scaffold Next.js App & Database Schema

    Initialize a fresh Next.js project with Tailwind CSS, configure Turso for SQLite data persistence, and set up better-auth for user authentication.

    Create a new Next.js project configured with App Router and Tailwind CSS. Set up Turso database client using Drizzle ORM with tables for 'users', 'sites' (id, userId, name, subdomain, customDomain, settings), and 'pages' (id, siteId, slug, title, contentJson). Integrate better-auth for email/password authentication. Ensure all configuration files are complete and ready for local development.
  2. 02Build AI Site Generator Workflow

    Implement an AI prompt intake screen that calls an LLM via the Vercel AI SDK to generate a structured JSON layout of marketing sections.

    Create an AI site generator page with a clean prompt input form ('Describe your startup or project'). Using the Vercel AI SDK and Anthropic API, write a server action that prompts the model to return a strictly typed JSON payload representing a multi-section landing page (hero, features, testimonials, footer) complete with tailored copy. Store the generated site structure in the Turso database linked to the authenticated user.
  3. 03Develop Component-Based Rendering Engine

    Build a modular frontend block renderer that dynamically renders landing page sections from the stored JSON layout.

    Build a dynamic component renderer in Next.js that takes the site's JSON layout blocks (Hero, FeatureGrid, PricingTable, FAQ, Footer) and renders them using polished Tailwind CSS components. Create a visual dashboard where users can view their generated pages, reorder sections, and edit text inline. Ensure responsive design works across mobile and desktop viewports.
  4. 04Implement Lead Capture Forms & Analytics

    Add native lead capture form submission handlers and lightweight privacy-first analytics tracking for published sites.

    Add a backend API endpoint to handle lead capture form submissions from published user sites, storing submissions in a 'leads' table linked to each site with a dashboard view to inspect them. Implement a lightweight, cookie-free analytics tracker script that records page views and referrers when visitors load published user sites, displaying aggregate stats in the user dashboard.
  5. 05Publishing Engine & Custom Domain Routing

    Build dynamic subdomain and custom domain routing handlers to serve published user sites directly from the database.

    Implement a Next.js wildcard middleware and dynamic catch-all route ([...slug]/page.tsx) that inspects the incoming request hostname or subdomain (e.g., mysite.umso.co or custom domain), queries the Turso database for the matching site configuration, and renders the published static site layout dynamically with high performance and correct SEO meta tags.

Cost vs paying for Umso

What will you build it with?

Est. 4.5M in / 1.8M out tokens· Includes access to introductory usage of the default model with dynamic rate limits.$0

Starting total with Claude Code$0 one-time

Starting costs (one-time)

  • Custom Domain (Optional)$12/yr

Total~$12 one-time

Ongoing costs (monthly)

  • Vercel Hosting$0-20/mo
  • Turso Database$0/mo
  • LLM API Credits (AI Generation)~$3/mo

Total~$3-23/mo

Paying for Umso

$20/mo (Pro Plan)

Your time to build

18-25 hours

AI tool credits

$20/mo (Claude Pro / Cursor)

Break-even

Roughly parity with Pro plan, but built for learning and absolute control.

Vibe code Umso: FAQ

Can you vibe code Umso yourself?
Solid side project — 68/100 vibecodeable. Build a solid subset with a modern AI stack, but skip the complex drag-and-drop WYSIWYG editor if you want to finish.
How long does it take to vibe code Umso?
2-3 weeks part-time — roughly 18-25 hours of hands-on time with an AI coding agent.
How do you build your own Umso?
Scoped to personal use: Next.js on the front, Next.js API Routes behind it, Turso for data. Follow the 5-step build guide on this page — each step has a paste-ready prompt for an AI coding agent.
How do you code your own Umso without being an expert?
Use an AI coding tool (Claude Code or Cursor) and work in small steps: scaffold, data model, core screens, then deploy. Realistic effort: 2-3 weeks part-time. The prompts on this page are written so the AI does the heavy lifting.
How much does it cost to vibe code Umso instead of paying?
About ~$12 one-time to start and ~$3-23/mo to run, versus $20/mo (Pro Plan) for Umso. Break-even: Roughly parity with Pro plan, but built for learning and absolute control..
What stack should you use to vibe code Umso?
Next.js; Next.js API Routes; Turso; plus Vercel AI SDK, Tailwind CSS, Plausible.

Sources

Alternatives & community builds

All alternatives →