AI & Automation (vnROM)

Cover image for Setup "vibe coding" cực chill trên macOS với bộ ba OpenCode, OpenSkills và CLIProxyAPI
quynhtruong
quynhtruong

Posted on • Edited on

Setup "vibe coding" cực chill trên macOS với bộ ba OpenCode, OpenSkills và CLIProxyAPI

Hi mọi người 👋

Nếu bạn đang đọc bài viết này, có lẽ bạn cũng giống mình: một dev lỏ tập vibe code, cảm thấy hơi ngộp giữa các tab IDE nặng và những cấu hình môi trường phức tạp đến nhức đầu.

Có một setup mà mình cực tâm đắc gần đây. Đây không chỉ là việc cài đặt công cụ, mà là việc xây dựng một không gian làm việc giúp bạn tìm lại niềm vui thuần khiết khi gõ phím, dùng hết sức của terminal.

Bí mật nằm ở sự kết hợp của ba công cụ mã nguồn mở nhỏ gọn nhưng cực "có võ": OpenCode (AI coding agent cho terminal), OpenSkills (quản lý các kỹ năng cho agent), và CLIProxyAPI (proxy server để xài multiple AI models qua CLI). Hãy cùng mình khám phá xem tại sao combo này lại tạo nên sự khác biệt nhé.


Tại sao lại cần setup này?

Thú thật đi, đã bao giờ bạn chỉ muốn test nhanh một ý tưởng, hay viết một đoạn script nhỏ, nhưng lại mất cả 15 phút để đợi IntelliJ hay Xcode khởi động và index xong project chưa? Cảm giác đó thực sự giết chết mood làm việc.

Trước đây mình cũng vậy, luôn bị quá tải bởi các tool, extension. Nhưng từ khi chuyển sang setup này, mình tìm thấy một trạng thái cân bằng mới:

  1. Code nhanh hơn: Mở terminal, gõ opencode, bắt đầu code. Không đợi load index.
  2. Tập trung hơn: Giao diện TUI tối giản giúp loại bỏ xao nhãng từ UI phức tạp.
  3. Dùng AI hiệu quả: Thay vì mua subscription từng nơi, dùng CLIProxyAPI để tập hợp Gemini, Claude, OpenAI vào một endpoint duy nhất. Nhất là tận dụng được các giới hạn free, tiết kiệm được khá nhiều tiền.
  4. Liền mạch: Gọi AI agent ngay trong terminal để viết code, giải thích, hoặc hỗ trợ tasks phức tạp.

Giới thiệu bộ ba công cụ

Trước khi đi vào phần "vọc vạch" cài đặt, để mình giới thiệu qua các nhân vật chính hôm nay để bạn hiểu tại sao chúng lại hợp nhau đến thế.

1. OpenCode – Coding Agent trên terminal

  • GitHub: https://github.com/sst/opencode
  • Điểm mạnh: OpenCode là một AI coding agent chạy hoàn toàn trên terminal. Nó được xây dựng bởi team SST và được thiết kế để giống Claude Code nhưng mã nguồn mở và không phụ thuộc vào một provider cụ thể nào. Điểm mình yêu thích nhất là:

    • Khởi động ngay lập tức (không cần load IDE)
    • Có thể dùng với OpenAI, Anthropic, Google Gemini, hoặc thậm chí local models
    • Hỗ trợ LSP (Language Server Protocol) built-in
    • Giao diện TUI (Terminal User Interface) siêu sạch sẽ, focus vào lập trình thực tế
  • Tại sao dùng: Nó hoàn hảo cho việc prototyping nhanh (tạo mẫu), code dạo, hoặc những lúc bạn muốn máy tính không phải gồng mình gánh cả một IDE nặng nề. Plus, nó là AI agent thực sự có thể hiểu context và tự động tạo files, chạy commands.

2. OpenSkills – Quản lý "kỹ năng" cho AI Agent

  • GitHub: https://github.com/numman-ali/openskills
  • Điểm mạnh: OpenSkills là công cụ để quản lý các "Skills" từ GitHub repositories và đưa chúng vào bất kỳ AI agent nào. Nó implements đúng định dạng mà Claude Code sử dụng (SKILL.md format). Nó giúp bạn:

    • Install Skills từ marketplace (anthropics/skills) hoặc custom GitHub repos
    • Organize skills trong thư mục .claude/skills/ (hoặc .agent/skills/ nếu dùng multi-agent)
    • Sync tất cả vào file AGENTS.md để agents có thể truy cập
    • Progressive disclosure: chỉ load skill khi cần, không tải hết vào context
  • Tại sao dùng: Kết hợp với OpenCode, nó giúp bạn có sẵn một bộ "công cụ" hoàn chỉnh (PDF manipulation, spreadsheet, code generation patterns, etc). Agent có thể invoke những skill này để xử lý tasks phức tạp một cách structured. Ví dụ: khi user yêu cầu "Extract dữ liệu từ PDF này", agent biết cần invoke skill pdf để làm việc này.

