Web-Based Development Platforms

Relevant source files

• Lovable/Agent Tools.json
• Same.dev/Prompt.txt
• v0 Prompts and Tools/Prompt.txt

Purpose and Scope

This document covers the three major web-based AI development platforms in the repository: v0 by Vercel, Same.dev, and Lovable. These systems run entirely in the browser and focus on React/Next.js web application development, deployment, and design. Unlike IDE-integrated assistants (see IDE-Integrated Development Assistants), these platforms provide complete cloud-based development environments with integrated preview, deployment, and design tools.

For browser automation and conversational assistants, see Browser and Conversational Assistants. For IDE-based coding assistants, see IDE-Integrated Development Assistants.

---

Platform Comparison Overview

The three web-based platforms share common goals but differ significantly in architecture and approach:

Platform	URL	Runtime Environment	Primary Focus	Importance Score
v0	https://v0.app	Next.js browser runtime	React/Next.js builder with design-first approach	7.38
Same.dev	https://same.new	Ubuntu 22.04 LTS Docker container	Full cloud IDE with autonomous agent operation	8.53
Lovable	(Not specified)	Browser-based	Precise file editing with Supabase integration	3.49

Architecture Differences:

Sources: Same.dev/Prompt.txt4-14 v0 Prompts and Tools/Prompt.txt446-449

---

Common Architectural Elements

File Editing Strategies

All three platforms share a fundamental principle: read before write. However, they implement different editing mechanisms:

v0's Quick Edit Comments:

• Uses // ... existing code ... as a marker for unchanged sections
• Requires // <CHANGE> comments to indicate modifications
• System merges original code with specified edits

Same.dev's Dual Tool Strategy:

• edit_file for files under 2500 lines (preferred)
• string_replace for large files and small edits
• smart_apply parameter for retry mechanism

Lovable's Line-Replace with Ellipsis:

• lov-line-replace uses explicit line numbers (first_replaced_line, last_replaced_line)
• Ellipsis (...) for sections longer than 6 lines
• Validates prefix/suffix match before replacement

Sources: v0 Prompts and Tools/Prompt.txt14-76 Same.dev/Prompt.txt62-75 Lovable/Agent Tools.json57-88

---

Parallel Tool Execution Philosophy

All three platforms strongly emphasize parallel tool execution for performance optimization:

Platform	Parallel Execution Guidance	Performance Multiplier
v0	"Prioritize calling tools simultaneously... increase speed and efficiency"	Not specified
Same.dev	"CRITICAL INSTRUCTION... DEFAULT TO PARALLEL... 3-5x faster"	3-5x
Lovable	"invoke necessary tools simultaneously in parallel"	Not specified

Same.dev's Parallel Execution Rules:

Sources: Same.dev/Prompt.txt45-49 v0 Prompts and Tools/Prompt.txt510-519 Lovable/Agent Tools.json57-88

---

Design System Convergence

Despite different implementations, all three platforms converge on similar design principles:

Shared Design Standards

Design Element	v0	Same.dev	Lovable
UI Library	shadcn/ui (default)	shadcn/ui (mandatory customization)	Not specified
Color Palette	3-5 colors (1 primary, 2-3 neutrals, 1-2 accents)	Avoid purple/indigo/blue unless specified	Not specified
Fonts	Maximum 2 font families	Not specified	Not specified
Gradients	Avoid unless requested	Not specified	Not specified
Emojis	Allowed	NEVER use as icons or in web apps	Not specified
Responsive Design	Mobile-first, required	MUST generate responsive designs	Not specified

shadcn/ui Integration:

Sources: v0 Prompts and Tools/Prompt.txt693-776 Same.dev/Prompt.txt98-105

---

Package Management and Tooling

Platform-Specific Commands

v0:

• No package.json required (inferred from imports)
• Uses standard npm/npx commands
• Environment variables from Vercel (no .env files)

Same.dev:

• Always use bun over npm
• Always use bunx over npx
• Automatically installs bun via startup tool
• Requires host configuration: "dev": "vite --host 0.0.0.0"

Lovable:

