OCTO Webクライアントの仕組み：人とAIエージェントの協働

LLMをワークチャットに統合するほとんどの試みは、シンプルなTelegramボットに終始します。ユーザーがスラッシュコマンドを入力し、数秒待つと、標準的な単一ブロックのレスポンスが返ってきます。OCTOプロジェクトの開発者たちは、異なるアプローチを取ることを決意しました。人と一緒にチャットに参加し、完全なデジタル社員として機能するAIエージェントを構築する、オープンなワーク環境を構築しています。

今日はocto-webリポジトリを詳しく見ていきます。これはTypeScriptとReactで書かれたシステムのフロントエンド部分です。

Webとデスクトップの統合コードベース

プロジェクトの主要なアーキテクチャ上の決定は、Web版とデスクトップクライアントの分離を諦めたことです。開発者たちは2つの別々のReactプロジェクトを作成しませんでした。アプリケーション全体はsrc/ディレクトリに存在します。

ブラウザでクライアントを実行する場合は、標準ビルドが動作します。macOS、Windows、またはLinux用のデスクトップ版を構築する場合は、electron/フォルダからの薄いElectronレイヤーを接続します。このレイヤーはオペレーティングシステムとの統合を処理します：システムトレイ、通知、ファイルのドラッグ＆ドロップ、バックグラウンドアップデートです。

このアプローチにより、UIコンポーネントの複製や、2つの異なるインターフェースブランチの維持が不要になります。

AIエージェント操作用インターフェース

通常のチャットはニューラルネットワークの動作特性には適していません。モデルがツールを選択したり推論チェーンを実行したりする場合、従来のメンジューは入力インジケーターしか表示しません。

octo-webでは、インターフェースはエージェントの自律性を念頭に置いてゼロから設計されています（プロジェクト用語ではLobstersと呼ばれ、OpenClawに基づいて動作します）。

レイアウトとコンポーネントに実装されている内容は以下の通りです：

• リアルタイムMarkdownサポート付きストリーミングレスポンスレンダリング
• 呼び出された関数とツールをメッセージ内に直接表示（インラインツールコール）
• 人間と自律型エージェントの入力ステータスと既読ステータスの分離
• ボットとリアルな同僚を即座に区別するためのビジュアルバッジ
• 英語と中国語対応のバイリンガルインターフェース（CI段階でロケールチェックを実行）

プロジェクト構造の構成

リポジトリ内では、すべてが不要な複雑さなしに明確なフォルダに整理されています：

• src/pages/にはメイン画面が含まれます：チャット、チャネルリスト、設定、組織構造
• src/components/にはコンポーネントセットが保存されています：メッセージバブル、入力フィールド、エージェントバッジ、ストリーミングレンダラー
• src/store/はクライアント状態を処理します：認証、下書き、チャネル、エージェントインタラクションステータス
• src/api/にはバックエンドとの通信用のRESTおよびWebSocketクライアントが含まれています
• electron/にはElectron用のエントリポイントが含まれています

クライアントはGoで書かれたocto-serverバックエンドと通信します。リアルタイムメッセージ送信にはWuKongIMエンジンが使用されています。開発者たちはフォークを隠していません：オープンソースのTangSengDaoDaoWebプロジェクトから基本的なフロントエンド構造を取り、AIタスク用に改良しました。

開発用クイックスタート

Webクライアントをローカルで実行するには、Node.jsとpnpmパッケージマネージャーが必要です。

git clone https://github.com/Mininglamp-OSS/octo-web.git
cd octo-web
pnpm install
pnpm dev

デフォルトでは、クライアントはバックエンドがlocalhost:8080で実行されていることを想定しています。別のアドレスに向けるには、.env.exampleに基づいて.env.localファイルを作成し、VITE_API_*に現在の値を指定してください。

デスクトップアプリケーションのビルドは別のコマンドでトリガーされます：

pnpm build        # обычная веб-сборка
pnpm pc:dev       # запуск Electron-клиента
pnpm pc:package   # упаковка приложения под нужную ОС

原則と自律性

プロジェクト開発者はローカルファーストのアイデアに従っています。ユーザーのハードウェア上または企業のネットワーク境界内で実行できるものはすべてそこで実行されるべきです。チャット、ベクトルデータベース、AIエージェントは、サードパーティのクラウドへの обязательнаяバインディングなしでローカルに実行されます。

役割分担へのアプローチはシンプルです：AIは推論とルーティン実行を担当し、人間は方向性を設定し品質を評価します。

リポジトリを見るべき人

プロジェクトは現在GitHubでスター約600件ですが、クリーンなReactとElectronモノレポ構成の例として興味深いです。ワークチャット、社内会社ツール、またはLLM用のインターフェースを実験している場合、ツールコールとメッセージストリーミングのための有用なソリューションがここに見つかります。

プロジェクトはApache 2.0ライセンスで配布されているため、コードを自由に詳細に検討したり、自分のプロジェクトで使用したりできます。