# The Vibe Coding Revolution

**Page:** guides/vibe-coding

[Download Raw Markdown](./guides/vibe-coding.md)

---

# The Vibe Coding Revolution

**Software development was supposed to get easier. Instead, we got Kubernetes, Terraform, Docker Compose, CI/CD pipelines, infrastructure-as-code, and a thousand YAML files standing between an idea and a running application.**

Vibe coding is the rejection of all that ceremony.

You open **Hoody OS** in your browser — or `ssh hoody.com` (the Hoody Terminal Browser gateway) from any terminal. You talk to an AI. You watch it build your app in real-time. You guide it with words, not configuration files. When it looks right, you ship it. The entire creative process happens in a conversation, and the infrastructure is just URLs that already work.

This is not a fantasy. This is what happens when every tool is an HTTPS endpoint, AI already speaks HTTP fluently, and the whole thing runs on servers you actually own — not someone else's sandbox. With a team that's spent years building privacy-first infrastructure behind Hoody, your code stays yours.



---

## What Is Vibe Coding?

Vibe coding is conversational development. You describe what you want in natural language. An AI agent writes the code, installs the dependencies, configures the services, runs the tests, and deploys the result. You watch, guide, and intervene when the AI needs human judgment.

All of this happens inside **Hoody OS Workspaces** — a floating-window desktop where you arrange your AI chat, terminal, code editor, and live preview side by side. Or from `ssh hoody.com` if you prefer a terminal-only workflow — same capabilities, rendered as a TUI.

The term captures the experience precisely: you set the vibe, the AI does the coding.

**What makes Hoody the ideal platform for this:**

- **hoody-agent** -- An autonomous coding agent controllable via HTTP
- **hoody-code** -- VS Code running in your browser, no installation
- **hoody-terminal** -- Shell access from anywhere, multiple instances
- **hoody-display** -- Live preview of GUI applications in real-time
- **hoody-exec** -- Scripts that become API endpoints instantly
- **hoody-sqlite** -- Database accessible through HTTP calls
- **Snapshots** -- Checkpoint at any moment, rollback in seconds

Every tool the AI needs is already a URL. Every tool you need to observe the AI is already a URL. The entire workflow lives in browser tabs.

---

## The Workflow

### 1. Open Your Workspace

Open three browser tabs. That is your entire development environment:

```
Tab 1: https://PROJECT-CONTAINER-code-1.SERVER.containers.hoody.icu
       └── VS Code in your browser (watch AI write code here)

Tab 2: https://PROJECT-CONTAINER-terminal-1.SERVER.containers.hoody.icu
       └── Terminal (watch AI execute commands here)

Tab 3: https://PROJECT-CONTAINER-display-1.SERVER.containers.hoody.icu
       └── Live preview (watch your app update in real-time)
```

Or open hoody-workspaces and see everything in one window:

```
https://PROJECT-CONTAINER-workspaces-1.SERVER.containers.hoody.icu
       └── All services arranged in panels, drag-and-drop layout
```

No local installation. No IDE plugins. No Docker running on your laptop eating your battery. Just URLs in a browser.

### 2. Launch Anything with Ctrl+Shift+K

Inside Hoody OS, press **Ctrl+Shift+K** to open the command palette. Type what you want — "Jupyter", "Postgres", "Redis" — and it runs. Frecency-ranked so the tools you reach for most appear first. No terminal ceremony, no install scripts, no docker-compose. Just type and go. Keep the vibe.

### 3. Talk to the Agent

