@datalayer/agent-runtimes 1.0.10 → 1.0.18

package/lib/examples/A2UiContactCardExample.js

@@ -6,7 +6,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { Box } from '@datalayer/primer-addons';
 import { Button, Text } from '@primer/react';
-import { A2uiSurface } from '@a2ui/react/v0_9';
+import { A2UI_RENDER_SCOPE_SX, A2uiSurfaceComposed } from '../components/a2ui';
 import { ThemedProvider } from './utils/themedProvider';
 import { A2uiMarkdownProvider } from './utils/a2uiMarkdownProvider';
 import { createSceneMessages, useA2uiProcessor } from './utils/a2ui';
@@ -121,7 +121,7 @@ const CONTACT_CARD_MESSAGES = createSceneMessages({
     },
 });
 function ContactCardContent({ onAction, }) {
-    const { surfaces, processMessages, resetSurfaces } = useA2uiProcessor(onAction);
+    const { surfaces, processMessages, resetSurfaces, themeStyle } = useA2uiProcessor(onAction);
     const loadCard = useCallback(() => {
         resetSurfaces();
         processMessages(CONTACT_CARD_MESSAGES);
@@ -129,18 +129,22 @@ function ContactCardContent({ onAction, }) {
     useEffect(() => {
         loadCard();
     }, [loadCard]);
-    return (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 3, px: 3, pb: 3 }, children: [_jsxs(Box, { sx: { display: 'flex', gap: 2 }, children: [_jsx(Button, { size: "small", variant: "primary", onClick: loadCard, children: "Reload Card" }), _jsx(Button, { size: "small", variant: "invisible", onClick: resetSurfaces, children: "Clear" })] }), _jsx(Box, { sx: { display: 'grid', gap: 3 }, children: surfaces.map(surface => (_jsx(Box, { sx: {
+    return (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 3, px: 3, pb: 3 }, children: [_jsxs(Box, { sx: { display: 'flex', gap: 2 }, children: [_jsx(Button, { size: "small", variant: "primary", onClick: loadCard, children: "Reload Card" }), _jsx(Button, { size: "small", variant: "invisible", onClick: resetSurfaces, children: "Clear" })] }), _jsx(Box, { style: themeStyle, sx: {
+                    ...A2UI_RENDER_SCOPE_SX,
+                    display: 'grid',
+                    gap: 3,
+                }, children: surfaces.map(surface => (_jsx(Box, { sx: {
                         border: '1px solid',
                         borderColor: 'border.default',
                         borderRadius: 2,
                         p: 3,
                         backgroundColor: 'canvas.subtle',
-                    }, children: _jsx(A2uiSurface, { surface: surface }) }, surface.id))) })] }));
+                    }, children: _jsx(A2uiSurfaceComposed, { surface: surface }) }, surface.id))) })] }));
 }
 const A2UiContactCardExample = () => {
     const [lastAction, setLastAction] = useState(null);
     const handleAction = useCallback((action) => {
-        console.log('A2UI Contact Card Action:', action);
+        console.warn('A2UI Contact Card Action:', action);
         setLastAction(action);
     }, []);
     const actionPreview = useMemo(() => {

package/lib/examples/A2UiRestaurantExample.js

@@ -6,12 +6,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { Box, getCardGradient } from '@datalayer/primer-addons';
 import { Text, Spinner, TextInput, Button } from '@primer/react';
-import { A2uiSurface } from '@a2ui/react/v0_9';
+import { A2UI_RENDER_SCOPE_SX, A2uiSurfaceComposed } from '../components/a2ui';
+import { basicCatalog } from '@a2ui/react/v0_9';
 import { ThemedProvider } from './utils/themedProvider';
 import { A2uiMarkdownProvider } from './utils/a2uiMarkdownProvider';
 import { useExampleThemeStore } from './utils/themeStore';
 import { useA2uiProcessor } from './utils/a2ui';
-const A2UI_RESTAURANT_ENDPOINT = 'http://localhost:8765/api/v1/a2ui/restaurant/';
+import { useExampleAgentRuntimesUrl } from './utils/useExampleAgentRuntimesUrl';
 const LOADING_TEXT_LINES = [
     'Finding the best spots for you...',
     'Checking reviews...',
@@ -27,6 +28,13 @@ const extractV09Messages = (data) => {
         }
         const message = part.data;
         if (message.version === 'v0.9') {
+            // Normalize the catalog id so surfaces render regardless of which
+            // catalog URL variant the backend/LLM emits (the frontend only has the
+            // registered basicCatalog).
+            const createSurface = message.createSurface;
+            if (createSurface && createSurface.catalogId !== basicCatalog.id) {
+                createSurface.catalogId = basicCatalog.id;
+            }
             messages.push(message);
         }
     });
@@ -62,6 +70,8 @@ function RestaurantSearch({ onSearch, isLoading, }) {
                 }, children: _jsx(Text, { sx: { fontSize: '4rem' }, children: "\uD83C\uDF7D\uFE0F" }) }), _jsx(Text, { as: "h1", sx: { fontSize: '2rem', fontWeight: 'bold', textAlign: 'center' }, children: "Restaurant Finder" }), _jsx(Text, { sx: { color: 'fg.muted', textAlign: 'center' }, children: "A2UI renderer connected to a live agent backend." }), _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' })] }) })] }));
 }
 const A2UiRestaurantExample = () => {
+    const baseUrl = useExampleAgentRuntimesUrl();
+    const a2uiRestaurantEndpoint = `${baseUrl}/api/v1/a2ui/restaurant/`;
     const [isLoading, setIsLoading] = useState(false);
     const [error, setError] = useState(null);
     const [hasData, setHasData] = useState(false);
@@ -77,7 +87,7 @@ const A2UiRestaurantExample = () => {
             context: action.context,
         });
     }, []);
