refactor: modify details for teaching

Author: manfredsteyer

libs/ag-ui-client/a2ui-schema.ts

@@ -1,6 +1,6 @@
 import type { BoundProperty } from '@a2ui/angular/v0_9';
 import type { Signal, Type } from '@angular/core';
-import { z } from 'zod';
+import { z } from 'zod/v3';
 
 type StripPathBinding<T> = T extends { path: string } ? never : T;
 

libs/ag-ui-client/ag-ui-types.ts

@@ -1,6 +1,7 @@
 import { type InputContentPart, type UserMessage } from '@ag-ui/core';
 import { ResourceRef, Type } from '@angular/core';
 import { z } from 'zod';
+import type { z as z3 } from 'zod/v3';
 
 import { type A2uiCustomCatalogFunction } from './a2ui-schema';
 
@@ -109,7 +110,7 @@ export interface A2uiCustomCatalogComponent {
   name: string;
   description: string;
   component: Type<unknown>;
-  schema: z.ZodTypeAny;
+  schema: z3.ZodTypeAny;
 }
 
 export interface A2uiCustomCatalog {

libs/ag-ui-client/ag-ui-utils/agents.ts

@@ -9,7 +9,7 @@ import {
   type ResourceStreamItem,
   type WritableSignal,
 } from '@angular/core';
-import { z } from 'zod';
+import { zodToJsonSchema } from 'zod-to-json-schema';
 
 import {
   type A2uiCustomCatalog,
@@ -75,7 +75,7 @@ function buildCatalogContext(
   >((acc, entry) => {
     acc[entry.name] = {
       description: entry.description,
-      schema: z.toJSONSchema(entry.schema),
+      schema: zodToJsonSchema(entry.schema),
     };
     return acc;
   }, {});
@@ -86,7 +86,7 @@ function buildCatalogContext(
     acc[fn.name] = {
       description: fn.description,
       returnType: fn.returnType,
-      schema: z.toJSONSchema(fn.schema),
+      schema: zodToJsonSchema(fn.schema),
     };
     return acc;
   }, {});

libs/ag-ui-client/provide-a2ui-catalog.ts

@@ -14,7 +14,6 @@ import {
   InjectionToken,
   makeEnvironmentProviders,
 } from '@angular/core';
-import type { ZodTypeAny } from 'zod';
 
 import { type A2uiCustomCatalogFunction } from './a2ui-schema';
 import {
@@ -49,20 +48,21 @@ function toAngularComponentImplementation(
   return {
     name: entry.name,
     component: entry.component,
-    schema: entry.schema,
-  } as unknown as AngularComponentImplementation;
+    schema: entry.schema as unknown,
+  } as AngularComponentImplementation;
 }
 
 function toFunctionImplementation(
   fn: A2uiCustomCatalogFunction,
 ): FunctionImplementation {
-  return {
+  const implementation: FunctionImplementation = {
     name: fn.name,
     returnType: fn.returnType,
-    schema: fn.schema as unknown as ZodTypeAny,
+    schema: fn.schema as unknown as FunctionImplementation['schema'],
     execute: (args: Record<string, unknown>) =>
       fn.execute(fn.schema.parse(args)),
-  } as unknown as FunctionImplementation;
+  };
+  return implementation;
 }
 
 /**

package-lock.json

@@ -94,7 +94,8 @@
     "quickjs-emscripten": "^0.32.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
-    "zod": "^4.3.5"
+    "zod": "^4.3.5",
+    "zod-to-json-schema": "^3.25.1"
   },
   "devDependencies": {
     "@angular/build": "^21.2.16",

package.json

@@ -7,11 +7,7 @@ import {
   inject,
 } from '@angular/core';
 
-import {
-  createSurfaceMessages,
-  type Passenger,
-  toUpdateMessage,
-} from './passenger-card';
+import { createSurfaceMessages, type Passenger } from './passenger-card';
 
 @Component({
   selector: 'app-root',
@@ -52,12 +48,19 @@ export class App {
           return;
         }
 
-        const passenger = action.context as unknown as Passenger;
+        const passenger = action.context as Passenger;
         this.renderer.processMessages([
-          toUpdateMessage(this.surfaceId, {
-            ...passenger,
-            bonusMiles: passenger.bonusMiles + 300,
-          }),
+          {
+            version: 'v0.9',
+            updateDataModel: {
+              surfaceId: this.surfaceId,
+              path: '/passenger',
+              value: {
+                ...passenger,
+                bonusMiles: passenger.bonusMiles + 300,
+              },
+            },
+          },
         ]);
       },
     );

projects/a2ui-demo/src/app/app.ts

@@ -1,33 +1,7 @@
-import {
-  type AngularComponentImplementation,
-  BASIC_FUNCTIONS,
-  BasicCatalogBase,
-} from '@a2ui/angular/v0_9';
-import { z } from 'zod/v3';
+import { BASIC_FUNCTIONS, BasicCatalogBase } from '@a2ui/angular/v0_9';
 
 import { formatIdImplementation } from './format-id';
-import { MilesProgress } from './miles-progress';
-import { binding } from './utils';
-
-const passengerSchema = z.object({
-  id: z.number(),
-  firstName: z.string(),
-  lastName: z.string(),
-  bonusMiles: z.number(),
-});
-
-const milesProgressSchema = z
-  .object({
-    passenger: binding(passengerSchema).optional(),
-    weight: z.number().optional(),
-  })
-  .strict();
-
-const milesProgressEntry = {
-  name: 'MilesProgress',
-  component: MilesProgress,
-  schema: milesProgressSchema,
-} as unknown as AngularComponentImplementation;
+import { milesProgressEntry } from './miles-progress';
 
 export const customCatalog = new BasicCatalogBase({
   id: 'https://example.com/catalogs/flights42-a2ui-demo',

projects/a2ui-demo/src/app/custom-catalog/custom-catalog.ts

@@ -1,20 +1,24 @@
-import type { FunctionImplementation } from '@a2ui/web_core/v0_9';
-import { z, type ZodTypeAny } from 'zod/v3';
+import {
+  createFunctionImplementation,
+  type FunctionImplementation,
+} from '@a2ui/web_core/v0_9';
+import { z } from 'zod/v3';
 
 const formatIdSchema = z
   .object({
     value: z.number(),
   })
   .strict();
 
-export const formatIdImplementation = {
-  name: 'formatId',
-  returnType: 'string',
-  schema: formatIdSchema as unknown as ZodTypeAny,
-  execute: (args: Record<string, unknown>) => {
-    const { value } = formatIdSchema.parse(args);
+export const formatIdImplementation = createFunctionImplementation(
+  {
+    name: 'formatId',
+    returnType: 'string',
+    schema: formatIdSchema as unknown as FunctionImplementation['schema'],
+  },
+  ({ value }) => {
     const normalizedValue = Math.max(0, Math.trunc(value));
 
     return `P-${String(normalizedValue).padStart(4, '0')}`;
   },
-} as unknown as FunctionImplementation;
+);

projects/a2ui-demo/src/app/custom-catalog/format-id.ts

@@ -1,17 +1,20 @@
+import type { AngularComponentImplementation } from '@a2ui/angular/v0_9';
 import { DecimalPipe } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
   computed,
   input,
 } from '@angular/core';
+import { z } from 'zod/v3';
 
 import {
   calcNextThreshold,
   calcProgressPercent,
   calcRemainingMiles,
 } from './miles-calc';
 import { initialContext, MilesProgressContext } from './miles-progress-context';
+import { binding } from './utils';
 
 @Component({
   selector: 'app-miles-progress',
@@ -49,3 +52,23 @@ export class MilesProgress {
     calcProgressPercent(this.nextThreshold(), this.passenger().bonusMiles),
   );
 }
+
+const passengerSchema = z.object({
+  id: z.number(),
+  firstName: z.string(),
+  lastName: z.string(),
+  bonusMiles: z.number(),
+});
+
+const milesProgressSchema = z
+  .object({
+    passenger: binding(passengerSchema).optional(),
+    weight: z.number().optional(),
+  })
+  .strict();
+
+export const milesProgressEntry = {
+  name: 'MilesProgress',
+  component: MilesProgress,
+  schema: milesProgressSchema as unknown,
+} as AngularComponentImplementation;