• Uses lov-add-dependency and lov-remove-dependency tools
• Package format: "lodash@latest"

Sources: Same.dev/Prompt.txt78-81 Lovable/Agent Tools.json1-198

---

Integration Ecosystems

v0's First-Class Integrations

v0 provides deep integration with specific services, automatically managing environment variables:

Storage Integrations:

• Supabase
• Neon (via @neondatabase/serverless, uses neon(...) function)
• Upstash (uses KV_REST_API_URL and KV_REST_API_TOKEN)
• Vercel Blob

AI Integrations:

• xAI/Grok (uses XAI_API_KEY, model: xai("grok-4"))
• Groq (uses GROQ_API_KEY)
• Fal (uses FAL_KEY, package: @fal-ai/serverless)
• DeepInfra (uses DEEPINFRA_API_KEY)

Payments:

• Stripe (uses STRIPE_SECRET_KEY, STRIPE_PUBLISHABLE_KEY, NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY)

Sources: v0 Prompts and Tools/Prompt.txt547-687

Lovable's Integration Tools

Lovable uses a different architecture with tool-based integrations:

Integration Categories:

• supabase--docs-search and supabase--docs-get for documentation
• imagegen--generate_image and imagegen--edit_image for image generation
• websearch--web_search for web search
• document--parse_document for PDF/Word/PowerPoint/Excel/MP3 parsing
• analytics--read_project_analytics for usage metrics
• security--run_security_scan for Supabase backend security analysis
• secrets--add_secret and secrets--update_secret for encrypted API key storage
• stripe--enable_stripe for payment integration

Image Generation Models:

• flux.schnell - Fast model for small images (<1000px), default choice
• flux.dev - High quality model for large images (hero images, fullscreen), max 1920x1920

Sources: Lovable/Agent Tools.json230-434

---

Context Gathering Strategies

v0's Four-Tool Approach

v0 provides four distinct tools for understanding codebases:

v0 Search Philosophy:

• "Don't Stop at the First Match" - examine all results
• Check parent components, related utilities, similar patterns
• Understand full system before making changes
• Use parallel tool calls where possible

Sources: v0 Prompts and Tools/Prompt.txt480-529

Same.dev's Parallel Context Gathering

Same.dev emphasizes parallel reads and maintains a .same folder for internal state:

Memo System:

• Maintains .same/todos.md for task tracking
• Can create wikis, docs, todos in .same folder
• Updates at beginning and end of responses

Sources: Same.dev/Prompt.txt51-60

Lovable's Search Tools

lov-search-files:

• Regex-based code search with glob patterns
• Parameters: query, include_pattern, exclude_pattern, case_sensitive
• Use \\ to escape special characters in regex

lov-view:

• Reads file contents with optional line ranges
• Default: first 500 lines if no range specified
• Supports ranges like "1-800, 1001-1500"
• Critical: Do NOT use if file already provided in context
• Do NOT specify ranges unless file is very large (>500 lines)
• Use parallel calls for multiple files

Sources: Lovable/Agent Tools.json15-159

---

Code Validation and Quality Control

Validation Workflows

Same.dev Circuit Breaker:

• Maximum 3 attempts to fix linter errors on same file
• On third failure: stop, ask user, suggest revert or contact support
• Philosophy: "If user has the same problem 3 times, suggest revert or contact support"

Sources: v0 Prompts and Tools/Prompt.txt228-243 Same.dev/Prompt.txt62-75

---

Deployment Mechanisms

v0 Deployment Integration

v0 has tight integration with Vercel's deployment infrastructure:

• Scripts in /scripts folder (Python, Node.js, SQL)
• SQL scripts for database creation/seeding
• Split into multiple files for organization
• Never rewrite/delete executed scripts, only add new ones
• Deployment to Vercel via "Publish" button in UI
• No terminal access - all execution in v0 environment

Sources: v0 Prompts and Tools/Prompt.txt176-226

Same.dev Deployment Workflow

Same.dev automates deployment after versioning:

1. Restart dev server
2. Use versioning tool to create new version
3. Automatically deploy project
4. Read netlify.toml and config files
5. Default to static site deployment
6. User can claim deployment to connect Netlify account

