MCP Agentic Workflow Visualization

MCP エージェント型ワークフローの可視化

スクリーンショット

全画面表示 - アニメーション完了

画像をクリックすると、原寸大で表示できます

アニメーション付きワークフロー

画像をクリックすると、原寸大で表示できます

インタラクティブなラベル - MCP クライアントの拡大表示

画像をクリックすると、原寸大で表示できます

概要

これは、Model Context Protocol（MCP）のエージェント型ワークフローシステムを実演するための 3D 可視化アプリケーションです。このアプリケーションは、ユーザーがマルチエージェントによるドキュメント処理パイプラインをリアルタイムで可視化し、操作できるインタラクティブな 3D 環境を提供します。

ユーザーの設定

希望するコミュニケーションスタイル：シンプルで日常的な言葉遣い。

システムアーキテクチャ

このアプリケーションは、クライアントとサーバーのコンポーネントを明確に分離した、フルスタックの TypeScript アーキテクチャを採用しています。

フロントエンドアーキテクチャ

• フレームワーク：React 18 と TypeScript
• 3D レンダリング：React Three Fiber (@react-three/fiber) と Three.js
• UI コンポーネント：Radix UI プリミティブとカスタム shadcn/ui コンポーネント
• スタイリング：Tailwind CSS とテーマ設定用のカスタム CSS 変数
• 状態管理：クライアント側の状態管理に Zustand を使用
• データ取得：サーバー状態の管理に TanStack Query（React Query）を使用

バックエンドアーキテクチャ

• ランタイム：Express.js サーバーを使用した Node.js
• 開発環境：ホットモジュールリプレースメントと開発サーバーに Vite を使用
• データベース：型安全なデータベース操作に Drizzle ORM を使用した PostgreSQL
• データベースプロバイダー：Neon Database (@neondatabase/serverless)
• セッション管理：PostgreSQL セッションストレージに connect-pg-simple を使用した express-session

主なコンポーネント

3D 可視化システム

• MCPVisualization：可視化全体を統括するメインの 3D シーンコンポーネント
• AgentNode：エージェントの種類に応じた異なる形状を持つ、MCP エージェントの個別の 3D 表現
• DataFlow：エージェント間のデータフローを示すアニメーション付きパーティクルシステム
• CameraControls：移動や操作のためのカスタムカメラコントロール

エージェント管理システム

• エージェントの種類：Coordinator、NLP Processor、Document Analyzer、Summarizer、Knowledge Base、Output Formatter
• ステータス追跡：リアルタイムのステータス更新（アイドル、処理中、完了、エラー）
• 機能マッピング：各エージェントに、定義済みの機能と処理特性があります

ワークフローエンジン

• 状態管理：Zustand ストアを使用した一元的なワークフロー状態管理
• ステップの順序制御：エージェントパイプラインを通じたワークフローステップの順次実行
• 進捗追跡：進捗インジケーターと時間指標をリアルタイムで表示
• エラー処理：エージェントの失敗やワークフローの中断に適切に対処

UI コンポーネント

• WorkflowUI：ワークフローの開始、一時停止、監視を行うコントロールパネル
• AgentInfoPanel：エージェントの詳細情報とステータスを表示
• 進捗インジケーター：ワークフローの進捗とエージェントのステータスを視覚的に表示

データフロー

1. ワークフローの開始：ユーザーが UI からワークフローの開始を指示します
2. ドキュメント処理：サンプルドキュメントの内容をエージェントパイプラインで処理します
3. エージェントの連携：ワークフローコーディネーターがタスクの配分と実行順序を管理します
4. データ変換：各エージェントが、それぞれの専門処理をデータに適用します
5. 結果の集約：処理済みの結果を収集し、出力用に整形します
6. 視覚的なフィードバック：処理状態を反映して、3D 可視化がリアルタイムで更新されます

エージェントパイプラインのフロー

Document Input → Coordinator → NLP Processor → Document Analyzer → Summarizer/Knowledge Base → Output Formatter → Final Result

外部依存関係

コアフレームワークの依存関係

• React エコシステム：React、React DOM、3D レンダリング用の React Three Fiber
• Three.js ライブラリ：3D ヘルパー用の @react-three/drei、エフェクト用の @react-three/postprocessing
• UI フレームワーク：アクセシブルな操作を実現する包括的な Radix UI コンポーネントセット
• スタイリング：ユーティリティファーストなスタイリングを実現する PostCSS 対応の Tailwind CSS

データベースとバックエンド

• データベース：スキーマ管理用の Drizzle ORM を備えた Neon PostgreSQL
• サーバー：セッション管理と CORS に対応した Express.js
• 開発：GLSL シェーダーに対応するカスタムプラグインを備えた Vite

状態とデータの管理

• 状態：リアクティブな状態管理を実現する subscribeWithSelector ミドルウェアを備えた Zustand
• クエリ：サーバー状態の同期に使用する TanStack Query
• バリデーション：実行時の型検証とスキーマ定義に使用する Zod

開発ツール

• TypeScript：クライアントとサーバー全体で完全な型安全性を確保
• ESBuild：本番ビルド用の高速なバンドル
• 開発：エラーオーバーレイに対応したホットモジュールリプレースメント

デプロイ戦略

開発環境

• ランタイム：Node.js 20 ランタイム
• 開発サーバー：ポート 5000 で Express バックエンドと連携する Vite 開発サーバー
• ホットリロード：クライアントとサーバーの両方のコードで完全な HMR に対応
• データベース：コネクションプーリングを備えた Neon PostgreSQL

本番環境へのデプロイ

• ビルドプロセス：Vite でクライアントアセットをビルドし、ESBuild でサーバーコードをバンドル
• アセットの処理：静的アセットを dist/public ディレクトリから配信
• サーバーバンドル：外部パッケージ依存関係を含む単一の ESM バンドル
• データベース：環境ベースの設定を使用する本番 PostgreSQL インスタンス

設定管理

• 環境変数：データベース接続用の DATABASE_URL
• ビルド出力：クライアント（dist/public）とサーバー（dist/index.js）を別々にビルド
• アセットパイプライン：3D アセット用の GLTF、GLB、オーディオファイルに対応

このアプリケーションは最小限の設定でクラウドプラットフォームに簡単にデプロイできるよう設計されており、すべての機能を利用するには PostgreSQL データベースの接続文字列のみが必要です。