-    const { surfaces, processMessages, resetSurfaces } = useA2uiProcessor(handleAction);
+    const { surfaces, processMessages, resetSurfaces, themeStyle } = useA2uiProcessor(handleAction);
     useEffect(() => {
         if (!isLoading) {
             return;
@@ -94,7 +104,7 @@ const A2UiRestaurantExample = () => {
             setIsLoading(true);
             setError(null);
             setLoadingTextIndex(0);
-            const response = await fetch(A2UI_RESTAURANT_ENDPOINT, {
+            const response = await fetch(a2uiRestaurantEndpoint, {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify(payload),
@@ -124,7 +134,7 @@ const A2UiRestaurantExample = () => {
         finally {
             setIsLoading(false);
         }
-    }, [processMessages, resetSurfaces]);
+    }, [processMessages, resetSurfaces, a2uiRestaurantEndpoint]);
     useEffect(() => {
         sendPayloadRef.current = sendPayload;
     }, [sendPayload]);
@@ -156,17 +166,22 @@ const A2UiRestaurantExample = () => {
                                     alignItems: 'center',
                                     gap: 3,
                                     p: 4,
-                                }, children: [_jsxs(Text, { sx: { color: 'danger.fg' }, children: ["\u26A0\uFE0F ", error] }), _jsx(Button, { onClick: handleRetry, disabled: !lastQuery, children: "Retry" })] })), !isLoading && hasData && !error && (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 3 }, children: [_jsx(Button, { variant: "invisible", sx: { alignSelf: 'flex-start' }, onClick: () => setHasData(false), children: "\u2190 New Search" }), surfaces.map(surface => (_jsx(Box, { sx: {
+                                }, children: [_jsxs(Text, { sx: { color: 'danger.fg' }, children: ["\u26A0\uFE0F ", error] }), _jsx(Button, { onClick: handleRetry, disabled: !lastQuery, children: "Retry" })] })), !isLoading && hasData && !error && (_jsxs(Box, { style: themeStyle, sx: {
+                                    ...A2UI_RENDER_SCOPE_SX,
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    gap: 3,
+                                }, children: [_jsx(Button, { variant: "invisible", sx: { alignSelf: 'flex-start' }, onClick: () => setHasData(false), children: "\u2190 New Search" }), surfaces.map(surface => (_jsx(Box, { sx: {
                                             border: '1px solid',
                                             borderColor: 'border.default',
                                             borderRadius: 1,
                                             p: 3,
-                                        }, children: _jsx(A2uiSurface, { surface: surface }) }, surface.id)))] }))] }), _jsx(Box, { sx: {
+                                        }, children: _jsx(A2uiSurfaceComposed, { surface: surface }) }, surface.id)))] }))] }), _jsx(Box, { sx: {
                             p: 2,
                             borderTop: '1px solid',
                             borderColor: 'border.default',
                             backgroundColor: 'canvas.subtle',
                             textAlign: 'center',
-                        }, children: _jsxs(Text, { sx: { fontSize: '0.75rem', color: 'fg.muted' }, children: ["Backend: ", A2UI_RESTAURANT_ENDPOINT] }) })] }) }) }));
+                        }, children: _jsxs(Text, { sx: { fontSize: '0.75rem', color: 'fg.muted' }, children: ["Backend: ", a2uiRestaurantEndpoint] }) })] }) }) }));
 };
 export default A2UiRestaurantExample;

package/lib/examples/A2UiViewerExample.js

@@ -6,7 +6,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { Box } from '@datalayer/primer-addons';
 import { SegmentedControl, Text } from '@primer/react';
