MCP Agentic Workflow Visualization

Screenshots

Full Screen - Animation Complete

Click the image to view full size

Animated Workflow

Click the image to view full size

Interactive Labels - MCP Client Close Up

Click the image to view full size

Overview

This is a 3D visualization application for demonstrating the Model Context Protocol (MCP) agentic workflow system. The application provides an interactive 3D environment where users can visualize and control multi-agent document processing pipelines in real-time.

User Preferences

Preferred communication style: Simple, everyday language.

System Architecture

The application follows a full-stack TypeScript architecture with a clear separation between client and server components:

Frontend Architecture

- Framework: React 18 with TypeScript - 3D Rendering: React Three Fiber (@react-three/fiber) with Three.js - UI Components: Radix UI primitives with custom shadcn/ui components - Styling: Tailwind CSS with custom CSS variables for theming - State Management: Zustand for client-side state management - Data Fetching: TanStack Query (React Query) for server state management

Backend Architecture

- Runtime: Node.js with Express.js server - Development: Vite for hot module replacement and development server - Database: PostgreSQL with Drizzle ORM for type-safe database operations - Database Provider: Neon Database (@neondatabase/serverless) - Session Management: express-session with connect-pg-simple for PostgreSQL session storage

Key Components

3D Visualization System

- MCPVisualization: Main 3D scene component orchestrating the entire visualization - AgentNode: Individual 3D representations of MCP agents with different geometries based on agent type - DataFlow: Animated particle systems showing data flow between agents - CameraControls: Custom camera controls for navigation and interaction

Agent Management System

- Agent Types: Coordinator, NLP Processor, Document Analyzer, Summarizer, Knowledge Base, Output Formatter - Status Tracking: Real-time status updates (idle, processing, complete, error) - Capability Mapping: Each agent has defined capabilities and processing characteristics

Workflow Engine

- State Management: Centralized workflow state using Zustand store - Step Sequencing: Ordered execution of workflow steps through the agent pipeline - Progress Tracking: Real-time progress indicators and timing metrics - Error Handling: Graceful handling of agent failures and workflow interruptions

UI Components

- WorkflowUI: Control panel for starting, pausing, and monitoring workflows - AgentInfoPanel: Detailed agent information and status display - Progress Indicators: Visual feedback for workflow progress and agent status

Data Flow

1. Workflow Initiation: User triggers workflow start through the UI
2. Document Processing: Sample document content is processed through the agent pipeline
3. Agent Coordination: Workflow coordinator manages task distribution and sequencing
4. Data Transformation: Each agent applies its specialized processing to the data
5. Result Aggregation: Processed results are collected and formatted for output
6. Visual Feedback: 3D visualization updates in real-time to reflect processing state

Agent Pipeline Flow

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

External Dependencies

Core Framework Dependencies

- React Ecosystem: React, React DOM, React Three Fiber for 3D rendering - Three.js Libraries: @react-three/drei for 3D helpers, @react-three/postprocessing for effects - UI Framework: Comprehensive Radix UI component set for accessible interactions - Styling: Tailwind CSS with PostCSS for utility-first styling

Database and Backend

- Database: Neon PostgreSQL with Drizzle ORM for schema management - Server: Express.js with session management and CORS support - Development: Vite with custom plugins for GLSL shader support

State and Data Management

- State: Zustand with subscribeWithSelector middleware for reactive state - Queries: TanStack Query for server state synchronization - Validation: Zod for runtime type validation and schema definition

Development Tools

- TypeScript: Full type safety across client and server - ESBuild: Fast bundling for production builds - Development: Hot module replacement with error overlay

Deployment Strategy

Development Environment

- Runtime: Node.js 20 runtime - Development Server: Vite dev server with Express backend on port 5000 - Hot Reloading: Full HMR support for both client and server code - Database: Neon PostgreSQL with connection pooling

Production Deployment

- Build Process: Vite builds client assets, ESBuild bundles server code - Asset Handling: Static assets served from dist/public directory - Server Bundle: Single ESM bundle with external package dependencies - Database: Production PostgreSQL instance with environment-based configuration

Configuration Management

- Environment Variables: DATABASE_URL for database connection - Build Outputs: Separate client (dist/public) and server (dist/index.js) builds - Asset Pipeline: GLTF, GLB, and audio file support for 3D assets

The application is designed to be easily deployable on cloud platforms with minimal configuration, requiring only a PostgreSQL database connection string for full functionality.