Open the agent interface and describe what you want:


  
    ```bash
    # The `hoody agent` CLI has subcommands (prompt, sessions, workspaces, ...).
    # You can also drive it directly via HTTP to the agent service URL.
    curl -X POST "https://$PROJECT_ID-$CONTAINER_ID-workspaces-1.$SERVER.containers.hoody.icu/api/v1/agent/prompt/sync" \
      -H "Content-Type: application/json" \
      -d '{
        "parts": [{ "type": "text", "text": "Build a real-time dashboard that shows server metrics. Use React with Tailwind CSS for the frontend. Create a backend API with hoody-exec that reads system stats. Store historical data in SQLite. Auto-refresh every 5 seconds." }],
        "autoApprove": true
      }'
    ```
  
  
    ```typescript
    import { HoodyClient } from '@hoody-ai/hoody-sdk';

    const client = new HoodyClient({ baseURL: 'https://api.hoody.icu', token: process.env.HOODY_TOKEN });

    // Using raw fetch to show the HTTP surface directly.
    // The same endpoints are also available via client.agent.* in the SDK.
    const response = await fetch(
      `https://${PROJECT_ID}-${CONTAINER_ID}-workspaces-1.${SERVER}.containers.hoody.icu/api/v1/agent/prompt/sync`,
      {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          parts: [{ type: 'text', text: `Build a real-time dashboard that shows server metrics.
        Use React with Tailwind CSS for the frontend.
        Create a backend API with hoody-exec that reads system stats.
        Store historical data in SQLite.
        Auto-refresh every 5 seconds.` }],
          autoApprove: true,
        }),
      }
    );
    const result = await response.json();
    ```
  
  
    ```bash
    curl -X POST "https://$PROJECT_ID-$CONTAINER_ID-workspaces-1.$SERVER.containers.hoody.icu/api/v1/agent/prompt/sync" \
      -H "Content-Type: application/json" \
      -d '{
        "parts": [{ "type": "text", "text": "Build a real-time dashboard that shows server metrics. Use React with Tailwind CSS for the frontend. Create a backend API with hoody-exec that reads system stats. Store historical data in SQLite. Auto-refresh every 5 seconds." }],
        "autoApprove": true
      }'
    ```
  


### 4. Watch It Build

Now watch your three browser tabs come alive:

**In hoody-code (Tab 1):** Files appear and change in real-time. The agent creates `src/App.tsx`, `src/components/MetricsChart.tsx`, `api/metrics.ts`. You see every keystroke, every import, every function definition as it happens.

**In hoody-terminal (Tab 2):** Commands execute. `bun install react react-dom tailwindcss`. `bun create vite . --template react-ts`. `mkdir -p src/components`. You see the agent think through the build process.

**In hoody-display (Tab 3):** Your app appears. First the Vite scaffold. Then the layout takes shape. Then the charts render. Then real data flows in. You are watching software materialize from a conversation.


This is the fundamental difference from traditional development. You are not writing code and waiting for feedback. You are watching code write itself and providing direction. The feedback loop is inverted.


### 5. Guide and Correct

The AI is good but not omniscient. Guide it:


  
    ```bash
    # Continue the conversation via the agent CLI or direct HTTP.
    # Include the sessionID from the previous response to continue the same session.
    curl -X POST "https://$PROJECT_ID-$CONTAINER_ID-workspaces-1.$SERVER.containers.hoody.icu/api/v1/agent/prompt/sync" \
      -H "Content-Type: application/json" \
      -d '{
        "parts": [{ "type": "text", "text": "The chart colors are too similar. Use a red/green/blue palette. Also, add a dark mode toggle in the top right corner." }],
        "sessionID": "'"$SESSION_ID"'"
      }'
    ```
  
  
    ```typescript
    import { HoodyClient } from '@hoody-ai/hoody-sdk';

    const client = new HoodyClient({ baseURL: 'https://api.hoody.icu', token: process.env.HOODY_TOKEN });

    // Using raw fetch to show the HTTP surface directly.
    // The same endpoints are also available via client.agent.* in the SDK.
    await fetch(
      `https://${PROJECT_ID}-${CONTAINER_ID}-workspaces-1.${SERVER}.containers.hoody.icu/api/v1/agent/prompt/sync`,
      {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          parts: [{ type: 'text', text: `The chart colors are too similar. Use a red/green/blue palette.
                Also, add a dark mode toggle in the top right corner.` }],
          sessionID: result.sessionID,
        }),
      }
    );
    ```
  
  
    ```bash
    curl -X POST "https://$PROJECT_ID-$CONTAINER_ID-workspaces-1.$SERVER.containers.hoody.icu/api/v1/agent/prompt/sync" \
      -H "Content-Type: application/json" \
      -d '{
        "parts": [{ "type": "text", "text": "The chart colors are too similar. Use a red/green/blue palette. Also, add a dark mode toggle in the top right corner." }],
        "sessionID": "'"$SESSION_ID"'"
      }'
    ```
  


The agent modifies the code. The display updates. The conversation continues. You are pair programming with an AI, except neither of you had to install anything.

### 6. Snapshot at Checkpoints

When you reach a state you like, snapshot it:


  
    ```bash
    # Lock in progress
    hoody snapshots create -c $CONTAINER_ID \
      --alias "dashboard-v1-looks-good"
    ```
  
  
    ```typescript
    import { HoodyClient } from '@hoody-ai/hoody-sdk';

    const client = new HoodyClient({ baseURL: 'https://api.hoody.icu', token: process.env.HOODY_TOKEN });

    await client.api.containers.createSnapshot(CONTAINER_ID, {
      alias: 'dashboard-v1-looks-good',
    });
    ```
  
  
    ```bash
    curl -X POST "https://api.hoody.icu/api/v1/containers/$CONTAINER_ID/snapshots" \
      -H "Authorization: Bearer $HOODY_TOKEN" \
      -H "Content-Type: application/json" \
      -d '{"alias": "dashboard-v1-looks-good"}'
    ```
  


Now continue experimenting. Tell the agent to try something ambitious. If it goes wrong, restore the snapshot in seconds. Risk is free when rollback is instant.

### 7. Share and Ship

When you are satisfied, share the URL:

```bash
# Your app is already live at its container URL
https://PROJECT-CONTAINER-display-1.SERVER.containers.hoody.icu

