OKRA

Inspiration

As autonomous AI agents rapidly evolve to execute real-world tasks—reading emails, booking flights, or interacting with financial APIs—we noticed a terrifying security gap. Developers and users are handing these agents raw, unrestricted API keys and credentials. A single prompt injection or hallucination could lead to catastrophic financial or data loss. We built OKRA because the AI era requires a fundamentally new security paradigm: Zero-Trust Identity Vaults.

What it does

OKRA acts as an active middleware firewall between your AI agents and the outside world. Instead of giving an agent a permanent API key, you use OKRA to mint Leased Identity Tokens. These tokens are bound by:

• Financial Budgets: Hard limits on how much an agent can spend (e.g., $500 max).
• Immutable Scopes: Network restrictions that strictly define actions (e.g., allow read_email, block transfer_funds).

If an agent breaches its budget or attempts an unauthorized action, the OKRA Gateway instantly rejects the payload and terminates the lease. To make managing this complex telemetry easy, we integrated a context-aware AI Core Intelligence Chatbot that acts as an elite cyber-analyst, reading live security logs to detect anomalies.

How we built it

We architected OKRA with a decoupled, high-fidelity front-end:

• UI Framework: React 18 & Vite for speed, heavily stylized with Tailwind CSS for a premium "Fintech-Noir" glassmorphic aesthetic.
• 3D Rendering: To visually represent live data flows, we built an endless, procedural background using WebGL, Three.js, and Simplex Noise, orchestrated by Tween.js for cinematic camera routing.
• Persistence & Logic: Custom React Hooks tied to localStorage ensure full state persistence, making the application 100% demo-ready.
• AI Integration: The Core Intelligence Chatbot is powered by Google's Gemini 2.5 Flash API, utilizing dynamic system prompts injected with live vault telemetry.
• Deployment: The entire build was containerized via Docker and securely deployed to Google Cloud Run.

Challenges we ran into

Integrating the Three.js procedural landscape with a heavily layered 2D React UI presented significant z-index and event propagation hurdles. We didn't want the 3D canvas to intercept clicks meant for the dashboard. Additionally, keeping the Google Gemini model strictly grounded strictly to the live metrics of the vault required heavily optimizing our system prompt generation so that the context window accurately reflected localStorage changes in real-time.

Accomplishments that we're proud of

We are incredibly proud of the visual fidelity and user experience. By merging the Framer Motion layout transitions with WebGL camera pans, OKRA feels like a premium, enterprise-grade cybersecurity hub rather than a hackathon prototype. We're also proud that we successfully integrated contextual AI; instead of a generic chatbot, our Gemini integration genuinely acts like a security analyst monitoring your specific vault.

What we learned

We deepened our understanding of Zero-Trust Architectures and how specifically they need to be adapted for non-human (agentic) workflows. On the technical side, bridging the gap between React's component lifecycle and WebGL's continuous render loop (via Three.js) was a massive learning curve but resulted in a stunning interface.

What's next for OKRA

The next evolution for OKRA is moving from a simulated gateway to a live production proxy.

• Backend Expansion: Migrating state from localStorage to a fully distributed PostgreSQL database.
• Live Proxy Routing: Building an actual proxy server in Go or Rust that intercepts real HTTP requests from LangChain/AutoGPT instances and enforces the token logic.
• WebHooks & Alerts: Polishing our external integrations to push real-time threat alerts directly to Slack or Discord.

Built With

• css3
• framer
• gemini
• html5
• javascript
• node.js
• react
• tailwind
• three.js
• tween
• vite