3. CLIProxyAPI – Proxy Unified cho nhiều AI Models

  • GitHub: https://github.com/router-for-me/CLIProxyAPI
  • Điểm mạnh: CLIProxyAPI là proxy server giúp bạn:

    • Dùng OpenAI, Claude, Gemini, Qwen, iFlow models thông qua một endpoint duy nhất (OpenAI-compatible)
    • Load balance giữa multiple accounts của cùng một provider
    • OAuth login cho các models không cần API key
    • Streaming + function calling support đầy đủ
    • Configure dễ dàng, run như một service
  • Tại sao dùng: Thay vì lo lắng về API key từng nơi, subscription nào hết hạn, hay tìm model nào tốt nhất, bạn chỉ cần point OpenCode (hoặc bất kỳ client nào) tới http://localhost:8317 và để CLIProxyAPI routing tới model phù hợp. Nó cũng hỗ trợ quota switching tự động: khi Gemini hết quota, nó tự chuyển sang Claude hay OpenAI.


Hướng dẫn cài đặt chi tiết trên macOS

Bây giờ là phần thú vị nhất: bắt tay vào xây dựng setup. Mình sẽ hướng dẫn từng bước để đảm bảo ai cũng làm được nhé.

Bước 1: Cài đặt công cụ

Mở Terminal lên và chạy lần lượt các lệnh sau:

# 1. Cài đặt OpenCode - AI coding agent cho terminal
brew install opencode

# 2. Cài đặt OpenSkills - Quản lý skills cho agents
npm install -g openskills

# 3. Cài đặt CLIProxyAPI - Proxy server unified cho AI models
brew install cliproxyapi

Enter fullscreen mode Exit fullscreen mode

Lưu ý: Nếu máy bạn chưa có Node.js, cài nó trước:

brew install node
Enter fullscreen mode Exit fullscreen mode

Hoặc nếu bạn chưa có Homebrew, cài Homebrew trước: https://brew.sh

Bước 2: Cấu hình CLIProxyAPI (Giao tiếp với AI Models)

CLIProxyAPI cần biết bạn xài model nào. Có hai cách setup:

Cách A: Dùng OAuth (không cần API key)

Nếu bạn có Gemini, Claude, hoặc OpenAI account, bạn có thể login qua OAuth:

# Login vào Gemini (sẽ mở browser tự động)
./cliproxyapi --login

# Login vào Claude (Anthropic)
./cliproxyapi --claude-login

# Login vào OpenAI (Codex/GPT)
./cliproxyapi --codex-login

Enter fullscreen mode Exit fullscreen mode

Các token sẽ được lưu vào ~/.cli-proxy-api/ tự động.

Cách B: Dùng API Keys (nếu bạn có)

Tạo file config.yaml tại ~/.cli-proxy-api/config.yaml:

port: 8317
auth-dir: "~/.cli-proxy-api"

# Nếu dùng Generative Language API (Gemini)
generative-language-api-key:
  - "AIzaSy..."

# Nếu dùng Claude API
claude-api-key:
  - api-key: "sk-ant-v4-..."

# Nếu dùng OpenAI
codex-api-key:
  - api-key: "sk-..."

Enter fullscreen mode Exit fullscreen mode

Bước 3: Setup OpenSkills (Chuẩn bị "kỹ năng" cho agent)

Tạo một thư mục dự án để chứa skills:

# Tạo thư mục dự án
mkdir ~/my-coding-projects
cd ~/my-coding-projects

# Initialize git (optional nhưng recommended)
git init

# Install skills từ Anthropic marketplace
openskills install anthropics/skills

Enter fullscreen mode Exit fullscreen mode

Lệnh này sẽ show interactive menu để bạn chọn skill nào muốn cài. Sau đó nó sẽ tải vào .claude/skills/.

Sau đó, sync vào file config của agents:

