# How to Vibe Code Your Own WeWeb (and Stop Paying for It) > Build Web-Apps 10x Faster with AI & No-Code - Site: https://weweb.io - Category: No-Code Platform - Verdict: **Don't bother** (15/100 vibecodeable) - Estimated effort: 6+ months of full-time work ## Verdict Building a general-purpose visual full-stack builder with AI generation, MCP protocol support, and canvas editors is a monumental engineering undertaking. Replicating WeWeb means building a complex browser-based IDE, a visual DOM renderer, a bi-directional AST compiler for Vue.js, an MCP agent coordination server, and a spreadsheet database manager. While an AI coding agent can scaffold parts of this, the sheer scope of building a multi-layered visual canvas editor with deep state management makes this an immense multi-year project that is vastly more expensive than paying the subscription. ### What you can't replicate - The massive library of polished native Vue UI components and pre-configured actions - Enterprise trust and validated production stability across thousands of deployed apps - Real-world edge infrastructure and global CDN distribution pipelines ## What it does Visual full-stack web development platform combining AI generation, MCP agent tools, and Figma imports with a drag-and-drop Vue.js editor and PostgreSQL backend. ### Core features - Visual drag-and-drop interface builder with responsive breakpoints - AI text-to-app code generation and blueprint planning - Model Context Protocol (MCP) agent integration server - Figma design import converter to responsive DOM elements - Spreadsheet-like PostgreSQL backend table editor (WeWeb Tables) - Visual workflow canvas with branching and custom JavaScript formulas - Role-based authentication and access control configuration - Vue.js single-page application compiler and source code exporter ## The business ### Pricing - Free Seat: Free — For prototyping with basic visual builder features and WeWeb branding. - Essential Seat: ~$20–$29/mo — Billed annually per builder seat; unlocks code export and self-hosting. - Pro Seat: ~$50/mo — Billed annually per developer for team collaboration and higher limits. ### Funding $3.24M raised. - Seed Investors: 42CAP, Aglae Ventures, Kima Ventures, Astir Ventures, Benhamou Global Ventures, Y Combinator Founded 2019. Team size: ~19. ## The hard parts - Building a performant visual DOM tree editor with drag-and-drop canvas reordering, live resize handles, and multi-breakpoint styling overlays - Implementing an MCP remote server protocol that translates natural language agent instructions into structural AST changes for an application layout - Parsing and mapping complex Figma JSON node trees into reactive Vue.js components with matching design token hierarchies - Designing a live reactive state-binding engine that safely synchronizes multi-source data bindings across deeply nested UI components without infinite loops ## How to vibe code WeWeb ### Prerequisites - Node.js (free): Required for running the full-stack TypeScript build environment and MCP servers. - GitHub (free): For storing source code repositories and handling project CI/CD. ### Recommended AI tools - Claude Code: Best-in-class agentic coding tool for scaffolding complex multi-file TypeScript architectures. - Cursor: Essential AI code editor for inspecting complex canvas rendering code and handling manual UI refinements. ### Stack - Frontend: Next.js - Backend: Next.js API Routes - Database: Supabase - Auth: better-auth - Payments: Stripe - Other: Vercel AI SDK, Tailwind CSS ### Hosting - Vercel (Hosting the visual editor dashboard and builder web application): $20/mo - Supabase (Storing user projects, component definitions, and database table metadata): $25/mo ### Build guide 1. **Scaffold the Core Web Application Workspace** — Initialize the Next.js project structure, configure Tailwind CSS, set up database connections via Supabase, and implement authentication using better-auth. ``` Initialize a production-grade Next.js application with TypeScript, Tailwind CSS, and App Router. Set up Supabase as the primary database client using environment variables. Configure better-auth with email/password and session management. Create a clean dashboard layout shell with sidebar navigation for managing different web application projects. Ensure strict type safety across all database queries and API route handlers. ``` 2. **Build the Visual Canvas Editor Interface** — Construct the drag-and-drop visual editor interface featuring a component tree sidebar, a central responsive canvas area, and a properties configuration inspector panel. ``` Build a visual editor layout in Next.js featuring a collapsible component tree sidebar, a resizable central canvas viewport with device breakpoint toggles (desktop, tablet, mobile), and a right-hand property inspector panel. Implement a JSON-based schema structure that defines UI component nodes, their styles, and bindings. Write helper utilities to render these node trees dynamically into React components with selection and dragging capabilities. ``` 3. **Implement the MCP Agent Server Integration** — Develop a Model Context Protocol (MCP) server endpoint that allows external AI agents to read and modify project layouts, database schemas, and workflows. ``` Implement an MCP server route handler in Next.js that exposes tools for AI agents to interact with user projects. Define MCP tools to list project workspaces, read/write component node trees, update Tailwind styling properties, and modify database table schemas. Add secure token-based authorization so external agents like Claude Code or Cursor can authenticate and execute structural app modifications safely. ``` 4. **Build the Spreadsheet-Like Database Table Manager** — Create a data management module allowing users to define columns, establish table relationships, and perform instant CRUD operations like WeWeb Tables. ``` Build a spreadsheet-like data grid component using TanStack Table for managing custom database tables. Allow users to add, edit, and delete columns with typed fields (text, number, boolean, relation), populate mock data rows, and configure table relationships. Create backend API routes in Next.js that execute dynamic SQL queries against Supabase to persist table schemas and record data efficiently. ``` 5. **Construct the Visual Workflow Builder** — Implement a visual workflow automation canvas where users can chain actions, add conditional branching, and execute custom JavaScript formulas. ``` Build a node-based visual workflow canvas component allowing users to chain application actions (e.g., API calls, database mutations, navigation redirects) triggered by UI events. Add support for conditional branching logic, input/output data mapping between steps, and custom JavaScript formula blocks. Implement an execution runner engine that processes workflow steps sequentially and logs execution states for debugging. ``` 6. **Develop the Vue.js Code Exporter** — Build an export pipeline that compiles the visual project schema into a clean, standalone Vue.js single-page application archive ready for self-hosting. ``` Write a code export compiler service that takes the project's visual component tree, workflow definitions, and data bindings schema, and generates a fully functional Vue.js single-page application codebase. Structure the exported output as a standard Vite + Vue project with package.json, main router configurations, and component files. Provide a one-click download archive endpoint for users to export their production-ready code. ``` ### Cost vs paying **Starting costs (one-time):** - Custom domain and DNS setup: $12 one-time - Total: $12 one-time **Ongoing costs (monthly):** - Vercel Pro / Hosting: $20/mo - Supabase Pro: $25/mo - Total: $45/mo - Paying for the SaaS instead: $50/mo (Pro Seat) - Build time: 250+ hours - AI tool credits: $40/mo (Claude Pro + Cursor) - Break-even: Never (subscription is cheaper when factoring hundreds of hours of engineering time) ## Sources - [WeWeb Official Website](https://weweb.io) - [PitchBook WeWeb Profile](https://pitchbook.com/profiles/company/235787-82)