-import { A2uiSurface } from '@a2ui/react/v0_9';
+import { A2UI_RENDER_SCOPE_SX, A2uiSurfaceComposed } from '../components/a2ui';
 import { ThemedProvider } from './utils/themedProvider';
 import { A2uiMarkdownProvider } from './utils/a2uiMarkdownProvider';
 import { createSceneMessages, useA2uiProcessor } from './utils/a2ui';
@@ -264,9 +264,75 @@ const SCENES = [
             ],
         }),
     },
+    {
+        id: 'shipping',
+        label: 'Shipping Status',
+        emoji: '📦',
+        description: 'Order fulfillment timeline with current package state.',
+        messages: createSceneMessages({
+            surfaceId: 'viewer-shipping',
+            components: [
+                { id: 'root', component: 'Card', child: 'main' },
+                {
+                    id: 'main',
+                    component: 'Column',
+                    children: [
+                        'title-row',
+                        'tracking',
+                        'divider',
+                        'status-1',
+                        'status-2',
+                        'status-3',
+                        'eta',
+                    ],
+                },
+                {
+                    id: 'title-row',
+                    component: 'Row',
+                    align: 'center',
+                    children: ['title-icon', 'title'],
+                },
+                { id: 'title-icon', component: 'Icon', name: 'inventory' },
+                {
+                    id: 'title',
+                    component: 'Text',
+                    variant: 'h2',
+                    text: 'Package Status',
+                },
+                {
+                    id: 'tracking',
+                    component: 'Text',
+                    variant: 'caption',
+                    text: { path: '/tracking' },
+                },
+                { id: 'divider', component: 'Divider' },
+                { id: 'status-1', component: 'Text', text: { path: '/statusPlaced' } },
+                { id: 'status-2', component: 'Text', text: { path: '/statusShipped' } },
+                {
+                    id: 'status-3',
+                    component: 'Text',
+                    variant: 'h3',
+                    text: { path: '/statusDelivery' },
+                },
+                {
+                    id: 'eta',
+                    component: 'Text',
+                    variant: 'caption',
+                    text: { path: '/eta' },
+                },
+            ],
+            value: {
+                tracking: 'Tracking: 17999AA10123456784',
+                statusPlaced: '✓ Order Placed',
+                statusShipped: '✓ Shipped',
+                statusDelivery: '🚚 Out for Delivery',
+                eta: 'Estimated delivery: Today by 8 PM',
+            },
+        }),
+    },
 ];
 function ViewerContent({ onAction, }) {
-    const { surfaces, processMessages, resetSurfaces } = useA2uiProcessor(onAction);
+    const { surfaces, processMessages, resetSurfaces, themeStyle } = useA2uiProcessor(onAction);
     const [selectedSceneId, setSelectedSceneId] = useState(SCENES[0].id);
     const selectedScene = useMemo(() => SCENES.find(scene => scene.id === selectedSceneId) ?? SCENES[0], [selectedSceneId]);
     useEffect(() => {
@@ -283,7 +349,13 @@ function ViewerContent({ onAction, }) {
                     display: 'flex',
                     flexDirection: 'column',
                     gap: 3,
-                }, children: [_jsx(Text, { sx: { fontSize: 2, fontWeight: 'bold' }, children: "Select Scene" }), _jsx(SegmentedControl, { "aria-label": "A2UI viewer scene picker", fullWidth: true, children: SCENES.map(scene => (_jsx(SegmentedControl.Button, { selected: scene.id === selectedSceneId, onClick: () => setSelectedSceneId(scene.id), children: `${scene.emoji} ${scene.label}` }, scene.id))) }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: selectedScene.description })] }), _jsx(Box, { sx: { width: '100%', display: 'flex', flexDirection: 'column', gap: 3 }, children: surfaces.map(surface => (_jsx(Box, { sx: { width: '100%' }, children: _jsx(A2uiSurface, { surface: surface }) }, surface.id))) })] }));
+                }, children: [_jsx(Text, { sx: { fontSize: 2, fontWeight: 'bold' }, children: "Select Scene" }), _jsx(SegmentedControl, { "aria-label": "A2UI viewer scene picker", fullWidth: true, children: SCENES.map(scene => (_jsx(SegmentedControl.Button, { selected: scene.id === selectedSceneId, onClick: () => setSelectedSceneId(scene.id), children: `${scene.emoji} ${scene.label}` }, scene.id))) }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: selectedScene.description })] }), _jsx(Box, { style: themeStyle, sx: {
+                    ...A2UI_RENDER_SCOPE_SX,
+                    width: '100%',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: 3,
+                }, children: surfaces.map(surface => (_jsx(Box, { sx: { width: '100%' }, children: _jsx(A2uiSurfaceComposed, { surface: surface }) }, surface.id))) })] }));
 }
 const A2UiViewerExample = () => {
     const [lastAction, setLastAction] = useState(null);

package/lib/examples/AgUiAgenticExample.d.ts

@@ -7,19 +7,8 @@
  *
  * This is the simplest AG-UI example showing basic chat with tool use.
  *
- * Backend: /api/v1/examples/agentic_chat/
+ * Backend: managed AG-UI agent runtime (agentspec: example-agentic-chat)
  */
 import React from 'react';
-/**
- * AgUiAgenticExample Component
- *
- * Shows a floating chat button that opens a chat popup connected to
- * the Agentic Chat AG-UI example.
- *
- * Features demonstrated:
- * - Basic AG-UI SSE streaming
- * - Tool calling (current_time tool)
- * - Floating popup interface
- */
 declare const AgUiAgenticExample: React.FC;
 export default AgUiAgenticExample;

package/lib/examples/AgUiAgenticExample.js

@@ -1,10 +1,27 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Text } from '@primer/react';
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * AgUiAgenticExample
+ *
+ * Demonstrates a floating chat popup that connects to the AG-UI
+ * Agentic Chat example backend. The agent has access to tools like
+ * getting the current time.
+ *
+ * This is the simplest AG-UI example showing basic chat with tool use.
+ *
+ * Backend: managed AG-UI agent runtime (agentspec: example-agentic-chat)
+ */
+import { useMemo } from 'react';
+import { Spinner, Text } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
 import { ThemedProvider } from './utils/themedProvider';
 import { ChatFloating } from '../chat';
