Quickstart: Your First Vibe

From prompt to live app in 90 seconds

Last updated: March 2026

What you need

A vibe-coded.ai account. Get started if you don't have one yet.

Step 1: Open the Vibe Builder

From your account dashboard, click Create Vibe. Give your vibe a name and choose a starting point. You can pick from a template or start from scratch:

  • CRM — Manage leads, clients, and deals
  • Booking — Appointment slots and reservations
  • Planner — Milestones, tasks, and deliverables
  • Knowledge Tracker — Notes, tags, search, and MCP sharing
  • Inventory Tracker — Track equipment, stock, or assets
  • Blank — Start from scratch with your own idea

Step 2: Describe what you want

Tell the Vibe Builder what you'd like your app to do. Be specific about the data it will manage and the features you need:

Create a bookmark manager where I can save URLs with
titles, tags, and notes. I want to search by tag and
see my most recent bookmarks on the homepage.

Tip: The more detail you provide about your data model and features, the better the result. Mention specific fields, relationships, and how you want the UI organized. See Tips for Creating Great Vibes for more.

Step 3: Watch it build

The Vibe Builder orchestrates multiple AI agents to create your app:

  1. A planning agent designs the architecture and data model
  2. A frontend developer builds the UI
  3. A backend developer creates the API and storage logic
  4. A verification step checks that everything compiles and works

This typically takes 60–90 seconds. You can preview the result directly in the Vibe Builder as it works.

Step 4: Iterate

Not quite right? Ask the Vibe Builder to make changes:

  • "Add a search bar to the homepage"
  • "Change the color scheme to blue"
  • "Add a field for due dates on each bookmark"

Each iteration rebuilds your vibe with the changes applied. Keep going until you're happy with the result.

Step 5: Publish

When you're ready, publish your vibe from the Vibe Builder. It goes live at:

https://your-username--bookmark-manager.vibe-coded.ai

Your vibe now has a live frontend, API endpoints, and storage. Full-stack vibes also get AI-callable MCP tools automatically.

Step 6: Connect an AI client

Want to interact with your vibe's data through an AI assistant? Connect any MCP-compatible client (Claude Desktop, Claude Code, Cursor, and others) to your vibe's MCP endpoint:

https://your-username--bookmark-manager.vibe-coded.ai/mcp/sse

See Connecting AI to Your Vibe for setup instructions for each client.

Next steps

← What is a Vibe? Anatomy of a Vibe →