Anatomy of a Vibe

What's inside the box

Last updated: March 2026

File structure

A full-stack vibe typically looks like this:

my-vibe/
  index.html          # Entry point
  package.json        # Dependencies
  vite.config.js      # Build configuration
  worker.js           # Backend logic + API
  src/
    App.vue           # Root Vue component
    components/       # UI components
    pages/            # Page views

Simpler vibes may only have an index.html (static) or skip the worker.js (frontend-only).

index.html

The entry point for your vibe's frontend. Vite uses this as the starting point for the build. It typically loads your Vue app:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Vibe</title>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>
</html>

vite.config.js

Configures the Vite build. Vibes use the latest Vite (v6/v7) with Vue:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  build: {
    outDir: 'dist'
  }
})

The platform handles installing dependencies and running the build — you don't need to worry about CI/CD.

package.json

Declares your vibe's dependencies. The platform installs these during the build step. A typical full-stack vibe might include:

{
  "name": "my-vibe",
  "type": "module",
  "dependencies": {
    "vue": "^3.4.0",
    "marked": "^12.0.0"
  },
  "devDependencies": {
    "vite": "^6.0.0",
    "@vitejs/plugin-vue": "^5.0.0"
  }
}

src/ — Vue components

The src/ directory contains your Vue application code. The Vibe Builder organizes components by feature:

  • App.vue — Root component with layout and routing
  • components/ — Reusable UI pieces (cards, forms, modals)
  • pages/ — Top-level views (home, detail, settings)

The frontend talks to the backend through /api/ endpoints:

const response = await fetch('/api/list_bookmarks', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ tag: 'recipes' })
})
const { success, data } = await response.json()

worker.js — The backend

The backend is a serverless worker that handles API requests and storage. The Vibe Builder generates this automatically based on your app's data model.

Backend functions are automatically exposed as MCP tools, so AI clients can discover and call them. You don't need to configure this — the platform handles tool extraction and registration during the build.

How builds work

When you publish a vibe from the Vibe Builder, the platform compiles your source code, registers any MCP tools, and deploys everything to the edge. The process is fully automated — you just click publish.

Previewing

You can preview your vibe directly in the Vibe Builder before publishing. The preview shows your app running with live data, so you can test features and iterate before going live.

← Quickstart Connecting AI →