# Or create a clean production alias
hoody proxy create \
  --container-id $CONTAINER_ID \
  --program daemon --index 1 \
  --alias "my-dashboard"
```

From conversation to production URL. No build pipeline. No deployment configuration. No waiting for DNS propagation. The app was already running -- you just pointed a clean domain at it.

---

## The "Twitter Clone in 2 Hours" Paradigm

The phrase has become shorthand for a new era of development. Here is what it actually looks like on Hoody:

**Hour 1: The Conversation**

```
You:    "Build a social media app like Twitter. Users can post short messages,
         follow other users, and see a feed. Use React, Tailwind, and SQLite."

Agent:  [Creates database schema: users, posts, follows tables]
        [Scaffolds React app with Vite]
        [Implements authentication with session tokens]
        [Builds the feed algorithm]
        [Creates the post composer component]
        [Wires up the API endpoints via hoody-exec]

You:    "The feed should show newest first. Add a character counter
         that turns red at 280 characters."

Agent:  [Modifies feed query to ORDER BY created_at DESC]
        [Adds character counter component with conditional styling]
```

**Hour 2: Polish and Ship**

```
You:    "Add profile pages with a follow/unfollow button.
         Make it look professional -- use a card-based layout."

Agent:  [Creates /profile/[username] route]
        [Implements follow/unfollow toggle]
        [Redesigns layout with card components]
        [Adds loading skeletons]
        [Writes automated tests]

You:    "Perfect. Snapshot this and create a production alias."

Agent:  [Creates snapshot: twitter-clone-v1]
        [Creates proxy alias: my-twitter.hoody.icu]
