OpenHandsの使い方をいろいろと試しているところです。今回は何もない状態のリポジトリから開発ができるかを試してみました。

期待する動き

ここで期待するのは、LovableやBoltのようなアプリケーションのセットアップです。Issueをトリガーに作業させることができるのは知っているので、作りたいアプリの要件などをIssueに書けばできるのではないか？という仮説の元進めます。

事前準備

まずは新しいGitHubリポジトリを作ります。

続いてOpenHandsのドキュメントに従ってGitHub Actionsなどの準備を始めます。GitHub Actionsのファイルをドキュメントからコピーして作成しておきましょう。

name: Resolve Issue with OpenHands

on:
  issues:
    types: [labeled]
  pull_request:
    types: [labeled]
  issue_comment:
    types: [created]
  pull_request_review_comment:
    types: [created]
  pull_request_review:
    types: [submitted]

permissions:
  contents: write
  pull-requests: write
  issues: write

jobs:
  call-openhands-resolver:
    uses: All-Hands-AI/OpenHands/.github/workflows/openhands-resolver.yml@main
    with:
      macro: ${{ vars.OPENHANDS_MACRO || '@openhands-agent' }}
      max_iterations: ${{ fromJson(vars.OPENHANDS_MAX_ITER || 50) }}
      base_container_image: ${{ vars.OPENHANDS_BASE_CONTAINER_IMAGE || '' }}
      LLM_MODEL: ${{ vars.LLM_MODEL || 'anthropic/claude-3-5-sonnet-20241022' }}
      target_branch: ${{ vars.TARGET_BRANCH || 'main' }}
    secrets:
      PAT_TOKEN: ${{ secrets.PAT_TOKEN }}
      PAT_USERNAME: ${{ secrets.PAT_USERNAME }}
      LLM_API_KEY: ${{ secrets.LLM_API_KEY }}
      LLM_BASE_URL: ${{ secrets.LLM_BASE_URL }}

続いて環境変数を設定します。LLM_API_KEYが必須なのでAnthropicのAPIキーを設定しました。

アプリの要件を書いてみる

準備ができたので、作業を開始します。今回はまず、README.mdにアプリの要件を簡単に書き出してみました。

# シンプルなクイズアプリ

このアプリは、日本の都道府県に関する雑学を出題するクイズゲームです。
ランダムに問題が10件出題され、4つの選択肢から回答を選びます。
最後に正解した数と回答にかかった時間を表示します。

## 利用している技術

- React
- Tailwind CSS

続いて「README.mdの内容に従って実装して」というIssueを作り、@openhands-agentにメンションを送ります。これでワークフローが開始されるので、あとは作業内容を監視します。

実行結果: イテレーション数上限に達したため失敗

Actions自体は成功したとでました。ただしPull Requestはありません。

この場合は、Upload output.jsonl as artifactステップをチェックしてデバッグします。

チェックするのはsuccessとresult_explanationそしてerrorの3つです。今回の例では次のように記載されていました。

  "success": false,
  "comment_success": null,
  "result_explanation": "The issue description asks to set up an application according to instructions in a README file, but the only action taken was running a single command to start a server on port 3002. While this command executed successfully (exit code 0), setting up an application typically requires multiple steps like:\n\n1. Repository cloning\n2. Installing dependencies\n3. Configuration setup\n4. Building the application (if required)\n5. Starting the server\n\nThe single command executed (`PORT=3002 npm start`) appears to be just the final step of starting the server, without evidence that the prerequisite setup steps were completed. Without seeing the full setup process executed according to the README instructions, we cannot consider this issue fully resolved. The successful server start alone does not indicate a complete application setup.",
  "error": "RuntimeError: Agent reached maximum iteration in headless mode. Current iteration: 50, max iteration: 50"
}

これをみると、イテレーションの数が設定された上限値である50に到達したことで中断されたことがわかります。API Rate Limitによるリトライなどで試行回数が増えたことが完了できなかった原因かもしれません。

ちなみにタスク内容をみると、Viteでのアプリケーションセットアップに失敗しているところから少し迷走していました。Viteのセットアップ時、リポジトリの中が空である必要がある（？）らしく、そこで失敗したのでCreate React Appを選ぼうとしていました。この辺りはViteの仕様やセットアップ方法の指示を省いた指示側のミスでもありそうです。

やってみて

OpenHands、使い勝手は良いのですが、LLMのRate Limit問題をどうクリアするかにかかってきそうです。AnthropicよりもRate Limitが高いLLM APIを知らないのですが、DeepSeekならあるいは・・・