Implementing Agentic Knowledge Graphs using the A2UI Framework

An Agentic Knowledge Graph is a dynamic, AI-generated visualization where the nodes and relationships are not pre-defined in a database, but are instead constructed in real-time by an autonomous agent to represent its internal reasoning, explain complex dependencies, and respond to user exploration. Here by I present a novel way in which A2UI framework was extended to support agentic knowledge graph visualization using Cytoscape.js. Unlike traditional static knowledge graphs, these are dynamic, agent-generated visualizations created in real-time based on user interactions and AI agent reasoning.

https://vishalmysore.github.io/simplea2ui/

What Makes These "Agentic"?

These knowledge graphs are fundamentally different from traditional static visualizations:

1. Agent-Generated: AI agents dynamically create graphs in real-time based on user queries, not pre-built visualizations
2. Dynamic Adaptation: Graphs update and evolve as conversations progress through dataModelUpdate messages
3. Context-Aware: Agents choose layouts, styling, and data selection tailored to the specific request context
4. Interactive Control: User interactions (clicks, zooms) trigger userAction events that agents respond to with updated visualizations

This "agentic" qualifier distinguishes these living, AI-controlled visualizations from static database graphs or pre-built diagrams.

What is A2UI?

A2UI (Agent-to-UI) is a protocol that allows AI agents to dynamically generate user interfaces by sending JSON messages that describe UI components and data. The framework supports both built-in components and custom extensions.

Architecture

Custom Component Implementation

A2UI custom components extend the DynamicComponent base class and integrate with Angular's component system:

export class KnowledgeGraphComponent extends DynamicComponent<KnowledgeGraphNode> 
  implements OnInit, OnDestroy {
  // Component implementation
}

Key Components

1. Component Registration (app.config.ts)

   provideA2UI({
     catalog: {
       ...DEFAULT_CATALOG,
       KnowledgeGraph: () => import('./knowledge-graph.component')
         .then(m => m.KnowledgeGraphComponent)
     }
   })

1. Component Implementation (knowledge-graph.component.ts)

   • Extends DynamicComponent<KnowledgeGraphNode>
   • Integrates Cytoscape.js for graph visualization
   • Handles A2UI data unpacking
   • Manages graph lifecycle

2. Visualization Library

   • Cytoscape.js: A graph theory library for visualization and analysis
   • Supports multiple layout algorithms (grid, cose, circle, etc.)
   • Interactive pan, zoom, and node selection

Data Format

A2UI Protocol Structure

Knowledge graph data is transmitted using A2UI's standard message format:

[
  {
    "surfaceUpdate": {
      "surfaceId": "kg-test",
      "components": [{
        "id": "kg1",
        "component": {
          "KnowledgeGraph": {
            "title": "My Knowledge Graph",
            "layout": "cose",
            "data": { "path": "/graphData" }
          }
        }
      }]
    }
  },
  {
    "dataModelUpdate": {
      "surfaceId": "kg-test",
      "contents": [{
        "key": "graphData",
        "valueArray": [
          {
            "key": "0",
            "valueMap": [
              {"key": "id", "valueString": "node1"},
              {"key": "label", "valueString": "Node 1"}
            ]
          },
          {
            "key": "1",
            "valueMap": [
              {"key": "source", "valueString": "node1"},
              {"key": "target", "valueString": "node2"},
              {"key": "label", "valueString": "connects"}
            ]
          }
        ]
      }]
    }
  },
  {
    "beginRendering": {
      "root": "kg1",
      "surfaceId": "kg-test"
    }
  }
]

Message Sequence

1. surfaceUpdate: Declares the KnowledgeGraph component and its properties
2. dataModelUpdate: Provides the graph data (nodes and edges)
3. beginRendering: Triggers the rendering

Data Model

Graph Data Structure

The component accepts an array of items where each item represents either a node or an edge:

Node (has id or name):

{
  "id": "person1",
  "label": "John Doe"
}

Edge (has source and target):

{
  "source": "person1",
  "target": "city1",
  "label": "lives in"
}

A2UI Data Wrapping

A2UI wraps primitive values in special structures:

• valueString: String values
• valueNumber: Numeric values
• valueBoolean: Boolean values
• valueArray: Arrays (represented as objects with numeric keys)
• valueMap: Maps/objects

Critical Implementation Detail: A2UI's valueArray unpacks to an object with numeric keys:

// What you send:
["item1", "item2"]

// What the component receives:
{"0": "item1", "1": "item2"}

The component handles this by detecting numeric keys and converting to an array:

const keys = Object.keys(data);
if (keys.every(k => !isNaN(Number(k)))) {
  items = Object.values(data);
}

Component Properties

