Getting Started

VibeCode™

The coding environment built for vibe coders. Ship Claude-powered apps without the boilerplate, the build tools, or the overthinking.

⚡

Quick Start

Go from zero to deployed Claude app in 5 minutes flat.

🧠

VibeAI

Your in-editor AI pair programmer. Ask anything, get real code.

🚀

Deploy

One-click Cloudflare Pages deploy. Drag, drop, live.

🔑

Proxy Setup

Keep your Anthropic API key server-side with a CF Worker.

What is VibeCode™? #overview

VibeCode™ is a browser-based IDE built specifically for the #ClaudizeIt movement — developers who build Claude-powered SaaS products fast, ship to Cloudflare Pages, and don't waste time with build pipelines or devops overhead.

The philosophy is simple: single-file HTML + Cloudflare Worker proxy + Claude API = production-ready AI product in under an hour. No npm, no webpack, no drama.

Philosophy #philosophy

🔥

Vibe Coder Manifesto

Ship first. Optimize later. Perfect is the enemy of live. A deployed product with one bug beats a perfect product that's still on your localhost.

Old Way	Vibe Way
React + Vite + npm install	Single HTML file
Docker + CI/CD pipeline	Cloudflare Pages drag-and-drop
API key in .env files locally	Cloudflare Worker proxy
3 weeks to launch	30 minutes to live
node_modules (300MB)	0 dependencies

Next →

Quick Start

Getting Started

Quick Start

Ship your first Claude-powered app in 5 minutes. No build tools. No terminal. Just vibes.

5-Minute Deploy #5min

1

Create your Cloudflare Worker proxy

Go to workers.cloudflare.com → Create Worker → paste the proxy code below. This keeps your Anthropic API key server-side.

2

Add your API key as a secret

In your Worker settings → Variables → add ANTHROPIC_API_KEY as an encrypted secret.

3

Build in VibeCode™ editor

Write your single-file HTML app. Use the built-in snippets and VibeAI to generate code fast.

4

Deploy to Cloudflare Pages

Go to pages.cloudflare.com → Create project → Direct Upload → drag your HTML file. Live in under 30 seconds.

5

Share & collect revenue 💰

Post in the Claude AI Facebook group (1.2M members). Add a Stripe link. Remember: 10% to world hunger 🌍.

Worker Proxy Code #proxy-code

          JS
          worker.js
          
        
// Cloudflare Worker — Anthropic API Proxy
// Deploy at: workers.cloudflare.com

export default {
  async fetch(request, env) {
    // Handle CORS preflight
    if (request.method === 'OPTIONS') {
      return new Response(null, {
        headers: {
          'Access-Control-Allow-Origin': '*',
          'Access-Control-Allow-Methods': 'POST, OPTIONS',
          'Access-Control-Allow-Headers': 'Content-Type',
        }
      });
    }

    const body = await request.json();

    const response = await fetch(
      'https://api.anthropic.com/v1/messages',
      {
        method: 'POST',
        headers: {
          'x-api-key': env.ANTHROPIC_API_KEY,
          'anthropic-version': '2023-06-01',
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(body)
      }
    );

    const data = await response.json();

    return new Response(JSON.stringify(data), {
      headers: {
        'Content-Type': 'application/json',
        'Access-Control-Allow-Origin': '*',
      }
    });
  }
};

⚠️

Security Note

Never put your ANTHROPIC_API_KEY directly in your HTML file. Always route through a Cloudflare Worker. The Worker stores the key as an encrypted environment variable.

← Previous

Introduction

Next →

VibeAI

Core Feature

VibeAI

Your in-editor Claude-powered pair programmer. Ask it anything about your code. Get punchy, actionable answers — not walls of text.

How It Works #how

VibeAI is a chat interface in the right panel that calls the Claude Sonnet 4 API directly. It has a system prompt tuned for vibe coding — short answers, real code, no unnecessary caveats.

          JS
          vibeai-core.js
          
        
const systemPrompt = `You are VibeAI inside VibeCode™.
You give short, punchy, actionable coding advice.
You love: Claude API, Cloudflare Workers, single-file HTML.
Keep responses under 80 words. Be useful, not verbose.`;

async function sendToVibeAI(userMessage, history = []) {
  const res = await fetch(PROXY_URL, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      model: 'claude-sonnet-4-20250514',
      max_tokens: 1000,
      system: systemPrompt,
      messages: [...history, { role: 'user', content: userMessage }]
    })
  });
  const data = await res.json();
  return data.content[0].text;
}

Good Prompts for VibeAI #prompts

Prompt	What You Get
`add a loading spinner to my fetch call`	Drop-in HTML/CSS/JS snippet
`make this error handling better`	Refactored try/catch block
`write a Stripe webhook handler`	Complete webhook function
`how do I add auth to this?`	Supabase or JWT approach
`make this UI more cinematic`	CSS transformation suggestions

💡

Pro Tip

VibeAI works best with specific questions. Instead of "help me with my code" try "add an animated loading state to this fetch function with a skeleton UI".

← Previous

Editor

Next →

