VibeCode Builder Pro

🚀 Quick Start

Welcome to VibeCode Builder Pro! This guide will help you get started with building websites, managing databases, creating forms, and using templates.

Your First 5 Minutes

1. Log in to your dashboard

   Navigate to your VCB Pro dashboard to see all your projects.

2. Choose what to build

   Select from Websites, Databases, Forms, or Templates from the sidebar.

3. Use AI assistance

   Click the AI chat icon to get help with any task.

4. Customize your theme

   Go to Settings → Theme to personalize your workspace.

5. Save and publish

   Your work auto-saves. Click Publish when ready to go live.

🏠 Dashboard

The VCB Pro Dashboard is your central hub for managing all your projects. From here, you can access websites, databases, forms, and templates.

Dashboard Layout

Sidebar Navigation

• Dashboard Home — Overview of recent activity and quick actions
• My Websites — All your websites and web apps
• My Templates — Saved and purchased templates
• My Data — Your databases and data sources
• My Forms — Created forms and submissions

Quick Actions

From the dashboard home, you can:

• Create a new website from scratch or template
• Start a new database project
• Build a custom form
• Browse the template gallery

🌐 Websites & Web Apps

VibeCode Builder Pro gives you powerful tools to create professional websites and web applications without writing code.

Creating a Website

Method 1: AI-Powered Creation

1. Click "+ New Website" from the dashboard
2. Select "AI Creator"
3. Describe what you want in natural language
4. The AI generates a complete website structure
5. Customize colors, fonts, and content

Method 2: Template Gallery

1. Browse the Template Gallery
2. Filter by category (Business, Portfolio, E-commerce, etc.)
3. Preview templates before selecting
4. Click "Use Template" to customize

Method 3: From Scratch

1. Choose "Blank Website"
2. Use the drag-and-drop builder
3. Add sections, components, and styling

The Builder Chat Interface

The easiest way to create websites is through the Builder Chat. Just describe what you want, and Rosie (your AI assistant) will build it for you!

How It Works

1. Describe your website

   Type what you want in the chat. Example: "Create a landing page for my coffee shop with a dark theme, hero section, and contact form."

2. Rosie analyzes your request

   You'll see status updates like "Analyzing," "Coding," and "Reviewing" as Rosie works.

3. Quality check

   Rosie reviews the website for quality and gives it a score (0-100). If it's not good enough, she'll automatically try again.

4. Preview your website

   See your website in the center preview window. Switch between Desktop, Tablet, and Mobile views using the buttons above the preview.

5. Give feedback

   Click 👍 if you like it, or 👎 if you want changes. You get up to 3 tries to get it perfect!

Builder Interface Components

The new Builder Chat uses a three-column layout for maximum productivity:

Toolbar Buttons Guide

Center Toolbar (above preview):

• Desktop/Tablet/Mobile: Switch between device views
• Home: Dropdown to navigate between pages
• ➕ Add: Create a new page
• 🏷️ Rename: Change page name
• 🗑️ Delete: Remove current page
• ↩️ Undo / ↪️ Redo: Reverse or redo changes

Right Sidebar (Page Functions) - arranged by popularity:

1. 💾 Save - Save your work (most important!)
2. 👁️ Preview - See your site in a new tab
3. 🚀 Publish - Make your site live on the internet
4. ✏️ Visual Editor - Edit with drag-and-drop
5. 📁 Load Existing - Open a previously created website
6. 📋 Templates - Browse and apply templates
7. 📤 Export - Download your website files
8. ⚙️ Settings - Configure builder options

Buttons are arranged with the most-used actions at the top for quick access!

Publishing Your Website

1. Preview your site

   Check desktop, tablet, and mobile views before publishing.

2. Configure domain

   Use a VCB subdomain or connect your custom domain.

3. SEO settings

   Add meta titles, descriptions, and social images.

4. Click Publish

   Your site goes live instantly.

🗃️ Databases

VCB Pro includes a powerful database system inspired by Airtable and Notion. Create structured data, build relationships, and use formulas.

Creating a Database

Method 1: AI Chat

1. Go to My Data → Create Database
2. Select "AI Chat"
3. Describe your database in natural language
4. Example: "Create a customer database with contact info and purchase history"
5. AI suggests tables and fields

Method 2: Build from Scratch

1. Choose "Build from Scratch"
2. Add tables and define fields
3. Field types: Text, Number, Date, Email, Phone, Currency, Checkbox, Formula

Method 3: Import CSV

1. Select "Import Data"
2. Upload a CSV file
3. VCB automatically detects field types
4. Review and confirm import

Field Types

Formula Fields

Formula fields automatically calculate values based on other fields.

Syntax

• Field references: {FieldName}
• Math: +, -, *, /
• Functions: ROUND(), SUM(), IF(), etc.

Example Formulas

// Calculate total price
{Price} * {Quantity} * 1.08

// Concatenate names
CONCATENATE({FirstName}, " ", {LastName})

// Conditional status
IF({Quantity} > 10, "Bulk", "Retail")

// Round to 2 decimals
ROUND({Total}, 2)