-// AG-UI endpoint for agentic chat example
-const AGENTIC_CHAT_ENDPOINT = 'http://localhost:8765/api/v1/examples/agentic_chat/';
+import { useExampleAgentRuntimesUrl } from './utils/useExampleAgentRuntimesUrl';
+import { uniqueAgentId } from './utils/agentId';
+import { useExampleAgentRuntime } from './hooks/useExampleAgentRuntime';
 /**
  * AgUiAgenticExample Component
  *
@@ -16,7 +33,22 @@ const AGENTIC_CHAT_ENDPOINT = 'http://localhost:8765/api/v1/examples/agentic_cha
  * - Tool calling (current_time tool)
  * - Floating popup interface
  */
+const AGENT_NAME = 'ag-ui-agentic';
+const AGENTSPEC_ID = 'example-agentic-chat';
 const AgUiAgenticExample = () => {
+    const baseUrl = useExampleAgentRuntimesUrl();
+    const agentName = useMemo(() => uniqueAgentId(AGENT_NAME), []);
+    const { agentId, status, error, isReady } = useExampleAgentRuntime({
+        exampleId: 'AgUiAgenticExample',
+        agentName,
+        specId: AGENTSPEC_ID,
+        agentConfig: {
+            protocol: 'ag-ui',
+            agentSpecId: AGENTSPEC_ID,
+        },
+    });
+    const agenticChatEndpoint = agentId != null ? `${baseUrl}/api/v1/ag-ui/${agentId}/` : undefined;
+    const isLoading = !isReady && status !== 'error';
     return (_jsx(ThemedProvider, { children: _jsxs(Box, { sx: {
                 minHeight: '100vh',
                 backgroundColor: 'canvas.default',
@@ -32,24 +64,36 @@ const AgUiAgenticExample = () => {
                                 fontSize: 2,
                                 color: 'fg.muted',
                                 marginBottom: 4,
-                            }, children: "Click the chat button in the bottom-right corner to start a conversation with an AI agent that can use tools." }), _jsxs(Box, { sx: {
+                            }, children: "Click the chat button in the bottom-right corner to start a conversation with an AI agent. The runtime target (local or cloud) follows your selection in the examples header." }), isLoading && (_jsxs(Box, { sx: {
+                                display: 'flex',
+                                alignItems: 'center',
+                                gap: 2,
+                                marginBottom: 3,
+                            }, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: "Starting managed agent runtime..." })] })), error && (_jsx(Box, { sx: {
+                                padding: 3,
+                                marginBottom: 3,
+                                backgroundColor: 'danger.subtle',
+                                borderRadius: 2,
+                                border: '1px solid',
+                                borderColor: 'danger.muted',
+                            }, children: _jsxs(Text, { sx: { color: 'danger.fg', fontSize: 1 }, children: ["Failed to initialize managed agent runtime: ", error] }) })), _jsxs(Box, { sx: {
                                 padding: 4,
                                 backgroundColor: 'canvas.subtle',
                                 borderRadius: 2,
                                 border: '1px solid',
                                 borderColor: 'border.default',
-                            }, children: [_jsx(Text, { as: "h2", sx: { fontSize: 2, fontWeight: 'semibold', marginBottom: 2 }, children: "Available Tools" }), _jsx(Box, { as: "ul", sx: { paddingLeft: 3 }, children: _jsxs(Box, { as: "li", sx: { marginBottom: 1 }, children: [_jsx(Text, { sx: { fontFamily: 'mono', fontSize: 1 }, children: "current_time()" }), _jsxs(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: [' ', "- Returns the current date and time"] })] }) }), _jsx(Text, { as: "p", sx: {
+                            }, children: [_jsx(Text, { as: "h2", sx: { fontSize: 2, fontWeight: 'semibold', marginBottom: 2 }, children: "Runtime Mode" }), _jsx(Box, { as: "ul", sx: { paddingLeft: 3 }, children: _jsxs(Box, { as: "li", sx: { marginBottom: 1 }, children: [_jsx(Text, { sx: { fontFamily: 'mono', fontSize: 1 }, children: "managed runtime + managed agent" }), _jsxs(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: [' ', "- Launches on cloud when the header target is set to cloud"] })] }) }), _jsx(Text, { as: "p", sx: {
                                         fontSize: 1,
                                         color: 'fg.muted',
                                         marginTop: 3,
-                                    }, children: "Try asking: \"What time is it?\" or \"What's the current date?\"" })] }), _jsxs(Box, { sx: {
+                                    }, children: "Try asking: \"hi\" or \"what can you help with?\"" })] }), _jsxs(Box, { sx: {
                                 marginTop: 4,
                                 padding: 4,
                                 backgroundColor: 'canvas.subtle',
                                 borderRadius: 2,
                                 border: '1px solid',
                                 borderColor: 'border.default',
-                            }, children: [_jsx(Text, { as: "h2", sx: { fontSize: 2, fontWeight: 'semibold', marginBottom: 2 }, children: "About This Example" }), _jsx(Text, { as: "p", sx: { fontSize: 1, color: 'fg.muted' }, children: "This example demonstrates the AG-UI (Agent User Interface) protocol for streaming AI interactions. The agent uses SSE (Server-Sent Events) to stream responses and tool calls in real-time." }), _jsxs(Text, { as: "p", sx: { fontSize: 1, color: 'fg.muted', marginTop: 2 }, children: [_jsx("strong", { children: "Protocol Events:" }), " TEXT_MESSAGE_START, TEXT_MESSAGE_CONTENT, TEXT_MESSAGE_END, TOOL_CALL_START, TOOL_CALL_END"] })] })] }), _jsx(ChatFloating, { protocol: "ag-ui", endpoint: AGENTIC_CHAT_ENDPOINT, title: "Agentic Chat", description: "Chat with an AI agent that can use tools like getting the current time.", position: "bottom-right", defaultOpen: true, suggestions: [
+                            }, children: [_jsx(Text, { as: "h2", sx: { fontSize: 2, fontWeight: 'semibold', marginBottom: 2 }, children: "About This Example" }), _jsx(Text, { as: "p", sx: { fontSize: 1, color: 'fg.muted' }, children: "This example demonstrates the AG-UI (Agent User Interface) protocol for streaming AI interactions. The agent uses SSE (Server-Sent Events) to stream responses and tool calls in real-time." }), _jsxs(Text, { as: "p", sx: { fontSize: 1, color: 'fg.muted', marginTop: 2 }, children: [_jsx("strong", { children: "Protocol Events:" }), " TEXT_MESSAGE_START, TEXT_MESSAGE_CONTENT, TEXT_MESSAGE_END, TOOL_CALL_START, TOOL_CALL_END"] })] })] }), agenticChatEndpoint && (_jsx(ChatFloating, { protocol: "ag-ui", endpoint: agenticChatEndpoint, title: "Agentic Chat", description: "Chat with a managed AG-UI agent runtime.", position: "bottom-right", defaultOpen: true, suggestions: [
                         {
                             title: 'What time is it?',
                             message: 'What is the current time?',
@@ -58,6 +102,6 @@ const AgUiAgenticExample = () => {
                             title: "Today's date",
                             message: "What's the current date?",
                         },
-                    ] })] }) }));
+                    ] }))] }) }));
 };
 export default AgUiAgenticExample;

