@datalayer/agent-runtimes 1.0.1 → 1.0.3

package/lib/examples/A2UiRestaurantExample.js

@@ -7,22 +7,29 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * A2UiRestaurantExample
  *
  * Demonstrates A2UI (Agent-to-UI) protocol integration with a pydantic-ai
- * restaurant finder agent. The agent generates A2UI JSON messages that are
- * rendered into React components.
+ * restaurant finder agent using the official @a2ui/react renderer.
+ *
+ * The agent generates A2UI JSON messages that are rendered into
+ * interactive React components via A2UIProvider + A2UIRenderer.
  *
  * Features:
- * - A2UI protocol message processing
+ * - A2UI protocol message processing via @a2ui/react
  * - Dynamic UI generation from agent responses
  * - Restaurant search and booking interface
+ * - Action handling for interactive components (buttons, forms)
  * - Dark/light theme support
  *
  * Backend: /api/v1/a2ui/restaurant/
  */
 import { useState, useCallback, useEffect, useRef } from 'react';
-import { Box } from '@datalayer/primer-addons';
-import { ThemedProvider } from './stores/themedProvider';
+import { Box, getCardGradient } from '@datalayer/primer-addons';
+import { ThemedProvider } from './utils/themedProvider';
+import { useExampleThemeStore } from './utils/themeStore';
 import { Text, Spinner, TextInput, Button } from '@primer/react';
