Zenn
😽

claude_handsをカスタマイズしてAIエージェントに開発させてみた

に公開
Claude
tech

はじめに

AIアシスタントの進化は、ソフトウェア開発に新たな可能性をもたらしています。特に、AIエージェントとして機能するシステムは、開発者の作業支援だけでなく、特定条件下では実際の開発作業も担えるようになりました。

本記事では、Anthropic社のAIアシスタント「Claude」をベースとした「Claude Hands」をカスタマイズした内容と、ちょっと欲しいけど頑張って作るほどでもないシステムの開発をAIエージェントに委託した結果を共有します。

1：claude_handsの紹介とカスタマイズ

claude_handsとは

claude_handsは、Anthropic社が開発したAIアシスタント「Claude」のMCP機能を活かしながら、manusのようなAIエージェント機能を提供する環境を簡単に構築できるOSSです。
Claude Pro以上でデスクトップが利用できれば、READMEの手順に従うだけでAIエージェント環境が完成します。
また、プロジェクトの指示を自然言語で記載でき、カスタマイズも容易です。

https://github.com/r488it/claude_hands

claude_handsのカスタマイズ

独自のカスタマイズとして以下の機能を追加し、AIエージェントによる開発作業の継続性と環境分離を実現して、より実用的なアプリケーション開発を可能にしました。

  1. プロジェクトごとに専用のデータベースを作成できるよう、DB用のDockerコンテナを分離
  2. 複数のチャットセッションにまたがっても同じプロジェクトの作業を継続できる命名機能

DB用のDockerコンテナの作成

標準のclaude_handsでは以下の1.2のコンテナが立ち上がりますが、今回のカスタマイズでは以下のようにdocker-compose.yamlを追加してdbコンテナを立ち上げ、claude_handsのプロジェクトごとにデータベースを作成・利用するようにしました。

  1. claude_handsコンテナ: AIエージェント本体と開発環境
  2. tavilyコンテナ: 検索MCPとして利用
  3. postgresコンテナ: データベース環境

以下docker-compose.yaml

# Docker Compose構成例（概念図）
services:
  claude-hands:
    container_name: cloudehands
    ...（他の設定は省略）...
    networks:
      - claude-network

  claudepostgres:
    container_name: claudepostgres
    image: postgres:15
    environment:
      POSTGRES_USER: postgres
      POSTGRES_PASSWORD: postgres
    ports:
      - "5432:5432"
    volumes:
      - postgres-data:/var/lib/postgresql/data
    networks:
      - claude-network

volumes:
  postgres-data:

networks:
  claude-network:

この分離構成により、以下のメリットが得られました：

  • データの永続化: コンテナ再起動後もデータが保持される
  • プロジェクト分離: 複数プロジェクトを同時進行する際、データベースレベルで分離可能
  • スケーラビリティ: 必要に応じてデータベースリソースを独立して拡張可能

データベースを分離したことで、プロジェクトごとに専用のデータベースを作成できるようになりました。これを実現するために、プロジェクト初期化プロセスを「プロジェクトの指示」として追加しました：

  1. データベース作成スクリプト: プロジェクト名を元に新規データベースを自動作成
  2. 接続情報の自動設定: 環境変数（.envファイル）に接続情報を設定
  3. マイグレーション管理: Prismaを用いた一貫したマイグレーション管理

例えば以下のようなスクリプトや.envが作成され、プロジェクトがDBコンテナと接続するシステム開発が可能になりました。

#\!/bin/bash
# データベース作成と初期化スクリプト

# PostgreSQLホスト、ユーザー、パスワードの設定
DB_HOST=claudepostgres
DB_PORT=5432
DB_USER=postgres
DB_PASSWORD=postgres
DB_NAME=hoge

# データベース作成
echo "データベース '${DB_NAME}' を作成中..."
PGPASSWORD=$DB_PASSWORD psql -h $DB_HOST -p $DB_PORT -U $DB_USER -c "CREATE DATABASE ${DB_NAME};"

# 接続情報を.envファイルに設定
echo "環境変数を設定中..."
cat > .env << EOF
# データベース設定
DB_HOST=${DB_HOST}
DB_PORT=${DB_PORT}
DB_USER=${DB_USER}
DB_PASSWORD=${DB_PASSWORD}
DB_NAME=${DB_NAME}

# Prisma接続文字列
DATABASE_URL="postgresql://${DB_USER}:${DB_PASSWORD}@${DB_HOST}:${DB_PORT}/${DB_NAME}?schema=public"
EOF

# Prismaマイグレーションを実行
echo "データベースマイグレーションを実行中..."
npx prisma migrate dev --name init

このアプローチにより、各プロジェクトは独自のデータベースを持ち、他のプロジェクトのデータと混在せずに開発を進められるようになりました。

同一作業の継続機能（チャット名の指定）

