MCP Agentic Workflow Visualization

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.