-import { A2UIProvider, A2UIRenderer, useA2UI } from '../renderers/a2ui';
+import { A2UIProvider, A2UIRenderer, useA2UIActions, initializeDefaultCatalog, } from '@a2ui/react';
+// Initialize the A2UI default component catalog (buttons, cards, text, etc.)
+// This must be called once before any A2UI rendering occurs.
+initializeDefaultCatalog();
 // A2UI endpoint for pydantic-ai restaurant agent
 const A2UI_RESTAURANT_ENDPOINT = 'http://localhost:8765/api/v1/a2ui/restaurant/';
 const LOADING_TEXT_LINES = [
@@ -31,26 +38,37 @@ const LOADING_TEXT_LINES = [
     'Looking for open tables...',
     'Almost there...',
 ];
+/**
+ * Extract ServerToClientMessage[] from A2A server payload,
+ * handling both Python SDK (root wrapper) and JS SDK (direct) formats.
+ */
+function extractMessages(data) {
+    const messages = [];
+    for (const item of data) {
+        const part = item.root || item;
+        if (part.kind === 'text')
+            continue;
+        if (part.data) {
+            messages.push(part.data);
+        }
+    }
+    return messages;
+}
 /**
  * Custom hook for A2UI restaurant client communication.
+ * Uses useA2UIActions() from @a2ui/react for message processing.
  */
 function useA2UIRestaurantClient() {
-    const { surfaces, processMessages, clearSurfaces, sendAction } = useA2UI();
+    const { processMessages, clearSurfaces, getSurfaces } = useA2UIActions();
     const [isLoading, setIsLoading] = useState(false);
     const [error, setError] = useState(null);
-    /**
-     * Send a message to the A2UI backend and process the response.
-     */
     const makeRequest = useCallback(async (message) => {
-        let messages;
         try {
             setIsLoading(true);
             setError(null);
             const response = await fetch(A2UI_RESTAURANT_ENDPOINT, {
                 method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
+                headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify({ query: message }),
             });
             if (!response.ok) {
@@ -58,19 +76,9 @@ function useA2UIRestaurantClient() {
                 throw new Error(errorData.error || 'Request failed');
             }
             const data = (await response.json());
-            if ('error' in data) {
+            if ('error' in data)
                 throw new Error(data.error);
-            }
-            messages = [];
-            for (const item of data) {
-                // Handle both Python SDK (with root wrapper) and JS SDK (direct) formats
-                const part = item.root || item;
-                if (part.kind === 'text')
-                    continue;
-                if (part.data) {
-                    messages.push(part.data);
-                }
-            }
+            const messages = extractMessages(data);
             clearSurfaces();
             processMessages(messages);
             return messages;
@@ -85,59 +93,11 @@ function useA2UIRestaurantClient() {
             setIsLoading(false);
         }
     }, [processMessages, clearSurfaces]);
-    /**
-     * Handle A2UI actions (button clicks, form submissions, etc.)
-     */
-    const handleAction = useCallback(async (action) => {
-        try {
-            setIsLoading(true);
-            setError(null);
-            const response = await fetch(A2UI_RESTAURANT_ENDPOINT, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify({
-                    action: action.actionId,
-                    context: action.context,
-                }),
-            });
-            if (!response.ok) {
-                const errorData = await response.json();
-                throw new Error(errorData.error || 'Action failed');
-            }
-            const data = (await response.json());
-            if ('error' in data) {
-                throw new Error(data.error);
-            }
-            const messages = [];
-            for (const item of data) {
-                const part = item.root || item;
-                if (part.kind === 'text')
-                    continue;
-                if (part.data) {
-                    messages.push(part.data);
-                }
-            }
-            clearSurfaces();
-            processMessages(messages);
-        }
-        catch (err) {
-            const errorMessage = err instanceof Error ? err.message : 'Unknown error';
-            setError(errorMessage);
-            console.error('A2UI action error:', err);
-        }
-        finally {
-            setIsLoading(false);
-        }
-    }, [processMessages, clearSurfaces]);
     return {
-        surfaces,
+        getSurfaces,
         isLoading,
         error,
         makeRequest,
-        handleAction,
-        sendAction,
     };
 }
 /**
@@ -145,6 +105,8 @@ function useA2UIRestaurantClient() {
  */
 function RestaurantSearch({ onSearch, isLoading, defaultValue = 'Top 5 Chinese restaurants in New York', }) {
     const [inputValue, setInputValue] = useState(defaultValue);
+    const { theme, colorMode } = useExampleThemeStore();
+    const gradient = getCardGradient(theme, colorMode);
     const handleSubmit = useCallback((event) => {
         event.preventDefault();
         if (inputValue.trim() && !isLoading) {
@@ -163,23 +125,17 @@ function RestaurantSearch({ onSearch, isLoading, defaultValue = 'Top 5 Chinese r
                     width: '100%',
                     height: '200px',
                     borderRadius: '12px',
-                    background: 'linear-gradient(135deg, #117A65 0%, #1ABC9C 100%)',
+                    background: `linear-gradient(135deg, ${gradient.from} 0%, ${gradient.to} 100%)`,
                     display: 'flex',
                     alignItems: 'center',
                     justifyContent: 'center',
                     marginBottom: 2,
-                }, children: _jsx(Text, { sx: {
-                        fontSize: '4rem',
-                    }, children: "\uD83C\uDF7D\uFE0F" }) }), _jsx(Text, { as: "h1", sx: {
+                }, children: _jsx(Text, { sx: { fontSize: '4rem' }, children: "\uD83C\uDF7D\uFE0F" }) }), _jsx(Text, { as: "h1", sx: {
                     fontSize: '2rem',
                     fontWeight: 'bold',
                     textAlign: 'center',
                     marginBottom: 2,
-                }, children: "Restaurant Finder" }), _jsx(Text, { sx: {
-                    color: 'fg.muted',
-                    textAlign: 'center',
-                    marginBottom: 3,
-                }, children: "Powered by A2UI protocol and pydantic-ai" }), _jsx("form", { onSubmit: handleSubmit, style: { width: '100%' }, children: _jsxs(Box, { sx: { display: 'flex', gap: 2 }, children: [_jsx(TextInput, { value: inputValue, onChange: e => setInputValue(e.target.value), placeholder: "Search for restaurants...", disabled: isLoading, sx: { flex: 1 }, block: true }), _jsx(Button, { type: "submit", disabled: isLoading || !inputValue.trim(), children: isLoading ? _jsx(Spinner, { size: "small" }) : 'Search' })] }) })] }));
+                }, children: "Restaurant Finder" }), _jsx(Text, { sx: { color: 'fg.muted', textAlign: 'center', marginBottom: 3 }, children: "Powered by A2UI protocol and pydantic-ai" }), _jsx("form", { onSubmit: handleSubmit, style: { width: '100%' }, children: _jsxs(Box, { sx: { display: 'flex', gap: 2 }, children: [_jsx(TextInput, { value: inputValue, onChange: e => setInputValue(e.target.value), placeholder: "Search for restaurants...", disabled: isLoading, sx: { flex: 1 }, block: true }), _jsx(Button, { type: "submit", disabled: isLoading || !inputValue.trim(), children: isLoading ? _jsx(Spinner, { size: "small" }) : 'Search' })] }) })] }));
 }
 /**
  * Loading state component with animated text
@@ -209,8 +165,8 @@ function LoadingState() {
 /**
  * Results display component with A2UI renderer
  */
