Claude Codeで自作ワークフローエディタを作ってみた ─ cc-flow-webの実験的アプローチ
はじめに
Claude Codeの「サブエージェント」構成を活用し、OpenAIのAgent Builderのようなワークフロー構築を再現する概念実証（PoC）として、
Webベースの並列実行アプリ「cc-flow-web」を試作しました。
本記事では、
- Claude Codeでのワークフロー表現の設計方針
- 並列実行の仕組みとUI構成
- 実装を通じて見えてきた今後の展望
といった観点から、開発過程を紹介します。
実運用を想定したものではありませんが、Claude Codeの新しい活用例として参考になれば幸いです。
この「cc-flow-web」は以前紹介した「cc-flow-cli」の改善版となります。cc-flow-cliでは順次実行しかできませんでしたが、並列実行にも対応しました。
以前の記事を読んでいない方は、以下をご覧ください。
「cc-flow-web」の使い方
画面
並列実行を実装するにあたり、CLIでは限界に達したため、GUIに移行しました。画面は以下のとおりです。
仕組みはcc-flow-cliと同じく、サブエージェントを呼び出してワークフローを作成します。
フローを作成してみよう
今回はデモとして、仕様駆動開発で設計し、３つのサブエージェントを並列実行して実装してみます。
仕様駆動開発は、参考にさせてもらっているGotaさんの「cc-sdd」を使わせていただきます。
1. cc-sddをインストール
まずは手順通りにcc-sddをインストールします。
npx cc-sdd@latest --lang ja
.claude/commands/kiroにcc-sddのカスタムスラッシュコマンドが作成されます。
2. cc-flow-webを起動する
cc-flow-webを起動します。本来であれば専用のサーバー環境を構築すべきですが、まだ概念実証のため、ローカル環境で簡易的に動作確認を行えるようにしています。以下のコマンドを実行してください。
npx @hiraoku/cc-flow-web
このコマンドにより、ローカルでWebサーバーが起動し、ブラウザからアクセス可能になります。
3. cc-sddのカスタムスラッシュコマンドをサブエージェントに変換する
cc-flow-webにはカスタムスラッシュコマンドをサブエージェントに変換する機能があります。
今回はこの機能を使用して変換を実施します。
ヘッダにある「Converter」のメニューをクリックします。
cc-sddのカスタムスラッシュコマンドが保存されているkiroのディレクトリを選択します。
「convert to agents」ボタンをクリックします。
正常終了すると「conversion successful!」と表示されます。
これで.claude/agentsの中にkiroという名前のディレクトリが作成され、そこにサブエージェントが保存されているはずです。
4. cc-sddのワークフローを作成する
Start Node, End Node, Agent Nodeを以下の画像のように配置してください。
実装部分は本来であれば、「spec-impl」を設定するところですが、serena mcp、similarity-ts、TDDのサブエージェントを用意してそれらを並列実行しています。
Start Nodeをクリックすると、目的が設定できますので、このワークフローの目的を設定するとよいでしょう。また並列実行を実現するParallel Groupノードでも目的が設定できます。適宜設定してください。
5. ワークフローを生成する
ワークフローが作成できたら、「Generate workflow」ボタンを押してください。
.claude/commandsにカスタムスラッシュコマンドが作成されますので、Claude Code でいつものように実行してください。
実行するとワークフローに従って、各サブエージェントが呼び出されるでしょう。
cc-flow-core ─ cc-flowを支える中核ロジック
実際に触れてみると理解できると思うのですが、何も複雑なことはしていません。
設定されたAgentを呼び出すカスタムスラッシュコマンドを生成しているだけなのです。
この生成はcc-flow-coreというモジュールで行っています。このモジュールはプロンプトのテンプレートとシェルスクリプトで構成されており、これらを実行してカスタムスラッシュコマンドを生成する仕組みとなっています。
アーキテクチャの特徴
cc-flow-coreの特徴は、シェルスクリプトを実行基盤としている点です。これにより、CLI、Webエディタなど、異なる環境からでも同じロジックで動作します。実際、cc-flow-coreのメインスクリプトであるcreate-workflow.shを直接呼び出すだけでワークフローを生成できます。
機能を拡張したいときは、cc-flow-coreのテンプレートやシェルスクリプトを改修します。インターフェイスが変わった場合は、cc-flow-cliやcc-flow-webの接続部分を改修する流れとなり、できるだけ柔軟に拡張・改修できる設計になっています。
さらに詳細を知りたい方は、deepwikiをご覧ください。
まとめ
本記事では、Claude Codeのサブエージェント機能を活用したワークフローツール「cc-flow-web」を紹介しました。
cc-flow-webの主な特徴は以下の3点です。
- 並列実行への対応 - 前作のcc-flow-cliから進化し、複数のサブエージェントを同時実行できるようになりました
- 直感的なGUI - ノードベースのビジュアルエディタにより、複雑なワークフローも視覚的に構築できます
- 柔軟な拡張性 - cc-flow-coreを中心とした設計により、カスタムスラッシュコマンドの変換や新しいノードの追加が容易です
OpenAI Agent Builderのような統合環境がClaude Codeにはまだ存在しないからこそ、このような実験的な取り組みに価値があるのではと考えています。PoC段階ではありますが、仕様駆動開発やテスト駆動開発を組み合わせた実践的なワークフローが実現できることを確認できました。
今後は、より多様なノードタイプの追加や、エラーハンドリングの強化、実行結果の可視化などにも取り組めたらと考えています。
もしClaude Codeで複数のサブエージェントを組み合わせた開発フローを試してみたい方は、ぜひcc-flow-webを使ってみてください。
Discussion