Property	Type	Default	Description
title	string	-	Graph title displayed above the visualization
layout	string	"grid"	Layout algorithm (grid, cose, circle, breadthfirst, etc.)
data	object	-	Graph data (nodes and edges) via path binding

Supported Layouts

• grid: Arranges nodes in a grid
• cose: Force-directed layout (good for general graphs)
• circle: Arranges nodes in a circle
• breadthfirst: Hierarchical layout
• And more (see Cytoscape.js layouts)

Benefits of Agentic Knowledge Graphs

1. Real-Time Agent Generation

• AI agents dynamically construct graphs based on user queries
• No pre-built visualizations needed
• Graphs are created on-the-fly from agent reasoning
• Tailored to specific user context and conversation state

2. Living, Adaptive Visualizations

• Graphs update as conversations progress
• Agents send dataModelUpdate messages to modify existing graphs
• Add/remove nodes and edges based on new information
• Evolve graph structure based on user interactions

3. Context-Aware Presentation

• Agents select appropriate layouts (hierarchical, force-directed, circular)
• Styling and labeling customized to data type and user intent
• Graph complexity adjusted based on user expertise level
• Focus on relevant subgraphs for specific queries

4. Interactive Agent Feedback Loop

• User clicks on nodes/edges trigger userAction events
• Agents respond by providing details, expanding subgraphs, or pivoting focus
• Pan/zoom interactions can trigger dynamic data loading
• Bidirectional communication between user and agent through graph

5. Semantic Data Visualization

• Visualize ontologies, knowledge bases, and semantic networks
• Show relationships between entities clearly
• Interactive exploration of complex data structures

2. AI Agent Integration

• AI agents can dynamically generate graph visualizations
• No client-side code changes needed to display new graphs
• Agent sends JSON, client renders the graph

3. Interactive Exploration

• Pan and zoom to explore large graphs
• Click nodes/edges for details
• Multiple layout algorithms for different use cases

4. Flexible Data Model

• Supports any graph structure (directed, undirected, cyclic, acyclic)
• Handles nodes with arbitrary properties
• Edges can have labels and properties

5. Developer Experience

• Clean separation of data and presentation
• Reusable component for all knowledge graph needs
• Standard A2UI protocol integration

Use Cases

Ontology Visualization

Display OWL/RDF ontologies with classes, properties, and instances:

Person ──type──> Class
John ──type──> Person
John ──livesIn──> NewYork
NewYork ──type──> City

Knowledge Base Exploration

Navigate entity relationships from knowledge graphs:

Product ──soldBy──> Company
Company ──locatedIn──> Country
Product ──hasCategory──> Category

System Architecture

Visualize microservices, dependencies, and infrastructure:

Frontend ──calls──> API Gateway
API Gateway ──routes──> UserService
UserService ──reads──> Database

Business Applications: Route Maps & User Journeys

The agentic knowledge graph extension provides powerful capabilities for visualizing dynamic routes and user journeys across multiple business domains. These applications leverage the agent's ability to generate context-aware visualizations in real-time.

1. Logistics & Supply Chain Optimization

Dynamic Route Visualization

• AI agents generate interactive route maps showing optimal delivery paths
• Warehouse connections and distribution networks with real-time updates
• Multi-stop routing with cost and time optimization

Real-time Route Updates

• Routes dynamically update based on traffic, weather, or inventory changes via dataModelUpdate messages
• Visual indicators for delays, route changes, and delivery status
• Agent responds to changing conditions by recalculating and updating the graph

Cost Reduction Benefits

• Visualize alternative routes to compare fuel costs and delivery times
• Optimize delivery sequences to reduce total distance traveled
• Identify inefficient patterns and bottlenecks in the distribution network

Example Use Case: A logistics optimization agent analyzes current orders, generates optimal routes considering traffic and delivery windows, then displays them as an interactive graph. As conditions change (traffic jam, new urgent order), the agent updates the visualization, allowing dispatchers to see and approve route modifications in real-time.

2. Customer Journey Analytics

Interactive Funnel Visualization

• Map customer touchpoints from awareness through purchase
• Node-edge structure represents stage transitions
• Agent-generated graphs adapt based on segment, timeframe, or campaign

Behavioral Insights

• Agents highlight drop-off points with visual emphasis (color, size)
• Identify successful conversion paths with distinct styling
• Segment analysis shows different journey patterns for user cohorts

Marketing ROI Optimization

• Visualize campaign impact on customer flows
• Compare journey paths before/after marketing initiatives
• Identify which touchpoints drive highest conversions

Example Use Case: A marketing analytics agent tracks users through an e-commerce site, generating journey maps showing common paths to purchase. When a marketer selects a specific campaign, the agent updates the graph to highlight affected journeys and display conversion rate changes.