package/lib/examples/AgUiBackendToolRenderingExample.d.ts

@@ -8,23 +8,8 @@
  * and renders beautiful weather cards directly in the chat conversation,
  * similar to the AG-UI Dojo implementation.
  *
- * Backend: /api/v1/examples/backend_tool_rendering/
+ * Backend: managed AG-UI agent runtime (agentspec: example-backend-tool-rendering)
  */
 import React from 'react';
-/**
- * AgUiBackendToolRenderingExample Component
- *
- * Demonstrates backend tool rendering with AG-UI.
- * The agent has a `get_weather` tool that calls the Open-Meteo API
- * and returns weather data. This data is rendered INLINE in the chat
- * as a beautiful weather card with dynamic theming.
- *
- * Features demonstrated:
- * - Backend tool execution
- * - Real API integration (Open-Meteo)
- * - INLINE rendering of tool results in chat
- * - Dynamic theming based on weather conditions
- * - Loading states while fetching data
- */
 declare const AgUiBackendToolRenderingExample: React.FC;
 export default AgUiBackendToolRenderingExample;

package/lib/examples/AgUiBackendToolRenderingExample.js

@@ -13,29 +13,28 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * and renders beautiful weather cards directly in the chat conversation,
  * similar to the AG-UI Dojo implementation.
  *