openskills sync
Enter fullscreen mode Exit fullscreen mode

Lệnh này sẽ tạo (hoặc update) file AGENTS.md chứa toàn bộ skills với định dạng <available_skills> mà OpenCode hiểu.

Xem skills đã cài:

openskills list
Enter fullscreen mode Exit fullscreen mode

Quy trình làm việc (workflow) thực tế

Để bạn dễ hình dung, đây là quy trình mà mình dùng mỗi ngày.

1. Khởi động CLIProxyAPI (Background Service)

Mở một terminal tab riêng và chạy:

# Khởi động server
cliproxyapi

# Output:
# Starting CLI Proxy API server on port 8317...
# ✓ Authenticated with Gemini (3 accounts)
# ✓ Authenticated with Claude (1 account)
# Server ready at http://127.0.0.1:8317

Enter fullscreen mode Exit fullscreen mode

Để nó chạy ở background. Bạn có thể để nó chạy suốt ngày (hoặc setup launchd để auto-start khi boot).

2. Mở OpenCode với kết nối đến CLIProxyAPI

Ở tab terminal khác, navigate vào project folder và chạy:

# Vào thư mục dự án
cd ~/my-coding-projects

# Khởi động OpenCode
opencode

Enter fullscreen mode Exit fullscreen mode

OpenCode sẽ mở giao diện TUI ngay tại terminal. Bạn sẽ thấy:

OpenCode - AI Coding Agent

Thiết lập model: OpenCode sẽ tự động detect config của CLIProxyAPI. Nếu bạn muốn thay đổi model, có thể config bằng biến environment:

# Dùng Gemini thông qua proxy
export OPENCODE_MODEL="gemini-2.5-pro"
export OPENCODE_API_URL="http://localhost:8317/v1"

# Hoặc Claude
export OPENCODE_MODEL="claude-3-5-sonnet-20241022"
export OPENCODE_API_URL="http://localhost:8317/v1"

# Rồi chạy
opencode
Enter fullscreen mode Exit fullscreen mode

3. Code với AI Agent

Giờ bạn có thể yêu cầu OpenCode làm việc:

> Create a Node.js API to fetch user data and cache it with Redis

Enter fullscreen mode Exit fullscreen mode

OpenCode sẽ:

  1. Hiểu request của bạn
  2. Tạo files (package.json, server.js, config.js, etc)
  3. Gõ code tự động
  4. Chạy commands (npm install, npm run dev)
  5. Giải thích những gì nó làm

Nếu request phức tạp, OpenCode có thể invoke skills:

> Extract tables from this PDF and convert to CSV

Enter fullscreen mode Exit fullscreen mode

Agent sẽ:

  1. Nhận ra cần dùng pdf skill
  2. Invoke: openskills read pdf để load skill instructions
  3. Follow instructions trong SKILL.md để extract table
  4. Tạo CSV file cho bạn

4. Tương tác với Multiple Agents

OpenCode có 2 built-in agents:

  • build (default) - Full access, có thể edit files, run commands
  • plan (read-only) - Chỉ có thể analyze code, không được edit. Tốt cho exploring unfamiliar codebases

Bạn có thể switch giữa chúng bằng phím Tab.

Ngoài ra, có thể invoke general subagent cho complex searches:

> @general Explain the architecture of this project and identify potential bottlenecks

Enter fullscreen mode Exit fullscreen mode

Script khởi động tiện lợi

Nếu muốn khởi động tất cả một lần, bạn có thể tạo script shell:

# Tạo file: ~/start-dev-session.sh
cat > ~/start-dev-session.sh << 'EOF'
#!/bin/bash

echo "🚀 Starting Terminal Coding Setup..."

# 1. Khởi động CLIProxyAPI ở background
echo "📡 Starting CLIProxyAPI proxy server..."
cliproxyapi > /tmp/cliproxyapi.log 2>&1 &
PROXY_PID=$!
echo "✓ CLIProxyAPI running (PID: $PROXY_PID)"

# 2. Chờ một chút để proxy khởi động
sleep 2

# 3. Khởi động OpenCode
echo "💻 Starting OpenCode..."
opencode

# Khi OpenCode exit, kill proxy server
kill $PROXY_PID 2>/dev/null

echo "👋 Session ended."
EOF

# Cấp quyền thực thi
chmod +x ~/start-dev-session.sh

# Chạy mỗi lần bạn cần
~/start-dev-session.sh

