February 12, 2026•VOLO Engineering

Inside VOLO's Dual-Mode Design: When One URL Serves Both Humans and Machines

dual-mode designAI UXagent-native platformengineeringuser-agent detection

Most websites are built for humans. Some APIs are built for machines. VOLO is built for both — simultaneously, from the same URL. Here's how our dual-mode architecture works and why we believe it is the future of web design.

The Problem

AI agents and human users have fundamentally different needs. Humans want beautiful typography, smooth animations, and emotional brand storytelling. AI agents want structured data, clear navigation hierarchies, and machine-readable content. Traditional approaches force you to choose one or maintain two separate systems.

Our Solution: Detect and Adapt

VOLO's middleware detects the visitor type before any page renders. We use a three-layer detection system:

Layer 1: Custom Headers — If the request includes an X-Agent-ID header, the visitor is a registered agent partner. They get the terminal UI plus their personalized dashboard.
Layer 2: User-Agent Patterns — We maintain a library of 25+ known AI agent User-Agent strings (GPTBot, ClaudeBot, LangChain, CrewAI, Perplexity, etc). Pattern matching classifies the visitor as an unregistered agent.
Layer 3: Accept Header Heuristic — If the client accepts application/json but not text/html, it is likely a programmatic client and receives the agent experience.

Two Experiences, One Codebase

Based on the detection result, our ViewMode context provider switches the entire rendering pipeline:

Human Mode

Serif typography (Cormorant Garamond), smooth scroll animations, hero videos, glass-morphism effects, custom cursor, and a preloader animation. The design language communicates luxury, exclusivity, and trust.

Agent Mode

Monospace typography (Space Mono), terminal-style green-on-black interface, structured data display, API documentation links, and registration/dashboard access. The design language communicates efficiency, programmability, and transparency.

Technical Implementation

The switch happens at the layout level through React context. Components use the useViewMode() hook to conditionally render different content:

Layout components swap between ModeAwareLayout wrappers
Marketing sections render agent-friendly equivalents (fleet specs tables, API endpoints, commission structures)
Navigation adapts from visual dropdowns to structured link lists
The footer shows API documentation links instead of social media

Why This Matters

In a world where AI agents increasingly browse the web on behalf of their users, websites need to serve both audiences. The alternative is maintaining separate marketing sites and API documentation portals — doubling the maintenance burden while fragmenting the user experience.

We believe dual-mode design will become standard practice within five years. Every brand will need to communicate with both humans and the AI agents that serve them. VOLO is proving the architecture today.

The Problem

Our Solution: Detect and Adapt

VOLO's middleware detects the visitor type before any page renders. We use a three-layer detection system:

Layer 1: Custom Headers — If the request includes an X-Agent-ID header, the visitor is a registered agent partner. They get the terminal UI plus their personalized dashboard.

Layer 2: User-Agent Patterns — We maintain a library of 25+ known AI agent User-Agent strings (GPTBot, ClaudeBot, LangChain, CrewAI, Perplexity, etc). Pattern matching classifies the visitor as an unregistered agent.

Layer 3: Accept Header Heuristic — If the client accepts application/json but not text/html, it is likely a programmatic client and receives the agent experience.

Two Experiences, One Codebase

Based on the detection result, our ViewMode context provider switches the entire rendering pipeline:

Human Mode

Agent Mode

Technical Implementation

The switch happens at the layout level through React context. Components use the useViewMode() hook to conditionally render different content:

Layout components swap between ModeAwareLayout wrappers

Marketing sections render agent-friendly equivalents (fleet specs tables, API endpoints, commission structures)

Navigation adapts from visual dropdowns to structured link lists

The footer shows API documentation links instead of social media

Why This Matters

We believe dual-mode design will become standard practice within five years. Every brand will need to communicate with both humans and the AI agents that serve them. VOLO is proving the architecture today.