```

Two hours. One conversation. A working application with a production URL. The AI wrote the code, configured the database, set up the routing, and deployed. You provided creative direction.


This is not about replacing developers. It is about eliminating the 90% of development time spent on configuration, deployment, and infrastructure -- the parts that have nothing to do with building the product.


---

## Why HTTP Makes This Work

Vibe coding on traditional infrastructure does not work. Here is why:

**Traditional setup before you can start:** Install Node.js. Install a database. Configure a reverse proxy. Set up SSL. Write a Dockerfile. Create a docker-compose.yml. Configure environment variables. Set up a CI/CD pipeline. Configure DNS. Wait for provisioning.

**Hoody setup before you can start:** Create a container.

Everything else is already HTTP. The terminal is HTTP. The file system is HTTP. The database is HTTP. The browser preview is HTTP. The deployment is HTTP. The agent orchestrating all of it speaks HTTP natively.

When the AI says "install this package," it makes an HTTP call to the terminal. When it says "create this table," it makes an HTTP call to SQLite. When it says "deploy this," the code is already running -- it was live the moment the file was saved.

**The entire feedback loop is HTTP.** That is why vibe coding works on Hoody and feels painful everywhere else.

---

## Live Preview Updates Automatically

Because hoody-display serves the actual desktop environment of your container, your preview updates in real-time as the agent modifies files. There is no "rebuild and refresh" cycle:

1. Agent writes `src/App.tsx` via hoody-agent's file operations
2. Vite's hot module replacement detects the change (it is running as a daemon)
3. hoody-display reflects the updated UI immediately
4. You see the change in your browser tab within milliseconds

This is the same experience whether you are on your laptop, your phone, or a tablet at a coffee shop. The container is the source of truth. Every display is just a window into it.

---

## Collaborative Vibe Coding

Share the workspace URL with a collaborator. They see everything you see. In real-time.

```
You:           Talking to the agent, guiding the build
Collaborator:  Watching in hoody-display, typing corrections in hoody-terminal
Agent:         Building what you both describe
```

Three participants. Three perspectives. One container. No screen sharing, no "can you see my cursor," no lag. Just URLs that multiple people can open simultaneously.

This is not theoretical multiplayer. This is the natural consequence of HTTP. When every service is a URL, sharing is just sending the URL. Everyone is already in.

---

## The Vibe Coding Safety Net

AI-generated code is confident code. It compiles. It runs. And sometimes it is subtly, catastrophically wrong. Hoody's snapshot system makes this acceptable:

| Risk | Mitigation |
|------|-----------|
| Agent installs bad packages | Restore snapshot (2 seconds) |
| Agent deletes important files | Restore snapshot (2 seconds) |
| Agent breaks the database | Restore snapshot (2 seconds) |
| Agent introduces security vulnerability | Restore snapshot, review code |
| Agent rewrites working code incorrectly | Restore snapshot, try different prompt |

**The pattern:** Snapshot before every major change. Experiment freely. Restore if needed. The cost of failure approaches zero.

---

## Switching Modes

hoody-agent ships with several built-in agents (modes) that match different phases of vibe coding:

- **`build`** -- The default agent. Writes and modifies code, executing tools based on configured permissions.
- **`plan`** -- Plan mode. Drafts and refines plans but disallows edits outside the plans directory.
- **`chat`** -- Lightweight mode. Reads files and writes Markdown, with no agentic tools.
- **`explore`** -- Read-only research mode for understanding a codebase without modifying it.
- **`orchestrator`** -- Breaks complex tasks into subtasks and manages worker agents.

Switch modes mid-conversation to match what you need:


  
    ```bash
    # Start with architecture planning via the agent CLI or direct HTTP.
    curl -X POST "https://$PROJECT_ID-$CONTAINER_ID-workspaces-1.$SERVER.containers.hoody.icu/api/v1/agent/prompt/sync" \
      -H "Content-Type: application/json" \
      -d '{"parts": [{ "type": "text", "text": "Plan the architecture for an e-commerce platform. Do not write code yet — just outline the components, data models, and API surface." }], "autoApprove": true}'

    # Once the plan looks good, send a follow-up prompt to start coding.
    # The agent handles the mode transition automatically.
    curl -X POST "https://$PROJECT_ID-$CONTAINER_ID-workspaces-1.$SERVER.containers.hoody.icu/api/v1/agent/prompt/sync" \
      -H "Content-Type: application/json" \
      -d '{"parts": [{ "type": "text", "text": "The architecture looks good. Now implement it." }], "sessionID": "'"$SESSION_ID"'"}'
    ```
  
  
    ```typescript
    import { HoodyClient } from '@hoody-ai/hoody-sdk';

    const client = new HoodyClient({ baseURL: 'https://api.hoody.icu', token: process.env.HOODY_TOKEN });

    // Using raw fetch to show the HTTP surface directly.
    // The same endpoints are also available via client.agent.* in the SDK.

    // Start with architecture planning
    const planRes = await fetch(
      `https://${PROJECT_ID}-${CONTAINER_ID}-workspaces-1.${SERVER}.containers.hoody.icu/api/v1/agent/prompt/sync`,
      {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          parts: [{ type: 'text', text: 'Plan the architecture for an e-commerce platform. Do not write code yet — just outline the components, data models, and API surface.' }],
          autoApprove: true,
        }),
      }
    );
    const plan = await planRes.json();

    // Once the plan looks good, send a follow-up prompt to start coding.
    // The agent handles the mode transition automatically.
    await fetch(
      `https://${PROJECT_ID}-${CONTAINER_ID}-workspaces-1.${SERVER}.containers.hoody.icu/api/v1/agent/prompt/sync`,
      {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          parts: [{ type: 'text', text: 'The architecture looks good. Now implement it.' }],
          sessionID: plan.sessionID,
        }),
      }
    );
    ```
  
  
    ```bash
    # Start with architecture planning
    curl -X POST "https://$PROJECT_ID-$CONTAINER_ID-workspaces-1.$SERVER.containers.hoody.icu/api/v1/agent/prompt/sync" \
      -H "Content-Type: application/json" \
      -d '{"parts": [{ "type": "text", "text": "Plan the architecture for an e-commerce platform. Do not write code yet — just outline the components, data models, and API surface." }], "autoApprove": true}'

    # Once the plan looks good, send a follow-up prompt to start coding.
    # The agent handles the mode transition automatically.
    curl -X POST "https://$PROJECT_ID-$CONTAINER_ID-workspaces-1.$SERVER.containers.hoody.icu/api/v1/agent/prompt/sync" \
      -H "Content-Type: application/json" \
      -d '{"parts": [{ "type": "text", "text": "The architecture looks good. Now implement it." }], "sessionID": "'"$SESSION_ID"'"}'
    ```
  


---

## MITM Rules: Safety Guardrails for Vibe Coding

Vibe coding means the AI has the wheel. That is liberating — and occasionally terrifying. hoody-agent's built-in MITM rule engine gives you declarative safety nets that run underneath every session, without interrupting the creative flow.

Add a `chat.system.transform` rule that appends "CRITICAL: Never execute rm -rf, DROP TABLE, or git push --force without asking first" to every system prompt. The agent cannot bypass this instruction — it is part of the prompt itself. Add a `tool.execute.before` rule for `bash` that sends a notification when the agent is about to run a shell command in a `prod`-tagged session. Add a `session.error` rule that alerts Slack when anything goes wrong. All JSON configuration — no code, no proxy setup, no latency.

The safety net is always on, even when you are in the flow. That is the point. You set the vibe, the AI does the coding, and the rules ensure it stays within bounds. See [MITM: Built-In Rule Engine](/foundation/hoody-ai/mitm/#built-in-rule-engine-zero-code-mitm) for all seven event types and copy-paste examples.

---

## From Vibe to Production

Vibe coding is not just for prototypes. The output is real code running on real infrastructure. When you are ready for production:

1. **Snapshot the final state** -- Your insurance policy
2. **Create a proxy alias** -- Clean URL for the world
3. **Set proxy permissions** -- Control who can access what
4. **Set up hoody-cron** -- Automated backups and maintenance
5. **Configure hoody-daemon** -- Ensure processes restart on failure

Every step is an HTTP call. The vibe becomes the product without a single "deploy" step. The code was already running. You just decided it was done.

---

## Any Provider, Any Model

The AI driving your vibe coding session is not locked in. Hoody supports 75+ providers — Claude, GPT-4o, Gemini, Mistral, Groq, local Ollama, any OpenAI-compatible endpoint. Switch models mid-session by swapping the profile in hoody-agent's settings. Run today's hottest model, tomorrow's better one, or your own fine-tuned local model when the task calls for privacy. One config change, same workflow. See [Hoody AI](/foundation/hoody-ai/) for the provider list.

---

## What's Next

- **[Deploying Autonomous AI Agents](/guides/ai-agents/)** -- Go deeper into agent capabilities
- **[Building a Full-Stack Application](/guides/full-stack-app/)** -- Step-by-step app construction
- **[Multiplayer by Default](/guides/multiplayer/)** -- Collaborative vibe coding with your team
- **[VS Code in Browser](/kit/code/)** -- Customize your coding environment