F5 AI Gateway

Overview

I designed a visual configuration experience for F5 AI Gateway that helps enterprise teams understand LLM traffic without beginning in raw YAML. The work turns routes, policies, profiles, processors, and services into a navigable map while keeping the underlying configuration visible and verifiable.

Make a powerful configuration model usable without obscuring it

F5 AI Gateway routes, protects, and observes generative-AI traffic, but its routes, policies, backends, and processors are configured in YAML or JSON. I needed to help people unfamiliar with that syntax configure complex LLM workflows while preserving the relationships and details technical teams need to trust.

Understanding the system

Start with the YAML mental model

Before proposing an interface, I learned how the Gateway thinks. I built and traced sample configurations to understand how routes, policies, profiles, processors, and services connect across a real LLM workflow.

I then reconstructed those dependencies as a shared concept map: Route → Policy → Profile → Processor → Service. This gave design, engineering, and product a common language for discussing the configuration before I abstracted it into UI.

Design decision: I used the configuration schema—not a generic flowchart—as the source of the visual model.

Progressive simplification

Move from exhaustive detail to a scalable map

My first route-level view made every dependency visible, but it carried too much visual weight for a large deployment. I refined the hierarchy so routes act as entry points, policies and profiles organize the middle layer, processors show operational steps, and services anchor the destinations.

The final direction uses a global map of higher-level components. Users can scan a configuration at scale, then drill into a selected node rather than reading every layer at once.

Design decision: I made overview and inspection complementary, so clarity did not require losing system fidelity.

Navigation and detail

Find the right flow without leaving the map

Large configurations need more than an overview. I designed filtering for routes, processors, and services so users can isolate the part of the system they need to inspect or configure.

Contextual detail panels keep parameters, dependencies, and endpoint information close to the visual flow. A route remains legible as an entry endpoint while its policy relationship and configuration details can be examined in place.

Design decision: I kept search, filtering, and drill-in details within the map to reduce context switching.

Trust and next phase

Let the visual interface stay accountable to code

I treated the map and YAML as two views of the same configuration. Node-level detail, related-code highlighting, live generation, and schema-aware validation help non-technical users work visually while giving technical users a way to verify what the interface represents.

The launched experience centers the map and YAML views. Form controls and a draggable, editable map are next-phase work—not shipped features—and are intended to extend guided editing without breaking that connection to code.

Design decision: I designed every visual shortcut to retain a clear path back to the configuration it represents.

A launch-ready visual layer for complex AI configuration

Launched in June 2025, the experience makes the Gateway’s configuration model easier to approach while keeping its technical structure explicit. It supports a clearer shared understanding across enterprise users and cross-functional teams without reducing the system to a black box.

• Turns YAML relationships into a scalable visual workflow
• Supports focused inspection through filters and detail panels
• Pairs visual guidance with code visibility and validation

Clarity comes from technical fluency

Learning the YAML schema directly was essential to designing a trustworthy abstraction rather than a decorative diagram. The project reinforced that scalable simplification means revealing the right complexity at the right moment, not removing it.