Building a Web App with Replit: Vibe Coding Explained, the Tool Landscape, and a Live Build of a Business Site with an AI Sales Chatbot

Vibe coding is a conversation with an AI agent that writes, edits and runs code. Loop: a rich initial prompt (as much information as possible), the agent produces code and structure, you review the live result, you refine by chatting. Keep a human in the loop against 'hallucination' - the agent doing unasked things - and expect rabbit-hole loops that sometimes force a restart. Focus on outcomes and flows, not syntax. Comparison: traditional coding (full control, deep skills, months to MVP); no-code (Make, Zapier, n8n - visual, fast, can't see inside nodes; 80% of his work); low-code (Bubble - blocks plus code, still steep); vibe coding (little technical knowledge, fast, flexible, but prompt skill matters and saleable quality takes longer). Uses: PM prototypes, portfolios, training sites, support chatbots, lead enrichment, private team tools with auth.

His ranking (mid-2025): Lovable - easiest, best output, fewest wasted tokens, but a third-party backend; GitHub Copilot - an assistant inside VS Code, not full vibe coding; Claude Code on Opus 4 - best coding agent on benchmarks, hallucinates least, but runs in a console beside an IDE; Windsurf and Cursor - local IDEs with an agent pane, Cursor slightly ahead (he repeats the then-current report that OpenAI bought Windsurf, which did not close). Replit chosen: backend, database, auth, file storage, secrets, live infrastructure view, hosting and one-click deploy in one product, scalable by compute as traffic grows. Learning path from the Q&A: try the free tiers (Lovable, Replit, Windsurf, Cursor), pick one, follow that vendor's official channel rather than YouTube generalists.

Three documents (shared via a Drive folder): the Replit starter prompt (company, Austin TX, stack - HTML/CSS/JS front end, Node.js + Express, OpenAI API; business details; services; front-end and design requirements; chatbot bubble bottom-right; backend; file structure; extras), the agent system prompt, the knowledge base. Recipe: ask ChatGPT 'I want to build a website on Replit for my shop X that sells Y, with products and prices, responsive on phones - write the first system prompt to use in Replit or Lovable'. PROCEDURE, Replit: paste the prompt (long prompts attach as a file) > stack selector Auto or a template > public/private (public can be remixed) > optional Enhance prompt and image attachments (a wireframe of coloured blocks) > Start building. The agent writes a plan and suggests extra features - decline them, keep scope small. Approve; watch the preview pane, the purple status bar and the file tree. Each checkpoint costs a credit, even when broken. You can queue a fix while it builds.

The hero text fix got worse before it got better: 'the white text on grey is hard to read' -> more white; screenshot attached, 'redo all text colours to be readable' -> text shadows; 'no white or grey text; the shadow is not enough' -> better; 'make this heading orange' -> accepted. Lessons: screenshots beat descriptions; finish one item before moving on. Chat-bubble redesign prompt: 'the text box is off the margins and the expanded bubble looks squished - improve the design of the chat bubble; be sure you don't modify anything else of the chat agent's functionality; focus only on the front-end design' - the first run removed the input box, the second fixed it. Agents often fix one thing and break another, so constrain scope. A basic business site is under five prompts - his pitch against Wix and GoDaddy.

The agent stops: the chatbot needs an OpenAI key. PROCEDURE: platform.openai.com > create a project ('live coding lesson') > Dashboard > API keys > create a secret key scoped to the project > copy immediately (view-once). Replit: Secrets in the left sidebar > new secret named OPENAI_API_KEY > paste. Secrets are environment variables for keys and IDs; never share them or others run up your bill. Tell the agent in chat that the key is in that variable. Pasting a key into chat works but is bad practice. Any app that calls ChatGPT, Claude, Gemini or DeepSeek needs a vendor key.

System prompt (document 2): role - friendly customer-service representative for Premiere Pro Painters; personality; key behaviours (greet, qualifying questions); pricing guide; booking process; value proposition; response guidelines; scenarios; guardrails; sample responses. Knowledge base (document 3): prices, products, procedures, FAQs, policies. RAG explained: for large knowledge, split documents into chunks in a vector store (an encyclopaedia in 26 volumes) and retrieve as needed; skipped here, knowledge goes inside the system prompt. Prompt: 'combine these two documents into one single system prompt for the agent as system instructions' (files attached). Verify: 'where is the system prompt stored, what file?' -> server/routes.ts; the code used GPT-4o (a comment said not to change it). The agent had shrunk and summarised; fix: 'I don't want you to summarise - use the full content of both documents and merge them as one system prompt.' Re-check the file. Then test as a customer: cabinet-refinishing price -> a range plus a push to book; hourly rate -> square-foot quote and free consultation; 'do you move furniture' -> yes and another consultation push. Two layers: knowledge (what it knows) and instructions (how it behaves) - here sales-focused.

Prompt: 'I want the agent to capture leads via the chat and store them in a backend - for example a consultation booking.' Replit added PostgreSQL and generated storage (SQL tables, queries) and routes files; he explains why any stored data needs a backend. His preferred architecture: the agent in n8n, the front end connected by a webhook - a bridge that lets the agent reach calendar, email and databases; kept inside Replit here for simplicity. The build was still running at the end; a test conversation captured name, phone, email and project type, but no database write was confirmed. Hosting: Open in a tab gives a temporary URL that lapses hours or half an hour after leaving; Deploy picks compute (minimal for low traffic), builds the server and gives a permanent URL running 24/7 - he quotes $2-5 a month at the lowest tier; not clicked on screen. Follow-ons: email the lead automatically; a voice AI agent; real-time avatar SDKs for the bubble (advanced).