- * Backend: /api/v1/examples/backend_tool_rendering/
+ * Backend: managed AG-UI agent runtime (agentspec: example-backend-tool-rendering)
  */
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 import { Text } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
 import { ThemedProvider, useThemeBrandColor } from './utils/themedProvider';
 import { ChatFloating } from '../chat';
 import { InlineWeatherCard } from './components/weather';
-// AG-UI endpoint for backend tool rendering example
-const BACKEND_TOOL_RENDERING_ENDPOINT = 'http://localhost:8765/api/v1/examples/backend_tool_rendering/';
+import { useExampleAgentRuntimesUrl } from './utils/useExampleAgentRuntimesUrl';
+import { uniqueAgentId } from './utils/agentId';
+import { useExampleAgentRuntime } from './hooks/useExampleAgentRuntime';
+import { useSpecRenderToolResult, specRendererClassName, } from './hooks/useSpecRenderToolResult';
 /**
- * Render function for tool results - renders weather cards inline in chat
+ * Renderers for this example, keyed by the spec's renderer id. The tool name to
+ * match and the CSS file to load come from the agent spec, not from this file.
  */
-const renderWeatherToolResult = (context) => {
-    // Only render for the get_weather tool
-    if (context.toolName !== 'get_weather') {
-        return null;
-    }
-    // Extract location from args
-    const location = context.args?.location;
-    // Cast result to WeatherResult if available
-    const weatherResult = context.result;
-    return (_jsx(InlineWeatherCard, { location: location, result: weatherResult, status: context.status, error: context.error }));
+const weatherRenderers = {
+    'weather-card': (context, binding) => {
+        const location = context.args?.location;
+        const weatherResult = context.result;
+        return (_jsx("div", { className: specRendererClassName(binding), children: _jsx(InlineWeatherCard, { location: location, result: weatherResult, status: context.status, error: context.error }) }));
+    },
 };
 /**
  * AgUiBackendToolRenderingExample Component
@@ -52,8 +51,24 @@ const renderWeatherToolResult = (context) => {
  * - Dynamic theming based on weather conditions
  * - Loading states while fetching data
  */
+const AGENT_NAME = 'ag-ui-backend-tools';
+const AGENTSPEC_ID = 'example-backend-tool-rendering';
 const AgUiBackendToolRenderingExample = () => {
     const brandColor = useThemeBrandColor();
+    const baseUrl = useExampleAgentRuntimesUrl();
+    const agentName = useMemo(() => uniqueAgentId(AGENT_NAME), []);
+    const { agentId } = useExampleAgentRuntime({
+        exampleId: 'AgUiBackendToolRenderingExample',
+        agentName,
+        specId: AGENTSPEC_ID,
+        agentConfig: {
+            protocol: 'ag-ui',
+            agentSpecId: AGENTSPEC_ID,
+        },
+    });
+    const backendToolRenderingEndpoint = agentId != null ? `${baseUrl}/api/v1/ag-ui/${agentId}/` : undefined;
+    // Tool name to match and CSS file to load are read from the agent spec.
+    const renderToolResult = useSpecRenderToolResult(AGENTSPEC_ID, weatherRenderers);
     // Optional: still track weather for sidebar display if needed
     const handleStateUpdate = useCallback((_state) => {
         // State updates are still available if needed for other purposes
@@ -90,7 +105,7 @@ const AgUiBackendToolRenderingExample = () => {
                                                 marginTop: 1,
                                                 fontSize: 1,
                                                 color: 'fg.muted',
-                                            }, children: [_jsx("li", { children: "\"What's the weather in New York?\"" }), _jsx("li", { children: "\"Weather in London and Paris\"" }), _jsx("li", { children: "\"Is it sunny in Sydney?\"" }), _jsx("li", { children: "\"How's the weather in Tokyo today?\"" })] })] })] })] }), _jsx(ChatFloating, { protocol: "ag-ui", endpoint: BACKEND_TOOL_RENDERING_ENDPOINT, title: "Weather Assistant", description: "Ask me about the weather anywhere in the world!", position: "bottom-right", brandColor: brandColor, onStateUpdate: handleStateUpdate, renderToolResult: renderWeatherToolResult, suggestions: [
+                                            }, children: [_jsx("li", { children: "\"What's the weather in New York?\"" }), _jsx("li", { children: "\"Weather in London and Paris\"" }), _jsx("li", { children: "\"Is it sunny in Sydney?\"" }), _jsx("li", { children: "\"How's the weather in Tokyo today?\"" })] })] })] })] }), backendToolRenderingEndpoint && (_jsx(ChatFloating, { protocol: "ag-ui", endpoint: backendToolRenderingEndpoint, title: "Weather Assistant", description: "Ask me about the weather anywhere in the world!", position: "bottom-right", brandColor: brandColor, onStateUpdate: handleStateUpdate, renderToolResult: renderToolResult, suggestions: [
                         {
                             title: 'Paris weather',
                             message: "What's the weather like in Paris?",
@@ -99,6 +114,6 @@ const AgUiBackendToolRenderingExample = () => {
                             title: 'Tokyo forecast',
                             message: 'Show me the weather forecast for Tokyo.',
                         },
-                    ] })] }) }));
+                    ] }))] }) }));
 };
 export default AgUiBackendToolRenderingExample;