3. User Experience (UX) Design

Navigation Flow Mapping

• Display app or website user journeys with interaction paths
• Decision points visualized as branching nodes
• Failed or abandoned paths shown with distinct styling

A/B Testing Visualization

• Compare different user flows side-by-side
• Agents generate split graphs showing variant performance metrics
• Interactive exploration of user behavior differences

Pain Point Identification

• Highlight screens with high abandonment rates
• Agent analyzes interaction patterns and surfaces usability issues
• Click frequency and time-on-screen overlaid on flow diagrams

Example Use Case: A UX research agent monitors user sessions, generates flow diagrams showing navigation patterns, and highlights screens with high exit rates. Designers click nodes to see detailed analytics for specific interactions.

4. Transportation & Mobility

Transit Networks

• Visualize public transportation routes, connections, and transfers
• Accessibility mapping for different mobility needs
• Schedule visualization with time-based updates

Ride-sharing Optimization

• Display driver-passenger matching patterns
• Route efficiency analysis and optimization suggestions
• Demand hotspots and coverage gap identification

Infrastructure Planning

• Map traffic flow and identify congestion points
• Urban planning visualization for proposed new routes
• Impact analysis for infrastructure changes

Example Use Case: A transit planning agent generates network maps showing current routes, then simulates proposed changes. City planners interact with the graph to explore coverage impacts and identify underserved neighborhoods.

Technical Advantages for Route & Journey Visualization

The Knowledge Graph Extension provides specific capabilities optimized for these use cases:

1. Geospatial Layout Support

Different layout algorithms suit different visualization needs:

• breadthfirst: Hierarchical journeys (customer funnels, decision trees, org charts)
• cose: Organic route networks (delivery routes, transit systems, neural networks)
• circle: Cyclical patterns (round-trip routes, recurring journeys, process loops)
• grid: Structured flows (process maps, workflow diagrams, matrix layouts)

2. Interactive Exploration

• Pan & Zoom: Navigate large route networks or complex customer journeys
• Click Events: Select route segments or journey stages for detailed information
• Hover Details: Display metrics (time, cost, conversion rate) on mouse-over
• Selection Highlighting: Emphasize specific paths or user segments

3. Dynamic Data Binding

• Path-based binding: {path: "/routeData"} connects visualization to live data
• Real-time updates: Agent sends dataModelUpdate as conditions change
• Partial updates: Modify specific nodes/edges without full graph re-render
• State synchronization: Graph always reflects current system state

4. Multi-layer Visualization

• Overlay data layers: Traffic density, weather conditions, costs on the same map
• Conditional styling: Color-code routes by efficiency, cost, priority, or status
• Temporal views: Show how routes/journeys evolve over time periods
• Comparative analysis: Side-by-side visualization of alternatives or scenarios

Implementation Example: Delivery Route Optimization

[
  {
    "surfaceUpdate": {
      "surfaceId": "route-optimize",
      "components": [{
        "id": "delivery-map",
        "component": {
          "KnowledgeGraph": {
            "title": "Optimized Delivery Routes - Zone A",
            "layout": "cose",
            "data": {"path": "/routeData"}
          }
        }
      }]
    }
  },
  {
    "dataModelUpdate": {
      "surfaceId": "route-optimize",
      "contents": [{
        "key": "routeData",
        "valueArray": [
          {
            "key": "0",
            "valueMap": [
              {"key": "id", "valueString": "warehouse"},
              {"key": "label", "valueString": "Distribution Center"},
              {"key": "type", "valueString": "depot"}
            ]
          },
          {
            "key": "1",
            "valueMap": [
              {"key": "id", "valueString": "stop1"},
              {"key": "label", "valueString": "Customer A (Priority)"},
              {"key": "type", "valueString": "delivery"}
            ]
          },
          {
            "key": "2",
            "valueMap": [
              {"key": "source", "valueString": "warehouse"},
              {"key": "target", "valueString": "stop1"},
              {"key": "label", "valueString": "3.2 km · 12 min"},
              {"key": "cost", "valueNumber": 4.50},
              {"key": "traffic", "valueString": "moderate"}
            ]
          }
        ]
      }]
    }
  },
  {
    "beginRendering": {
      "root": "delivery-map",
      "surfaceId": "route-optimize"
    }
  }
]

Agent Capabilities in this Scenario:

1. Generate initial routes based on delivery constraints (time windows, vehicle capacity, priorities)
2. Monitor traffic conditions and update routes when delays are detected
3. Respond to user clicks on stops by showing detailed delivery information
4. Recalculate and update routes when new orders are added mid-route
5. Highlight cost savings compared to unoptimized routes

Business Value Proposition

