Skip to content

Commit 8586615

Browse files
jacobsimionatojacobsimionato
authored
Add A2UI v0.8 Minimal Catalog and Local Gallery Sample (#755)
1 parent bf2f78f commit 8586615

19 files changed

Lines changed: 2816 additions & 0 deletions

‎samples/client/lit/local_gallery/.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
node_modules
2+
dist
3+
public/specs

‎samples/client/lit/local_gallery/README.md‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
# A2UI Local Gallery (Minimal v0.8)
2+
3+
This is a standalone, agentless web application designed to render the A2UI v0.8 minimal examples directly from static JSON files. It serves as a focused environment for testing renderer subset compatibility and protocol compliance.
4+
5+
## Prerequisites
6+
7+
Before running this gallery, you **must** build the shared A2UI renderers.
8+
9+
### 1. Build Shared Renderers
10+
11+
Navigate to the project root and run:
12+
13+
```bash
14+
# Build Web Core
15+
cd renderers/web_core
16+
npm install
17+
npm run build
18+
19+
# Build Lit Renderer
20+
cd ../lit
21+
npm install
22+
npm run build
23+
```
24+
25+
For more details on building the renderers, see:
26+
- [Web Core README](../../../../renderers/web_core/README.md)
27+
- [Lit Renderer README](../../../../renderers/lit/README.md)
28+
29+
## Getting Started
30+
31+
1. **Navigate to this directory**:
32+
```bash
33+
cd samples/client/lit/local_gallery
34+
```
35+
36+
2. **Install dependencies**:
37+
```bash
38+
npm install
39+
```
40+
41+
3. **Run the development server**:
42+
```bash
43+
npm run dev
44+
```
45+
This command will:
46+
- Sync all JSON examples from `specification/v0_8/json/catalogs/minimal/examples/`.
47+
- Generate a manifest file (`index.json`) for dynamic discovery.
48+
- Start the Vite server at `http://localhost:5173`.
49+
50+
## Architecture
51+
52+
- **Agentless**: Unlike other samples, this does not require a running Python agent. It simulates agent responses locally for interactive components (like the Login Form).
53+
- **Dynamic Loading**: The app automatically discovers and loads *all* `.json` files present in the v0.8 minimal specification folder at build time. To add a new test case, simply drop a JSON file into that specification folder and restart the dev server.
54+
- **Surface Isolation**: Each example is rendered into its own independent `a2ui-surface` with a unique ID derived from the filename.
55+
- **Mock Agent Console**: All user interactions (button clicks, form submissions) are intercepted and logged to a sidebar, demonstrating how the renderer resolves actions and contexts.

‎samples/client/lit/local_gallery/index.html‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
6+
<title>A2UI Local Gallery (Minimal v0.8)</title>
7+
<link rel="preconnect" href="https://fonts.googleapis.com">
8+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9+
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
10+
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet">
11+
<style>
12+
body {
13+
margin: 0;
14+
padding: 0;
15+
font-family: 'Roboto', sans-serif;
16+
background: #0f172a;
17+
color: #f1f5f9;
18+
}
19+
</style>
20+
</head>
21+
<body>
22+
<local-gallery></local-gallery>
23+
<script type="module" src="./src/main.ts"></script>
24+
</body>
25+
</html>

0 commit comments

Comments
 (0)