Following my recent migration to Hugo, I’ve been looking for ways to streamline my development workflow, especially when working with AI tools. Today, I’m setting up Vibe Kanban on an Ubuntu VM. This setup allows for a browser-based AI coding environment that’s both flexible and powerful.

I’ll assume you already have SSH access to your Ubuntu VM. If not, you might want to check out my previous post on creating an Ubuntu VM.

Prerequisites

First, let’s make sure the system is up to date and we have the necessary dependencies.

sudo apt-get update
sudo apt-get install -y curl git

Installing Node.js

Vibe Kanban requires Node.js. I prefer using nvm to manage Node versions, but for a quick setup, you can install it directly:

curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt-get install -y nodejs

Setting up Vibe Kanban

The easiest way to get started is using npx. This handles the setup and gets things running quickly. To make sure it’s accessible from your local network, you’ll want to bind it to 0.0.0.0.

HOST=0.0.0.0 PORT=8080 npx vibe-kanban

Configuration

You’ll need to set up your environment variables, especially your API keys for the AI models you plan to use.

nano .env

Running the Application

If you want to run it in the background (and you should), I recommend using pm2. Since I’m in a passwordless sudo environment, this is a breeze:

sudo npm install -g pm2
pm2 start "HOST=0.0.0.0 PORT=8080 npx vibe-kanban" --name "vibe-kanban"
pm2 save

Accessing via Browser

By default, we’ve set this to run on port 8080. Make sure your VM’s firewall allows traffic on that port.

Nginx Reverse Proxy (Optional but Recommended) If you have Nginx installed, you can set up a reverse proxy to access it via a proper domain or just on port 80:

server {
    listen 80;
    server_name your-ai-coding-vm.com;

    location / {
        proxy_pass http://localhost:8080;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

Why this setup?

  • Browser-Based: Access your coding environment from anywhere.
  • Reduced SSH Exposure: One of the biggest wins is that this reduces the amount of SSH you need to open. Once set up, it is now all on the browser, making it much more convenient and secure.
  • AI-Integrated: Vibe Kanban is designed to work seamlessly with AI workflows.
  • Persistent: Running on a VM means your sessions stay alive even if you close your laptop.

Pro Tip: If you’re using this for serious coding, consider setting up SSL via Certbot to keep your API keys and code secure.

Happy coding! 🚀 #AI #DevOps #VibeKanban