Deploy

Core Feature

Editor

A browser-native code editor with line numbers, tab support, vibe meter, multi-file tabs, and keyboard shortcuts. No extensions required.

Keyboard Shortcuts #shortcuts

Shortcut	Action
`Tab`	Insert 2-space indent
`Ctrl/⌘ + Enter`	Run code
`⌘K`	Focus search
`Enter` (×3 fast)	Unlocks Chaos Mode 🎲

Vibe Meter #vibe-meter

The Vibe Meter in the header reflects your coding momentum — it fills as you write more lines. At 100% vibe you're officially in the zone. The meter resets per session.

ℹ️

Easter Eggs

Every 30th line has a 3% chance of spawning a ☕ coffee notification. And bugs get tracked. We all have bugs. It's fine.

Core Feature

Deploy

Cloudflare Pages drag-and-drop is the VibeCode™ deploy method. No Git. No CI. Just a file and a browser.

Deploy Steps #steps

1

Save your file as index.html

Your entire app lives in one file. CSS, JS, and HTML — all inline. This is the vibe.

2

Go to pages.cloudflare.com

Log in to your Cloudflare account and navigate to Pages in the dashboard.

3

Create project → Direct Upload

Choose "Direct Upload" (not Git). Name your project. This becomes your yourname.pages.dev subdomain.

4

Drag your file in

Drag index.html into the upload zone. Click Deploy. Live in under 30 seconds globally.

🚀

Custom Domain

Connect your own domain (e.g. victoryhourmultimedia.com) in the Pages settings → Custom Domains. Cloudflare handles the SSL certificate automatically.

API Reference

Claude API

VibeCode™ uses Claude Sonnet 4 for all AI features. Here's the full call structure you need to know.

Request Shape #request

          JS
          api-call.js
          
        
const response = await fetch(PROXY_URL, {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    model: 'claude-sonnet-4-20250514',  // always Sonnet 4
    max_tokens: 1000,
    system: 'Your system prompt here',   // optional
    messages: [
      { role: 'user', content: 'User message' }
    ]
  })
});

const data = await response.json();
const text = data.content[0].text;  // the reply

Parameters #params

model string required

Always use claude-sonnet-4-20250514. It's fast, smart, and cost-effective for SaaS products.

max_tokens number required

Set to 1000 for most use cases. Increase to 4000 for long document generation tasks.

system string optional

System prompt. Use this to define the AI's persona, constraints, and output format. Keep it concise.

messages array required

Array of { role, content } objects. For multi-turn chat, pass the full conversation history each time.

API Reference

Cloudflare Worker Proxy

The proxy is the backbone of every VibeCode™ product. It keeps your Anthropic API key off the client and adds CORS headers so your HTML file can call it from anywhere.

Victory Hour Proxy URL #vh-proxy

📡

Victory Hour Default Proxy

https://claude-proxy.victoryhourdream.workers.dev — used across all Victory Hour products. Deploy your own Worker for production SaaS to avoid shared rate limits.

Environment Variables #env-vars

          ENV
          .env (Cloudflare Worker Settings)
          
        
# Set these in: Workers → Your Worker → Settings → Variables
# Mark as Encrypted for secrets

ANTHROPIC_API_KEY=sk-ant-xxxxxxxxxxxxxxxxxxxx

# Optional: restrict origins
ALLOWED_ORIGIN=https://yourapp.pages.dev

API Reference

Configuration

All VibeCode™ settings live at the top of your HTML file as constants. No config files. No JSON. Just variables.

          JS
          config block (top of your HTML)
          
        
// ── CONFIG ─────────────────────────────────────
const CONFIG = {
  proxy:    'https://claude-proxy.victoryhourdream.workers.dev',
  model:    'claude-sonnet-4-20250514',
  maxTokens: 1000,
  brand: {
    name:    'Victory Hour Multimedia',
    tagline: 'Clarity. Strategy. Action.',
    navy:    '#0B1D3A',
    gold:    '#C9A84C',
  },
  mission:  '10% of proceeds → fighting world hunger 🌍',
};

Guide

Ship a SaaS in a Day

The VibeCode™ formula for going from idea to paying customers in under 24 hours. Real talk, no fluff.

The Formula #formula

Hour	Task	Tool
0–1	Define the one problem you solve	Your brain
1–3	Build single-file HTML with Claude API	VibeCode™
3–4	Add Stripe payment link	Stripe.com
4–5	Deploy to Cloudflare Pages	Pages drag-and-drop
5–8	Post in 1.2M Claude AI Facebook group	Facebook
8–24	Respond to DMs, collect revenue	Hustle

💀

The Corey Moment

Don't abandon your product after the first lukewarm response. That's the #1 killer of SaaS products built by solo founders. Ship → iterate → distribute. Tawakal — trust the process.

Guide

Cinematic Landing Pages

The Victory Hour aesthetic: dark navy + gold. Bebas Neue headlines. Barlow Condensed body. IMAX-scale energy.

Design System #design

          CSS
          victory-hour-brand.css
          
        
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow+Condensed:wght@400;600;700&display=swap');