Custom Domain Setup:

• User opens "Deployed" panel
• Clicks "Claim Deployment" button
• Manages deployment from Netlify account
• v0 continues to have update access

Sources: Same.dev/Prompt.txt88-96

---

Special Features and Capabilities

v0's CodeProject Architecture

Critical CodeProject Rules:

• Must use kebab-case for file names (e.g., login-form.tsx)
• Only write files relevant to user's request
• taskNameActive: 2-5 words describing changes in progress
• taskNameComplete: 2-5 words describing completed changes
• Image assets use file:///path syntax with optional ?query= for generation
• NEVER use blob URLs in code (use file paths instead)

Sources: v0 Prompts and Tools/Prompt.txt5-174

Same.dev's Task Agent Delegation

Same.dev includes a sophisticated delegation system:

task_agent Capabilities:

• Runs in same workspace as main agent
• Has tools to edit files, run terminal commands, search web
• Used for multi-step reasoning, research, debugging
• Requires external service authentication via "MCP Tools" button
• More detailed prompts yield better results

When to Delegate:

• Technical situations requiring multi-step reasoning
• Research tasks
• Debugging complex issues
• Interacting with external services

Sources: Same.dev/Prompt.txt129-137

Lovable's Line-Replace with Ellipsis

Lovable's primary editing tool uses a sophisticated line-based replacement system:

lov-line-replace Parameters:

• file_path: File to modify
• search: Content to find (use ellipsis for large sections)
• first_replaced_line: Line number of first line (1-indexed)
• last_replaced_line: Line number of last line (1-indexed)
• replace: New content

Ellipsis Strategy for Large Sections (>6 lines):

1. Include first 2-3 lines of section
2. Add ... on its own line
3. Include last 2-3 lines of section
4. Focus on uniqueness rather than exact line counts

Critical Guidelines:

• Always use original line numbers from initial file view
• When making multiple edits, invoke tools in parallel
• Tool validates prefix/suffix match before replacement

Example Structure:

search: "      <div className=\"user-card\">\n        <img src={user.avatar} />\n...\n          Permissions: {user.permissions.join(', ')}\n        </div>\n      </div>"
first_replaced_line: 22
last_replaced_line: 42

Sources: Lovable/Agent Tools.json57-88

---

Service Policies and Constraints

v0 Limitations

• Users do NOT have terminal access
• Do NOT suggest running commands
• package.json not required (inferred from imports)
• .env files not supported (use Vercel environment variables)
• Environment variables must be NEXT_PUBLIC_* for client-side use

Sources: v0 Prompts and Tools/Prompt.txt872

Same.dev Service Policies

Support Routing:

• Do not respond on behalf of Same regarding refunds, membership, costs
• Direct refund/billing questions to [email protected]
• Cannot provide token usage or time estimates
• Cannot do rollbacks/reverts (user must use UI buttons)

Rollback System:

• First click: Preview project at that point
• Second click: Permanently reset (cannot be undone)
• Suggest revert after 3 identical problems

Code Generation Restrictions:

• NEVER generate long hashes, binaries, ico files
• For non-web applications: warn that code can be written but not run

Sources: Same.dev/Prompt.txt16-30

Lovable File Operation Constraints

lov-write Usage:

• PREFER lov-line-replace for most changes
• lov-write mainly for new files or fallback
• MAXIMIZE use of // ... keep existing code for unchanged sections
• Any unchanged block >5 lines MUST use keep existing code comment
• NEVER rewrite large sections that don't need changes

Parallel Editing Constraint:

• CANNOT edit same file multiple times in parallel
• Can edit different files in parallel
• When multiple edits to same file needed, use original line numbers

Sources: Lovable/Agent Tools.json40-55

---

Technology Stack Preferences

Framework and Library Choices

