跳到主要內容

Vibe Coding 協作到自建 Dev Agent?從 Claude / Codex 到 OpenHands

過去一年,越來越多工程師開始把 AI 真正帶進工作流程。從一開始用 ChatGPT、Claude 來問語法問題,到後來很多人愛上 Cursor,直接在編輯器裡讓 AI 幫忙改 code、補 test case、甚至自動整理 PR。這樣的開發體驗,已經大大改變了我們寫程式的方式。

更現實的是,在很多企業內部、政府單位、或涉及機密資料的專案裡,其實根本不能直接用 Cursor 或雲端 LLM 工具。 

畢竟這些服務通常會把資料傳到雲端模型做處理,萬一專案裡有未公開的技術、敏感客戶資料,或是受限於法規(像金融、醫療、政府標案),直接用雲端 AI 工具就會踩紅線。 

因此,許多團隊反而更希望「自己架一套 Dev Agent」,可以在內網執行,資料完全掌握在自己手上,該整合的內部工具、該讀的私有 repo、該串的 CI/CD pipeline,全部客製化、安全可控。

這時候,像 OpenHands 這樣的開源 Dev Agent 框架就特別有價值。它的出發點不是單純的 AI 助手,而是讓你能夠打造出一個真的可以跑在自己環境裡、可以理解整個開發流程的 AI 工程師。從建置到部署,從 CLI 操作到瀏覽器查詢,從多檔案編輯到自動測試,全部都能自己完成,甚至還能針對不同專案調整專屬的工作流。

對很多開始探索 AI 協作開發的團隊來說,這是一條 從「AI 幫你寫一段程式」,走向「AI 幫你解決一整個任務」的進化路徑。而且,還是在可控、可自定義、安全的環境裡完成的。

🧩 主要概述

OpenHands 是由 All‑Hands AI 開發的開源「軟體開發代理人平台」,能模仿人類工程師從建立程式、修改程式碼、執行指令,到瀏覽網頁、呼叫 API……等一整套開發流程

它提供雲端(OpenHands Cloud)與本地 Docker 運行版本,用戶能配置 LLM(如 Claude、OpenAI、Gemini…)

📚 核心特性與怎麼使用

代理人的工具能力

支援代碼編輯、命令行、執行環境、網頁瀏覽、API 呼叫—接近人類開發者完整技能。其中 OpenHands Cloud 版本提供 $50 試用額度讓大家方便使用,又或者如果自己本機有 docker 的話,可以自己Local 版本透過 Docker 自架環境。

使用流程

快速上手:啟動 Cloud 或 Docker 映像後,選擇 LLM、輸入 API Key Hello World 教學:打個 Hello Script、調整語法、執行跑測試由簡入繁掌握 agent 運作 。 

https://docs.all-hands.dev/usage/installation

Web 應用建立:從無到有建構完整功能(例如 React 前端 TODO 應用),官方有一系列說明,讓使用者可以快速入門,讓 AI Agent 快速打造出來應用。

整合於現有專案:可新增 route、Action、Component、重構 function 等 ,當然同時也具備了除錯與 TDD 測試驅動:支援生成測試 Testing、診斷 bug 問題、透過迭代過程改進 。 

https://docs.all-hands.dev/usage/getting-started

高度可視化 UI

這部分是我自己覺得最特別的地方,提供的 web ui 介面,包含 chat 對話視窗、檔案異動視圖、終端、VS Code、Jupyter Notebook、Web app 及瀏覽記錄等模組 。

支援多種大型語言模型

可以支援自己建立的大型語言模型端點,同時也支援常見 LLM 模型(推薦使用 Claude-sonnet-4 及 o4-mini、Gemini、OpenHands LM) 

https://docs.all-hands.dev/usage/llms/llms

質化 prompt 精準、範疇限定、提供具體檔案與行號等建議使用法

https://docs.all-hands.dev/usage/prompting/prompting-best-practices

📈 成果與效能

Benchmark:在 SWE‑Bench 等程式開發基準測試中,OpenHands 解決率達 50% 以上 。同時新一代 Versa Agent:最新研究(2025/06/03)指出其多模式瀏覽與檔案操作能力,在三項 benchmark 中平均比同級專用型 agent 高出 9% 成功率 。

在討論技術社群的討論中其實也持續獲得肯定,Reddit 分享 CodeAct 2.1 版本突破 SWE‑Bench 50% 門檻,具里程碑意義 。

實際案例

教學案例:網路上實際有示範用 Docker 啟動、結合 LLM 建立 FastAPI + Jinja 應用,agent 支援編寫、測試與推 Git的流程可提供查看 。

德國大型團隊實測:Senior Developer 實測 Docker + OpenHands + Ollama/OpenAI,協助升級微服務依賴與生成沙盒,但是測試修復與 PR 評論處理上仍有侷限,需人為介入 prompt 調整與回饋。

這段官方影片大家也可以快速了解一下應用的方式,

