Agent Systems · R&D Demos

Graph-RAG with Generative UI

Exploring brand systems as knowledge graphs with AI-driven interfaces

Project Notes
Juan Iturbe

System that models brand guidelines, design systems, and assets as a Neo4j knowledge graph, with Graph-RAG techniques enabling AI agents to intelligently traverse and reason over structured brand knowledge.

Experimental demo of a graph-backed brand system queried and navigated through a generative UI Agent Systems · R&D Demos

Status

Research & Demo

This project is an experimental exploration of how brand systems can be represented, queried, and interacted with using knowledge graphs, Graph-RAG, and generative user interfaces.

Overview

Brand systems are typically fragmented across:

  • Figma files
  • PDFs and slide decks
  • Asset folders
  • Informal team knowledge

This demo explores an alternative approach:

Treat the brand as a structured knowledge graph, and let AI act as the interface.

Instead of static documentation, the system exposes brand knowledge through graph-aware retrieval and a generative UI that adapts responses to context and intent.

Core Idea

The system combines three concepts:

  1. Knowledge Graph as Source of Truth Brand guidelines, design tokens, assets, and rules are modeled as explicit nodes and relationships in Neo4j.

  2. Graph-RAG for Contextual Reasoning Queries traverse the graph to retrieve semantically relevant concepts before any generation happens.

  3. Generative UI as Interface Instead of fixed pages, the UI is partially generated based on:

    • User intent
    • Retrieved graph context
    • Content type (guideline, asset, rule, explanation)

This shifts AI from content generator to contextual interpreter.

Architecture Summary

At a high level, the system is composed of:

  • Ingestion layer Structured brand data (design systems, guidelines, assets) is normalized and written to a Neo4j graph.

  • Knowledge layer (Neo4j) The graph encodes:

    • Concepts (colors, typography, components, rules)
    • Relationships (depends on, allowed with, replaces, part of)
    • Metadata and constraints

  • Graph-RAG layer User queries are resolved by:

    • Traversing the graph
    • Selecting relevant subgraphs
    • Feeding structured context to the LLM

  • Generative UI layer The frontend renders responses dynamically based on the retrieved graph context rather than static templates.

Main Characteristics

Knowledge Modeling for Brands

Shows how brand systems can be expressed as explicit ontologies rather than documents.

Graph-First Retrieval

Retrieval is driven by graph traversal and relationships, not just vector similarity.

Context-Bound Generation

LLM outputs are constrained by graph-derived context, reducing hallucination and ambiguity.

Generative UI Patterns

The UI adapts its structure and content to the type of knowledge being retrieved (rules vs assets vs explanations).

Foundation for Agent Systems

The same graph can be used by:

  • Assistive brand agents
  • Compliance checks
  • Automated reviews
  • Design system enforcement

Technology Stack

  • Neo4j — knowledge graph
  • LangGraph / LangChain — orchestration and retrieval
  • LLMs (OpenAI) — interpretation and generation
  • Next.js / React — generative UI layer
  • TypeScript — system contracts and safety