package/lib/examples/AgUiHaikuGenUiExample.d.ts

@@ -9,7 +9,7 @@
  * This follows the AG-UI Dojo pattern where tool results are rendered
  * as UI components in both locations.
  *
- * Backend: /api/v1/examples/haiku_generative_ui/
+ * Backend: managed AG-UI agent runtime (agentspec: example-haiku-generative-ui)
  */
 import React from 'react';
 import { type HaikuResult } from './components/haiku';
@@ -24,21 +24,5 @@ export interface HaikuDisplayHandle {
     /** Clear all haikus */
     clearHaikus: () => void;
 }
-/**
- * AgUiHaikuGenUiExample Component
- *
- * Demonstrates tool-based generative UI with haiku generation.
- * The agent has a `generate_haiku` tool that returns structured
- * haiku data. This data is rendered:
- * - INLINE in the chat as a haiku card
- * - In the main view as part of a carousel
- *
- * Features demonstrated:
- * - Tool-based generative UI
- * - Ref-based state synchronization between chat and main view
- * - Carousel display for multiple haikus
- * - Dynamic gradient backgrounds
- * - Japanese/English text rendering
- */
 declare const AgUiHaikuGenUiExample: React.FC;
 export default AgUiHaikuGenUiExample;

package/lib/examples/AgUiHaikuGenUiExample.js

@@ -14,16 +14,18 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * This follows the AG-UI Dojo pattern where tool results are rendered
  * as UI components in both locations.
  *
- * Backend: /api/v1/examples/haiku_generative_ui/
+ * Backend: managed AG-UI agent runtime (agentspec: example-haiku-generative-ui)
  */
-import { useState, useCallback, useRef, useImperativeHandle, forwardRef, } from 'react';
+import { useState, useMemo, useRef, useImperativeHandle, forwardRef, } from 'react';
 import { Text } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
 import { ThemedProvider, useThemeBrandColor } from './utils/themedProvider';
 import { ChatFloating } from '../chat';
 import { InlineHaikuCard, HaikuDisplay, } from './components/haiku';
-// AG-UI endpoint for haiku generative UI example
-const HAIKU_ENDPOINT = 'http://localhost:8765/api/v1/examples/haiku_generative_ui/';
+import { useExampleAgentRuntimesUrl } from './utils/useExampleAgentRuntimesUrl';
+import { uniqueAgentId } from './utils/agentId';
+import { useExampleAgentRuntime } from './hooks/useExampleAgentRuntime';
+import { useSpecRenderToolResult, specRendererClassName, } from './hooks/useSpecRenderToolResult';
 /**
  * HaikuDisplayWithRef - A display component that exposes a ref for external control.
  *
@@ -59,43 +61,57 @@ HaikuDisplayWithRef.displayName = 'HaikuDisplayWithRef';
  * - Dynamic gradient backgrounds
  * - Japanese/English text rendering
  */