These applications demonstrate the technology's cross-domain versatility:

Domain	Key Metric Improved	Agentic Advantage
Logistics	Delivery cost & time	Real-time route optimization based on changing traffic, weather, and priorities
Marketing	Conversion rate	Dynamic journey analysis showing immediate impact of campaigns and initiatives
UX Design	User satisfaction & retention	Instant visualization of navigation patterns, pain points, and A/B test results
Transportation	Network efficiency & coverage	Adaptive planning based on demand patterns, constraints, and simulation scenarios

Key Insight: The same Knowledge Graph component serves all these business needs without custom frontend development. This showcases A2UI's core strength: enabling AI agents to create context-aware, interactive visualizations that adapt to specific business requirements in real-time, reducing development costs and time-to-market for data-driven applications.

Example Usage

Server-Side (AI Agent)

# AI agent generates this JSON message
messages = [
    {
        "surfaceUpdate": {
            "surfaceId": "graph-1",
            "components": [{
                "id": "kg1",
                "component": {
                    "KnowledgeGraph": {
                        "title": "Organization Structure",
                        "layout": "breadthfirst",
                        "data": {"path": "/orgData"}
                    }
                }
            }]
        }
    },
    {
        "dataModelUpdate": {
            "surfaceId": "graph-1",
            "contents": [{
                "key": "orgData",
                "valueArray": [
                    {"key": "0", "valueMap": [
                        {"key": "id", "valueString": "ceo"},
                        {"key": "label", "valueString": "CEO"}
                    ]},
                    {"key": "1", "valueMap": [
                        {"key": "source", "valueString": "ceo"},
                        {"key": "target", "valueString": "cto"},
                        {"key": "label", "valueString": "manages"}
                    ]}
                ]
            }]
        }
    },
    {"beginRendering": {"root": "kg1", "surfaceId": "graph-1"}}
]

Client-Side (Automatic)

The A2UI framework automatically:

1. Parses the messages
2. Loads the KnowledgeGraph component
3. Unpacks the data from A2UI format
4. Renders the interactive graph

Technical Implementation Details

Data Processing Pipeline

1. Receive A2UI Message: Component receives data property with {path: "/graphData"}
2. Resolve Path: Fetch data from A2UI data model using MessageProcessor.getData()
3. Unpack Data: Convert A2UI Map, valueArray, valueMap to JavaScript objects
4. Process Graph Data: Convert to Cytoscape format (nodes and edges arrays)
5. Render: Initialize Cytoscape instance with processed data
6. Apply Layout: Run selected layout algorithm

Key Code Sections

Data Unpacking:

private unpackA2uiData(data: any): any {
  if (data instanceof Map) {
    const obj: any = {};
    data.forEach((value, key) => {
      obj[key] = this.unpackA2uiData(value);
    });
    return obj;
  }
  // Handle valueString, valueArray, etc.
}

Graph Processing:

private processGraphData(data: any): any[] {
  // Convert {0: {}, 1: {}} to arrays
  if (keys.every(k => !isNaN(Number(k)))) {
    items = Object.values(data);
  }

  // Separate nodes and edges
  items.forEach(item => {
    if (item.source && item.target) {
      // It's an edge
    } else {
      // It's a node
    }
  });
}

Future Enhancements

Potential Improvements

1. Graph Editing: Allow users to add/remove nodes and edges
2. Advanced Styling: Support custom node colors, shapes, and sizes
3. Graph Algorithms: Implement path finding, clustering, centrality analysis
4. Export: Save graph as image or data file
5. Performance: Virtual rendering for graphs with 1000+ nodes
6. Animation: Animated transitions between graph states

Integration Opportunities

• Neo4j: Direct integration with Neo4j graph database queries
• SPARQL: Query and visualize RDF/SPARQL results
• GraphQL: Visualize GraphQL schema and query results

Conclusion

The KnowledgeGraph extension demonstrates the power of agentic knowledge graphs - dynamic, AI-controlled visualizations that bridge the gap between AI reasoning and human understanding. Unlike static knowledge graphs that display pre-built data, agentic graphs are:

• Generated on-demand by AI agents based on user queries
• Dynamically updated as conversations evolve
• Contextually optimized for specific user needs
• Interactively responsive to user exploration

By combining:

• A2UI's data protocol (agent-friendly, structured communication)
• Cytoscape.js (powerful graph visualization)
• Angular components (modern web framework)
• Agent-driven control (real-time generation and updates)

...we create adaptive visualizations that are not just displays of data, but active participants in the conversation between users and AI agents. This represents a fundamental shift from static visualization to agentic visualization - where graphs are living artifacts of AI reasoning, continuously shaped by both agent intelligence and user interaction.