Enter fullscreen mode Exit fullscreen mode

Tại sao setup này gây "nghiện"?

Sau vài tuần sử dụng, mình đúc kết được những giá trị cốt lõi:

  • Tốc độ: Từ ý tưởng → code chạy được chỉ mất vài giây. Không IDE overhead.
  • Focus: TUI interface tối giản không có menu, toolbar, hoặc notification phân tán. Chỉ code.
  • AI Workflow: Agent không chỉ code, nó còn tự động chạy test, giải thích, refactor. Bạn chỉ cần guide.
  • Model Flexibility: CLIProxyAPI cho phép switch giữa models (Gemini → Claude → OpenAI) mà không thay code.
  • Reusable Skills: Thay vì copy-paste code patterns, bạn có sẵn "kỹ năng" có thể reuse qua projects.
  • The Vibe: Code không còn là công việc khô khan. Nó trở thành một conversation giữa bạn và AI, terminal là canvas.

Troubleshooting & Tips

Q: OpenCode không thấy CLIProxyAPI?

A: Kiểm tra CLIProxyAPI chạy trên port 8317:

curl http://localhost:8317/v1/models
Enter fullscreen mode Exit fullscreen mode

Nếu không có response, restart CLIProxyAPI.

Q: Cách xài CLIProxyAPI với local model (Ollama, LLaMA, etc)?

A: CLIProxyAPI chủ yếu support Gemini, Claude, OpenAI. Nếu bạn muốn dùng local model, cần config openai-compatibility:

openai-compatibility:
  - name: "ollama"
    base-url: "http://localhost:11434/v1"
    api-keys:
      - "dummy-key"
    models:
      - name: "llama2"
        alias: "llama2"
Enter fullscreen mode Exit fullscreen mode

Q: Có cách backup skills không?

A: Skills được lưu ở .claude/skills/, bạn có thể commit vào git:

git add .claude/skills/ AGENTS.md
git commit -m "Add project skills"
git push
Enter fullscreen mode Exit fullscreen mode

Sau đó, ở machine khác, chỉ cần openskills sync là nó sẽ load từ AGENTS.md.

Q: OpenCode hỗ trợ SSH/remote không?

A: Có! OpenCode dùng client/server architecture. Bạn có thể:

  • Chạy server ở remote machine
  • Dùng client từ local machine

Xem docs chi tiết tại https://opencode.ai/docs

Q: Có thể sửa file config để kết nối với CLIProxyAPI không?

A: Có! Đây là file mẫu trên macOS /Users/<user>/.config/opencode/opencode.json:

{
  "$schema": "https://opencode.ai/config.json",
  "provider": {
    "openai": {
      "npm": "@ai-sdk/openai-compatible",
      "name": "OpenAI via CLIProxyAPI",
      "options": {
        "baseURL": "http://localhost:8317/v1",
        "apiKey": "sk-cliproxy-apikey"
      },
      "models": {
        "gpt-5.2": {
          "id": "gemini-3-flash",
          "model": "gemini-3-flash",
          "temperature": true
        },
        "gpt-5.2-pro": {
          "id": "gemini-3-pro-preview",
          "model": "gemini-3-pro-preview",
          "temperature": true
        },
        "gpt-5.1-codex-max": {
          "id": "gemini-claude-opus-4-5-thinking",
          "model": "gemini-claude-opus-4-5-thinking",
          "temperature": true
        }
      }
    }
  },

  // model mặc định cho agent build
  "model": "openai/gpt-5.2"
}

Enter fullscreen mode Exit fullscreen mode

Mình tin rằng công cụ không làm nên thợ giỏi, nhưng công cụ tốt sẽ giúp người thợ yêu công việc của mình hơn.

Setup này không đòi hỏi bạn là lập trình viên giỏi. Nó chỉ cần:

  • Thoải mái sử dụng terminal
  • Sẵn sàng thử các tool mã nguồn mở
  • Muốn tìm lại niềm vui code

Hy vọng bài viết này giúp bạn hiểu rõ hơn cách OpenCode + OpenSkills + CLIProxyAPI hoạt động cùng nhau.

Hãy thử cài đặt vào cuối tuần này và chia sẻ trải nghiệm với mình! Gặp khó khăn ở đâu không? Hay có cách cải tiến setup nào hay ho không? Comment bên dưới để chúng ta cùng thảo luận nhé.

Happy Coding & Keep the Vibe

Top comments (0)