概要
Roo Code(Sonnet3.7)を使って簡易的なollamaクライアントアプリを作ったので、作成の流れと費用、設計にあたって感じたポイントを共有していきます。
今回は、RooCodeに指示を出すだけで全くコードを書かずに、たった3時間で公開までこぎつけられました、面白い！！典型的な車輪の再発明ですが、3時間で自分に合った車輪が再発明できるのならば、もはや避けることはないのでは？と思います。
作成したアプリは↓に公開しているので、よかったら試してみてください。簡易アプリなので機能はごくシンプル、WebUI等の方が使いやすいと思いますが、GPU/GPUメモリ使用率が常に表示されているのが特徴です。Windows11の私の環境でしか試していないので、バグがあったらすみません。問題があればissueに投げていただければ、RooCode×Claude（もはや私がではない）が対応します。
モチベーション
ローカルLLMで遊ぶにあたって、ollamaのクライアントとして、WebUIやLMStudioを使っていたんですが、WebUIはなぜか私の環境だと不安定、LMStudioはライセンス上仕事ではフリーで使えないので、今は趣味だからいいけれどいずれ困る。また、どちらのアプリもGPU使用率等をアプリ上で確認できないのがなんだかしっくりこなくて、クライアントアプリを自作したいなぁと思っていました。一々別ウィンドウでnvidia-smiの結果を表示しておくのもダサいですしね…。
通常、こういう時はtkinterでしょぼいアプリを作る（私が作るとなるとGUIはこれになる）のですが、clineやRooCodeを使ったら、javascriptやHTMLの知識が少ない私でも、ブラウザベースで動くクライアントができるのでは？と思って試してみました。
初期設定
最初、何もないところからコードを生成させようとしましたが、仕様書の要件定義なしに勝手にコードを書き始めようとしたりと微妙だったので、からあげさんの以下を参考に環境構築をしました。
フォーマッタ等の設定もしていなかったので一式設定、フォーマッタは普通に便利なのでこれから常用しそうです。
実装開始！！
最初から完璧なものを作ってもらおうとすると破綻しやすい印象を受けていたので、全体を大まかなステップに切り、ステップごとに開発をしていくことにしました。
最初に与えた指示はこんな感じです。すごくシンプル。この指示をもとに要件を定義してステップ１から順にライブラリの導入、実装、デバッグと、あとはほぼオートでコーディングされていきました。
ちなみにバックエンドにはSonnet3.7を使っています。ローカルLLMのPC買ったのになぜ？と思われるかもしれませんが、Quen2.5 Coder 32b等を使うとステップ1すら怪しい挙動だったので諦めました。やはりローカルLLMには荷が重いか・・・。
与えた指示
ollamaのサーバを駆動し、LLMのチャットを行うWEBアプリケーションの作成を行いたいです。 まずは簡単なチャットアプリ（いったものをオウム返しする）ところから開発をはじめ、その後機能を拡張したいと考えています。 以下のステップで開発を進めていきます、まずはステップ１から始めましょう。 ステップ１ ・ブラウザにチャットウィンドウが表示され、いったことをオウム返しする ステップ２ 次に実装したいもの ・ollamaのモデル選択、起動画面の追加と中身の実装 ステップ３ ・ollamaモデルのコンテキスト長パラメータ等、LLMのパラメータを変更できるようにする
最初に出力された仕様書
要件定義書 プロジェクトの目的：ollamaサーバーを利用したLLMチャットWebアプリケーションの開発 機能要件： ステップ1：チャットウィンドウの表示とオウム返し機能 ステップ2：ollamaモデル選択と起動画面 ステップ3：ollamaモデルのコンテキスト長パラメータの変更 非機能要件：使いやすいUI、レスポンス性能 制約条件：Pythonを使用、Webアプリケーションとして実装 設計書 概略設計： バックエンド：Flask（Pythonウェブフレームワーク） フロントエンド：HTML, CSS, JavaScript ollamaとの連携：ollamaのPython API 機能設計： チャットインターフェース モデル選択機能 パラメータ設定機能 クラス構成： アプリケーションクラス ollamaクライアントクラス チャットセッションクラス
各ステップ実装後のデバッグ
RooCodeにほぼすべての権限を与えているので、基本的には各ステップの実装完了までオートで実行してくれるのですが、それでできたものが完璧に動作するかというと、そうでもありませんでした。
GUIを用いた網羅的なデバッグをRooCodeに実行させるには荷が重いため、動作確認に関しては一旦RooCodeを止め、私が触っておかしなところをフィードバックする形で開発を進めたこともあり、基本的に横目で作業を見ながら適宜指示を与えていきました。
反省点
今思うと、まずはバックエンド側の動作をきっちり定義、それぞれが動作することを自動テストでテストしたのちに、フロントエンドのGUIを作成してもらった方が良かったなと反省しています。
そうすれば最後のデバッグ以外は人の手を入れずに開発できたかもしれません。
実際に動かしてみて新しい機能が必要になることも多々ありますが、そういった場合でも、「こういうボタンを作ってこの機能を入れて」という指示ではなく、「こういう機能を動作確認して、そのあとにGUIを作って連接して」と指示した方が効率が良かったです。こうすると最初に機能確認のサンプルコードを作って確認してからGUI作成に移るので出戻りが少ないですね。
実装後の細かな配置等の変更
実装完了後、「文字を入力して送信ボタンを押したら一番下にスクロールしてほしい」「ちょっと配置がイマイチだから矢印ボタンで格納できるようにしてほしい」等々の細かなGUI上の実装の変更指示を出して完了です。
こういう、仕様にない細かな部分の指示が自由にできるのがいいところですね。自分が満足するまでリテイクを繰り返せるのはAIならでは。これを人間にお願いしてしまうと、下請け法違反だといわれて訴えられてしまうので・・・・。
結局、デバッグと仕様変更含めて3時間と30ドルでGithubにあげてあるアプリケーションが構築できました。AIの時給は10ドルでしたね。趣味に使うには安くないですが、人を雇ったことを考えると本当に安い！！
まだ不足部分はありますが、とりあえず最低限のクライアントとして動いているので満足です。正直、私がこれを作れと言われたら、余裕を見て1週間欲しいと言ってしまいそうだなぁと感じました。これは私の技術力不足かもしれませんが。
反省点
ClaudeのAPIが最初Tier1だったこともあり、すぐにレートリミットに引っかかって待機時間が多く出ました。
RooCodeをSonnet3.7ベースで使おうと決めたのならば、Tier2の金額まで、50ドルくらいは最低限入金すべきですね。入金してもどうせすぐに使ってしまうので安心してください。
安定版としての公開準備
最後に、「全体を見直して必須パッケージやドキュメントの更新漏れがないか確認して、デバッグモードはオフにして」と指示を出して、ドキュメントを整備してもらったら完成です。
また、最初にからあげさんのテンプレートをそのまま使ったので、作成者がからあげさんになっているのに最後に気づいて修正しました。結構盲点、危ない危ない・・・・。テンプレートは今回の反省を生かして自分なりにカスタマイズして、プライベートに置いておいた方がよさそうですね。
仕様書も最初はシンプルだったものが、最後は結構しっかりと書かれています。私は最後の方の細かな修正は仕様書から漏れがち、反省。
github.com
まとめと感想
RooCode×Sonnet3.7を使って、簡易的なollamaクライアントを作り、Githubに公開するまでを紹介しました。
所要時間は3時間と30ドル。やればできるのは何となく想像できるけど、実装方法を勉強するのは面倒だな・・・くらいの位置にあるアプリケーションであれば、サクッと作ってくれると思うので皆さんもぜひ試してみてください。
逆に、作り方の検討がつかないってアプリは正直難しいんじゃないかなと思いました。LLMは使う側の知識にある程度制限されるのか・・・、何でもやってくれるからと言って勉強をおろそかにしちゃだめですね。
（知見）
・使えるのであればオンラインの最高性能のAPIを使った方がストレスは少ない、ローカルLLMはネットワーク環境がないところやAPIの利用が許可されていない場所で使おう
・何もないところから指示を出すのは大変なので、生成前に何かしらベースとなるサンプルがあると便利
・実装は機能→GUIの順で実装させると手戻りが少ない、2回に分けた方が結局安くなる
・Sonnet3.7のAPIを使うなら、初回から50ドル程度課金してTier2になるべし
・概要だけでもいろいろなライブラリを勉強しておくと、LLMでコーディングするときに役に立つかも