+const AGENT_NAME = 'ag-ui-haiku';
+const AGENTSPEC_ID = 'example-haiku-generative-ui';
 const AgUiHaikuGenUiExample = () => {
     const brandColor = useThemeBrandColor();
+    const baseUrl = useExampleAgentRuntimesUrl();
+    const agentName = useMemo(() => uniqueAgentId(AGENT_NAME), []);
+    const { agentId } = useExampleAgentRuntime({
+        exampleId: 'AgUiHaikuGenUiExample',
+        agentName,
+        specId: AGENTSPEC_ID,
+        agentConfig: {
+            protocol: 'ag-ui',
+            agentSpecId: AGENTSPEC_ID,
+        },
+    });
+    const haikuGenUiEndpoint = agentId != null ? `${baseUrl}/api/v1/ag-ui/${agentId}/` : undefined;
     // Ref to the main display for adding haikus
     const displayRef = useRef(null);
     // Track processed tool call IDs to avoid duplicates
     const processedToolCallIds = useRef(new Set());
     /**
-     * Render function for tool results - renders haiku cards inline in chat
-     * and also updates the main display
+     * Renderers keyed by the spec's renderer id. The tool name to match and the
+     * CSS file to load come from the agent spec, not from this file.
      */
-    const renderHaikuToolResult = useCallback((context) => {
-        // Only render for the generate_haiku tool
-        if (context.toolName !== 'generate_haiku') {
-            return null;
-        }
-        // Extract haiku data from args (the tool's parameters are what we render)
-        const args = context.args;
-        // Build haiku result from args
-        const haiku = args.japanese && args.english
-            ? {
-                japanese: args.japanese,
-                english: args.english,
-                gradient: args.gradient ||
-                    'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+    const haikuRenderers = useMemo(() => ({
+        'haiku-card': (context, binding) => {
+            // Extract haiku data from args (the tool parameters are what we render)
+            const args = context.args;
+            // Build haiku result from args
+            const haiku = args.japanese && args.english
+                ? {
+                    japanese: args.japanese,
+                    english: args.english,
+                    gradient: args.gradient ||
+                        'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+                }
+                : undefined;
+            // When tool completes successfully, add to main display (deduplicated)
+            if (context.status === 'complete' &&
+                haiku &&
+                displayRef.current &&
+                context.toolCallId &&
+                !processedToolCallIds.current.has(context.toolCallId)) {
+                processedToolCallIds.current.add(context.toolCallId);
+                displayRef.current.addHaiku(haiku);
             }
-            : undefined;
-        // When tool completes successfully, add to main display (deduplicated)
-        if (context.status === 'complete' &&
-            haiku &&
-            displayRef.current &&
-            context.toolCallId &&
-            !processedToolCallIds.current.has(context.toolCallId)) {
-            processedToolCallIds.current.add(context.toolCallId);
-            displayRef.current.addHaiku(haiku);
-        }
-        return (_jsx(InlineHaikuCard, { haiku: haiku, status: context.status, error: context.error }));
-    }, []);
+            return (_jsx("div", { className: specRendererClassName(binding), children: _jsx(InlineHaikuCard, { haiku: haiku, status: context.status, error: context.error }) }));
+        },
+    }), []);
+    // Tool name to match and CSS file to load are read from the agent spec.
+    const renderToolResult = useSpecRenderToolResult(AGENTSPEC_ID, haikuRenderers);
     return (_jsx(ThemedProvider, { children: _jsxs(Box, { sx: {
                 minHeight: '100vh',
                 backgroundColor: 'canvas.default',
@@ -134,7 +150,7 @@ const AgUiHaikuGenUiExample = () => {
                                                 marginTop: 1,
                                                 fontSize: 1,
                                                 color: 'fg.muted',
-                                            }, children: [_jsx("li", { children: "\"Write me a haiku about cherry blossoms\"" }), _jsx("li", { children: "\"Create a haiku about coding late at night\"" }), _jsx("li", { children: "\"Generate a haiku about the ocean\"" }), _jsx("li", { children: "\"Write a haiku about autumn leaves\"" })] })] })] })] }), _jsx(ChatFloating, { protocol: "ag-ui", endpoint: HAIKU_ENDPOINT, title: "Haiku Generator", description: "Ask me to write haiku poetry about any topic!", position: "bottom-right", brandColor: brandColor, defaultOpen: true, renderToolResult: renderHaikuToolResult, hideMessagesAfterToolUI: true, suggestions: [
+                                            }, children: [_jsx("li", { children: "\"Write me a haiku about cherry blossoms\"" }), _jsx("li", { children: "\"Create a haiku about coding late at night\"" }), _jsx("li", { children: "\"Generate a haiku about the ocean\"" }), _jsx("li", { children: "\"Write a haiku about autumn leaves\"" })] })] })] })] }), _jsx(ChatFloating, { protocol: "ag-ui", endpoint: haikuGenUiEndpoint, launching: !haikuGenUiEndpoint, launchingMessage: "Starting the haiku agent runtime\u2026", title: "Haiku Generator", description: "Ask me to write haiku poetry about any topic!", position: "bottom-right", brandColor: brandColor, defaultOpen: true, renderToolResult: renderToolResult, hideMessagesAfterToolUI: true, suggestions: [
                         {
                             title: 'Cherry blossoms',
                             message: 'Write me a haiku about cherry blossoms in spring.',