後記

目前大部分的 coding agent 多屬於封閉的模式,除了深入查看程式碼之外,很難知道在伺服器端或者參數端做了什麼調整,也很難用於較為私密的環境中。

OpenHands 是一個完全開源且正在快速進展的開源 AI 開發代理平台,具高度的工具整合能力與 benchmark 實力,尤其適合需要 自動化程式碼生成、CI/CD 任務與小規模專案初期開發 的使用者。目前仍建議配合人類協作使用,並透過精準 prompt 與逐步迭代強化效果。

🔥 工商服務時間 🔥

本月份將有一場 Vibe Coding 台中實體活動,

歡迎對 AI 工具、Coding Flow 有興趣的朋友們一起來 vibe 一下 🎧💻!

📅 活動資訊 👉 https://codingbear.kktix.cc/events/ai-vibe-coding-2025-06-taichung

這次我們會分享最新 AI 開發模式、實戰 Demo、現場互動 Q&A —— 一起交流、一起玩,現場 vibe 爆棚 🕺!

有興趣的夥伴趕快手刀報名 💥,名額有限!


Vibe Coding 是近來開發圈很火紅的 AI 協作開發模式,結合我們自家 Cympack AI 製造平台,幫助了不少客戶「從想法 → 打樣 → 量產 → 上市」整個新產品流程 🚀。

如果你也有: 

✅ 想開發新產品 

✅ 想做新產品開發、小量客製、快速打樣 

✅ 想了解 AI 協作 + 製造流程怎麼整合

都歡迎來聊聊,我們團隊很樂意協助! 

可以聯絡我,或者來信 

📩 聯絡信箱 👉 service@cympotekc.om 

https://www.cympotek.com/

✨ 讓 AI 幫你加速產品落地。

留言

這個網誌中的熱門文章

[CSS] z-index 在不同瀏覽器繼承問題

今天會討論到這個課題,是因為要實做一個Popup dialog,所以我們希望的結果如下圖。 可是在IE7 卻發生了這樣的情況。 Popup不論怎麼設定z-index都無法浮在最上層,我們看一下html架構發生什麼事情。

[教學] 快快樂樂刪除CodeIgniter index.php

預設的CI網址預設都設定為index.php同一層級,因此所有的程式都必須指定index.php導向才能開始,例如 http://localhost/ci/index.php/welcome/test http://localhost/ci/welcome/test 本文將說明如何將惱人的index.php消除,還你一個漂亮的URL。 設定開始: 接下來說明如何使用rewrite方式將惱人的index.php去除。 rewrite不清楚的人,煩請先自行google 首先要先確定Apache的 mod_rewrite 有 開啟 ,如果沒有開啟請設定好之後重新啟動apache。 接著,在根目錄底下建立一個新檔案,檔名為 .htaccess ,裡面程式碼如下: <IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^(.*)$ index.php/$1 [L] </IfModule> 接著到 application/config/config.php ,開啟檔案修改 $config['index_page'] = ""; 注意: /index.php/$1 要根據你目錄,例如 http://localhost/index.php ,網站根目錄為 /ci/index.php 則要寫成 /ci/index.php/$1 接著至CI目錄下,尋找 config\config.php , 修改一下裡面的檔案,修改如下: $config['index_page'] = ""; 存檔後,如此一來大功告成。 參考資料 官方網站說明

[教學] Mojito 安裝與入門,install mojito for beginner.

mojito ,最近終於從 YDN 對外公開此專案,這個套件主要用於解決前端多重裝置及瀏覽器端的問題,後端服務採取 node.js ,因此使用上必定要先準備以下幾個元素 準備素材 c++ complier git Node.js > 0.4.x NPM > 1.0.x 安裝方式 git clone git://github.com/yahoo/mojito.git cd mojito/source sudo npm install -g . npm install . 以上四個簡單的步驟,就可以把 mojito module 完整安裝到服務器上,接著就可以開始進入 mojito 的世界 使用方式 mojito 提供了完整的 command line 給開發者使用,接著先建立一個基本 hello world 專案,跟著以下步驟完成第一個專案。首先建立一個 mojito application, mojito create app hello cd hello 切換到目錄之後,再接著建立自己的 mojit,這邊的 mojit 就像是一個應用(application)可能會包含許多個獨立網站體,擁有獨立架構的 MVC ,包含內部設定等,詳細資料可以參考官方的 說明 ,建立 mojit mojito create mojit HelloMojit 輸入指令後,會看到顯示結果如下, creating mojit called 'HelloMojit' (using "default" archetype) ✔ mojit: HelloMojit created! ✔ mojito done. 接著修改 application.json 這個 mojit 設定檔案,讓剛才新建立的 hellp application 指定底下有一個 mojit -> HelloMojit ,讓應用可以去執行 mojit controller ,修改如下, [ { "settings": [ "master" ], "appPort": 8666, "specs": { ...