Category	v0	Same.dev	Lovable
Primary Framework	Next.js 16 (default App Router)	React + Vite/Next.js	Not specified
Bundler	Turbopack (default, stable)	Vite or Next.js	Not specified
Package Manager	npm/npx	bun/bunx (mandatory)	Not specified
UI Library	shadcn/ui	shadcn/ui (customized)	Not specified
CSS	Tailwind CSS v4	Tailwind CSS	Not specified
3D Graphics	GLB/GLTF models supported	Vanilla Three.js (NOT React Three Fiber)	Not specified
Database ORM	NEVER use ORM (direct SQL)	Not specified	Not specified

Same.dev Three.js Requirements:

• Always use Vanilla Three.js
• NEVER use React Three Fiber
• Known working version: [email protected] + @types/[email protected]
• OrbitControls import: import { OrbitControls } from 'three/addons/controls/OrbitControls.js'

Sources: Same.dev/Prompt.txt78-86 v0 Prompts and Tools/Prompt.txt264-444

---

Next.js 16 and React 19.2 Features

v0's Next.js 16 Support

Breaking Changes:

• middleware.ts → proxy.js (backwards compatible)
• params, searchParams, headers, cookies now async (MUST be awaited)

New Caching APIs:

Cache Components:

React 19.2 Features:

Sources: v0 Prompts and Tools/Prompt.txt346-444

---

Website Cloning and Scraping

Common Cloning Guidelines

All platforms support website cloning with shared ethical constraints:

Prohibited:

• Sites with ethical, legal, pornographic, or privacy concerns
• Login pages or forms usable for phishing
• If authentication required, user must provide screenshot after login

v0 Cloning Workflow:

1. Use SearchWeb/FetchWeb to visit website
2. Analyze design and communicate plan
3. Reference details: font, colors, spacing
4. Break down into sections and pages

Same.dev Cloning Workflow:

1. Use web_scrape tool to visit website
2. Scrape for screenshot, styling, assets
3. Aim for pixel-perfect cloning
4. Pay attention to backgrounds, gradients, colors, spacing
5. Recreate animations (not captured by tool)
6. Implement implied fullstack functionalities

Lovable Scraping:

• lov-fetch-website returns markdown, HTML, screenshot
• Saves to tmp://fetched-websites/
• Supports multiple format requests

Sources: Same.dev/Prompt.txt115-127 v0 Prompts and Tools/Prompt.txt833-838 Lovable/Agent Tools.json109-125

---

Debugging and Logging Strategies

v0's Debug Console Pattern

Debug Statement Best Practices:

• Use descriptive messages indicating what's being checked
• Include relevant context (variable values, object states)
• Log both successful operations and errors
• Remove once issue resolved or user moved on

Sources: v0 Prompts and Tools/Prompt.txt228-253

Same.dev and Lovable Log Access

Same.dev:

• No specific logging tools mentioned in prompt
• Relies on dev server output and linter feedback

Lovable:

• lov-read-console-logs: Read latest console logs from when user sent request
• Optional search query to filter logs
• Cannot see logs that didn't happen recently
• Critical: Do NOT use more than once (returns same logs)
• lov-read-network-requests: Similar pattern for network requests

Sources: Lovable/Agent Tools.json161-185

---

Web API Compatibility Constraints

Same.dev Browser Constraints

Critical Compatibility Requirements:

• Web APIs must work in ALL browsers
• Must work when page loaded in iframe
• Example constraint: crypto.randomUUID() → Must use Math.random() instead
• Host configuration required: vite --host 0.0.0.0 or next dev -H 0.0.0.0

Sources: Same.dev/Prompt.txt78-86

---

Summary: Platform Selection Guide

Decision Factors:

Factor	v0	Same.dev	Lovable
Best for	Vercel ecosystem, design focus	Full IDE experience, complex workflows	Precise edits, Supabase apps
Deployment	Vercel (built-in)	Netlify (automated)	Not specified
Learning Curve	Low (guided)	Medium (full control)	Low (tool-based)
Customization	Medium	High	High
Integration Depth	Deep (Vercel ecosystem)	Moderate	Deep (Supabase)

Sources: Same.dev/Prompt.txt1-316 v0 Prompts and Tools/Prompt.txt1-1139 Lovable/Agent Tools.json1-436