NRI OpenStandiaAdvent Calendar 2024

もうSEはいらない??生成AIでアプリを作るOpenHands(旧OpenDevin)

Last updated at 2024-12-18Posted at 2024-12-18

はじめに

皆さん Devin はご存じでしょうか。

DevinはAIスタートアップのCognitionが2024年3月に発表しました。
Devinは自律型AIソフトウェアエンジニアと紹介されていて、Copilotによるコーディングのサポートなどとは異なり、コードを書き、実行し、テストすることができます。他にもいろいろなことができるみたいです。

そんなDevinが先日、2024年12月10日に一般公開されました。さっそく触ってみようと思ったのですが、エンジニアリングチーム向けに月額500ドルからのプランしかなかったので断念しました。。

ただ！
Devinを参考にした OpenHands というOSSを見つけました。元々OpenDevinという名前だったみたいです。
OSSなのでDevinほど充実した機能はないのかもしれないですが、コンセプトは同じですしUIもDevinにかなり似ているということで今回はOpenHandsを触ってみることにしました。

TL;DR

たった3行、OpenHandsに指示するだけで以下のアプリが完成しました。

Reactでかんばんボードアプリを構築してください。
TODOデータは'dummyjson.com/todos'から取得します。
Tanstack QueryとJotaiを使用します。

↓

OpenHandsとは

Githubでは以下のように説明されています。

OpenHands（旧OpenDevin）へようこそ！OpenHandsはAIを搭載したソフトウェア開発エージェントのプラットフォームです。
OpenHands のエージェントは人間の開発者ができることなら何でもできます: コードの修正、コマンドの実行、ウェブのブラウズ、API の呼び出し、そしてそう、StackOverflow からのコードスニペットのコピーさえも。

まさにDevinのOSSクローンのようです。

2024年12月17日時点でのStarの推移です。2024年3月13日に初回コミットがされてから約9ヶ月で38.7kまでStar数を伸ばしており、注目度の高さがうかがえます。

触ってみる

環境構築

コンテナをPullします。


$ docker pull docker.all-hands.dev/all-hands-ai/runtime:0.15-nikolaik
0.15-nikolaik: Pulling from all-hands-ai/runtime
82312fccb35f: Pull complete 
4ac722d9cf93: Pull complete 
261351ed796d: Pull complete 
a9d319298afc: Pull complete 
1a9c4439d5b5: Pull complete 
f675b592de6b: Pull complete 
6b4631a7a0ae: Pull complete 
0ea9bd0f6d2b: Pull complete 
4f4fb700ef54: Pull complete 
774ff1d4afc1: Pull complete 
c10c733cfd1c: Pull complete 
9b554b014bc1: Pull complete 
4e94ebe749fa: Pull complete 
08f729034c82: Pull complete 
0d2ee62b44be: Pull complete 
d977b57caeaf: Pull complete 
3b2d1c39c7a7: Pull complete 
0928cd372245: Pull complete 
4b949c4d0369: Pull complete 
9ac583f2da92: Pull complete 
9a695fc0fcc4: Pull complete 
81f453121873: Pull complete 
35b332df4b6f: Pull complete 
4751d6beecac: Pull complete 
Digest: sha256:ce57b36cf491d403c98c0602642465f6edfbc83922ab9c75b34484aa374195a0
Status: Downloaded newer image for docker.all-hands.dev/all-hands-ai/runtime:0.15-nikolaik
docker.all-hands.dev/all-hands-ai/runtime:0.15-nikolaik

コンテナを起動します。

docker run -it --rm --pull=always \
    -e SANDBOX_RUNTIME_CONTAINER_IMAGE=docker.all-hands.dev/all-hands-ai/runtime:0.15-nikolaik \
    -e LOG_ALL_EVENTS=true \
    -v /var/run/docker.sock:/var/run/docker.sock \
    -p 3000:3000 \
    --add-host host.docker.internal:host-gateway \
    --name openhands-app \
    docker.all-hands.dev/all-hands-ai/openhands:0.15
0.15: Pulling from all-hands-ai/openhands
24c63b8dcb66: Pull complete 
e7a4e3413405: Pull complete 
bde8cdf335c3: Pull complete 
ebf1025c057d: Pull complete 
878f5f58be89: Pull complete 
a61bfcb65899: Pull complete 
c2910453af43: Pull complete 
5672ea600d47: Pull complete 
853283e29f1f: Pull complete 
32a47e4538ca: Pull complete 
79fe26f19c46: Pull complete 
d3a900da481a: Pull complete 
eb6a91c8c36b: Pull complete 
2bd584afe430: Pull complete 
2f18c959e0e9: Pull complete 
fa1922e857ed: Pull complete 
08ed80a5d812: Pull complete 
e8f4ef90b847: Pull complete 
4f4fb700ef54: Pull complete 
b97f0db850cb: Pull complete 
afa551501423: Pull complete 
2bb36158ef45: Pull complete 
299c3fe5d0f9: Pull complete 
120e720153d7: Pull complete 
3be3b6f77c80: Pull complete 
0c3887533732: Pull complete 
813c24b74def: Pull complete 
9f66eb91bac3: Pull complete 
Digest: sha256:b84abd00ba65a453f2fff0889fb14dd6172b1ad0944026608cab8bc32ebe8930
Status: Downloaded newer image for docker.all-hands.dev/all-hands-ai/openhands:0.15
Starting OpenHands...
Running OpenHands as root
INFO:     Started server process [13]
INFO:     Waiting for application startup.
INFO:     Application startup complete.
INFO:     Uvicorn running on http://0.0.0.0:3000 (Press CTRL+C to quit)

