PRAGMA

💡 Inspiration In modern Security Operations Centers (SOCs), analysts face a severe problem: alert fatigue. With thousands of raw, unstructured indicators of compromise (IOCs) flooding in every hour, the human element becomes the bottleneck.

We were inspired to build PRAGMA—not just as another dashboard, but as a next-generation Cyber Threat Intelligence Engine. We wanted an interface that felt heavily immersive and cinematic, yet provided genuine, enterprise-grade utility by replacing manual threat classification with instantaneous AI reasoning. Our goal was to build the tool we wish we had during a zero-day crisis.

⚙️ How we built it PRAGMA is structured around a high-performance web stack built for real-time data streaming:

Core Framework: We used Next.js (App Router) for robust routing, backend API logic, and secure environment variable handling. AI Intelligence: We deeply integrated the Google Gemini API (gemini-2.5-flash). This serves as the brain of the platform, instantly analyzing raw data (IPs, hashes, texts), extracting MITRE ATT&CK vectors, and generating step-by-step incident response playbooks. Immersive Interface: We utilized Framer Motion for micro-animations alongside Lucide React for crisp iconography. Geospatial Threat Mapping: To visualize the live threat feed, we combined React Three Fiber and D3.js to render an interactive 3D globe plotting source-to-target attacks dynamically. 🚧 Challenges we ran into AI Latency vs. Real-Time Demands: Building a real-time dashboard while waiting on LLM inference is tricky. We developed an advanced caching and fallback mechanism ensuring the UI never blocked on API rate-limits, smoothly transitioning to local mock generation when necessary.

Constraining Generative AI Outputs: Prompt engineering Gemini to act as a strict SOC analyst required enforcing rigid JSON structures. This involved tuning the prompt instructions to guarantee that technical data (like CVE numbers and IPs) were consistently parsable without markdown pollution.

Spherical Coordinate Mapping: Accurately plotting 2D latitude and longitude points onto our 3D globe dynamically required precise mathematical conversions within our render loop. We had to map coordinates ( (\text{lat}, \text{lng}) ) to Cartesian space ( (X, Y, Z) ) using the following transformations:

$$ x = R \cdot \cos(\text{lat}) \cdot \cos(\text{lng}) $$ $$ y = R \cdot \sin(\text{lat}) $$ $$ z = R \cdot \cos(\text{lat}) \cdot \sin(\text{lng}) $$

🏆 Accomplishments that we're proud of High-Fidelity Aesthetics: We successfully built an interface that doesn't feel like a hackathon project; it feels like a multi-million-dollar defense contractor product. The "Playbook Generator": Rather than just telling an analyst an IP is bad, PRAGMA actively outputs an immediate, prioritized Markdown playbook on exactly how to contain the threat. 🧠 What we learned We learned how to bridge the gap between traditional DOM rendering and continuous 3D webGL canvases using React Three Fiber. We figured out how to write hyper-specific system prompts that force LLMs out of their "helpful assistant" persona and into a rigid, highly-technical cybersecurity analyst mode. 🚀 What's next for PRAGMA We plan to take PRAGMA beyond passive monitoring and into Active Remediation. By integrating mocked API webhooks, the next iteration of PRAGMA will allow users to approve an AI-generated playbook and physically trigger firewall rule updates or isolate endpoints directly from the interface.

Built With

• css
• javascript
• next.js
• node.js
• react