:root {
  /* Victory Hour Brand DNA */
  --navy:  #0B1D3A;
  --gold:  #C9A84C;
  --white: #F5F0E8;

  /* Typography */
  --font-display: 'Bebas Neue', cursive;
  --font-body:    'Barlow Condensed', sans-serif;
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, 7rem);
  color: var(--gold);
  letter-spacing: 2px;
  line-height: 0.95;
}

5-Part Story Framework #story

1

Hook

One sentence that names the pain. "You're building products nobody can find."

2

Problem

Agitate the pain. Make them feel it. Two sentences max.

3

Solution

Introduce your product as the obvious answer. No features yet — just transformation.

4

Proof

Screenshot, testimonial, or live demo. Show don't tell.

5

CTA

One button. One price. One action. "Get Access — $27"

Guide

Stripe Integration

Add payments to your VibeCode™ app. Stripe payment links are the fastest path — no server required for basic checkout.

Payment Link (Fastest) #payment-link

💡

Zero-Code Option

Go to dashboard.stripe.com → Payment Links → Create. Copy the URL. Add a button to your HTML that opens it. Done. You're taking payments.

          HTML
          buy-button.html
          
        
<!-- Add this wherever you want your CTA button -->
<button
  onclick="window.open('https://buy.stripe.com/YOUR_LINK_ID', '_blank')"
  style="
    padding: 16px 40px;
    background: #C9A84C;
    color: #000;
    font-family: 'Bebas Neue', cursive;
    font-size: 1.2rem;
    letter-spacing: 2px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  ">
  Get Access — $27
</button>

Getting Started

Installation

There is no installation. Open the HTML file. Start coding. That's it.

🔥

The VibeCode™ Way

Download vibecode.html. Open it in Chrome. Code. Deploy. Zero npm. Zero config. Zero excuses.

Getting Started

Tech Stack

The entire VibeCode™ stack fits in a tweet. That's the point.

Layer	Tech	Why
Frontend	Single-file HTML/CSS/JS	No build step, instant deploy
AI	Claude Sonnet 4 API	Smartest model, best for SaaS
Proxy	Cloudflare Worker	Free tier, global edge, keeps API key safe
Hosting	Cloudflare Pages	Free, global CDN, drag-and-drop
Payments	Stripe Payment Links	No backend needed for basic checkout
Auth (optional)	Supabase	Row-level security, free tier generous

Core Feature

Vibe Modes

Vibe Modes change the editor's mental energy. Pick the one that matches where you're at.

Mode	Vibe	Use When
🔥 Ship It	Maximum urgency	Deadline is tonight
🧘 Flow State	Calm, focused	Complex logic work
⚡ Hyperfocus	Tunnel vision	Single feature sprint
🌊 Lo-Fi Grind	Chill momentum	Long coding session
🎲 Chaos Mode	Unhinged energy	You have no idea what you're doing and it's working

Core Feature

Snippet Library

Pre-built code blocks for the most common VibeCode™ patterns. One click inserts directly into your editor.

Snippet	What It Inserts
Claude Fetch	Full `fetch()` call to your CF Worker proxy
CF Worker Proxy	Complete Cloudflare Worker source
Stripe Webhook	Express webhook handler with signature verification
Single-File HTML	Blank Victory Hour branded HTML boilerplate
Supabase Auth	Sign-in with email/password
10% Hunger Footer	Victory Hour mission statement footer

Changelog

What's New

Every update ships something real. No fake changelogs.

v2.0.0 — May 2026 #v2

🔥

Latest Release

VibeCode™ 2.0 — complete rebuild. VibeAI powered by Claude Sonnet 4. New snippet library. Vibe Modes. Multi-file tabs. Lo-fi music bar. Live Vibe Meter. Full docs site.

New Features

VibeAI chat panel with live Claude Sonnet 4 integration. 6-snippet library including CF Worker proxy and Stripe webhook. 5 Vibe Modes. Multi-tab editor. Session stats (time, coffees, bugs). Scanline + grain overlay aesthetic. Music bar with track switcher.

v1.0.0 — Jan 2026 #v1">

Initial release. Basic editor. Line numbers. Run button. Single Cloudflare deploy workflow. The OG vibe.

Victory Hour Multimedia

Our Mission

VibeCode™ is built by Victory Hour Multimedia Inc. — a one-person AI product studio based in Windsor, Ontario, Canada.

🌍

Non-Negotiable

10% of every purchase across every Victory Hour product goes directly to fighting world hunger. This is not a marketing line. It's a commitment baked into the brand from day one.

The #ClaudizeIt Movement #claudizeit

VibeCode™ is the tool. #ClaudizeIt is the philosophy — rebuild anything as a Claude-powered application. Legacy tools, manual processes, boring SaaS — all of it can be rebuilt better, faster, and smarter with Claude.

The movement lives in a 1.2 million-member Claude AI Facebook group. If you ship something with VibeCode™, post it. Tag it. The community is the distribution.

Tagline #tagline

⚡

Clarity. Strategy. Action.