A2UI + Spring Boot Enterprise Integration ( Live Demo )

[vishalmysore]

🎯 Overview

I've built an implementation of A2UI v0.8 using Angular on the frontend and Java with Spring Boot on the backend, powered by the a2ajava framework. This showcase demonstrates how to leverage A2UI to provide dynamic, intelligent user interfaces driven entirely by backend business logic.

The goal: Keep it dead simple while continuously enhancing based on community feedback.

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

Try these queries:

• "Compare Honda and Toyota for me?"
• "What food does Vishal like to eat?"
• "Can you book a restaurant for me? I need to eat food, I am very hungry"

🚀 What Makes This Special

1. Annotation-Driven Architecture

Define agents and actions with simple Java annotations:

@Service
@Agent(groupName = "compareCar", groupDescription = "compare 2 cars")
public class CompareCarService implements A2UIDisplay {
    
    @Action(description = "compare 2 cars")
    public Object compareCar(String car1, String car2) {
        if(isUICallback(callback)) {
            return createComparisonUI(car1, car2, betterCar);
        }
        return betterCar + " is better than " + otherCar;
    }
}

2. Dual-Mode Protocol Support

Same codebase serves both A2UI-enabled clients and plain text clients:

• A2UI Mode: Returns structured component trees with data model bindings
• Text Mode: Returns simple string responses
• Zero Configuration: Automatic detection based on callback type

3. Full A2UI v0.8 Spec Compliance

Implements all key features:

• ✅ TextField with text property data binding
• ✅ Button with context array for parameter extraction
• ✅ Data Model using adjacency list format (key/valueMap/valueString)
• ✅ Multi-step workflows with action chaining
• ✅ Column layouts for component organization

💡 Real-World Use Cases

Use Case 1: Favorite Food Lookup with Form

User asks: "What does Vishal like to eat?"

Backend generates:

1. Text component showing the result
2. TextField for entering another name
3. Button with context binding to submit

User interaction:

1. Fills in new name in TextField
2. Clicks button
3. Button action sends bound data back to backend
4. Process repeats with new results

Use Case 2: Multi-Step Restaurant Booking

User asks: "Book a restaurant for me"

First Action (bookRestaurantReservation):

• Shows form with 7 TextFields (date, time, people, appetizer, entrée, dessert, special requests)
• All bound to data model paths: /reservation/date, /reservation/menu/entree, etc.
• Button context extracts all form values

Second Action (confirmReservation):

• Displays confirmation with all details
• Generates confirmation number
• Offers form to book another restaurant

🛠️ Technical Stack

• Backend: Spring Boot 3.2.4
• A2UI Framework: a2ajava 1.0.0
• Frontend: Angular with A2UI MessageProcessor
• Deployment: HuggingFace Spaces + GitHub Pages
• Language: Java 17+

📐 Architecture Highlights

Data Model Binding (A2UI v0.8)

Our implementation uses the correct adjacency list format:

{
  "dataModelUpdate": {
    "contents": [
      {
        "key": "form",
        "valueMap": [
          { "key": "name", "valueString": "" },
          { "key": "email", "valueString": "" }
        ]
      }
    ],
    "surfaceId": "favorite_food"
  }
}

Button Context Bindings

Buttons specify exactly which data model values to extract:

Map<String, String> contextBindings = new HashMap<>();
contextBindings.put("name", "/form/name");
contextBindings.put("email", "/form/email");

components.add(createButtonComponent(
    "submit_button", 
    "Submit Form", 
    "processForm", 
    contextBindings
));

TextField Component

TextFields use text property (not value) per A2UI v0.8 spec:

{
  "component": {
    "TextField": {
      "label": { "literalString": "Person's Name" },
      "text": { "path": "/form/name" }
    }
  },
  "id": "name_input"
}

🎨 Code Example: Complete Service

@Service
@Agent(groupName = "whatThisPersonFavFood", 
       groupDescription = "Find what food a person likes")
public class SimpleService implements A2UIDisplay {
    
    private ActionCallback callback;
    
    @Action(description = "Get the favourite food of a person")
    public Object whatThisPersonFavFood(String name) {
        String favFood = lookupFavoriteFood(name);
        
        if(callback != null && callback.getType().equals(CallBackType.A2UI.name())) {
            return createFavoriteFoodUI(name, favFood);
        }
        return favFood; // Plain text mode
    }
    
    private Map<String, Object> createFavoriteFoodUI(String name, String favFood) {
        List<Map<String, Object>> components = new ArrayList<>();
        
        // Display result
        components.add(createTextComponent("result", 
            name + "'s favorite food is: " + favFood + " 😋", "body"));
        
        // Form for next query
        components.add(createTextFieldComponent("name_input", 
            "Person's Name", "/form/name"));
        
        // Submit button with context
        Map<String, String> contextBindings = new HashMap<>();
        contextBindings.put("name", "/form/name");
        components.add(createButtonComponent("submit_button", 
            "Find Favorite Food", "whatThisPersonFavFood", contextBindings));
        
        // Initialize data model
        Map<String, Object> dataModel = new HashMap<>();
        dataModel.put("/form/name", "");
        
        return buildA2UIMessageWithData("favorite_food", "root", 
                                        components, dataModel);
    }
}

🏆 Key Achievements

1. Simple & Clear: Straightforward Spring Boot integration with dependency injection
2. Type-Safe: Java type system ensures correct A2UI message structure
3. Reusable: A2UIDisplay utility interface provides helper methods for all services
4. Testable: Clear separation between business logic and UI generation
5. Scalable: Supports complex multi-step workflows with state management
6. Backward Compatible: Same endpoints serve both A2UI and plain text clients

Note: This is an evolving implementation. I'm continuously enhancing it based on community feedback while keeping the core design dead simple.

Book restaurant

Find and compare cars