localhost:3000で画面が起動します。

AI Providerの設定をします。

Githubに以下のような記載があったので、今回はAnthropic's Claude 3.5 Sonnetを設定しました。

Finally, you'll need a model provider and API key. Anthropic's Claude 3.5 Sonnet (anthropic/claude-3-5-sonnet-20241022) works best, but you have many options.

設定するとこんな画面になります。プロンプト入れて送信すると開発画面に遷移します。

これで環境構築、設定は完了です。

Reactのかんばんボードを作ってみる

Reactのかんばんボードアプリを作ってみたいと思います。
かんばんに表示するデータはDummyJSONというインターネット上に公開されたREST APIから取得することにします。
https://dummyjson.com/docs/todos#todos-all

以下のような質問をしました。

Please build a kanban board app using React.
Fetch the TODO data from 'dummyjson.com/todos'.
Use Tanstack Query and Jotai.

翻訳

Reactでかんばんボードアプリを構築してください。
TODOデータは'dummyjson.com/todos'から取得します。
Tanstack QueryとJotaiを使用します。

最初のプロンプトを送信すると以下のような画面になります。

以降、以下のように自動でアプリが作られていきました。(Google翻訳でページごと翻訳しています。)

コマンドを実行して失敗したらトラブルシュートしてコマンドを再実行したりしています。

これ以降のチャットのキャプチャ長いのでしまっておきます。

最終的にこんなアプリが完成しました。

Githubにプッシュします。環境変数にトークンを設定済みです。

ここもチャットのキャプチャ長いのでしまっておきます。

以下のリポジトリに無事プッシュできました。

その他の機能

触ってみる、で触らなかった機能を紹介していきます。

プロンプトのカスタマイズ

リポジトリ固有のコンテキストとガイドラインを定義して、より効果的に動作するようカスタマイズできます。
.openhands_instructionsファイルに以下のような定義をします。

.openhands_instructions

# リポジトリ名
Repository: MyProject

# リポジトリの説明
Description: A web application for task management

# ディレクトリ構造
Directory Structure:
- src/: Main application code
- tests/: Test files
- docs/: Documentation

# セットアップ手順
Setup:
- Run `npm install` to install dependencies
- Use `npm run dev` for development
- Run `npm test` for testing

# コーディングルールなどのガイドライン
Guidelines:
- Follow ESLint configuration
- Write tests for all new features
- Use TypeScript for new code

マイクロエージェント

マイクロエージェントは、特定のシナリオに特化した動作と知識を提供するコンポーネントです。

openhands/agenthub/codeact_agent/micro/配下に格納したMarkdownファイルがエージェントとして利用されます。
このファイルには以下を定義します。

どんなユースケースに対処するか
どんな独自の機能や知識が必要か
アクティブにするトリガーとなる単語
制約やルール

以下はDocker関連のエージェント用のファイル(docker.md)です。

openhands/agenthub/codeact_agent/micro/docker.md

---
name: docker
agent: CodeActAgent
triggers:
- docker
- container
---

You are responsible for Docker container management and Dockerfile creation.

Key responsibilities:
1. Create and modify Dockerfiles
2. Manage container lifecycle
3. Handle Docker Compose configurations

Guidelines:
- Always use official base images when possible
- Include necessary security considerations
- Follow Docker best practices for layer optimization

Examples:
1. Creating a Dockerfile:
   ```dockerfile
   FROM node:18-alpine
   WORKDIR /app
   COPY package*.json ./
   RUN npm install
   COPY . .
   CMD ["npm", "start"]

CLIモード・Headlessモード

触ってみるの画面による操作はGUIモードでした。
それ以外にもCLIモードとHeadlessモードがあります。
CLIモードは対話型のCLI、Headlessモードは非対話型のCLIのようです。

OpenHandsのアーキテクチャ

以下にOpenHandsのアーキテクチャが記載されています。

ロードマップ

ここでOpenHandsのロードマップを見られます。

できたばかりのOSSですがかなりきちんと運営されているようなので、今後も期待できそうです。

まとめ

今回は自律型AIソフトウェアエンジニアDevinのOSSクローン、OpenHandsについて調べてみました。
今回作ったようなレベルのサンプルアプリであれば十分OpenHandsで作ることができると思いました。例えばプロトタイプをビジネスサイド寄りのエンジニアがさくっと作るなど利用できるシーンは現時点でもあるかもしれないです。あとはより大規模でプロダクションレベルのアプリ開発でどこまでできるのかも今後検証してみたいと思いました。開発も活発ですし、今後の動向も注視していきたいと思います。

最後に、これは良いことだと思いますがAIによってSEに求められるスキルや領域は変わっていく、というか狭くなっていくと思います。OpenHandsに触れたことでそれを実感することができました。
そうは言っても明日全ての仕事がなくなるわけではないですし、私たちエンジニアはこういった技術を常にキャッチアップし、働き方やスキルアップの方向性を修正し続けることが大切だなと思いました。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up