Skip to content

README.md

Latest commit

 

History

History
67 lines (43 loc) · 1.8 KB

README.md

File metadata and controls

67 lines (43 loc) · 1.8 KB

A2UI React Gallery App

This is the reference Gallery Application for the A2UI React renderer. It allows you to explore A2UI samples, inspect the live data model, and step through the message rendering process.

Prerequisites

This application depends on the following local libraries in this repository:

  1. @a2ui/web_core (located in renderers/web_core)
  2. @a2ui/react (located in renderers/react)

Building Dependencies

Before running the gallery app, you must build the local renderer library:

# Navigate to the React renderer library
cd ../..

# Install and build the library
npm install
npm run build

Note: Ensure @a2ui/web_core is also built if you have made changes to the core logic.

Setup and Development

Once the dependencies are built, you can start the gallery app from the parent directory:

# Navigate to the React renderer directory
cd renderers/react

# Start the gallery app (Vite)
npm run demo

Building for Production

To create a production build of the gallery app, run the following from the parent directory:

# Navigate to the React renderer directory
cd renderers/react

npm run build:demo

Running Tests

To run the integration tests for the gallery app, run the following from the parent directory:

# Navigate to the React renderer directory
cd renderers/react

npm run test:demo

Gallery Features

  • 3-Column Layout: Left (Sample selection), Center (Live preview & Message stepper), Right (Data model & Action logs).
  • Progressive Stepper: Use the "Advance" buttons next to each JSON message to see how the UI builds up incrementally.
  • Action Logs: View real-time logs of actions triggered by user interactions.
  • Data Model Inspector: Observe how the surface's data model changes as you interact with form fields.