iTranslated by AI

The content below is an AI-generated translation. This is an experimental feature, and may contain errors. View original article
😠

[Personal Development] What!? Vibe Coding from Your Smartphone for Free!

に公開
AI
個人開発
Tailscale
Vibe Coding
OpenCode
tech

Yes, I can do that!

"Carrying a MacBook around is heavy, but I want to implement some logic I suddenly thought of while on the go..."

"I want to just give instructions to an AI (Vibe Coding) on my phone while taking a walk, and have the implementation finished by the time I get home..."

We all have that desire to become an instruction-giving human, don't we?

I have summarized how to build a secure AI coding environment that is "completely free" and accessible via "smartphone" as a personal memo.

Tech Stack and Overview

Here is the architecture for this setup. I have selected tools that are entirely free.

Tool Role Notes
OpenCode AI Coding Agent Open source. Free models (such as Grok Code Fast 1) are available.
Tailscale VPN Connection Securely access your home Mac from outside without complex port forwarding.
Home PC Server A PC that runs 24/7 at home. I am using my Mac as the assumed environment. If you don't have a home PC, you can use a VM with the Oracle Cloud free tier.

1. Setting up the Mac (Server) Environment

First, let's turn your home Mac (or PC) into an AI coding server accessible from the outside. I assume basic tools like Git are already installed.

Step 1: Installing Tailscale

To securely enter your home network from the outside, we will introduce Tailscale, a zero-trust VPN.

  1. Install the macOS version from the official Tailscale website (or use brew install tailscale).

  2. Launch the app and log in with your Google account, etc.

  3. Once the connection is complete, you will be assigned an IP address starting with 100.x.x.x (Tailscale IP). You will need this later.

Step 2: Installing OpenCode

This is the AI agent that serves as the core of this project. It is a CLI tool but comes with a Web UI.

# Installation (Official recommended procedure)
curl -fsSL https://opencode.ai/install | bash

# Or via Homebrew
brew install opencode

Step 3: Launching the Web Server

This is the important part. We will launch it in web server mode to access it from your smartphone.

First, prevent your Mac from sleeping so it can run for long periods. Use the caffeinate command.

# Prevent sleep in the background
caffeinate &

Next, launch the OpenCode server. By specifying 0.0.0.0, you allow access from external sources.

# Port is arbitrary (e.g., 4096)
opencode web --hostname 0.0.0.0 --port 4096

Now the server-side preparation is complete.

2. Smartphone (Client) Operation

Step 1: Installing Tailscale

  1. Install "Tailscale" from the App Store.
  2. Log in with the same account as the Mac.
  3. Turn the VPN "ON".

Step 2: Access via Browser

Open Safari or Chrome and access the following URL:

http://<Home Mac's Tailscale IP>:4096

Example: http://100.xxx.xxx.xxx:4096

Now, the OpenCode screen will appear in your smartphone browser!

All you have to do is send instructions in Japanese (or your preferred language) in the chat box, such as "Fix this bug" or "Add a new feature."

3. If You Don't Have a PC at Home (OCI Always Free)

If you don't have a PC that can stay on at home, take advantage of the Oracle Cloud Infrastructure (OCI) Always Free tier.

  • VM.Standard.A1.Flex (Arm): You can use up to 4 OCPU / 24GB of memory for free.
  • Select Ubuntu or another OS, and install Tailscale and OpenCode using curl as described above, and you will have a free development environment in the cloud.

Summary

  • Ensure a secure route with Tailscale

  • Utilize OpenCode's Web UI and free models

  • Send instructions via smartphone

With this, you can continue development on the train, at a cafe, or even while walking.

It's easier to just do it on a regular computer
The feeling of omnipotence that you can develop anywhere is priceless. Definitely give it a try.

Discussion