claude_handsに作業をさせていると、途中で最大文字数を超えて新しいチャットを始める必要が出てきます。この時、前の作業が途中のことが多く、続きから再開して欲しいのですが、初期のプロジェクト指示だと別のプロジェクトとして作成してしまうことが多かったです。

この課題を解決するために、「プロジェクトの指示」に継続作業について以下のように記載しました。

# 作業ディレクトリ
・あなたの作業ルートディレクトリは：/workspace/manus
・"workspace/manus/考えたディレクトリ名"で基本作業をします
・考えたディレクトリについて以下のルールに従ってください
  ・新規作業を依頼されている場合は、作業時依頼内容によく合うワード２つ程度のディレクトリ名を考えて作成してください
  ・同じディレクトリの指定などがある場合は、新規作成でなく既存のディレクトリ内を作業場所として、機能の改善に取り組んでください

既存の機能でREADMEなどが元のディレクトリにあることが多いので、この程度の指示でも参照して作業を続行してくれました。

2：アプリ開発事例

プロジェクト概要

自社で業務効率化ツールを開発しており、その検証として他の業務にどれくらい時間を割けるようになったかを1週間ほどかけて協力してもらいテストしたいというニーズがありました。
ただ、一般的なツールでは入力項目が多く、利用者側の負担になりそうな印象がありました。

今回作成したプロジェクトでは以下の機能を提供するシンプルなシステムです：

  • 複数の法人・職種に対応した業務記録システム
  • タイマー機能による業務時間の記録
  • データの集計・分析機能
  • 管理者向けの設定・運用機能

環境

こちらも「プロジェクトの指示」に指定して、日頃使っているライブラリなどを利用するようにしました。

  • OS: Ubuntu 22.04.5 LTS
  • Node.js: v20.18.0
  • 主要ライブラリ/フレームワーク:
    • TypeScript
    • Next.js
    • Tailwind CSS
    • Shadcn/UI
    • Prisma ORM

開発プロセス

今回はデザインや大枠の仕様部分は別の方に作成いただいていました。
デザインはfigmaからv0を利用して作成したものを共有。
仕様はmdで記載いただいて、claude_handsにそのまま提供しました。

途中いくつか解決できていない問題がありましたが、それらを手動で修正する以外はほぼ指示だけで追加機能や修正に対応してくれ、自分は別の作業をしながらでもアプリケーションを完成させることができました。

3：課題

今回の実装で手動対応したいくつかの部分を紹介します。
現状まだ以下のような課題があり、非エンジニアでも全てお任せできるかというと難しい部分がありました。今後プロンプトを改良することで、そもそも問題が発生しないようにできないか検討したいです。

  • DBとの接続部分
    カスタマイズしたDBコンテナとの接続がうまくいかず、様々な試行錯誤を行っている様子が見られました。ポートやコンテナ名を指示で明示したり、スクリプトを調整することでうまく接続できました。

  • !=のエスケープ問題
    TypeScriptやJavaScriptのコードを生成する際、AIエージェントが比較演算子「!=」を特殊文字としてエスケープしてしまう問題が発生しました。これは特にPrismaを使用したクエリやフィルタリング条件で顕著でした。
    今回は一括変換で対応しましたが、こちらも指示で解決できそうです。
    例えばこんな指示が有効かもしれません（未検証）

# 重要
・\!=、\!==などの比較演算子にエスケープを入れないでください
・エスケープされた演算子が含まれていないかコードを見直してください

  • デプロイ関連
    今回GCPにデプロイしましたが、terraform関連の設定もAIに作成させて、より完全に任せられるようにしたいと考えています。

  • 認証サービス連携
    firebase等と自動で連携できるとより便利になるでしょう。

最後に

claude_handsをカスタマイズし、実際にシステムを開発させた経験から、AIエージェントによる開発は単なる実験ではなく、実用的なアプローチとして確立されつつあることが明らかになりました。

今後の発展方向としては、以下のような展望が考えられます

  1. 開発エコシステムの進化:

    • AIエージェントとの協業を前提とした開発ツールの普及
    • プロンプトエンジニアリングのベストプラクティス確立（テンプレートなど）
    • デザインやドメイン知識を蓄積した特化型AIエージェントの発展
    • ドキュメントの自動生成

  2. ハイブリッド開発モデルの確立:

    • 人間とAIの強みを最大化する開発プロセスの体系化
      • アーキテクチャや非機能・運用などにより焦点があたる
    • 組織文化とAI活用の調和
    • 継続的な改善とフィードバックループの構築
    • 開発コストの大幅削減

  3. イノベーション加速:

    • アイデアから実装までの時間短縮
    • 多様な実験と検証の容易化
    • 新たなビジネスモデルやサービスの創出

最終的に、AIエージェントとの協業はソフトウェア開発の民主化と革新を促進し、より多くの人々がアイデアを形にできる環境を作り出すと期待されます。今回のプロジェクトのような実践的な取り組みを通じて得られた知見を共有し、議論を深めることで、この新しい開発パラダイムの健全な発展に貢献できれば幸いです。

Discussion