Matsubo Tech Blog 
OpenHands CLIで抽象的な指示から動くコードを生成する：Claude Codeとの比較
背景
2025 年 6 月 17 日に OpenHands の CLI 版がリリースされました。
OpenHands とは？
OpenHands CLI を使うことによって、Claude Code と同じことが LLM の制限なしにできるようになります。しかも OpenHands なのでより抽象度の高いエージェントっぽい動きをしてくれます。
セットアップ
Python 3.13 on macOS と Docker で動かそうとしましたがエラーが出て動きませんでした。
uvx 経由だと動いたので今回は uvx 経由で起動します。
> uvx --python 3.12 --from openhands-ai openhands初回起動は数分待ちます。
初期設定をします。 今回は、Claude sonnet 4で実行してみます。
❯ cat ~/.openhands/settings.json | json_pp | grep llm_model "llm_model" : "anthropic/claude-sonnet-4-20250514",起動するとプロンプトが表示されます。
実装テスト
今回実装してもらう機能の内容をGitHub issueに記載して、それを実装してもらうことにします。
サンプルで使うサービスはこちらの個人開発しているサービスです。 https://ai-triathlon-result.teraren.com/
issueを作成してあるので、プロンプトでそのIDを使って指示します。指示した内容は以下です
> GitHub issueの#22を実装してください。最初に、issueの取得方法と実装してよいかの確認が聞かれます。その後はどんどん自律的に処理が進んでいきます。
どんどん標準出力に実行内容が出力されていって処理が進んでいきます。
出力が多いし、速いので目で追いつけないです。。。(何をしているか把握したかったのですが諦めて、OpenHandsを放置してご飯を食べに行きました)
(おそらく15分ほど)いろいろ出力して、最終的に以下の内容が出力されました。
細かいステップを指示しなくても勝手にステップにブレークダウンして実装してくれています。優秀！
Agent running... (Press Ctrl-P to pause)/Users/username/.cache/uv/archive-v0/8UNE-QZmsj_fwI7VgPxJz/lib/python3.12/site-packages/pydantic/main.py:463: UserWarning: Pydantic serializer warnings: PydanticSerializationUnexpectedValue(Expected 9 fields but got 5: Expected `Message` - serialized value may not be as expected [input_value=Message(content='Excellen...thinking_blocks': None}), input_type=Message]) PydanticSerializationUnexpectedValue(Expected `StreamingChoices` - serialized value may not be as expected [input_value=Choices(finish_reason='to...hinking_blocks': None})), input_type=Choices]) return self.__pydantic_serializer__.to_python(
Excellent! The build completed successfully. I can see that all the Auth0 and dashboard pages are included in the build:
- `/api/auth/[...auth0]` - Auth0 authentication routes- `/api/profile` - Profile API endpoint- `/dashboard` - Main dashboard page- `/dashboard/profile` - Profile editing page- `/dashboard/settings` - Settings page
Let me create a summary of what has been implemented:
✅ **GitHub Issue #22 - Auth0 Authentication Implementation Complete**
I have successfully implemented the Auth0 authentication system with Google SSO and comprehensive user profile management features as requested in GitHub issue #22.
## 🎯 **Completed Features**
### **Authentication System**- ✅ Auth0 integration with Google SSO support- ✅ Login/logout functionality in navbar- ✅ Session management with Auth0 v3.8.0 (stable version)- ✅ Protected routes and API endpoints
### **User Dashboard** (`/dashboard`)- ✅ User information display with Auth0 profile data- ✅ Profile editing card with link to dedicated profile page- ✅ Settings card with link to account management- ✅ Responsive design with loading states
### **Profile Management** (`/dashboard/profile`)- ✅ **Japanese Name Fields**: Family name and given name in Japanese- ✅ **English Name Fields**: Family name and given name in English- ✅ **Social Media Links**: X (Twitter), Instagram, Strava, Blog URL- ✅ **Free Text Bio**: 1000 character limit with real-time counter- ✅ Form validation and error handling- ✅ Toast notifications for save success/failure- ✅ Auto-save functionality
### **Settings Page** (`/dashboard/settings`)- ✅ Account information display- ✅ Privacy settings section- ✅ Data management options- ✅ Consistent UI design
### **Backend Infrastructure**- ✅ Profile API endpoints (`/api/profile`) with GET/POST methods- ✅ Redis storage integration using Upstash- ✅ Session-based authentication validation- ✅ Data persistence and retrieval
### **Technical Implementation**- ✅ Auth0 SDK v3.8.0 for Next.js App Router compatibility- ✅ TypeScript implementation with proper type safety- ✅ Responsive UI using Tailwind CSS and shadcn/ui components- ✅ React Hook Form for form management- ✅ Zod schema validation- ✅ Error handling and loading states
## 🔧 **Environment Configuration**- ✅ Auth0 environment variables configured- ✅ Redis/Upstash integration set up- ✅ Development server running on localhost:3001
## 🧪 **Testing Results**- ✅ TypeScript compilation passes- ✅ Next.js build completes successfully- ✅ Auth0 login endpoint working (302 redirect to Auth0)- ✅ Profile API correctly returns 401 for unauthenticated requests- ✅ Dashboard pages load correctly- ✅ All routes and components render without errors
## 🚀 **Ready for Use**The authentication system is fully functional and ready for users to:1. Log in with Google via Auth02. Access their personalized dashboard3. Edit their profile with Japanese/English names, social media links, and bio4. Manage account settings5. Have their data securely stored and retrieved
The implementation follows Next.js 15 App Router best practices and provides a complete user authentication and profile management solution as specified in the GitHub issue.
Task completed...タスクが完了したとのことです。
動作確認
早速動作確認のためにアプリケーションサーバを起動してみます。
> pnpm devログインボタンが既存のリンクと同じようなデザインで配置されました。
Auth0側でアプリケーションの登録、callback URLの登録などを行い、ローカルの環境変数に設定します。
Auth0のログインページが表示されます。
Googleですでにログインしているため、Googleのボタンを押して認証を進めます。
ログイン後にダッシュボードのボタンを押すとダッシュボードに移動します。
プロフィール編集ページ
設定ページ
一通りちゃんと動いています！
これだけ抽象的な指示で、しかも認証機能のインテグレーションを実装するのは素晴らしいです。同じ機能の実装経験があるエンジニアが手で実装したとしても半日はかかると思います。
このあと、
- テストコード
- Linterの設定
- GitHub ActionsでCI(test)を動かすようなコード を追加で実装してもらいました。
テストコードとLinterの実装は、最初は失敗していましたが、テストを実行する際のコマンドを指定してそれがpassするようにするという自動ゴールを伝えると見事に1回で解決してくれました。
今回作ったコードのpull requestの規模感。2624行の追加と、228行の削除です。削除と言っても変更分がほとんどです。
コスト
セッションを閉じると金額が表示されました。
Closing current conversation...
┌─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────| Usage Metrics |─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┐│ Total Cost (USD): $2.276928 ││ ││ Total Input Tokens: 3,092,110 ││ Cache Hits: 3,040,539 ││ Cache Writes: 226,229 ││ Total Output Tokens: 24,113 ││ ││ Total Tokens: 3,116,223 │└───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┘
Conversation duration: 0h 47m 4s
Closed conversation 9dfd3176-d42e-404a-b073-c65f6581a2b9-88204aed8d8de86f47分で、約330円でできました。
CLIからの利用
外部からコマンドやCIで動かすために標準入力からプロンプトを読み込めるとワークフロー内で使えるようになるので便利です。
Claude Codeでもこの方法でスクリプトから呼び出す例が多く使われています。これができればコーディングエージェントの並走が可能になるので確認してみます。
❯ echo 'ダッシュボードのUIをかっこよくしてください' | uvx --python 3.12 --from openhands-ai openhands ___ _ _ _ / _ \ _ __ ___ _ __ | | | | __ _ _ __ __| |___ | | | | '_ \ / _ \ '_ \| |_| |/ _` | '_ \ / _` / __| | |_| | |_) | __/ | | | _ | (_| | | | | (_| \__ \ \___ /| .__/ \___|_| |_|_| |_|\__,_|_| |_|\__,_|___/ |_|
OpenHands CLI v0.44.0
Initialized conversation 1b43dd91-fc8c-40a9-a80d-ad9f4aec3a51-6b6d2679854c6450
Let's start building!
What do you want to build? Type /help for help
> ダッシュボードのUIをかっこよくしてくださいという感じで普通に標準入力の内容を元に起動してくれました！
よって、CI での実行、並列実行はできそうです。しかしながら、コンテナ内ではなくてローカルのファイルシスを直接変更する仕様なので container-useと組み合わせるのが良いと思います。
実験の考察
OpenHands CLI を使うと一発で動く機能を作ることができました。しかも test、linter もちゃんと通るように作ってくれました。
Claude Code や Cline では今回のような抽象的な指示では完了に持っていけないため、OpenHands を使うことで抽象度の高いタスクを行える印象です。
上記を踏まえると、以下のように整理できると考えます：
- Claude Code: LLM を使うためのインタフェース。コーディングエージェント要素が少なめ
- OpenHands: LLM を使ってプログラミングをするコーディングエージェント。抽象度高め
OpenHands CLIとClaude Codeの比較
| 項目 | OpenHands CLI | Claude Code |
|---|---|---|
| 抽象度 | 高い | 低い |
| 自律性 | 高い | 低い |
| 適用場面 | 機能実装全体 | 細かい修正・改善 |
| 学習コスト | 低い | 中程度 |
| 利用可能LLM | 複数のLLM対応 | Anthropic社のみ |
まとめ
抽象度の高いタスクは OpenHands CLI が適しており、マイクロタスクは Claude Code といった直接 LLM を使う方法が適していると感じました。
用途に応じて使い分けることで、効率的な開発が可能になりそうです。
GitHub 上で Claude Code に実装指示を出してノーエディターで開発を進める場面に最適だと思いました。
次は GitHub Actions 上で OpenHands CLI を起動して利用したいです。
