NexusTrace AI

Inspiration

Autonomous AI agents are shifting from passive chat assistants to independent engineers capable of modifying source code repositories and manipulating system environments via the Model Context Protocol (MCP). However, this autonomy creates a dangerous visibility crisis. Because agent reasoning, tool calls, and codebase patches occur silently in background terminals, engineering teams cannot monitor or verify their actions in real time. This lack of transparency destroys organizational trust.

We were inspired to bridge this trust gap by building NexusTrace AI—a futuristic, space-conscious developer cockpit that transforms invisible OpenTelemetry data streams into an interactive visual narrative. We wanted to move past text-dense log files and replace them with a responsive, human-governed security matrix where developers can watch, audit, and approve agent behaviors dynamically.

What it does

NexusTrace AI is a multi-tier observability platform and live security firewall designed to manage autonomous agent workflows. The application leads technical operators through a seamless, 3-page narrative sequence:

The Cinematic Landing Page: Features a minimalist layout explaining the platform's core architecture. It uses an elegant 3D isometric dashboard element that flattens dynamically when the workspace is entered.

The Repository Gateway: Allows developers to input target repository configurations and telemetry credentials. Triggering the dashboard activates an organic frame-masked video transition featuring our white-and-gold robot asset throwing a page ball directly into the camera lens, creating a seamless flash mask.

The Obsidian Visualizer Console: An inverted dark-mode control room (#06080D) managing an active, stateful WebSocket data pipeline.

Inside the visualizer cockpit, a custom interactive node graph tracks the agent across 7 functional nodes (GitLab, Log Parser, Gemini 1.5 Pro, MCP File Reader, Code Patcher, Arize Tracer, and Pipeline Runner). Kinetic SVG particles race along vector corridors to represent live tool-calling metrics. If the agent tries to alter a file, our Human-in-the-Loop Intercept Gate locks the network thread, forcing the agent to wait until a human operator reviews the diff output and clicks "Approve Operation" to release the pipeline.

How we built it

The project is engineered as a high-performance, event-driven full-stack ecosystem:Frontend UI Architecture: Developed as a single parent React SPA bootstrapped with Vite and optimized via Tailwind CSS. View synchronization and page slide-outs are orchestrated using Framer Motion, while layout camera morphing is run via GSAP.SVG Particle Telemetry Engine: Built entirely out of raw SVGs to ensure lightning-fast browser performance. Kinetic particles stream along complex line layouts utilizing hardware-accelerated offset-path and offset-distance variables.Orchestration Backend: Powered by an asynchronous Python FastAPI application handling stateful, persistent WebSocket connections.Foundation Core: Utilizes the official Google Gen AI / Vertex AI SDK powered by Gemini 1.5 Pro to perform deep multi-file codebase diagnostics and tool selection.Observability Stack: Configured a self-hosted local Arize Phoenix server to automatically capture OpenTelemetry (OTEL) tracking spans, prompt context, and token distribution weights on port 6006.To scale particle velocities accurately relative to backend performance metrics, path velocity ($v_p$) is calculated dynamically using this structural layout equation:$$v_p = \kappa \cdot \left( \frac{T_{\text{input}} + \gamma \cdot T_{\text{output}}}{\Delta t_{\text{latency}}} \right)$$Where $T_{\text{input}}$ represents prompt token density, $T_{\text{output}}$ represents model generation output tokens, $\Delta t_{\text{latency}}$ is the exact tracking latency in milliseconds, and $\kappa, \gamma$ serve as custom performance scaling coefficients.

Challenges we ran into

One of our biggest hurdles was a major asynchronous hydration conflict when initializing the telemetry backend. We encountered a system-breaking AttributeError: module 'phoenix' has no attribute 'launch' error during server boot. By auditing the Arize Phoenix SDK changes, we discovered the underlying initialization method had changed, which we resolved by patching the loader to px.launch_app().

We also faced strict rendering bottlenecks when managing the transitions between light-themed setup views and our inverted dark visualizer console. Switching these heavy graphical layouts instantly caused browser micro-stutters. We solved this by designing a custom Flash Transition Framework inside App.jsx. By timing our React conditional rendering states to swap at the exact frame millisecond where the preloaded robot video animation becomes a solid white canvas mask, the new DOM trees mount perfectly hidden, delivering a lag-free visual handoff.

Accomplishments that we're proud of

Zero-Lag Core Pipeline: Successfully orchestrated a persistent, stateful WebSocket architecture that pushes raw background JSON agent traces directly into an animated vector UI canvas at a steady 60 FPS.

The Human-In-The-Loop Firewall: Built an authentic, secure network interception wrapper that pauses cyclic asynchronous loops on the backend until a human verification signature string is passed back across the network socket.

Text-to-Video Integration: Designed, structured, and applied pixel-perfect video frame alignment rules so that our generated AI character assets seamlessly blend with static frontend design tokens.

What we learned

We learned how to leverage the open Model Context Protocol (MCP) standard to build structured, composable bridges between large language models and operating system tools. We also mastered the integration of OpenTelemetry standards using Arize Phoenix, proving how complex, unorganized machine reasoning logs can be normalized into beautiful, human-readable visual telemetry metrics.

What's next for NexusTrace AI

We plan to expand NexusTrace AI from tracking a single agent workflow to monitoring Multi-Agent Swarm Architectures. This includes designing a 3D layered canvas layout to visualize concurrent agent communications, conflict resolution steps, and shared vector memory layers. We also want to integrate automated static application security testing (SAST) hooks directly into the code patch drawer to verify that the agent's generated repairs never accidentally introduce compliance vulnerabilities before reaching the human gate.

Built With

• api
• core-languages:-python
• css3-package.json]-frontend-libraries:-react
• framer-motion
• gemini-1.5-pro
• gemini-python-sdk-observability-&-tools:-arize-phoenix-(opentelemetry-tracking-suite)
• gitlab
• gsap-(greensock-animation-platform)
• html5
• javascript-(es6+)
• model-context-protocol-(mcp)
• rest
• tailwind-css-package.json
• uvicorn
• vite
• websockets-ai-infrastructure:-google-cloud-vertex-ai
• what-to-use-instead:-state-driven-vector-&-particle-animations]-backend-framework:-fastapi