Web refactor (#34)

Author: paullewis

.gitignore

@@ -5,3 +5,5 @@ node_modules
 dist
 .env
 .vscode
+__pycache__
+*.pyc

a2a_samples/a2ui_restaurant_finder/agent.py

@@ -55,7 +55,7 @@ def get_processing_message(self) -> str:
 
     def _build_agent(self, use_ui: bool) -> LlmAgent:
         """Builds the LLM agent for the restaurant agent."""
-        LITELLM_MODEL = os.getenv("LITELLM_MODEL", "gemini-2.5-flash")
+        LITELLM_MODEL = os.getenv("LITELLM_MODEL", "gemini/gemini-2.5-flash")
 
         if use_ui:
             # Construct the full prompt with UI instructions, examples, and schema

tsconfig.json

@@ -13,7 +13,7 @@ This is a UI to generate and visualize A2UI responses.
 2. In the `.env` file place your Gemini API Key: `GEMINI_API_KEY=<your key>`.
 3. Install the dependencies: `npm i`
 4. Run the dev server: `npm run dev`
-5. Open http://localhost:5173/editor/ for the Editor or http://localhost:5173/restaurant/ for the A2A UI example (note that this needs an A2A server running)
+5. Open http://localhost:5173/ for the Editor
 
 If you do not have a `.env` file with a GEMINI_API_KEY value set the developer
 server will not start. It will instead provide you with an error message

web/README.md web/editor/README.mdweb/README.md renamed to web/editor/README.md

@@ -14,8 +14,7 @@
  limitations under the License.
  */
 
-import DefaultCatalog from "../src/0.8/catalog/default-catalog.json";
-import { A2UIClientEventMessage } from "../src/0.8/types/client-event";
+import { v0_8 } from "@a2ui/web-lib";
 
 export class A2UIClient {
   #ready: Promise<void> = Promise.resolve();
@@ -29,7 +28,7 @@ export class A2UIClient {
         (async () => {
           await this.#send({
             clientUiCapabilities: {
-              dynamicCatalog: DefaultCatalog,
+              dynamicCatalog: v0_8.Schemas.DefaultCatalog,
             },
           });
           console.log("A2UI Client Handshake");
@@ -62,7 +61,7 @@ export class A2UIClient {
   }
 
   async #send<T extends { role: "model"; parts: Array<{ text: string }> }>(
-    message: A2UIClientEventMessage
+    message: v0_8.Types.A2UIClientEventMessage
   ) {
     const response = await fetch("/a2ui", {
       body: JSON.stringify(message),

web/editor/client.ts

@@ -24,15 +24,11 @@ import {
   HTMLTemplateResult,
 } from "lit";
 import { customElement, query, state } from "lit/decorators.js";
-import { A2UIModelProcessor } from "../src/0.8/data/model-processor";
-import { A2UIProtocolMessage, Theme } from "../src/0.8/types/types";
 import { repeat } from "lit/directives/repeat.js";
 import { SignalWatcher } from "@lit-labs/signals";
 import { provide } from "@lit/context";
-import { themeContext } from "../src/0.8/ui/context/theme";
 import { theme as uiTheme } from "./theme/theme.js";
 import "./ui/ui.js";
-import * as UI from "../src/0.8/ui/ui.js";
 import { classMap } from "lit/directives/class-map.js";
 import { Snackbar } from "./ui/snackbar.js";
 import { ref } from "lit/directives/ref.js";
@@ -43,6 +39,7 @@ import {
   SnackType,
 } from "./types/types.js";
 import { DrawableCanvas } from "./ui/ui.js";
+import { v0_8 } from "@a2ui/web-lib";
 
 type UserMode = "upload" | "sketch";
 type RenderMode = "surfaces" | "messages";
@@ -52,8 +49,8 @@ const RENDER_MODE_KEY = "ui-render-mode";
 
 @customElement("a2ui-layout-editor")
 export class A2UILayoutEditor extends SignalWatcher(LitElement) {
-  @provide({ context: themeContext })
-  accessor theme: Theme = uiTheme;
+  @provide({ context: v0_8.UI.Context.themeContext })
+  accessor theme: v0_8.Types.Theme = uiTheme;
 
   @state()
   accessor #ready = false;
@@ -80,10 +77,10 @@ export class A2UILayoutEditor extends SignalWatcher(LitElement) {
   accessor #drawableCanvas: DrawableCanvas | null = null;
 
   @state()
-  accessor #lastMessages: A2UIProtocolMessage[] | null = null;
+  accessor #lastMessages: v0_8.Types.A2UIProtocolMessage[] | null = null;
 
   static styles = [
-    UI.Styles.all,
+    v0_8.UI.Styles.all,
     css`
       :host {
         display: grid;
@@ -451,7 +448,7 @@ export class A2UILayoutEditor extends SignalWatcher(LitElement) {
   }
   #renderMode: RenderMode = "surfaces";
 
-  #processor = new A2UIModelProcessor();
+  #processor = new v0_8.Data.A2UIModelProcessor();
   #a2uiClient = new A2UIClient();
 
   constructor() {
@@ -469,7 +466,7 @@ export class A2UILayoutEditor extends SignalWatcher(LitElement) {
   async #processRequest(
     image?: HTMLImageElement | null,
     instructions?: string
-  ): Promise<A2UIProtocolMessage[]> {
+  ): Promise<v0_8.Types.A2UIProtocolMessage[]> {
     try {
       this.#requesting = true;
       const response = await this.#a2uiClient.sendMultipart(
@@ -478,8 +475,8 @@ export class A2UILayoutEditor extends SignalWatcher(LitElement) {
       );
 
       const message = JSON.parse(response.parts[0].text) as
-        | A2UIProtocolMessage
-        | A2UIProtocolMessage[];
+        | v0_8.Types.A2UIProtocolMessage
+        | v0_8.Types.A2UIProtocolMessage[];
 
       if (Array.isArray(message)) {
         return message;

web/editor/editor.ts

@@ -17,22 +17,13 @@
 import { IncomingMessage, ServerResponse } from "http";
 import { Plugin, ViteDevServer } from "vite";
 import { GoogleGenAI } from "@google/genai";
-import * as JSONSchema from "jsonschema";
-import ClientEvent from "../schemas/client-event.json";
-import {
-  A2UIClientEventMessage,
-  ClientCapabilitiesDynamic,
-} from "../types/client-event";
+import { v0_8 } from "@a2ui/web-lib";
 import { createA2UIPrompt, createImageParsePrompt } from "./prompts";
-import { isObject } from "../data/guards";
 
 // TODO: Reenable.
-// import A2UIProtocolMessage from "../schemas/a2ui-message.json";
+// import { A2UIProtocolMessage } from "../schemas/a2ui-message.js";
 
-const validator = new JSONSchema.Validator();
-validator.addSchema(ClientEvent);
-
-let catalog: ClientCapabilitiesDynamic | null = null;
+let catalog: v0_8.Types.ClientCapabilitiesDynamic | null = null;
 let ai: GoogleGenAI;
 export const plugin = (): Plugin => {
   if (!("GEMINI_API_KEY" in process.env && process.env.GEMINI_KEY !== "")) {
@@ -58,18 +49,10 @@ export const plugin = (): Plugin => {
 
             req.on("end", async () => {
               try {
-                const payload = JSON.parse(contents) as A2UIClientEventMessage;
+                const payload = JSON.parse(
+                  contents
+                ) as v0_8.Types.A2UIClientEventMessage;
                 if (payload.clientUiCapabilities || payload.userAction) {
-                  const payloadValidation = validator.validate(
-                    payload,
-                    ClientEvent
-                  );
-
-                  if (payloadValidation.errors.length > 0) {
-                    console.warn(payloadValidation);
-                    throw new Error("Invalid payload");
-                  }
-
                   if (payload.clientUiCapabilities) {
                     if ("dynamicCatalog" in payload.clientUiCapabilities) {
                       catalog = payload.clientUiCapabilities.dynamicCatalog;
@@ -101,7 +84,7 @@ export const plugin = (): Plugin => {
                     return;
                   }
 
-                  if (isObject(payload.request)) {
+                  if (v0_8.Data.Guards.isObject(payload.request)) {
                     const request = payload.request as {
                       imageData?: string;
                       instructions: string;
@@ -156,13 +139,16 @@ export const plugin = (): Plugin => {
                       model: "gemini-2.5-flash",
                       contents: prompt,
                       config: {
-                        // TODO: Enable structured output.
                         // responseMimeType: "application/json",
-                        // responseJsonSchema: A2UIProtocolMessage,
-                        systemInstruction: `Please return a valid A2UI Protocol
-                        Message object necessary to build the satisfy the user
-                        request. If no data is provided create some. If there are
-                        any URLs you must make them absolute and begin with a /.
+                        // responseJsonSchema: {
+                        //   type: "array",
+                        //   items: A2UIProtocolMessage,
+                        // },
+                        systemInstruction: `Please return a valid array
+                        necessary to satisfy the user request. If no data is
+                        provided create some. If there are any URLs you must
+                        make them absolute and begin with a /.
+
                         Nothing should ever be loaded from a remote source.
 
                         You are working as part of an AI system, so no chit-chat and

web/src/0.8/middleware/gemini.ts web/editor/middleware/gemini.tsweb/src/0.8/middleware/gemini.ts renamed to web/editor/middleware/gemini.ts

@@ -0,0 +1,18 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+export * as GeminiMiddleware from "./gemini.js";
+export * as ImageFallbackMiddleware from "./image-fallback.js";

web/src/0.8/middleware/image-fallback.ts web/editor/middleware/image-fallback.tsweb/src/0.8/middleware/image-fallback.ts renamed to web/editor/middleware/image-fallback.ts

@@ -14,11 +14,10 @@
  limitations under the License.
  */
 
-import { ClientCapabilitiesDynamic } from "../types/client-event";
-import A2UIProtocolMessage from "../schemas/a2ui-message.json";
+import { v0_8 } from "@a2ui/web-lib";
 
 export function createImageParsePrompt(
-  catalog: ClientCapabilitiesDynamic,
+  catalog: v0_8.Types.ClientCapabilitiesDynamic,
   content: {
     inlineData: {
       mimeType: string;
@@ -64,7 +63,7 @@ export function createImageParsePrompt(
 }
 
 export function createA2UIPrompt(
-  catalog: ClientCapabilitiesDynamic,
+  catalog: v0_8.Types.ClientCapabilitiesDynamic,
   imageDescription: string,
   instructions: string
 ) {
@@ -99,7 +98,7 @@ export function createA2UIPrompt(
       `The user's layout request is: "${combinedInstructions.join('" and "')}"`,
       `The Component Catalog you can use is: ${JSON.stringify(catalog)}`,
       `The A2UI Protocol Message Schema: "${JSON.stringify(
-        A2UIProtocolMessage
+        v0_8.Schemas.A2UIProtocolMessage
       )}"`,
 
       `Please return a valid A2UI Protocol Message object necessary to build the