Views

Save different perspectives on your data:

• Grid View — Default table view
• Sort — Order by any column
• Filter — Show only matching records
• Hide Fields — Show only relevant columns

Database Operations

Export to CSV

1. Open your database in the viewer
2. Click "Export CSV" in the toolbar
3. Download includes all visible columns

Duplicate Database

1. Go to My Data
2. Click the ⚙️ menu on any database
3. Select "Duplicate"
4. Choose whether to copy records

🎨 Templates

Templates are pre-designed starting points that help you build faster. VCB Pro includes a gallery of professionally designed templates.

Template Gallery

Browse templates by category:

• Business — Corporate sites, landing pages
• Portfolio — Creative portfolios, resumes
• E-commerce — Online stores, product pages
• Blog — Content-focused designs
• Database Apps — CRM, inventory, project management

Using a Template

1. Browse the gallery

   Filter by category or search by keyword.

2. Preview

   See the template in action before selecting.

3. Click "Use Template"

   Creates a copy you can customize.

4. Customize

   Replace placeholder content with your own.

5. Publish

   Make it live when ready.

Saving Your Own Templates

Turn any project into a reusable template:

1. Open your completed project
2. Go to Settings → Save as Template
3. Add name, description, and category
4. Choose visibility (Private or Public)

📝 Forms

Want to collect info from people? Forms are your best friend! Whether it's a contact form, survey, event signup, or quiz — you can build it all with our drag-and-drop form builder.

Creating Your First Form

1. Head to My Forms and hit Create Form
2. Pick how you want to start:
   • Blank Form — Start from scratch
   • Template — Use a pre-made form
   • AI Creator — Describe what you want, AI builds it
3. Drag fields from the left sidebar onto your form
4. Click any field to customize it (label, placeholder, required, etc.)
5. Hit Publish when you're ready!

All The Field Types (23+ Options!)

Cool Features You'll Love

🎨 Design Library Integration

Adding a Banner or Picture Choice field? Click "Browse Library" to pick images from your Design Library!

🧠 Conditional Logic

Show or hide fields based on answers. Example: Only show "Company Name" if they select "Business" as account type.

📑 Multi-Page Forms

Long form? Break it into pages! Add Page Break fields and users will see progress tabs at the top.

↩️ Undo/Redo

Made a mistake? Hit Ctrl+Z to undo. Changed your mind? Ctrl+Shift+Z to redo!

Email Notifications (Get Notified!)

Want to know when someone fills out your form? Set up email notifications:

1. Click Publish → Email Notifications
2. Check "Notify me on submission"
3. Enter your email (or multiple emails!)
4. Customize the email subject and message
5. Want to thank respondents? Check "Send confirmation email"

Viewing & Managing Responses

All your form submissions are stored and easy to manage:

1. Go to My Forms
2. Find your form and click the green 📊 Responses button
3. See all submissions in a spreadsheet-like view
4. Sort by any column, search, filter by date
5. Click any response to view or edit details
6. Export to CSV to open in Excel or Google Sheets

Sharing Your Form

1. In the form builder, click Publish
2. Copy the public link — that's your form URL!
3. Share via email, social media, or embed on your website
4. Watch responses roll in in real-time!

⌨️ Keyboard Shortcuts

Speed up your workflow with these keyboard shortcuts.

Global

Builder

Database Viewer

The Database Viewer provides powerful tools for viewing and managing your data with multiple view types and customization options.

View Types

• Grid View - Traditional spreadsheet layout with all fields visible
• List View - Compact vertical list with expandable details
• Cards View - Card-based layout showing key fields
• Gallery View - Visual grid with image support and upload
• Kanban View - Drag-and-drop board organized by status
• Calendar View - Month/Week/Day views for date-based data
• Timeline View - Chronological view with zoom and pan
• Compact View - Dense table for maximum data visibility

Column Management

• Drag to Reorder - Drag column headers left or right
• Right-Click Menu - Edit, duplicate, sort, hide, or delete columns
• Field Types - Configure 14 different field types including text, number, date, currency, rating, linked records, and more

Linked Records

• Create relationships between tables
• Link records by clicking the cell and selecting from the list
• Use Lookup fields to display data from linked records

AI Assistant

• Click the toggle tab on the right edge to open/close
• Ask questions about your data in natural language
• Get insights, summaries, and analysis

🔧 Troubleshooting

Common Issues

Website won't publish

• Check that all required fields are filled
• Verify your domain settings
• Ensure you're connected to the internet
• Try refreshing the page and publishing again

Database not loading

• Clear browser cache and reload
• Check browser console for errors
• Verify database hasn't been deleted
• Try accessing from a different browser

Form submissions not appearing

• Check spam/junk folders for email notifications
• Verify form is connected to correct database
• Check that submission handling is configured
• Test the form yourself to confirm it's working

Getting Help

If you're still stuck:

• AI Assistant: Ask the in-app AI chat for help
• Documentation: Visit docs.vibecode.ai
• Community: Join our Discord community
• Support: Email [email protected] (Pro users)