-function ResultsDisplay({ surfaces, onBack, }) {
-    return (_jsxs(Box, { sx: { padding: 3 }, children: [_jsx(Box, { sx: { display: 'flex', justifyContent: 'flex-start', marginBottom: 3 }, children: _jsx(Button, { variant: "invisible", onClick: onBack, children: "\u2190 New Search" }) }), _jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 3 }, children: Array.from(surfaces.entries()).map(([surfaceId]) => (_jsx(A2UIRenderer, { surfaceId: surfaceId, className: "a2ui-surface" }, surfaceId))) })] }));
+function ResultsDisplay({ surfaceEntries, onBack, }) {
+    return (_jsxs(Box, { sx: { padding: 3 }, children: [_jsx(Box, { sx: { display: 'flex', justifyContent: 'flex-start', marginBottom: 3 }, children: _jsx(Button, { variant: "invisible", onClick: onBack, children: "\u2190 New Search" }) }), _jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 3 }, children: surfaceEntries.map(([surfaceId]) => (_jsx(A2UIRenderer, { surfaceId: surfaceId }, surfaceId))) })] }));
 }
 /**
  * Error display component
@@ -226,11 +182,11 @@ function ErrorDisplay({ error, onRetry, }) {
         }, children: [_jsxs(Text, { sx: { color: 'danger.fg', fontSize: '1.2rem' }, children: ["\u26A0\uFE0F ", error] }), _jsx(Button, { onClick: onRetry, children: "Try Again" })] }));
 }
 /**
- * Main A2UI Restaurant content component
- * (needs to be inside A2UIProvider to use hooks)
+ * Main A2UI Restaurant content component.
+ * Must be rendered inside A2UIProvider to access hooks.
  */
 function A2UIRestaurantContent() {
-    const { surfaces, isLoading, error, makeRequest } = useA2UIRestaurantClient();
+    const { getSurfaces, isLoading, error, makeRequest } = useA2UIRestaurantClient();
     const [hasData, setHasData] = useState(false);
     const [lastQuery, setLastQuery] = useState('');
     const handleSearch = useCallback(async (query) => {
@@ -251,19 +207,18 @@ function A2UIRestaurantContent() {
             handleSearch(lastQuery);
         }
     }, [lastQuery, handleSearch]);
-    // Show error state
     if (error && !isLoading) {
         return _jsx(ErrorDisplay, { error: error, onRetry: handleRetry });
     }
-    // Show loading state
     if (isLoading) {
         return _jsx(LoadingState, {});
     }
-    // Show search or results
     if (!hasData) {
         return _jsx(RestaurantSearch, { onSearch: handleSearch, isLoading: isLoading });
     }
-    return _jsx(ResultsDisplay, { surfaces: surfaces, onBack: handleBack });
+    const surfaces = getSurfaces();
+    const surfaceEntries = Array.from(surfaces.entries());
+    return _jsx(ResultsDisplay, { surfaceEntries: surfaceEntries, onBack: handleBack });
 }
 /**
  * A2UiRestaurantExample - Main example component
@@ -271,12 +226,22 @@ function A2UIRestaurantContent() {
  * Demonstrates A2UI protocol integration with pydantic-ai.
  * The agent generates A2UI JSON messages for restaurant search,
  * display, and booking functionality.
+ *
+ * Uses @a2ui/react's two-context architecture:
+ * - A2UIProvider wraps the app, receives an onAction callback
+ * - useA2UIActions() provides processMessages/clearSurfaces/getSurfaces
+ * - A2UIRenderer renders surfaces by ID
  */
 const A2UiRestaurantExample = () => {
-    // Handle A2UI actions globally
-    const handleAction = useCallback((action) => {
-        console.log('A2UI Action:', action);
-        // Actions are handled in the content component
+    // Handle A2UI actions (button clicks, form submissions, etc.)
+    const handleAction = useCallback((actionMessage) => {
+        console.log('A2UI Action:', actionMessage);
+        // Send action back to the agent for processing
+        fetch(A2UI_RESTAURANT_ENDPOINT, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(actionMessage),
+        }).catch(err => console.error('Action send error:', err));
     }, []);
     return (_jsx(ThemedProvider, { children: _jsx(A2UIProvider, { onAction: handleAction, children: _jsxs(Box, { sx: {
                     display: 'flex',
@@ -294,7 +259,7 @@ const A2UiRestaurantExample = () => {
                                     display: 'flex',
                                     alignItems: 'center',
                                     gap: 2,
-                                }, children: "\uD83E\uDD16 A2UI Restaurant Example" }), _jsx(Text, { sx: { fontSize: '0.875rem', color: 'fg.muted' }, children: "pydantic-ai agent with A2UI protocol rendering" })] }), _jsx(Box, { sx: { flex: 1, padding: 3 }, children: _jsx(A2UIRestaurantContent, {}) }), _jsx(Box, { sx: {
+                                }, children: "\uD83E\uDD16 A2UI Restaurant Example" }), _jsx(Text, { sx: { fontSize: '0.875rem', color: 'fg.muted' }, children: "pydantic-ai agent with A2UI protocol rendering (@a2ui/react)" })] }), _jsx(Box, { sx: { flex: 1, padding: 3 }, children: _jsx(A2UIRestaurantContent, {}) }), _jsx(Box, { sx: {
                             padding: 2,
                             borderTop: '1px solid',
                             borderColor: 'border.default',

package/lib/examples/A2UiViewerExample.d.ts

@@ -0,0 +1,21 @@
+/**
+ * A2UiViewerExample
+ *
+ * Demonstrates the standalone A2UIViewer component from @a2ui/react.
+ * Unlike A2UIProvider + A2UIRenderer (which require context), A2UIViewer
+ * is a self-contained component that takes component definitions directly.
+ *
+ * Features:
+ * - Standalone rendering — no A2UIProvider needed
+ * - Multiple pre-built A2UI scenes (recipe card, booking form, dashboard)
+ * - Shows how to use A2UIViewer for embedding A2UI in any React context
+ *
+ * No backend required — uses static ComponentInstance[] arrays.
+ */
+import React from 'react';
+/**
+ * A2UiViewerExample — Standalone A2UIViewer with multiple scenes.
+ * Demonstrates embedding A2UI components without a Provider context.
+ */
+declare const A2UiViewerExample: React.FC;
+export default A2UiViewerExample;